feat: add existing issue option added in spreadsheet view (#1397)

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

@@ -572,8 +572,11 @@ export const IssuesView: React.FC<Props> = ({
                 />
               ) : issueView === "spreadsheet" ? (
                 <SpreadsheetView
+                  type={type}
                   handleEditIssue={handleEditIssue}
                   handleDeleteIssue={handleDeleteIssue}
+                  openIssuesListModal={type !== "issue" ? openIssuesListModal : null}
+                  isCompleted={isCompleted}
                   user={user}
                   userAuth={memberRole}
                 />

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 // components
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
-import { Icon, Spinner } from "components/ui";
+import { CustomMenu, Icon, Spinner } from "components/ui";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
@@ -17,15 +17,21 @@ import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
 import { PlusIcon } from "@heroicons/react/24/outline";
 
 type Props = {
+  type: "issue" | "cycle" | "module";
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
+  openIssuesListModal?: (() => void) | null;
+  isCompleted?: boolean;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
 };
 
 export const SpreadsheetView: React.FC<Props> = ({
+  type,
   handleEditIssue,
   handleDeleteIssue,
+  openIssuesListModal,
+  isCompleted = false,
   user,
   userAuth,
 }) => {
@@ -79,16 +85,50 @@ export const SpreadsheetView: React.FC<Props> = ({
             className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
             style={{ gridTemplateColumns }}
           >
-            <button
+            {type === "issue" ? (
-              className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+              <button
-              onClick={() => {
+                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
-                const e = new KeyboardEvent("keydown", { key: "c" });
+                onClick={() => {
-                document.dispatchEvent(e);
+                  const e = new KeyboardEvent("keydown", { key: "c" });
-              }}
+                  document.dispatchEvent(e);
-            >
+                }}
-              <PlusIcon className="h-4 w-4" />
+              >
-              Add Issue
+                <PlusIcon className="h-4 w-4" />
-            </button>
+                Add Issue
+              </button>
+            ) : (
+              !isCompleted && (
+                <CustomMenu
+                  className="sticky left-0 z-[1]"
+                  customButton={
+                    <button
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full"
+                      type="button"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      Add Issue
+                    </button>
+                  }
+                  position="left"
+                  menuItemsClassName="left-5 !w-36"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      const e = new KeyboardEvent("keydown", { key: "c" });
+                      document.dispatchEvent(e);
+                    }}
+                  >
+                    Create new
+                  </CustomMenu.MenuItem>
+                  {openIssuesListModal && (
+                    <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              )
+            )}
           </div>
         </div>
       ) : (

apps/app/components/ui/custom-menu.tsx

@@ -19,6 +19,7 @@ type Props = {
   noChevron?: boolean;
   position?: "left" | "right";
   verticalPosition?: "top" | "bottom";
+  menuItemsClassName?: string;
   customButton?: JSX.Element;
   menuItemsWhiteBg?: boolean;
 };
@@ -44,6 +45,7 @@ const CustomMenu = ({
   noChevron = false,
   position = "right",
   verticalPosition = "bottom",
+  menuItemsClassName = "",
   customButton,
   menuItemsWhiteBg = false,
 }: Props) => (
@@ -133,7 +135,7 @@ const CustomMenu = ({
               menuItemsWhiteBg
                 ? "border-brand-surface-1 bg-brand-base"
                 : "border-brand-base bg-brand-surface-1"
-            }`}
+            } ${menuItemsClassName}`}
           >
             <div className="py-1">{children}</div>
           </Menu.Items>