From 8a029950ec4485df9e01b5087f567b8c0e7acfdd Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 7 Aug 2023 17:53:28 +0530
Subject: [PATCH] chore: fix issue where tag could not be added to vault

---
 .../Panes/Vaults/Contacts/ContactItem.tsx     |  2 +-
 .../Panes/Vaults/Vaults/VaultItem.tsx         | 10 +-
 .../Components/Tags/TagContextMenu.tsx        | 96 +++++++++----------
 .../Vaults/AddToVaultMenuOption.tsx           |  5 +-
 .../Hooks/useCloseOnClickOutside.ts           | 26 -----
 5 files changed, 52 insertions(+), 87 deletions(-)
 delete mode 100644 packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
index d936421b6..d26ffe019 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
@@ -28,7 +28,7 @@ const ContactItem = ({ contact }: Props) => {
         <EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+      <div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
         <Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
         <div className="flex flex-col gap-1 py-1.5 overflow-hidden">
           <span
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
index b49d625d7..62ae84063 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultItem.tsx
@@ -107,15 +107,15 @@ const VaultItem = ({ vault }: Props) => {
         <EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
       </ModalOverlay>
 
-      <div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
-        <Icon type={'safe-square'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
+      <div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
+        <Icon type="safe-square" size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
         <div className="flex flex-col gap-2 py-1.5">
           <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">{vault.description}</span>
           <span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
 
-          <div className="mt-2.5 flex w-full flex-row justify-between">
-            <div className="mt-2.5 flex flex-row">
+          <div className="mt-2 flex w-full flex-row justify-between">
+            <div className="flex flex-row">
               <Button label="Edit" className={'mr-3 text-xs'} onClick={openEditModal} />
               {isAdmin && (
                 <Button colorStyle="danger" label="Delete" className={'mr-3 text-xs'} onClick={deleteVault} />
@@ -124,7 +124,7 @@ const VaultItem = ({ vault }: Props) => {
                 <Button label="Leave Vault" className={'mr-3 text-xs'} onClick={leaveVault} />
               )}
             </div>
-            <div className="mt-2.5 flex flex-row">
+            <div className="flex flex-row">
               {vault.isSharedVaultListing() ? (
                 <Button label="Invite Contacts" className={'mr-3 text-xs'} onClick={openInviteModal} />
               ) : (
diff --git a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
index 9d1179360..872346a4b 100644
--- a/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagContextMenu.tsx
@@ -1,11 +1,10 @@
 import { observer } from 'mobx-react-lite'
-import { useCallback, useRef, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { SNTag, VectorIconNameOrEmoji, DefaultTagIconName } from '@standardnotes/snjs'
-import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
@@ -29,11 +28,6 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
 
   const { contextMenuOpen, contextMenuClickLocation } = navigationController
 
-  const contextMenuRef = useRef<HTMLDivElement>(null)
-
-  /** @TODO Needs fixing to handle clicking on the vault selection sub menu */
-  useCloseOnClickOutside(contextMenuRef, () => navigationController.setContextMenuOpen(false))
-
   const onClickAddSubtag = useCallback(() => {
     if (!isEntitledToFolders) {
       premiumModal.activate('Folders')
@@ -77,54 +71,52 @@ const TagContextMenu = ({ navigationController, isEntitledToFolders, selectedTag
       togglePopover={() => navigationController.setContextMenuOpen(!contextMenuOpen)}
       className="py-2"
     >
-      <div ref={contextMenuRef}>
-        <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
-          <IconPicker
-            key={'icon-picker'}
-            onIconChange={handleIconChange}
-            selectedValue={selectedTag.iconString}
-            platform={application.platform}
-            className={'px-3 py-1.5'}
-            useIconGrid={true}
-            iconGridClassName="max-h-30"
-          />
-          <HorizontalSeparator classes="my-2" />
-          {featureTrunkVaultsEnabled() && (
-            <AddToVaultMenuOption iconClassName="mr-2 text-neutral" items={[selectedTag]} />
-          )}
-          <MenuItem className={'justify-between py-1.5'} onClick={onClickStar}>
-            <div className="flex items-center">
-              <Icon type="star" className="mr-2 text-neutral" />
-              {selectedTag.starred ? 'Unfavorite' : 'Favorite'}
-            </div>
-          </MenuItem>
-          <MenuItem className={'justify-between py-1.5'} onClick={onClickAddSubtag}>
-            <div className="flex items-center">
-              <Icon type="add" className="mr-2 text-neutral" />
-              Add subtag
-            </div>
-            {!isEntitledToFolders && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
-          </MenuItem>
-          <MenuItem className={'py-1.5'} onClick={onClickRename}>
-            <Icon type="pencil-filled" className="mr-2 text-neutral" />
-            Rename
-          </MenuItem>
-          <MenuItem className={'py-1.5'} onClick={onClickDelete}>
-            <Icon type="trash" className="mr-2 text-danger" />
-            <span className="text-danger">Delete</span>
-          </MenuItem>
-        </Menu>
+      <Menu a11yLabel="Tag context menu" isOpen={contextMenuOpen}>
+        <IconPicker
+          key={'icon-picker'}
+          onIconChange={handleIconChange}
+          selectedValue={selectedTag.iconString}
+          platform={application.platform}
+          className={'px-3 py-1.5'}
+          useIconGrid={true}
+          iconGridClassName="max-h-30"
+        />
         <HorizontalSeparator classes="my-2" />
-        <div className="px-3 pb-1.5 pt-1 text-sm font-medium text-neutral lg:text-xs">
-          <div className="mb-1">
-            <span className="font-semibold">Last modified:</span> {tagLastModified}
+        {featureTrunkVaultsEnabled() && (
+          <AddToVaultMenuOption iconClassName="mr-2 text-neutral" items={[selectedTag]} />
+        )}
+        <MenuItem className={'justify-between py-1.5'} onClick={onClickStar}>
+          <div className="flex items-center">
+            <Icon type="star" className="mr-2 text-neutral" />
+            {selectedTag.starred ? 'Unfavorite' : 'Favorite'}
           </div>
-          <div className="mb-1">
-            <span className="font-semibold">Created:</span> {tagCreatedAt}
-          </div>
-          <div>
-            <span className="font-semibold">Tag ID:</span> {selectedTag.uuid}
+        </MenuItem>
+        <MenuItem className={'justify-between py-1.5'} onClick={onClickAddSubtag}>
+          <div className="flex items-center">
+            <Icon type="add" className="mr-2 text-neutral" />
+            Add subtag
           </div>
+          {!isEntitledToFolders && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+        </MenuItem>
+        <MenuItem className={'py-1.5'} onClick={onClickRename}>
+          <Icon type="pencil-filled" className="mr-2 text-neutral" />
+          Rename
+        </MenuItem>
+        <MenuItem className={'py-1.5'} onClick={onClickDelete}>
+          <Icon type="trash" className="mr-2 text-danger" />
+          <span className="text-danger">Delete</span>
+        </MenuItem>
+      </Menu>
+      <HorizontalSeparator classes="my-2" />
+      <div className="px-3 pb-1.5 pt-1 text-sm font-medium text-neutral lg:text-xs">
+        <div className="mb-1">
+          <span className="font-semibold">Last modified:</span> {tagLastModified}
+        </div>
+        <div className="mb-1">
+          <span className="font-semibold">Created:</span> {tagCreatedAt}
+        </div>
+        <div>
+          <span className="font-semibold">Tag ID:</span> {selectedTag.uuid}
         </div>
       </div>
     </Popover>
diff --git a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
index 429d78cef..ff4eb686b 100644
--- a/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
+++ b/packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
@@ -107,7 +107,6 @@ const VaultMenu = ({ items }: { items: DecryptedItemInterface[] }) => {
 }
 
 const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string; items: DecryptedItemInterface[] }) => {
-  const menuContainerRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
 
   const [isSubMenuOpen, setIsSubMenuOpen] = useState(false)
@@ -121,7 +120,7 @@ const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string;
   }
 
   return (
-    <div ref={menuContainerRef}>
+    <>
       <MenuItem
         className="justify-between"
         onClick={toggleSubMenu}
@@ -150,7 +149,7 @@ const AddToVaultMenuOption = ({ iconClassName, items }: { iconClassName: string;
       >
         <VaultMenu items={items} />
       </Popover>
-    </div>
+    </>
   )
 }
 
diff --git a/packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts b/packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts
deleted file mode 100644
index 261e6f455..000000000
--- a/packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useCallback, useEffect } from 'react'
-
-export function useCloseOnClickOutside(container: { current: HTMLDivElement | null }, callback: () => void): void {
-  const closeOnClickOutside = useCallback(
-    (event: { target: EventTarget | null }) => {
-      if (!container.current) {
-        return
-      }
-      const isDescendantOfContainer = container.current.contains(event.target as Node)
-      const isDescendantOfDialog = (event.target as HTMLElement).closest('[role="dialog"]')
-      if (!isDescendantOfContainer && !isDescendantOfDialog) {
-        callback()
-      }
-    },
-    [container, callback],
-  )
-
-  useEffect(() => {
-    document.addEventListener('click', closeOnClickOutside, { capture: true })
-    return () => {
-      document.removeEventListener('click', closeOnClickOutside, {
-        capture: true,
-      })
-    }
-  }, [closeOnClickOutside])
-}