fix: triggering omnibar shortcuts toggles visibility when visible (ap…

…psmithorg#11601)
ganganimaulik · May 9, 2022 · 2b5d5dd · 2b5d5dd
1 parent 4db07f8
commit 2b5d5dd
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 31 deletions.
diff --git a/...ent/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js b/...ent/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js
@@ -122,6 +122,21 @@ describe("GlobalSearch", function() {
  expect(loc.pathname).includes(expectedPage.pageId);
  });
  });
- cy.NavigateToHome();
+ });
+
+ it("6. Shortcuts should get triggered when the modal is open", () => {
+ cy.get(commonlocators.globalSearchTrigger).click({ force: true });
+ const isMac = Cypress.platform === "darwin";
+ if (isMac) {
+ cy.get("body").type("{cmd}{p}");
+ cy.get(globalSearchLocators.category).should("be.visible");
+ cy.get("body").type("{esc}");
+ cy.get(commonlocators.globalSearchModal).should("not.exist");
+ } else {
+ cy.get("body").type("{ctrl}{p}");
+ cy.get(globalSearchLocators.category).should("be.visible");
+ cy.get("body").type("{esc}");
+ cy.get(commonlocators.globalSearchModal).should("not.exist");
+ }
  });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Omnibar/Omnibar_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Omnibar/Omnibar_spec.js
@@ -42,10 +42,10 @@ describe("Omnibar functionality test cases", () => {
  .should("have.text", "Search Documentation")
  .next()
  .should("have.text", "Find answers through Appsmith documentation.");
+ cy.get("body").type("{esc}");
  });
 
  it("Verify when user clicks on a debugging error, related documentation should open in omnibar", function() {
- cy.get(omnibar.globalSearch).click({ force: true });
  // click on debugger icon
  cy.get(commonlocators.debugger)
  .should("be.visible")

diff --git a/app/client/cypress/locators/GlobalSearch.json b/app/client/cypress/locators/GlobalSearch.json
@@ -1,4 +1,5 @@
 {
  "docHint": ".t--docHit",
- "filterButton": ".t--filter-button"
+ "filterButton": ".t--filter-button",
+ "category": ".t--global-search-category"
 }
diff --git a/app/client/src/actions/globalSearchActions.ts b/app/client/src/actions/globalSearchActions.ts
@@ -11,10 +11,14 @@ export const setGlobalSearchQuery = (query: string) => ({
  payload: query,
 });
 
-export const toggleShowGlobalSearchModal = (
+export const toggleShowGlobalSearchModal = () => ({
+ type: ReduxActionTypes.TOGGLE_SHOW_GLOBAL_SEARCH_MODAL,
+});
+
+export const setGlobalSearchCategory = (
  category: SearchCategory = filterCategories[SEARCH_CATEGORY_ID.DOCUMENTATION],
 ) => ({
- type: ReduxActionTypes.TOGGLE_SHOW_GLOBAL_SEARCH_MODAL,
+ type: ReduxActionTypes.SET_GLOBAL_SEARCH_CATEGORY,
  payload: category,
 });
 

diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -549,6 +549,7 @@ export const ReduxActionTypes = {
  IMPORT_APPLICATION_SUCCESS: "IMPORT_APPLICATION_SUCCESS",
  SET_WIDGET_LOADING: "SET_WIDGET_LOADING",
  SET_GLOBAL_SEARCH_QUERY: "SET_GLOBAL_SEARCH_QUERY",
+ SET_GLOBAL_SEARCH_CATEGORY: "SET_GLOBAL_SEARCH_CATEGORY",
  TOGGLE_SHOW_GLOBAL_SEARCH_MODAL: "TOGGLE_SHOW_GLOBAL_SEARCH_MODAL",
  FETCH_RELEASES_SUCCESS: "FETCH_RELEASES_SUCCESS",
  RESET_UNREAD_RELEASES_COUNT: "RESET_UNREAD_RELEASES_COUNT",

diff --git a/app/client/src/components/editorComponents/ActionCreator/index.tsx b/app/client/src/components/editorComponents/ActionCreator/index.tsx
@@ -56,7 +56,7 @@ import {
  STORE_VALUE,
  WATCH_GEO_LOCATION,
 } from "@appsmith/constants/messages";
-import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
+import { setGlobalSearchCategory } from "actions/globalSearchActions";
 import { filterCategories, SEARCH_CATEGORY_ID } from "../GlobalSearch/utils";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import { selectFeatureFlags } from "selectors/usersSelectors";
@@ -554,7 +554,7 @@ function useIntegrationsOptionTree() {
  className: "t--create-datasources-query-btn",
  onSelect: () => {
  dispatch(
- toggleShowGlobalSearchModal(
+ setGlobalSearchCategory(
  filterCategories[SEARCH_CATEGORY_ID.ACTION_OPERATION],
  ),
  );

diff --git a/app/client/src/components/editorComponents/Debugger/ContextualMenu.tsx b/app/client/src/components/editorComponents/Debugger/ContextualMenu.tsx
@@ -11,7 +11,7 @@ import { PropertyEvaluationErrorType } from "utils/DynamicBindingUtils";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import {
  setGlobalSearchQuery,
- toggleShowGlobalSearchModal,
+ setGlobalSearchCategory,
 } from "actions/globalSearchActions";
 import { filterCategories, SEARCH_CATEGORY_ID } from "../GlobalSearch/utils";
 import { getAppsmithConfigs } from "@appsmith/configs";
@@ -187,7 +187,7 @@ const searchAction: Record<
  });
  dispatch(setGlobalSearchQuery(error.message || ""));
  dispatch(
- toggleShowGlobalSearchModal(filterCategories[SEARCH_CATEGORY_ID.INIT]),
+ setGlobalSearchCategory(filterCategories[SEARCH_CATEGORY_ID.INIT]),
  );
  },
  },

diff --git a/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx b/app/client/src/components/editorComponents/GlobalSearch/HelpBar.tsx
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import styled from "styled-components";
 import { getTypographyByKey } from "constants/DefaultTheme";
 import Text, { TextType } from "components/ads/Text";
-import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
+import { setGlobalSearchCategory } from "actions/globalSearchActions";
 import { HELPBAR_PLACEHOLDER } from "@appsmith/constants/messages";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { modText } from "utils/helpers";
@@ -55,7 +55,7 @@ const mapDispatchToProps = (dispatch: any) => ({
  toggleShowModal: () => {
  AnalyticsUtil.logEvent("OPEN_OMNIBAR", { source: "NAVBAR_CLICK" });
  dispatch(
- toggleShowGlobalSearchModal(filterCategories[SEARCH_CATEGORY_ID.INIT]),
+ setGlobalSearchCategory(filterCategories[SEARCH_CATEGORY_ID.INIT]),
  );
  },
 });

diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx
@@ -133,7 +133,7 @@ function SearchBox({ category, query, setCategory, setQuery }: SearchBoxProps) {
  <InputContainer>
  {isMenu(category) && <SearchIcon style={{ marginRight: "10px" }} />}
  {category.title && (
- <CategoryDisplay>
+ <CategoryDisplay className="t--global-search-category">
  {category.id}
  <CloseIcon
  onClick={() => setCategory({ id: SEARCH_CATEGORY_ID.INIT })}

diff --git a/app/client/src/pages/Editor/Explorer/Files/index.tsx b/app/client/src/pages/Editor/Explorer/Files/index.tsx
@@ -14,7 +14,7 @@ import {
 } from "selectors/editorSelectors";
 import { ExplorerActionEntity } from "../Actions/ActionEntity";
 import ExplorerJSCollectionEntity from "../JSActions/JSActionEntity";
-import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
+import { setGlobalSearchCategory } from "actions/globalSearchActions";
 import { Colors } from "constants/Colors";
 import {
  filterCategories,
@@ -36,7 +36,7 @@ function Files() {
 
  const onCreate = useCallback(() => {
  dispatch(
- toggleShowGlobalSearchModal(
+ setGlobalSearchCategory(
  filterCategories[SEARCH_CATEGORY_ID.ACTION_OPERATION],
  ),
  );

diff --git a/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx b/app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx
@@ -16,7 +16,7 @@ import {
  deselectAllInitAction,
  selectAllWidgetsInCanvasInitAction,
 } from "actions/widgetSelectionActions";
-import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
+import { setGlobalSearchCategory } from "actions/globalSearchActions";
 import { isMac } from "utils/helpers";
 import { getSelectedWidget, getSelectedWidgets } from "selectors/ui";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
@@ -59,7 +59,7 @@ type Props = {
  deleteSelectedWidget: () => void;
  cutSelectedWidget: () => void;
  groupSelectedWidget: () => void;
- toggleShowGlobalSearchModal: (category: SearchCategory) => void;
+ setGlobalSearchCategory: (category: SearchCategory) => void;
  resetSnipingMode: () => void;
  openDebugger: () => void;
  closeProppane: () => void;
@@ -112,7 +112,7 @@ class GlobalHotKeys extends React.Component<Props> {
  if (this.props.isPreviewMode) return;
 
  const category = filterCategories[categoryId];
- this.props.toggleShowGlobalSearchModal(category);
+ this.props.setGlobalSearchCategory(category);
  AnalyticsUtil.logEvent("OPEN_OMNIBAR", {
  source: "HOTKEY_COMBO",
  category: category.title,
@@ -428,8 +428,8 @@ const mapDispatchToProps = (dispatch: any) => {
  deleteSelectedWidget: () => dispatch(deleteSelectedWidget(true)),
  cutSelectedWidget: () => dispatch(cutWidget()),
  groupSelectedWidget: () => dispatch(groupWidgets()),
- toggleShowGlobalSearchModal: (category: SearchCategory) =>
- dispatch(toggleShowGlobalSearchModal(category)),
+ setGlobalSearchCategory: (category: SearchCategory) =>
+ dispatch(setGlobalSearchCategory(category)),
  resetSnipingMode: () => dispatch(resetSnipingModeAction()),
  openDebugger: () => dispatch(showDebugger()),
  closeProppane: () => dispatch(closePropertyPane()),

diff --git a/app/client/src/reducers/uiReducers/globalSearchReducer.ts b/app/client/src/reducers/uiReducers/globalSearchReducer.ts
@@ -39,17 +39,24 @@ const globalSearchReducer = createReducer(initialState, {
  ) => ({ ...state, query: action.payload }),
  [ReduxActionTypes.TOGGLE_SHOW_GLOBAL_SEARCH_MODAL]: (
  state: GlobalSearchReduxState,
+ ) => {
+ return {
+ ...state,
+ modalOpen: !state.modalOpen,
+ filterContext: initialState.filterContext,
+ };
+ },
+ [ReduxActionTypes.SET_GLOBAL_SEARCH_CATEGORY]: (
+ state: GlobalSearchReduxState,
  action: ReduxAction<SearchCategory>,
  ) => ({
  ...state,
- modalOpen: !state.modalOpen,
- filterContext: state.modalOpen
- ? initialState.filterContext
- : {
- ...state.filterContext,
- category: action.payload,
- onEnter: SnippetAction.COPY,
- },
+ modalOpen: true,
+ filterContext: {
+ ...state.filterContext,
+ category: action.payload,
+ onEnter: SnippetAction.COPY,
+ },
  }),
  [ReduxActionTypes.SET_SEARCH_FILTER_CONTEXT]: (
  state: GlobalSearchReduxState,

diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts
@@ -97,7 +97,7 @@ import {
 } from "utils/AppsmithUtils";
 import { DEFAULT_API_ACTION_CONFIG } from "constants/ApiEditorConstants";
 import {
- toggleShowGlobalSearchModal,
+ setGlobalSearchCategory,
  setGlobalSearchFilterContext,
 } from "actions/globalSearchActions";
 import {
@@ -885,9 +885,7 @@ function* executeCommandSaga(actionPayload: ReduxAction<SlashCommandPayload>) {
  );
 
  yield put(
- toggleShowGlobalSearchModal(
- filterCategories[SEARCH_CATEGORY_ID.SNIPPETS],
- ),
+ setGlobalSearchCategory(filterCategories[SEARCH_CATEGORY_ID.SNIPPETS]),
  );
  yield put(
  setGlobalSearchFilterContext({