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 -->
This commit is contained in:
Vemparala Surya Vamsi 2024-02-27 11:56:45 +05:30 committed by GitHub
parent c1207db0f5
commit 9e70ebe658
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 3 deletions

View File

@ -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) =>

View File

@ -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}
/>
);
}

View File

@ -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"