Remove close button from banner and move to a page action

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,7 +372,11 @@ export default defineComponent({
         this.resetCards();
         break;
 
-      case SET_LOGIN_ACTION:
+      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);