feat: Add peek overview in sub issues and updated UI for empty states. (#2263)

web/components/issues/sub-issues/issue.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 // next imports
 import Link from "next/link";
+import { useRouter } from "next/router";
 // lucide icons
 import {
   ChevronDown,
@@ -37,6 +38,7 @@ export interface ISubIssues {
     issueId: string,
     issue?: IIssue | null
   ) => void;
+  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssues: React.FC<ISubIssues> = ({
@@ -52,38 +54,54 @@ export const SubIssues: React.FC<ISubIssues> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-}) => (
+  setPeekParentId,
-  <div>
+}) => {
-    {issue && (
+  const router = useRouter();
-      <div
-        className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
-        style={{ paddingLeft: `${spacingLeft}px` }}
-      >
-        <div className="flex-shrink-0 w-[22px] h-[22px]">
-          {issue?.sub_issues_count > 0 && (
-            <>
-              {issuesLoader.sub_issues.includes(issue?.id) ? (
-                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
-                  <Loader width={14} strokeWidth={2} className="animate-spin" />
-                </div>
-              ) : (
-                <div
-                  className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
-                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
-                >
-                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
-                    <ChevronDown width={14} strokeWidth={2} />
-                  ) : (
-                    <ChevronRight width={14} strokeWidth={2} />
-                  )}
-                </div>
-              )}
-            </>
-          )}
-        </div>
 
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+  const openPeekOverview = (issue_id: string) => {
-          <a className="w-full flex items-center gap-2">
+    const { query } = router;
+
+    setPeekParentId(parentIssue?.id);
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue_id },
+    });
+  };
+
+  return (
+    <div>
+      {issue && (
+        <div
+          className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
+          style={{ paddingLeft: `${spacingLeft}px` }}
+        >
+          <div className="flex-shrink-0 w-[22px] h-[22px]">
+            {issue?.sub_issues_count > 0 && (
+              <>
+                {issuesLoader.sub_issues.includes(issue?.id) ? (
+                  <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                    <Loader width={14} strokeWidth={2} className="animate-spin" />
+                  </div>
+                ) : (
+                  <div
+                    className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
+                    onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
+                  >
+                    {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
+                      <ChevronDown width={14} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+
+          <div
+            className="w-full flex items-center gap-2 cursor-pointer"
+            onClick={() => openPeekOverview(issue?.id)}
+          >
             <div
               className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
               style={{
@@ -96,93 +114,94 @@ export const SubIssues: React.FC<ISubIssues> = ({
             <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
               <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
             </Tooltip>
-          </a>
+          </div>
-        </Link>
 
-        <div className="flex-shrink-0 text-sm">
+          <div className="flex-shrink-0 text-sm">
-          <IssueProperty
+            <IssueProperty
-            workspaceSlug={workspaceSlug}
+              workspaceSlug={workspaceSlug}
-            projectId={projectId}
+              projectId={projectId}
-            parentIssue={parentIssue}
+              parentIssue={parentIssue}
-            issue={issue}
+              issue={issue}
-            user={user}
+              user={user}
-            editable={editable}
+              editable={editable}
-          />
+            />
-        </div>
+          </div>
+
+          <div className="flex-shrink-0 text-sm">
+            <CustomMenu width="auto" ellipsis>
+              {editable && (
+                <CustomMenu.MenuItem
+                  onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <Pencil width={14} strokeWidth={2} />
+                    <span>Edit issue</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+
+              {editable && (
+                <CustomMenu.MenuItem
+                  onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
+                >
+                  <div className="flex items-center justify-start gap-2">
+                    <Trash width={14} strokeWidth={2} />
+                    <span>Delete issue</span>
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
 
-        <div className="flex-shrink-0 text-sm">
-          <CustomMenu width="auto" ellipsis>
-            {editable && (
               <CustomMenu.MenuItem
-                onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
+                onClick={() =>
+                  copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
+                }
               >
                 <div className="flex items-center justify-start gap-2">
-                  <Pencil width={14} strokeWidth={2} />
+                  <LinkIcon width={14} strokeWidth={2} />
-                  <span>Edit issue</span>
+                  <span>Copy issue link</span>
                 </div>
               </CustomMenu.MenuItem>
-            )}
+            </CustomMenu>
+          </div>
 
-            {editable && (
+          {editable && (
-              <CustomMenu.MenuItem
+            <>
-                onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
+              {issuesLoader.delete.includes(issue?.id) ? (
-              >
+                <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
-                <div className="flex items-center justify-start gap-2">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
-                  <Trash width={14} strokeWidth={2} />
-                  <span>Delete issue</span>
                 </div>
-              </CustomMenu.MenuItem>
+              ) : (
-            )}
+                <div
-
+                  className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
-            <CustomMenu.MenuItem
+                  onClick={() => {
-              onClick={() =>
+                    handleIssuesLoader({ key: "delete", issueId: issue?.id });
-                copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
+                    removeIssueFromSubIssues(parentIssue?.id, issue);
-              }
+                  }}
-            >
+                >
-              <div className="flex items-center justify-start gap-2">
+                  <X width={14} strokeWidth={2} />
-                <LinkIcon width={14} strokeWidth={2} />
+                </div>
-                <span>Copy issue link</span>
+              )}
-              </div>
+            </>
-            </CustomMenu.MenuItem>
+          )}
-          </CustomMenu>
         </div>
+      )}
 
-        {editable && (
+      {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
-          <>
+        <SubIssuesRootList
-            {issuesLoader.delete.includes(issue?.id) ? (
+          workspaceSlug={workspaceSlug}
-              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+          projectId={projectId}
-                <Loader width={14} strokeWidth={2} className="animate-spin" />
+          parentIssue={issue}
-              </div>
+          spacingLeft={spacingLeft + 22}
-            ) : (
+          user={user}
-              <div
+          editable={editable}
-                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+          removeIssueFromSubIssues={removeIssueFromSubIssues}
-                onClick={() => {
+          issuesLoader={issuesLoader}
-                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+          handleIssuesLoader={handleIssuesLoader}
-                  removeIssueFromSubIssues(parentIssue?.id, issue);
+          copyText={copyText}
-                }}
+          handleIssueCrudOperation={handleIssueCrudOperation}
-              >
+          setPeekParentId={setPeekParentId}
-                <X width={14} strokeWidth={2} />
+        />
-              </div>
+      )}
-            )}
+    </div>
-          </>
+  );
-        )}
+};
-      </div>
-    )}
-
-    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
-      <SubIssuesRootList
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        parentIssue={issue}
-        spacingLeft={spacingLeft + 22}
-        user={user}
-        editable={editable}
-        removeIssueFromSubIssues={removeIssueFromSubIssues}
-        issuesLoader={issuesLoader}
-        handleIssuesLoader={handleIssuesLoader}
-        copyText={copyText}
-        handleIssueCrudOperation={handleIssueCrudOperation}
-      />
-    )}
-  </div>
-);

web/components/issues/sub-issues/issues-list.tsx

@@ -27,6 +27,7 @@ export interface ISubIssuesRootList {
     issueId: string,
     issue?: IIssue | null
   ) => void;
+  setPeekParentId: (id: string) => void;
 }
 
 export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
@@ -41,6 +42,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
+  setPeekParentId,
 }) => {
   const { data: issues, isLoading } = useSWR(
     workspaceSlug && projectId && parentIssue && parentIssue?.id
@@ -81,6 +83,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
             handleIssuesLoader={handleIssuesLoader}
             copyText={copyText}
             handleIssueCrudOperation={handleIssueCrudOperation}
+            setPeekParentId={setPeekParentId}
           />
         ))}
 

web/components/issues/sub-issues/root.tsx

@@ -10,6 +10,7 @@ import { ExistingIssuesListModal } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
+import { IssuePeekOverview } from "components/issues/peek-overview";
 // ui
 import { CustomMenu } from "components/ui";
 // hooks
@@ -41,7 +42,11 @@ export interface ISubIssuesRootLoadersHandler {
 
 export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId, peekIssue } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    peekIssue: string;
+  };
 
   const { memberRole } = useProjectMyMembership();
   const { setToastAlert } = useToast();
@@ -55,6 +60,8 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
       : null
   );
 
+  const [peekParentId, setPeekParentId] = React.useState<string | null>("");
+
   const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
     visibility: [parentIssue?.id],
     delete: [],
@@ -230,15 +237,48 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
+                    setPeekParentId={setPeekParentId}
                   />
                 </div>
               )}
+
+              <div>
+                <CustomMenu
+                  label={
+                    <>
+                      <Plus className="h-3 w-3" />
+                      Add sub-issue
+                    </>
+                  }
+                  buttonClassName="whitespace-nowrap"
+                  position="left"
+                  noBorder
+                  noChevron
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      mutateSubIssues(parentIssue?.id);
+                      handleIssueCrudOperation("create", parentIssue?.id);
+                    }}
+                  >
+                    Create new
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      mutateSubIssues(parentIssue?.id);
+                      handleIssueCrudOperation("existing", parentIssue?.id);
+                    }}
+                  >
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
             </>
           ) : (
             isEditable && (
-              <div className="text-xs py-2 text-custom-text-300 font-medium">
+              <div className="flex justify-between items-center">
-                <div className="py-3 text-center">No sub issues are available</div>
+                <div className="text-xs py-2 text-custom-text-300 italic">No Sub-Issues yet</div>
-                <>
+                <div>
                   <CustomMenu
                     label={
                       <>
@@ -268,7 +308,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                       Add an existing issue
                     </CustomMenu.MenuItem>
                   </CustomMenu>
-                </>
+                </div>
               </div>
             )
           )}
@@ -323,6 +363,13 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
             )}
         </>
       )}
+
+      <IssuePeekOverview
+        handleMutation={() => peekParentId && peekIssue && mutateSubIssues(peekParentId)}
+        projectId={projectId ?? ""}
+        workspaceSlug={workspaceSlug ?? ""}
+        readOnly={!isEditable}
+      />
     </div>
   );
 };