Remove close button from banner and move to a page action (#13255)

* Remove close button from banner and move to a page action

* Update home.vue to fix lint

* Update e2e tests and fix lint issue

* Ensure we wait for both PUTs

* Improve comments

* Change test order

* Improve e2e test

* Fix lint issue

* Improve e2e test reliability

* Fix lint

* Fix e2e test so it works for standard user

cypress/e2e/po/pages/home.po.ts

@@ -61,6 +61,14 @@ export default class HomePagePo extends PagePo {
     cy.wait(['@restoreBanners', '@restoreBanners']);
   }
 
+  toggleBanner() {
+    const pageActionsPo = new PageActions();
+
+    cy.intercept('PUT', 'v1/userpreferences/*').as('toggleBanner');
+    pageActionsPo.toggleBanner().click();
+    cy.wait('@toggleBanner');
+  }
+
   list(): HomeClusterListPo {
     return new HomeClusterListPo('[data-testid="sortable-table-list-container"]');
   }

cypress/e2e/po/side-bars/page-actions.po.ts

@@ -52,4 +52,12 @@ export default class PageActionsPo extends ComponentPo {
   restoreLink(): Cypress.Chainable {
     return this.links().last();
   }
+
+  /**
+   * Get show/hide banner button link
+   * @returns {Cypress.Chainable}
+   */
+  toggleBanner(): Cypress.Chainable {
+    return this.links().contains('Show/Hide Banner');
+  }
 }

cypress/e2e/tests/pages/generic/home.spec.ts

@@ -11,6 +11,31 @@ const homeClusterList = homePage.list();
 const provClusterList = new ClusterManagerListPagePo('local');
 const longClusterDescription = 'this-is-some-really-really-really-really-really-really-long-description';
 
+// Reset the home page card prefs, go the home page and ensure the page is fully loaded
+function goToHomePageAndSettle() {
+  // Reset the home page cards pref so that everything is shown
+  cy.setUserPreference({ 'home-page-cards': '{}' });
+
+  cy.intercept('GET', '/v1/provisioning.cattle.io.clusters?exclude=metadata.managedFields', {
+    statusCode: 200,
+    body:       {
+      count: 0,
+      data:  [],
+    },
+  }).as('fetchClustersHomePage');
+
+  // Go to the home page
+  HomePagePo.goToAndWaitForGet();
+  homePage.waitForPage();
+
+  // Wait for the page to settle - filter the cluster list ensures table is ready and page is ready
+  cy.wait('@fetchClustersHomePage');
+
+  // Wait for the cluster table to load and filter so there are no rows
+  homeClusterList.resourceTable().sortableTable().filter('random text');
+  homeClusterList.resourceTable().sortableTable().rowElements().should((el) => expect(el).to.contain.text('There are no rows which match your search query.'));
+}
+
 describe('Home Page', () => {
   it('Confirm correct number of settings requests made', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
     cy.login();
@@ -214,29 +239,42 @@ describe('Home Page', () => {
     });
 
     it('Can restore hidden cards', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
-    /**
-     * Hide home page banners
-     * Click the restore link
-     * Verify banners display on home page
-     */
-      HomePagePo.navTo();
-      homePage.waitForPage();
-      homePage.restoreAndWait();
+      goToHomePageAndSettle();
 
+      // Banner graphic and the login banner should be visible
+      homePage.bannerGraphic().graphicBanner().should('exist');
       homePage.bannerGraphic().graphicBanner().should('be.visible');
-      homePage.bannerGraphic().graphicBannerCloseButton();
-      homePage.bannerGraphic().graphicBanner().should('not.exist');
-
       homePage.getLoginPageBanner().checkVisible();
+
+      // Close the banner for changing login view
       homePage.getLoginPageBanner().closeButton();
       homePage.getLoginPageBanner().checkNotExists();
 
+      // Restore the cards should bring back the login banner
       homePage.restoreAndWait();
 
-      homePage.bannerGraphic().graphicBanner().should('be.visible');
+      // Check login banner is visible
       homePage.getLoginPageBanner().checkVisible();
     });
 
+    it('Can toggle banner graphic', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
+      goToHomePageAndSettle();
+
+      // Banner graphic and the login banner should be visible
+      homePage.bannerGraphic().graphicBanner().should('exist');
+      homePage.bannerGraphic().graphicBanner().should('be.visible');
+
+      // Hide the main banner graphic
+      homePage.toggleBanner();
+
+      // Banner graphic and the login banner should be visible
+      homePage.bannerGraphic().graphicBanner().should('not.exist');
+
+      // Show the banner graphic
+      homePage.toggleBanner();
+      homePage.bannerGraphic().graphicBanner().should('exist');
+    });
+
     it('Can use the Manage, Import Existing, and Create buttons', { tags: ['@generic', '@adminUser', '@standardUser'] }, () => {
     /**
      * Click 'Manage' button and verify user lands on the Cluster Management page

cypress/globals.d.ts

@@ -106,6 +106,8 @@ declare global {
       tableRowsPerPageAndNamespaceFilter(rows: number, clusterName: string, groupBy: string, namespaceFilter: string)
       tableRowsPerPageAndPreferences(rows: number, preferences: { clusterName: string, groupBy: string, namespaceFilter: string, allNamespaces: string}, iteration?: number)
 
+      setUserPreference(prefs: any);
+
       /**
        * update namespace filter
        * @param clusterName

cypress/support/commands/rancher-api-commands.ts

@@ -1085,3 +1085,17 @@ Cypress.Commands.add('tableRowsPerPageAndNamespaceFilter', (rows: number, cluste
     clusterName, groupBy, namespaceFilter
   });
 });
+
+// Update the user preferences by over-writing the given prefrence
+Cypress.Commands.add('setUserPreference', (prefs: any) => {
+  return cy.getRancherResource('v3', 'users?me=true').then((resp: Cypress.Response<any>) => {
+    const update = resp.body.data[0];
+
+    update.data = {
+      ...update.data,
+      ...prefs
+    };
+
+    return cy.setRancherResource('v1', 'userpreferences', update.id, update);
+  });
+});

shell/assets/translations/en-us.yaml

@@ -224,6 +224,7 @@ nav:
   header:
     setLoginPage: Set as login page
     restoreCards: Restore hidden cards
+    showHideBanner: Show/Hide Banner
   userMenu:
     preferences: Preferences
     accountAndKeys: Account & API Keys

shell/components/BannerGraphic.vue

@@ -51,19 +51,6 @@ export default {
       data-testid="banner-title"
       class="title"
     />
-    <div
-      v-if="pref"
-      class="close-button"
-      data-testid="graphic-banner-close"
-      tabindex="0"
-      :aria-label="t('generic.close')"
-      role="button"
-      @click="hide()"
-      @keyup.enter="hide()"
-      @keyup.space="hide()"
-    >
-      <i class="icon icon-close" />
-    </div>
   </div>
 </template>
 
@@ -74,35 +61,6 @@ export default {
   .banner-graphic {
     position: relative;
 
-    .close-button {
-      position: absolute;
-      visibility: hidden;
-
-      &:focus-visible {
-        @include focus-outline;
-        outline-offset: 2px;
-      }
-    }
-
-    &:hover .close-button {
-      visibility: visible;
-      position: absolute;
-      right: 4px;
-      top: 4px;
-      font-size: 16px;
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      opacity: 0.4;
-
-      &:hover {
-        background-color: var(--accent-btn-hover);
-        color: var(--accent-btn-hover-text);
-        opacity: 1;
-      }
-    }
-
     .graphic {
       display: flex;
       flex-direction: column;

shell/config/page-actions.js

@@ -1,3 +1,4 @@
 export const RESET_CARDS_ACTION = 'reset-homepage-cards';
 export const SET_LOGIN_ACTION = 'set-as-login';
 export const ADD_CUSTOM_NAV_LINK = 'add-custom-nav-link';
+export const SHOW_HIDE_BANNER_ACTION = 'toggle-homepage-banner';

shell/pages/home.vue

@@ -23,7 +23,7 @@ import { filterHiddenLocalCluster, filterOnlyKubernetesClusters, paginationFilte
 import TabTitle from '@shell/components/TabTitle.vue';
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 
-import { RESET_CARDS_ACTION, SET_LOGIN_ACTION } from '@shell/config/page-actions';
+import { RESET_CARDS_ACTION, SET_LOGIN_ACTION, SHOW_HIDE_BANNER_ACTION } from '@shell/config/page-actions';
 import { STEVE_NAME_COL, STEVE_STATE_COL } from '@shell/config/pagination-table-headers';
 import { PaginationParamFilter, FilterArgs, PaginationFilterField, PaginationArgs } from '@shell/types/store/pagination.types';
 import ProvCluster from '@shell/models/provisioning.cattle.io.cluster';
@@ -57,6 +57,10 @@ export default defineComponent({
           action:   SET_LOGIN_ACTION
         },
         { separator: true },
+        {
+          labelKey: 'nav.header.showHideBanner',
+          action:   SHOW_HIDE_BANNER_ACTION
+        },
         {
           labelKey: 'nav.header.restoreCards',
           action:   RESET_CARDS_ACTION
@@ -368,6 +372,10 @@ export default defineComponent({
         this.resetCards();
         break;
 
+      case SHOW_HIDE_BANNER_ACTION:
+        this.toggleBanner();
+        break;
+
       case SET_LOGIN_ACTION:
         this.afterLoginRoute = 'home';
         break;
@@ -407,10 +415,27 @@ export default defineComponent({
     },
 
     async resetCards() {
-      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value: {} });
+      const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
+
+      delete value.setLoginPage;
+
+      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
+
       await this.$store.dispatch('prefs/set', { key: READ_WHATS_NEW, value: '' });
     },
 
+    async toggleBanner() {
+      const value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS) || {};
+
+      if (value.welcomeBanner) {
+        delete value.welcomeBanner;
+      } else {
+        value.welcomeBanner = true;
+      }
+
+      await this.$store.dispatch('prefs/set', { key: HIDE_HOME_PAGE_CARDS, value });
+    },
+
     async closeSetLoginBanner(retry = 0) {
       let value = this.$store.getters['prefs/get'](HIDE_HOME_PAGE_CARDS);