DHFPROD-8545: Export icon should be hidden in table view, for All Entities

Author: yubiselmarklogic

marklogic-data-hub-central/ui/e2e/cypress/integration/explore/exploreExport.spec.tsx

@@ -0,0 +1,47 @@
+import {Application} from "../../support/application.config";
+import {toolbar} from "../../support/components/common";
+import browsePage from "../../support/pages/browse";
+import LoginPage from "../../support/pages/login";
+
+const entity: string = "Order";
+
+describe("Test table export icon", () => {
+  before(() => {
+    cy.visit("/");
+    cy.contains(Application.title);
+
+    cy.log("**Logging into the app as a developer**");
+    cy.loginAsDeveloper().withRequest();
+    LoginPage.postLogin();
+    //Saving Local Storage to preserve session
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    //Restoring Local Storage to Preserve Session
+    Cypress.Cookies.preserveOnce("HubCentralSession");
+    cy.restoreLocalStorage();
+  });
+
+  it("Validate that the export icon appear only when an entity is selected", () => {
+    cy.log("**Go to Explore section**");
+    toolbar.getExploreToolbarIcon().click();
+
+    cy.log("**Export button should not exist in snippet, graph and table view**");
+    browsePage.clickFacetView();
+    browsePage.getDataExportIcon().should("not.exist");
+    browsePage.clickTableView();
+    browsePage.getDataExportIcon().should("not.exist");
+    browsePage.clickTableView();
+    browsePage.getDataExportIcon().should("not.exist");
+
+    cy.log("**Export button should appear when select an entity**");
+    browsePage.selectBaseEntity(entity);
+    browsePage.waitForSpinnerToDisappear();
+    browsePage.getDataExportIcon().should("be.visible");
+
+    cy.log("**Export button should disappear when deselect an entity**");
+    browsePage.removeBaseEntity(entity);
+    browsePage.getDataExportIcon().should("not.exist");
+  });
+});

marklogic-data-hub-central/ui/e2e/cypress/integration/explore/jsonOtherValidations.spec.tsx

@@ -131,6 +131,7 @@ describe("Verify numeric/date facet can be applied", () => {
   });
   it("Verify clearing date time range facet clears corresponding selected facet", () => {
     toolbar.getExploreToolbarIcon().click();
+    cy.wait(1000);
     entitiesSidebar.removeSelectedBaseEntity();
     entitiesSidebar.openBaseEntityDropdown();
     entitiesSidebar.selectBaseEntityOption("Client");

marklogic-data-hub-central/ui/e2e/cypress/support/pages/browse.tsx

@@ -356,6 +356,10 @@ class BrowsePage {
     cy.get(`[aria-label='base-option-${entity}']`).scrollIntoView().click();
   }
 
+  removeBaseEntity(entity: string) {
+    cy.get(`[aria-label='Remove ${entity}']`).scrollIntoView().click();
+  }
+
   //table
   getColumnTitle(index: number) {
     return cy.get(`.table.table-bordered thead th:nth-child(${index}) .resultsTableHeaderColumn`).invoke("text");
@@ -434,7 +438,7 @@ class BrowsePage {
   }
 
   getDataExportIcon() {
-    return cy.get("[data-cy=query-export] > div > svg");
+    return cy.get("[data-cy=\"query-export\"] > div svg");
   }
 
   getColumnSelectorApply() {

marklogic-data-hub-central/ui/src/components/base-entities-facet/base-entities-facet.tsx

@@ -1,5 +1,6 @@
 import React, {useContext, useEffect, useState} from "react";
 import Select from "react-select";
+import {components as SelectComponents} from "react-select";
 import reactSelectThemeConfig from "../../config/react-select-theme.config";
 import {SearchContext} from "../../util/search-context";
 import styles from "./base-entities-facet.module.scss";
@@ -121,6 +122,16 @@ const BaseEntitiesFacet: React.FC<Props> = (props) => {
     setShowMore(!showMore);
   };
 
+  const MultiValueRemove = props => {
+    return (
+      <SelectComponents.MultiValueRemove {...props}>
+        <span aria-label={`Remove ${props.data.value}`}>
+          <svg height="14" width="14" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
+        </span>
+      </SelectComponents.MultiValueRemove>
+    );
+  };
+
   return (
     <>
       <Select
@@ -130,6 +141,7 @@ const BaseEntitiesFacet: React.FC<Props> = (props) => {
         isClearable={false}
         value={entityNames ? entityNames.map(d => ({value: d, label: d})) : [{value: "All Entities", label: "All Entities"}]}
         onChange={handleChange}
+        components={{MultiValueRemove}}
         isSearchable={false}
         aria-label="base-entities-dropdown-list"
         options={childrenOptions}

marklogic-data-hub-central/ui/src/components/results-tabular-view/results-tabular-view.tsx

@@ -574,12 +574,14 @@ const ResultsTabularView = (props) => {
   return (
     <>
       {!props.groupNodeTableView ? <div className={styles.icon}>
-        <div className={styles.queryExport} data-cy="query-export">
-          {canExportQuery && searchOptions.entityTypeIds.length > 0 && <QueryExport hasStructured={props.hasStructured} columns={props.columns} selectedPropertyDefinitions={props.selectedPropertyDefinitions} />}
-        </div>
-        {searchOptions.entityTypeIds?.length === 1 ? <div className={styles.columnSelector} data-cy="column-selector">
-          <ColumnSelector popoverVisibility={popoverVisibility} setPopoverVisibility={setPopoverVisibility} entityPropertyDefinitions={props.entityPropertyDefinitions} selectedPropertyDefinitions={props.selectedPropertyDefinitions} setColumnSelectorTouched={props.setColumnSelectorTouched} columns={props.columns} primaryKey={primaryKey} />
-        </div> : ""}
+        {searchOptions.entityTypeIds?.length === 1 ? <>
+          <div className={styles.queryExport} data-cy="query-export">
+            {canExportQuery && <QueryExport hasStructured={props.hasStructured} columns={props.columns} selectedPropertyDefinitions={props.selectedPropertyDefinitions} />}
+          </div>
+          <div className={styles.columnSelector} data-cy="column-selector">
+            <ColumnSelector popoverVisibility={popoverVisibility} setPopoverVisibility={setPopoverVisibility} entityPropertyDefinitions={props.entityPropertyDefinitions} selectedPropertyDefinitions={props.selectedPropertyDefinitions} setColumnSelectorTouched={props.setColumnSelectorTouched} columns={props.columns} primaryKey={primaryKey} />
+          </div>
+        </> : ""}
       </div> : ""}
       <div className={styles.tabular}>
         {tableHeaders.length > 0 && <HCTable