[Fixed #4520] - Remove Entity Explorer Search (#4600)

* Added a prop to hide the entity explorer search

* Updated the cypress tests to accomodate invisible entity explorer search bar

* Removed cmd + f key mapping for entity search.
Although, keeping it for widget search

* blocking default `cmd+f` event only if widget search is present

Co-authored-by: Rishabh Saxena  <rishabh.robben@gmail.com>

* removed a test case dependent on entity search.

* Revert "removed a test case dependent on entity search."

This reverts commit d5595d1856bbbb6ae472f26cb125b86787197b48.

* fixed test cases for table widget to force em to use table's search functionality

Co-authored-by: Rishabh Saxena  <rishabh.robben@gmail.com>

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_spec.js

@@ -3,7 +3,6 @@ const widgetsPage = require("../../../../locators/Widgets.json");
 const commonlocators = require("../../../../locators/commonlocators.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
 const dsl = require("../../../../fixtures/tableWidgetDsl.json");
-const pages = require("../../../../locators/Pages.json");
 
 describe("Table Widget Functionality", function() {
   before(() => {
@@ -83,7 +82,9 @@ describe("Table Widget Functionality", function() {
       cy.wait(5000);
       cy.get(publish.searchInput)
         .first()
-        .clear()
+        .within(() => {
+          return cy.get("input").clear();
+        })
         .type("7434532");
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(1000);
@@ -97,7 +98,9 @@ describe("Table Widget Functionality", function() {
   it("Table Widget Functionality To Filter The Data", function() {
     cy.get(publish.searchInput)
       .first()
-      .clear();
+      .within(() => {
+        return cy.get("input").clear();
+      });
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(1000);
     cy.isSelectRow(1);

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Tab_rename_Delete_spec.js

@@ -31,10 +31,9 @@ describe("Tab widget test", function() {
     cy.RenameEntity(tabname);
     cy.validateMessage(tabname);
     cy.deleteEntity();
-    cy.get(commonlocators.entityExplorersearch).should("be.visible");
     cy.get(commonlocators.entityExplorersearch)
-      .clear()
-      .type("Tab 2");
+      .clear({ force: true })
+      .type("Tab 2", { force: true });
     cy.get(
       commonlocators.entitySearchResult.concat("Tab 2").concat("')"),
     ).should("not.exist");

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js

@@ -88,7 +88,7 @@ describe("Entity explorer tests related to copy query", function() {
   });
 
   it("Delete query and rename datasource in explorer", function() {
-    cy.get(commonlocators.entityExplorersearch).clear();
+    cy.get(commonlocators.entityExplorersearch).clear({ force: true });
     cy.NavigateToDatasourceEditor();
     cy.GlobalSearchEntity(`${datasourceName}`);
     cy.get(`.t--entity-name:contains(${datasourceName})`)

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_Datasource_Structure_spec.js

@@ -79,7 +79,7 @@ describe("Entity explorer datasource structure", function() {
       200,
     );
 
-    cy.get(commonlocators.entityExplorersearch).clear();
+    cy.get(commonlocators.entityExplorersearch).clear({ force: true });
 
     cy.deleteDatasource(datasourceName);
   });
@@ -102,7 +102,7 @@ describe("Entity explorer datasource structure", function() {
       200,
     );
 
-    cy.get(commonlocators.entityExplorersearch).clear();
+    cy.get(commonlocators.entityExplorersearch).clear({ force: true });
 
     const tableName = Math.random()
       .toString(36)
@@ -158,7 +158,7 @@ describe("Entity explorer datasource structure", function() {
           200,
         );
 
-        cy.get(commonlocators.entityExplorersearch).clear();
+        cy.get(commonlocators.entityExplorersearch).clear({ force: true });
         cy.deleteDatasource(datasourceName);
       });
   });

app/client/cypress/locators/publishWidgetspage.json

@@ -22,7 +22,7 @@
   "pickMyLocation": ".t--widget-mapwidget div[title='Pick My Location']",
   "rectChart": ".t--widget-chartwidget g  rect",
   "chartLab": ".t--widget-chartwidget g:nth-child(5) text",
-  "searchInput": "input",
+  "searchInput": ".t--search-input",
   "downloadBtn": ".t--table-download-btn",
   "filterBtn": ".t--table-filter-toggle-btn",
   "attributeDropdown": ".t--table-filter-columns-dropdown",

app/client/cypress/support/commands.js

@@ -459,10 +459,9 @@ Cypress.Commands.add("SearchApp", (appname) => {
 });
 
 Cypress.Commands.add("SearchEntity", (apiname1, apiname2) => {
-  cy.get(commonlocators.entityExplorersearch).should("be.visible");
   cy.get(commonlocators.entityExplorersearch)
-    .clear()
-    .type(apiname1);
+    .clear({ force: true })
+    .type(apiname1, { force: true });
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(500);
   cy.get(
@@ -474,10 +473,10 @@ Cypress.Commands.add("SearchEntity", (apiname1, apiname2) => {
 });
 
 Cypress.Commands.add("GlobalSearchEntity", (apiname1) => {
-  cy.get(commonlocators.entityExplorersearch).should("be.visible");
+  // entity explorer search will be hidden
   cy.get(commonlocators.entityExplorersearch)
-    .clear()
-    .type(apiname1);
+    .clear({ force: true })
+    .type(apiname1, { force: true });
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(500);
   cy.get(
@@ -634,8 +633,7 @@ Cypress.Commands.add("SelectAction", (action) => {
 });
 
 Cypress.Commands.add("ClearSearch", () => {
-  cy.get(commonlocators.entityExplorersearch).should("be.visible");
-  cy.get(commonlocators.entityExplorersearch).clear();
+  cy.get(commonlocators.entityExplorersearch).clear({ force: true });
 });
 
 Cypress.Commands.add(
@@ -649,8 +647,8 @@ Cypress.Commands.add(
     const lastChar = text.slice(-1);
 
     cy.get(commonlocators.entityExplorersearch)
-      .clear()
-      .click()
+      .clear({ force: true })
+      .click({ force: true })
       .then(() => {
         $element.text(subString);
         $element.val(subString);
@@ -660,10 +658,9 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add("SearchEntityandOpen", (apiname1) => {
-  cy.get(commonlocators.entityExplorersearch).should("be.visible");
   cy.get(commonlocators.entityExplorersearch)
-    .clear()
-    .type(apiname1);
+    .clear({ force: true })
+    .type(apiname1, { force: true });
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(500);
   cy.get(

app/client/src/pages/Editor/Explorer/EntityExplorer.tsx

@@ -86,7 +86,7 @@ function EntityExplorer(props: IPanelProps) {
 
   return (
     <Wrapper ref={explorerRef}>
-      <Search clear={clearSearch} ref={searchInputRef} />
+      <Search clear={clearSearch} isHidden ref={searchInputRef} />
       <ExplorerPageGroup
         actions={actions}
         datasources={datasources}

app/client/src/pages/Editor/Explorer/ExplorerSearch.tsx

@@ -4,8 +4,8 @@ import styled from "styled-components";
 import { Colors } from "constants/Colors";
 import { ENTITY_EXPLORER_SEARCH_ID } from "constants/Explorer";
 
-const ExplorerSearchWrapper = styled.div`
-  display: grid;
+const ExplorerSearchWrapper = styled.div<{ isHidden?: boolean }>`
+  display: ${(props) => (props.isHidden ? "none" : "grid")};
   grid-template-columns: 30px 1fr 30px;
   margin-bottom: 5px;
   height: 48px;
@@ -64,11 +64,16 @@ const Underline = styled.div`
 /*eslint-disable react/display-name */
 export const ExplorerSearch = forwardRef(
   (
-    props: { clear: () => void; placeholder?: string; autoFocus?: boolean },
+    props: {
+      clear: () => void;
+      placeholder?: string;
+      autoFocus?: boolean;
+      isHidden?: boolean;
+    },
     ref: Ref<HTMLInputElement>,
   ) => {
     return (
-      <ExplorerSearchWrapper>
+      <ExplorerSearchWrapper isHidden={props.isHidden}>
         <Icon icon="search" iconSize={12} />
         <input
           autoComplete="off"

app/client/src/pages/Editor/GlobalHotKeys.tsx

@@ -18,10 +18,7 @@ import { getSelectedWidget, getSelectedWidgets } from "selectors/ui";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import { getSelectedText } from "utils/helpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import {
-  ENTITY_EXPLORER_SEARCH_ID,
-  WIDGETS_SEARCH_ID,
-} from "constants/Explorer";
+import { WIDGETS_SEARCH_ID } from "constants/Explorer";
 import { setCommentMode as setCommentModeAction } from "actions/commentActions";
 import { showDebugger } from "actions/debuggerActions";
 
@@ -85,16 +82,14 @@ class GlobalHotKeys extends React.Component<Props> {
           global
           label="Search entities"
           onKeyDown={(e: any) => {
-            const entitySearchInput = document.getElementById(
-              ENTITY_EXPLORER_SEARCH_ID,
-            );
             const widgetSearchInput = document.getElementById(
               WIDGETS_SEARCH_ID,
             );
-            if (entitySearchInput) entitySearchInput.focus();
-            if (widgetSearchInput) widgetSearchInput.focus();
-            e.preventDefault();
-            e.stopPropagation();
+            if (widgetSearchInput) {
+              widgetSearchInput.focus();
+              e.preventDefault();
+              e.stopPropagation();
+            }
           }}
         />
         <Hotkey