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,7 +54,21 @@ export const SubIssues: React.FC<ISubIssues> = ({
   handleIssuesLoader,
   copyText,
   handleIssueCrudOperation,
-}) => (
+  setPeekParentId,
+}) => {
+  const router = useRouter();
+
+  const openPeekOverview = (issue_id: string) => {
+    const { query } = router;
+
+    setPeekParentId(parentIssue?.id);
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue_id },
+    });
+  };
+
+  return (
     <div>
       {issue && (
         <div
@@ -82,8 +98,10 @@ export const SubIssues: React.FC<ISubIssues> = ({
             )}
           </div>
 
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="w-full flex items-center gap-2">
+          <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,8 +114,7 @@ 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>
-        </Link>
+          </div>
 
           <div className="flex-shrink-0 text-sm">
             <IssueProperty
@@ -182,7 +199,9 @@ export const SubIssues: React.FC<ISubIssues> = ({
           handleIssuesLoader={handleIssuesLoader}
           copyText={copyText}
           handleIssueCrudOperation={handleIssueCrudOperation}
+          setPeekParentId={setPeekParentId}
         />
       )}
     </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,12 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     handleIssuesLoader={handleIssuesLoader}
                     copyText={copyText}
                     handleIssueCrudOperation={handleIssueCrudOperation}
+                    setPeekParentId={setPeekParentId}
                   />
                 </div>
               )}
-            </>
-          ) : (
-            isEditable && (
-              <div className="text-xs py-2 text-custom-text-300 font-medium">
-                <div className="py-3 text-center">No sub issues are available</div>
-                <>
+
+              <div>
                 <CustomMenu
                   label={
                     <>
@@ -268,7 +272,43 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     Add an existing issue
                   </CustomMenu.MenuItem>
                 </CustomMenu>
+              </div>
             </>
+          ) : (
+            isEditable && (
+              <div className="flex justify-between items-center">
+                <div className="text-xs py-2 text-custom-text-300 italic">No Sub-Issues yet</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>
               </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>
   );
 };