From 228b40def711f9720d728bae7d7e94d91e07c770 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 24 May 2024 10:52:15 +0530
Subject: [PATCH] fix: Close button for Add pane when tabs are disabled
 (#33653)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- Segment add header gets a close button if the side by side flag is not
enabled
- Remove the edit menu item from header (not just for feature flag)

Fixes #33655

## Automation

/ok-to-test tags="@tag.Git"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9218769515>
> Commit: f92c783b754781f2e6801cf62ca55db92bf8019d
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9218769515&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->


















## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
---
 .../Editor/EditorName/NavigationMenuData.ts   | 26 -------------------
 .../pages/Editor/IDE/EditorPane/JS/Add.tsx    |  7 ++++-
 .../pages/Editor/IDE/EditorPane/Query/Add.tsx |  3 +++
 .../components/SegmentAddHeader.tsx           | 22 +++++++++++++++-
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
index 17585d3d6f..194b101df6 100644
--- a/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
+++ b/app/client/src/pages/Editor/EditorName/NavigationMenuData.ts
@@ -17,12 +17,9 @@ import {
 import { getCurrentApplication } from "@appsmith/selectors/applicationSelectors";
 import { Colors } from "constants/Colors";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
-import { redoAction, undoAction } from "actions/pageActions";
-import { redoShortCut, undoShortCut } from "utils/helpers";
 import { toast } from "design-system";
 import type { ThemeProp } from "WidgetProvider/constants";
 import { DOCS_BASE_URL } from "constants/ThirdPartyConstants";
-import { getIsSideBySideEnabled } from "selectors/ideSelectors";
 import { getAppsmithConfigs } from "@appsmith/configs";
 import { getCurrentUser } from "selectors/usersSelectors";
 
@@ -44,8 +41,6 @@ export const GetNavigationMenuData = ({
 
   const isApplicationIdPresent = !!(applicationId && applicationId.length > 0);
 
-  const isSideBySideFlagEnabled = useSelector(getIsSideBySideEnabled);
-
   const user = useSelector(getCurrentUser);
 
   const currentApplication = useSelector(getCurrentApplication);
@@ -141,27 +136,6 @@ export const GetNavigationMenuData = ({
       type: MenuTypes.MENU_DIVIDER,
       isVisible: true,
     },
-    !isSideBySideFlagEnabled && {
-      text: "Edit",
-      type: MenuTypes.PARENT,
-      isVisible: true,
-      children: [
-        {
-          text: "Undo",
-          labelElement: undoShortCut(),
-          onClick: () => dispatch(undoAction()),
-          type: MenuTypes.MENU,
-          isVisible: true,
-        },
-        {
-          text: "Redo",
-          labelElement: redoShortCut(),
-          onClick: () => dispatch(redoAction()),
-          type: MenuTypes.MENU,
-          isVisible: true,
-        },
-      ],
-    },
     {
       text: "Help",
       type: MenuTypes.PARENT,
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index 68cce2a0da..2e524f80de 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -6,7 +6,10 @@ import { Flex, Tag } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import GroupedList from "../components/GroupedList";
-import { useGroupedAddJsOperations } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
+import {
+  useGroupedAddJsOperations,
+  useJSAdd,
+} from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
 import type { AddProps } from "../types/AddProps";
 import { createAddClassName } from "../utils";
@@ -25,6 +28,7 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
     },
     [pageId, dispatch],
   );
+  const { closeAddJS } = useJSAdd();
 
   const getListItems = (data: ActionOperation) => {
     const title = data.entityExplorerTitle || data.title;
@@ -54,6 +58,7 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
         {...innerContainerProps}
       >
         <SegmentAddHeader
+          onCloseClick={closeAddJS}
           titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
         />
 
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
index f6e37fde9c..b46513abcc 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
@@ -7,12 +7,14 @@ import GroupedList from "../components/GroupedList";
 import {
   useAddQueryListItems,
   useGroupedAddQueryOperations,
+  useQueryAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
 import type { AddProps } from "../types/AddProps";
 
 const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
   const { getListItems } = useAddQueryListItems();
   const groupedActionOperations = useGroupedAddQueryOperations();
+  const { closeAddQuery } = useQueryAdd();
 
   return (
     <Flex
@@ -30,6 +32,7 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
         {...innerContainerProps}
       >
         <SegmentAddHeader
+          onCloseClick={closeAddQuery}
           titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
         />
         <GroupedList
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
index 1327d92a46..b07ba8870e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
@@ -1,15 +1,24 @@
 import React from "react";
-import { Flex, Text } from "design-system";
+import { Button, Flex, Text } from "design-system";
 import { createMessage } from "@appsmith/constants/messages";
+import { useSelector } from "react-redux";
+import { getIsSideBySideEnabled } from "selectors/ideSelectors";
 
 interface Props {
   titleMessage: () => string;
+  onCloseClick?: () => void;
 }
 
 const SegmentAddHeader = (props: Props) => {
+  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
   return (
     <Flex
       alignItems="center"
+      backgroundColor={
+        isSideBySideEnabled
+          ? "var(--ads-v2-color-white)"
+          : "var(--ads-v2-color-gray-50)"
+      }
       justifyContent="space-between"
       pl="spaces-4"
       pr="spaces-2"
@@ -18,6 +27,17 @@ const SegmentAddHeader = (props: Props) => {
       <Text color="var(--ads-v2-color-fg)" kind="heading-xs">
         {createMessage(props.titleMessage)}
       </Text>
+      {isSideBySideEnabled ? null : (
+        <Button
+          aria-label="Close pane"
+          data-testid="t--add-pane-close-icon"
+          isIconButton
+          kind={"secondary"}
+          onClick={props.onCloseClick}
+          size={"sm"}
+          startIcon={"close-line"}
+        />
+      )}
     </Flex>
   );
 };