From 1a48fdd1426258b9dbbcce073d28dbca946dfcc6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:24:52 +0530
Subject: [PATCH] fix: bug fixes (#1394)

* fix: multi level dropdown fix

* style: spreadsheet view add issue button

* fix: spreadsheet view sub-issue label mutation
---
 .../core/spreadsheet-view/single-issue.tsx    |  6 ++++-
 .../spreadsheet-view/spreadsheet-view.tsx     | 23 +++++++++++--------
 .../components/ui/multi-level-dropdown.tsx    |  9 ++++++--
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index 38fd3383d2..8b66f90b74 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -127,7 +127,11 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           user
         )
         .then(() => {
-          mutate(fetchKey);
+          if (issue.parent) {
+            mutate(SUB_ISSUES(issue.parent as string));
+          } else {
+            mutate(fetchKey);
+          }
         })
         .catch((error) => {
           console.log(error);
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index c47ddd805d..5a9d2aad53 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -75,16 +75,21 @@ export const SpreadsheetView: React.FC<Props> = ({
               userAuth={userAuth}
             />
           ))}
-          <button
-            className="flex items-center gap-1.5 pl-7 py-2.5 text-sm text-brand-secondary hover:text-brand-base hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "c" });
-              document.dispatchEvent(e);
-            }}
+          <div
+            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 }}
           >
-            <PlusIcon className="h-4 w-4" />
-            Add Issue
-          </button>
+            <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"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", { key: "c" });
+                document.dispatchEvent(e);
+              }}
+            >
+              <PlusIcon className="h-4 w-4" />
+              Add Issue
+            </button>
+          </div>
         </div>
       ) : (
         <Spinner />
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index b0997972f6..ee096774f5 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -3,7 +3,7 @@ import { Fragment, useState } from "react";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
 import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
 
 type MultiLevelDropdownProps = {
@@ -127,9 +127,14 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                             }}
                             className={`${
                               child.selected ? "bg-brand-surface-2" : ""
-                            } flex w-full items-center whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
+                            } flex w-full items-center justify-between whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
                           >
                             {child.label}
+                            <CheckIcon
+                              className={`h-3.5 w-3.5 opacity-0 ${
+                                child.selected ? "opacity-100" : ""
+                              }`}
+                            />
                           </button>
                         ))}
                       </div>