From 9381eeaea7f913b7e8e64cd1c8d0463cceda3c74 Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Fri, 13 May 2022 10:31:08 +0530
Subject: [PATCH] Trigger submenu instead of omni-bar when "Add Query/JS"
 button in the explorer is clicked. (#13774)

---
 .../pages/Editor/Explorer/Files/Submenu.tsx   | 21 +++++++++++++---
 .../src/pages/Editor/Explorer/Files/index.tsx | 25 ++++++++-----------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/app/client/src/pages/Editor/Explorer/Files/Submenu.tsx b/app/client/src/pages/Editor/Explorer/Files/Submenu.tsx
index bd052e60e2..74abce51d3 100644
--- a/app/client/src/pages/Editor/Explorer/Files/Submenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Files/Submenu.tsx
@@ -52,11 +52,19 @@ const SubMenuContainer = styled.div`
   }
 `;
 
-type SubMenuProps = { className: string };
+type SubMenuProps = {
+  className: string;
+  openMenu: boolean;
+  onMenuClose: () => void;
+};
 
-export default function ExplorerSubMenu({ className }: SubMenuProps) {
+export default function ExplorerSubMenu({
+  className,
+  onMenuClose,
+  openMenu,
+}: SubMenuProps) {
   const [query, setQuery] = useState("");
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(openMenu);
   const fileOperations = useFilteredFileOperations(query);
   const pageId = useSelector(getCurrentPageId);
   const applicationSlug = useSelector(selectCurrentApplicationSlug);
@@ -68,6 +76,8 @@ export default function ExplorerSubMenu({ className }: SubMenuProps) {
   const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]);
   const [activeItemIdx, setActiveItemIdx] = useState(0);
 
+  useEffect(() => setShow(openMenu), [openMenu]);
+
   useEffect(() => {
     setQuery("");
   }, [show]);
@@ -207,7 +217,10 @@ export default function ExplorerSubMenu({ className }: SubMenuProps) {
       }
       isOpen={show}
       minimal
-      onClose={() => setShow(false)}
+      onClose={() => {
+        setShow(false);
+        onMenuClose();
+      }}
       placement="right-start"
     >
       <TooltipComponent
diff --git a/app/client/src/pages/Editor/Explorer/Files/index.tsx b/app/client/src/pages/Editor/Explorer/Files/index.tsx
index 3dbe08d5e1..270c89a7e3 100644
--- a/app/client/src/pages/Editor/Explorer/Files/index.tsx
+++ b/app/client/src/pages/Editor/Explorer/Files/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useActiveAction } from "../hooks";
 import { Entity, EntityClassNames } from "../Entity/index";
 import {
@@ -14,16 +14,10 @@ import {
 } from "selectors/editorSelectors";
 import { ExplorerActionEntity } from "../Actions/ActionEntity";
 import ExplorerJSCollectionEntity from "../JSActions/JSActionEntity";
-import { setGlobalSearchCategory } from "actions/globalSearchActions";
 import { Colors } from "constants/Colors";
-import {
-  filterCategories,
-  SEARCH_CATEGORY_ID,
-} from "components/editorComponents/GlobalSearch/utils";
 import { selectFilesForExplorer } from "selectors/entitiesSelector";
 import { getExplorerStatus, saveExplorerStatus } from "../helpers";
 import Icon from "components/ads/Icon";
-import { noop } from "lodash";
 import { AddEntity, EmptyComponent } from "../common";
 import ExplorerSubMenu from "./Submenu";
 
@@ -33,14 +27,11 @@ function Files() {
   const files = useSelector(selectFilesForExplorer);
   const dispatch = useDispatch();
   const isFilesOpen = getExplorerStatus(applicationId, "queriesAndJs");
+  const [isMenuOpen, openMenu] = useState(false);
 
   const onCreate = useCallback(() => {
-    dispatch(
-      setGlobalSearchCategory(
-        filterCategories[SEARCH_CATEGORY_ID.ACTION_OPERATION],
-      ),
-    );
-  }, [dispatch]);
+    openMenu(true);
+  }, [dispatch, openMenu]);
 
   const activeActionId = useActiveAction();
 
@@ -59,6 +50,8 @@ function Files() {
     [applicationId],
   );
 
+  const onMenuClose = useCallback(() => openMenu(false), [openMenu]);
+
   const fileEntities = useMemo(
     () =>
       files.map(({ entity, type }: any) => {
@@ -105,12 +98,14 @@ function Files() {
       customAddButton={
         <ExplorerSubMenu
           className={`${EntityClassNames.ADD_BUTTON} group files`}
+          onMenuClose={onMenuClose}
+          openMenu={isMenuOpen}
         />
       }
       disabled={false}
       entityId={pageId + "_widgets"}
       icon={null}
-      isDefaultExpanded={isFilesOpen === null ? true : isFilesOpen}
+      isDefaultExpanded={isFilesOpen ?? true}
       isSticky
       key={pageId + "_widgets"}
       name="QUERIES/JS"
@@ -124,7 +119,7 @@ function Files() {
       ) : (
         <EmptyComponent
           addBtnText={createMessage(EMPTY_QUERY_JS_BUTTON_TEXT)}
-          addFunction={onCreate || noop}
+          addFunction={onCreate}
           mainText={createMessage(EMPTY_QUERY_JS_MAIN_TEXT)}
         />
       )}