don't show toolbar when not searching (#1152)

* don't show toolbar when not searching

* fixed the tests

* made switch logic more readable

* fixed test

cypress/integration/client_scopes_test.spec.ts

@@ -50,7 +50,7 @@ describe("Client Scopes test", function () {
       masthead.checkNotificationMessage("Client scope created");
 
       sidebarPage.goToClientScopes();
-      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+      sidebarPage.waitForPageLoad();
 
       // Delete
       listingPage

cypress/integration/events_test.spec.ts

@@ -13,15 +13,27 @@ const adminEventsTab = new AdminEventsTab();
 const realmSettingsPage = new RealmSettingsPage();
 const masthead = new Masthead();
 
-describe("Events tests", function () {
+describe("Events tests", () => {
-  describe("Search user events", function () {
+  describe("Search user events", () => {
-    beforeEach(function () {
+    beforeEach(() => {
       keycloakBefore();
       loginPage.logIn();
       sidebarPage.goToEvents();
     });
 
     it("Check search dropdown display", () => {
+      sidebarPage.goToRealmSettings();
+      cy.getId("rs-realm-events-tab").click();
+
+      realmSettingsPage
+        .toggleSwitch(realmSettingsPage.enableEvents)
+        .save(realmSettingsPage.eventsUserSave);
+
+      masthead.signOut();
+      loginPage.logIn();
+
+      sidebarPage.goToEvents();
+
       userEventsTab.shouldDisplay();
     });
 
@@ -38,17 +50,6 @@ describe("Events tests", function () {
     });
 
     it("Check user events search and removal work", () => {
-      sidebarPage.goToRealmSettings();
-      cy.getId("rs-realm-events-tab").click();
-
-      realmSettingsPage
-        .toggleSwitch(realmSettingsPage.enableEvents)
-        .save(realmSettingsPage.eventsUserSave);
-
-      masthead.signOut();
-      loginPage.logIn();
-
-      sidebarPage.goToEvents();
       userEventsTab.shouldDoSearchAndRemoveChips();
     });
 
@@ -61,8 +62,8 @@ describe("Events tests", function () {
     });
   });
 
-  describe("Search admin events", function () {
+  describe("Search admin events", () => {
-    beforeEach(function () {
+    beforeEach(() => {
       keycloakBefore();
       loginPage.logIn();
       sidebarPage.goToEvents();
@@ -70,14 +71,6 @@ describe("Events tests", function () {
     });
 
     it("Check admin events search form fields display", () => {
-      adminEventsTab.shouldHaveFormFields();
-    });
-
-    it("Check `search admin events` button disabled by default", () => {
-      adminEventsTab.shouldHaveSearchBtnDisabled();
-    });
-
-    it("Check admin events search and removal work", () => {
       sidebarPage.goToRealmSettings();
       cy.getId("rs-realm-events-tab").click();
       cy.getId("rs-admin-events-tab").click();
@@ -86,6 +79,17 @@ describe("Events tests", function () {
         .toggleSwitch(realmSettingsPage.enableAdminEvents)
         .save(realmSettingsPage.eventsAdminSave);
 
+      sidebarPage.goToEvents();
+      cy.getId("admin-events-tab").click();
+      sidebarPage.waitForPageLoad();
+      adminEventsTab.shouldHaveFormFields();
+    });
+
+    it("Check `search admin events` button disabled by default", () => {
+      adminEventsTab.shouldHaveSearchBtnDisabled();
+    });
+
+    it("Check admin events search and removal work", () => {
       sidebarPage.goToEvents();
       cy.getId("admin-events-tab").click();
       adminEventsTab.shouldDoAdminEventsSearchAndRemoveChips();
@@ -100,8 +104,8 @@ describe("Events tests", function () {
     });
   });
 
-  describe("Check more button opens auth and representation dialogs", function () {
+  describe("Check more button opens auth and representation dialogs", () => {
-    beforeEach(function () {
+    beforeEach(() => {
       keycloakBefore();
       loginPage.logIn();
       sidebarPage.goToEvents();
@@ -113,6 +117,7 @@ describe("Events tests", function () {
     });
 
     it("Check representation dialog opens and is not empty", () => {
+      sidebarPage.waitForPageLoad();
       adminEventsTab.shouldCheckRepDialogOpensAndIsNotEmpty();
     });
   });

cypress/integration/group_test.spec.ts

@@ -25,7 +25,7 @@ describe("Group test", () => {
   let groupName = "group";
 
   const clickGroup = (itemName: string) => {
-    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+    sidebarPage.waitForPageLoad();
     cy.get("table").contains(itemName).click();
 
     return this;
@@ -81,7 +81,7 @@ describe("Group test", () => {
       groupModal.open("no-groups-in-this-realm-empty-action");
       groupModal.fillGroupForm(groupName).clickCreate();
 
-      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+      sidebarPage.waitForPageLoad();
       groupModal.open().fillGroupForm(targetGroupName).clickCreate();
 
       listingPage.clickRowDetails(groupName).clickDetailMenu("Move to");
@@ -91,10 +91,10 @@ describe("Group test", () => {
       moveGroupModal.clickMove();
 
       masthead.checkNotificationMessage("Group moved");
-      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+      sidebarPage.waitForPageLoad();
       listingPage.itemExist(groupName, false);
       clickGroup(targetGroupName);
-      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+      sidebarPage.waitForPageLoad();
       listingPage.itemExist(groupName);
       sidebarPage.goToGroups();
       listingPage.deleteItem(targetGroupName);

cypress/integration/realm_settings_test.spec.ts

@@ -191,7 +191,7 @@ describe("Realm settings", () => {
       realmSettingsPage.addUserEvents(events).clickAdd();
       masthead.checkNotificationMessage("Successfully saved configuration");
       cy.wait(["@fetchConfig"]);
-      cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+      sidebarPage.waitForPageLoad();
 
       for (const event of events) {
         listingPage.searchItem(event, false).itemExist(event);

cypress/integration/users_test.spec.ts

@@ -28,7 +28,7 @@ describe("Group creation", () => {
   function createNewGroup() {
     groupName += "_" + (Math.random() + 1).toString(36).substring(7);
 
-    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+    sidebarPage.waitForPageLoad();
     groupModal.open().fillGroupForm(groupName).clickCreate();
 
     groupsList = [...groupsList, groupName];

cypress/support/pages/admin_console/SidebarPage.ts

@@ -101,4 +101,9 @@ export default class SidebarPage {
 
     return this;
   }
+
+  waitForPageLoad() {
+    cy.get(".pf-c-spinner__tail-ball").should("not.exist");
+    return this;
+  }
 }

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -370,13 +370,12 @@ export function KeycloakDataTable<T>({
     setRows([...data!]);
   };
 
+  const noData = !data || data.length === 0;
+  const searching = search !== "" || isSearching;
+
   return (
     <>
-      {((data && data.length > 0) ||
+      {(loading || !noData || searching) && (
-        search !== "" ||
-        isSearching ||
-        emptyState ||
-        loading) && (
         <PaginatingTableToolbar
           count={data?.length || 0}
           first={first}
@@ -396,7 +395,7 @@ export function KeycloakDataTable<T>({
           toolbarItem={toolbarItem}
           subToolbar={subToolbar}
         >
-          {!loading && data && data.length > 0 && (
+          {!loading && !noData && (
             <DataTable
               {...props}
               canSelectAll={canSelectAll}
@@ -411,25 +410,19 @@ export function KeycloakDataTable<T>({
               ariaLabelKey={ariaLabelKey}
             />
           )}
-          {!loading &&
+          {!loading && noData && searching && (
-            (!data || data.length === 0) &&
+            <ListEmptyState
-            (search !== "" || isSearching) && (
+              hasIcon={true}
-              <ListEmptyState
+              icon={icon}
-                hasIcon={true}
+              isSearchVariant={true}
-                icon={icon}
+              message={t("noSearchResults")}
-                isSearchVariant={true}
+              instructions={t("noSearchResultsInstructions")}
-                message={t("noSearchResults")}
+            />
-                instructions={t("noSearchResultsInstructions")}
+          )}
-              />
-            )}
           {loading && <Loading />}
         </PaginatingTableToolbar>
       )}
-      {!loading &&
+      {!loading && noData && !searching && emptyState}
-        (!data || data?.length === 0) &&
-        search === "" &&
-        !isSearching &&
-        emptyState}
     </>
   );
 }

src/realm-settings/LocalizationTab.tsx

@@ -111,7 +111,7 @@ export const LocalizationTab = ({
   const options = [
     <SelectGroup label={t("defaultLocale")} key="group1">
       {watchSupportedLocales
-        ?.filter((item) => item === realm?.defaultLocale)
+        ?.filter((item) => item === realm.defaultLocale)
         .map((locale) => (
           <SelectOption key={locale} value={locale}>
             {t(`allSupportedLocales.${locale}`)}
@@ -121,7 +121,7 @@ export const LocalizationTab = ({
     <Divider key="divider" />,
     <SelectGroup label={t("supportedLocales")} key="group2">
       {watchSupportedLocales
-        ?.filter((item) => item !== realm?.defaultLocale)
+        ?.filter((item) => item !== realm.defaultLocale)
         .map((locale) => (
           <SelectOption key={locale} value={locale}>
             {t(`allSupportedLocales.${locale}`)}
@@ -246,7 +246,7 @@ export const LocalizationTab = ({
                         isOpen={supportedLocalesOpen}
                         placeholderText={"Select locales"}
                       >
-                        {themeTypes?.login![0].locales.map(
+                        {themeTypes.login![0].locales.map(
                           (locale: string, idx: number) => (
                             <SelectOption
                               selected={true}
@@ -335,7 +335,6 @@ export const LocalizationTab = ({
           <div className="tableBorder">
             <KeycloakDataTable
               key={tableKey}
-              isSearching
               loader={selectMenuValueSelected ? tableLoader : loader}
               ariaLabelKey="realm-settings:localization"
               searchTypeComponent={