From b24729d608fe10c5cfa8cff7c87ff61413b90df2 Mon Sep 17 00:00:00 2001
From: Ritik Kapoor <ritik.kapoor@harness.io>
Date: Mon, 18 Dec 2023 07:15:57 +0000
Subject: [PATCH] UI [CODE-1216] : Fix modal close and disable side menu on
 comment deletion (#913)

---
 web/src/components/CommentBox/CommentBox.tsx | 71 ++++++++++----------
 web/src/hooks/useConfirmationDialog.tsx      |  3 +-
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/web/src/components/CommentBox/CommentBox.tsx b/web/src/components/CommentBox/CommentBox.tsx
index 2a23eebe1..b1d81487f 100644
--- a/web/src/components/CommentBox/CommentBox.tsx
+++ b/web/src/components/CommentBox/CommentBox.tsx
@@ -380,43 +380,44 @@ const CommentsThread = <T = unknown,>({
                         {outlets[CommentBoxOutletPosition.LEFT_OF_OPTIONS_MENU]}
                       </Container>
                     </Render>
-                    <OptionsMenuButton
-                      isDark={true}
-                      icon="Options"
-                      iconProps={{ size: 14 }}
-                      style={{ padding: '5px' }}
-                      disabled={!!commentItem?.deleted}
-                      width="100px"
-                      items={[
-                        {
-                          hasIcon: true,
-                          className: css.optionMenuIcon,
-                          iconName: 'Edit',
-                          text: getString('edit'),
-                          onClick: () => setEditIndexes({ ...editIndexes, ...{ [index]: true } })
-                        },
-                        {
-                          hasIcon: true,
-                          className: css.optionMenuIcon,
-                          iconName: 'code-quote',
-                          text: getString('quote'),
-                          onClick: () => onQuote(commentItem?.content)
-                        },
-                        '-',
-                        {
-                          className: css.deleteIcon,
-                          hasIcon: true,
-                          iconName: 'main-trash',
-                          isDanger: true,
-                          text: getString('delete'),
-                          onClick: async () => {
-                            if (await handleAction(CommentAction.DELETE, '', commentItem)) {
-                              resetStateAtIndex(index)
+                    <Render when={!commentItem?.deleted}>
+                      <OptionsMenuButton
+                        isDark={true}
+                        icon="Options"
+                        iconProps={{ size: 14 }}
+                        style={{ padding: '5px' }}
+                        width="100px"
+                        items={[
+                          {
+                            hasIcon: true,
+                            className: css.optionMenuIcon,
+                            iconName: 'Edit',
+                            text: getString('edit'),
+                            onClick: () => setEditIndexes({ ...editIndexes, ...{ [index]: true } })
+                          },
+                          {
+                            hasIcon: true,
+                            className: css.optionMenuIcon,
+                            iconName: 'code-quote',
+                            text: getString('quote'),
+                            onClick: () => onQuote(commentItem?.content)
+                          },
+                          '-',
+                          {
+                            className: css.deleteIcon,
+                            hasIcon: true,
+                            iconName: 'main-trash',
+                            isDanger: true,
+                            text: getString('delete'),
+                            onClick: async () => {
+                              if (await handleAction(CommentAction.DELETE, '', commentItem)) {
+                                resetStateAtIndex(index)
+                              }
                             }
                           }
-                        }
-                      ]}
-                    />
+                        ]}
+                      />
+                    </Render>
                   </Layout.Horizontal>
                 </Layout.Horizontal>
               }
diff --git a/web/src/hooks/useConfirmationDialog.tsx b/web/src/hooks/useConfirmationDialog.tsx
index 29089e2e0..87b1d7426 100644
--- a/web/src/hooks/useConfirmationDialog.tsx
+++ b/web/src/hooks/useConfirmationDialog.tsx
@@ -83,8 +83,9 @@ export const useConfirmationDialog = (props: UseConfirmationDialogProps): UseCon
   const onClose = React.useCallback(
     (isConfirmed: boolean): void => {
       onCloseDialog?.(isConfirmed)
+      hideModal()
+      if (persistDialog) showModal()
       if (!isConfirmed) hideModal()
-      else if (persistDialog) showModal()
     },
     [hideModal, onCloseDialog, persistDialog]
   )