feat: peek overview for spreadsheet issues (#1979)

* feat: peak overview for issues

* fix: peek spelling

* chore: truncate issue property labels

* style: full screen view designed

* chore: add comment section

* chore: copy link and delete options added

* chore: update icons

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>

apps/app/components/core/views/issues-view.tsx

@@ -548,7 +548,7 @@ export const IssuesView: React.FC<Props> = ({
         }}
         handleOnDragEnd={handleOnDragEnd}
         handleIssueAction={handleIssueAction}
-        openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
+        openIssuesListModal={openIssuesListModal ?? null}
         removeIssue={cycleId ? removeIssueFromCycle : moduleId ? removeIssueFromModule : null}
         trashBox={trashBox}
         setTrashBox={setTrashBox}

apps/app/components/core/views/spreadsheet-view/single-issue.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
 // components
 import {
+  IssuePeekOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -75,6 +75,10 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+
+  // issue peek overview
+  const [issuePeekOverview, setIssuePeekOverview] = useState(false);
+
   const router = useRouter();
 
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -95,7 +99,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         ? VIEW_ISSUES(viewId.toString(), params)
         : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
 
-      if (issue.parent) {
+      if (issue.parent)
         mutate<ISubIssueResponse>(
           SUB_ISSUES(issue.parent.toString()),
           (prevData) => {
@@ -116,7 +120,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           },
           false
         );
-      } else {
+      else
         mutate<IIssue[]>(
           fetchKey,
           (prevData) =>
@@ -131,7 +135,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             }),
           false
         );
-      }
 
       issuesService
         .patchIssue(
@@ -179,190 +182,203 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <div
-      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-      style={{ gridTemplateColumns }}
-    >
-      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
-        <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
-            {properties.key && (
-              <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
-                {issue.project_detail?.identifier}-{issue.sequence_id}
-              </span>
-            )}
-            {!isNotAllowed && !disableUserActions && (
-              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                <Popover2
-                  isOpen={isOpen}
-                  canEscapeKeyClose
-                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                  content={
-                    <div
-                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
-                    >
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleEditIssue(issue);
-                          setIsOpen(false);
-                        }}
+    <>
+      <IssuePeekOverview
+        handleDeleteIssue={() => handleDeleteIssue(issue)}
+        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
+        issue={issue}
+        isOpen={issuePeekOverview}
+        onClose={() => setIssuePeekOverview(false)}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={isNotAllowed}
+      />
+      <div
+        className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+        style={{ gridTemplateColumns }}
+      >
+        <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
+          <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
+            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
+              {properties.key && (
+                <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              )}
+              {!isNotAllowed && !disableUserActions && (
+                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                  <Popover2
+                    isOpen={isOpen}
+                    canEscapeKeyClose
+                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                    content={
+                      <div
+                        className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
                       >
-                        <div className="flex items-center justify-start gap-2">
-                          <PencilIcon className="h-4 w-4" />
-                          <span>Edit issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleEditIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit issue</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleDeleteIssue(issue);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
-                          <span>Delete issue</span>
-                        </div>
-                      </button>
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleDeleteIssue(issue);
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete issue</span>
+                          </div>
+                        </button>
 
-                      <button
-                        type="button"
-                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                        onClick={() => {
-                          handleCopyText();
-                          setIsOpen(false);
-                        }}
-                      >
-                        <div className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy issue link</span>
-                        </div>
-                      </button>
-                    </div>
-                  }
-                  placement="bottom-start"
+                        <button
+                          type="button"
+                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                          onClick={() => {
+                            handleCopyText();
+                            setIsOpen(false);
+                          }}
+                        >
+                          <div className="flex items-center justify-start gap-2">
+                            <LinkIcon className="h-4 w-4" />
+                            <span>Copy issue link</span>
+                          </div>
+                        </button>
+                      </div>
+                    }
+                    placement="bottom-start"
+                  >
+                    <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                  </Popover2>
+                </div>
+              )}
+            </div>
+
+            {issue.sub_issues_count > 0 && (
+              <div className="h-6 w-6 flex justify-center items-center">
+                <button
+                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                  onClick={() => handleToggleExpand(issue.id)}
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
+                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+                </button>
               </div>
             )}
           </div>
 
-          {issue.sub_issues_count > 0 && (
-            <div className="h-6 w-6 flex justify-center items-center">
-              <button
-                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                onClick={() => handleToggleExpand(issue.id)}
-              >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
+          <button
+            type="button"
+            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
+            onClick={() => setIssuePeekOverview(true)}
+          >
             {issue.name}
-          </a>
-        </Link>
+          </button>
+        </div>
+        {properties.state && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewStateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              className="max-w-full"
+              tooltipPosition={tooltipPosition}
+              customButton
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.priority && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewPrioritySelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.assignee && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewAssigneeSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              customButton
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.labels && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewIssueLabel issue={issue} maxRender={1} />
+          </div>
+        )}
+
+        {properties.start_date && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewStartDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+
+        {properties.due_date && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              tooltipPosition={tooltipPosition}
+              noBorder
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.estimate && (
+          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            <ViewEstimateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              position="left"
+              tooltipPosition={tooltipPosition}
+              user={user}
+              isNotAllowed={isNotAllowed}
+            />
+          </div>
+        )}
+        {properties.created_on && (
+          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            {renderLongDetailDateFormat(issue.created_at)}
+          </div>
+        )}
+        {properties.updated_on && (
+          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            {renderLongDetailDateFormat(issue.updated_at)}
+          </div>
+        )}
       </div>
-      {properties.state && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewStateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            className="max-w-full"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.priority && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewPrioritySelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.assignee && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewAssigneeSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            customButton
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.labels && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewIssueLabel issue={issue} maxRender={1} />
-        </div>
-      )}
-
-      {properties.start_date && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewStartDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-
-      {properties.due_date && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewDueDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            tooltipPosition={tooltipPosition}
-            noBorder
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.estimate && (
-        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          <ViewEstimateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            position="left"
-            tooltipPosition={tooltipPosition}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        </div>
-      )}
-      {properties.created_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.created_at)}
-        </div>
-      )}
-      {properties.updated_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.updated_at)}
-        </div>
-      )}
-    </div>
+    </>
   );
 };

apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 // components
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
-import { CustomMenu, Icon, Spinner } from "components/ui";
+import { CustomMenu, Spinner } from "components/ui";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";