From 9e70ebe658558f66a96c6e15e53566c3f1ed74f8 Mon Sep 17 00:00:00 2001
From: Vemparala Surya Vamsi <121419957+vsvamsi1@users.noreply.github.com>
Date: Tue, 27 Feb 2024 11:56:45 +0530
Subject: [PATCH] fix: 'are you sure' state reset (#31227)

## Description
We have to reset the state of "are you sure" after closing the menu,
currently it sticks around once the user clicks on the delete button.
#### PR fixes following issue(s)
Fixes #31278

#### Type of change
- Bug fix (non-breaking change which fixes an issue)
>
>
>
## Testing
>
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Enhanced state management for the `confirmDelete` action across
various editor components, ensuring a more intuitive user experience
when interacting with context menus.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../pages/Editor/Explorer/Actions/MoreActionsMenu.tsx |  6 +++++-
 .../pages/Editor/JSEditor/AppJSEditorContextMenu.tsx  |  8 +++++++-
 .../src/pages/Editor/JSEditor/JSEditorContextMenu.tsx | 11 ++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
index 2625fb0448..996b9aa318 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/MoreActionsMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import type { AppState } from "@appsmith/reducers";
@@ -44,6 +44,10 @@ export function MoreActionsMenu(props: EntityContextMenuProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const { isChangePermitted = false, isDeletePermitted = false } = props;
 
+  useEffect(() => {
+    if (!isMenuOpen) setConfirmDelete(false);
+  }, [isMenuOpen]);
+
   const dispatch = useDispatch();
   const copyActionToPage = useCallback(
     (actionId: string, actionName: string, pageId: string) =>
diff --git a/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx b/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
index e9a34b00fe..e17099456c 100644
--- a/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
+++ b/app/client/src/pages/Editor/JSEditor/AppJSEditorContextMenu.tsx
@@ -181,7 +181,13 @@ export function AppJSEditorContextMenu({
   if (isDeletePermitted) options.push(deleteOption);
 
   return (
-    <JSEditorContextMenu className="t--more-action-menu" options={options} />
+    <JSEditorContextMenu
+      className="t--more-action-menu"
+      onMenuClose={() => {
+        setConfirmDelete(false);
+      }}
+      options={options}
+    />
   );
 }
 
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
index a15fc3527f..d868d8805d 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
@@ -27,17 +27,26 @@ export interface ContextMenuOption {
 interface EntityContextMenuProps {
   className?: string;
   options: ContextMenuOption[];
+  onMenuClose: (() => void) | undefined;
 }
 
 export function JSEditorContextMenu({
   className,
+  onMenuClose,
   options,
 }: EntityContextMenuProps) {
   if (options.length === 0) {
     return null;
   }
   return (
-    <Menu className={className}>
+    <Menu
+      className={className}
+      onOpenChange={(open) => {
+        if (!open) {
+          onMenuClose?.();
+        }
+      }}
+    >
       <MenuTrigger>
         <Button
           data-testid="more-action-trigger"