From b9c9389adea9d547d765e8f78fb5b9d8d1dc66b3 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Tue, 17 Oct 2023 11:06:03 +0530
Subject: [PATCH] chore: Refactoring editor header (#28128)

## Description

Refactoring editor header component

#### PR fixes following issue(s)
Fixes [#26163](https://github.com/appsmithorg/appsmith/issues/26163)

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

## Testing

#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] Cypress

## 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
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] 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
---
 .../Editor/EditorName/NavigationMenuData.ts   |  7 +++----
 .../Editor/EditorName/NavigationMenuItem.tsx  | 19 +++----------------
 .../src/pages/Editor/EditorName/types.ts      |  6 ++++++
 3 files changed, 12 insertions(+), 20 deletions(-)
 create mode 100644 app/client/src/pages/Editor/EditorName/types.ts

diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
index 38e1197b81..a4b66d82b0 100644
--- a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
+++ b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
@@ -6,8 +6,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { APPLICATIONS_URL } from "constants/routes";
 
 import type { MenuItemData } from "./NavigationMenuItem";
-import { MenuTypes } from "./NavigationMenuItem";
-import { useCallback } from "react";
+import { MenuTypes } from "./types";
 import { getExportAppAPIRoute } from "@appsmith/constants/ApiConstants";
 
 import {
@@ -50,11 +49,11 @@ export const GetNavigationMenuData = ({
     currentApplication?.userPermissions ?? [],
     PERMISSION_TYPE.MANAGE_APPLICATION,
   );
-  const openExternalLink = useCallback((link: string) => {
+  const openExternalLink = (link: string) => {
     if (link) {
       window.open(link, "_blank");
     }
-  }, []);
+  };
 
   const exportAppAsJSON = () => {
     const id = `t--export-app-link`;
diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenuItem.tsx b/app/client/src/pages/Editor/EditorName/NavigationMenuItem.tsx
index bf67000940..c50d7544ee 100644
--- a/app/client/src/pages/Editor/EditorName/NavigationMenuItem.tsx
+++ b/app/client/src/pages/Editor/EditorName/NavigationMenuItem.tsx
@@ -12,14 +12,7 @@ import type { noop } from "lodash";
 
 import type { CommonComponentProps } from "design-system-old";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import styled from "styled-components";
-
-export enum MenuTypes {
-  MENU = "menu",
-  PARENT = "parent",
-  RECONFIRM = "re-confirm",
-  MENU_DIVIDER = "menu divider",
-}
+import { MenuTypes } from "./types";
 
 export interface MenuItemData {
   text: string;
@@ -35,12 +28,6 @@ export interface MenuItemData {
   style?: React.CSSProperties;
 }
 
-const ReconfirmMenuItem = styled(MenuItem)`
-  .ads-v2-text {
-    color: var(--ads-v2-color-fg-error);
-  }
-`;
-
 type NavigationMenuItemProps = CommonComponentProps & {
   menuItemData: MenuItemData;
   setIsPopoverOpen: typeof noop;
@@ -124,13 +111,13 @@ export function NavigationMenuItem({
       );
     case MenuTypes.RECONFIRM:
       return (
-        <ReconfirmMenuItem
+        <MenuItem
           className="error-menuitem"
           data-testid={`t--editor-menu-${kebabCase(text)}`}
           onClick={(e) => handleReconfirmClick(e, menuItemData)}
         >
           {confirm.text}
-        </ReconfirmMenuItem>
+        </MenuItem>
       );
     case MenuTypes.MENU_DIVIDER:
       return <MenuSeparator />;
diff --git a/app/client/src/pages/Editor/EditorName/types.ts b/app/client/src/pages/Editor/EditorName/types.ts
new file mode 100644
index 0000000000..02f6dde824
--- /dev/null
+++ b/app/client/src/pages/Editor/EditorName/types.ts
@@ -0,0 +1,6 @@
+export enum MenuTypes {
+  MENU = "menu",
+  PARENT = "parent",
+  RECONFIRM = "re-confirm",
+  MENU_DIVIDER = "menu divider",
+}