@rancher/shell 3.0.2-rc.2 → 3.0.2-rc.3

package/components/form/ResourceTabs/index.vue

@@ -8,10 +8,14 @@ import Tab from '@shell/components/Tabbed/Tab';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Conditions from '@shell/components/form/Conditions';
 import { EVENT } from '@shell/config/types';
-import SortableTable from '@shell/components/SortableTable';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
 import { isConditionReadyAndWaiting } from '@shell/plugins/dashboard-store/resource-class';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { MESSAGE, REASON } from '@shell/config/table-headers';
+import { STEVE_EVENT_LAST_SEEN, STEVE_EVENT_TYPE, STEVE_NAME_COL } from '@shell/config/pagination-table-headers';
+import { headerFromSchemaColString } from '@shell/store/type-map.utils';
 
 export default {
 
@@ -21,7 +25,7 @@ export default {
     Tabbed,
     Tab,
     Conditions,
-    SortableTable,
+    PaginatedResourceTable,
     RelatedResources,
   },
 
@@ -69,14 +73,25 @@ export default {
 
   data() {
     const inStore = this.$store.getters['currentStore'](EVENT);
+    const eventSchema = this.$store.getters[`${ inStore }/schemaFor`](EVENT); // @TODO be smarter about which resources actually ever have events
 
     return {
-      hasEvents:      this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
-      allEvents:      [],
-      selectedTab:    this.defaultTab,
-      didLoadEvents:  false,
+      eventSchema,
+      EVENT,
+      selectedTab:       this.defaultTab,
       inStore,
-      showConditions: false,
+      showConditions:    false,
+      paginationHeaders: [
+        STEVE_EVENT_LAST_SEEN,
+        STEVE_EVENT_TYPE,
+        REASON,
+        headerFromSchemaColString('Subobject', eventSchema, this.$store.getters, true),
+        headerFromSchemaColString('Source', eventSchema, this.$store.getters, true),
+        MESSAGE,
+        headerFromSchemaColString('First Seen', eventSchema, this.$store.getters, true),
+        headerFromSchemaColString('Count', eventSchema, this.$store.getters, true),
+        STEVE_NAME_COL,
+      ]
     };
   },
 
@@ -92,7 +107,7 @@ export default {
 
   computed: {
     showEvents() {
-      return this.isView && this.needEvents && this.hasEvents;
+      return this.isView && this.needEvents && this.eventSchema;
     },
     showRelated() {
       return this.isView && this.needRelated;
@@ -128,18 +143,6 @@ export default {
         },
       ];
     },
-    events() {
-      return this.allEvents.filter((event) => {
-        return event.involvedObject?.uid === this.value?.metadata?.uid;
-      }).map((event) => {
-        return {
-          reason:    (`${ event.reason || this.t('generic.unknown') }${ event.count > 1 ? ` (${ event.count })` : '' }`).trim(),
-          message:   event.message || this.t('generic.unknown'),
-          date:      event.lastTimestamp || event.firstTimestamp || event.metadata.creationTimestamp,
-          eventType: event.eventType
-        };
-      });
-    },
     conditionsHaveIssues() {
       if (this.showConditions) {
         return this.value.status?.conditions?.filter((cond) => !isConditionReadyAndWaiting(cond)).some((cond) => cond.error);
@@ -153,15 +156,6 @@ export default {
     // Ensures we only fetch events and show the table when the events tab has been activated
     tabChange(neu) {
       this.selectedTab = neu?.selectedName;
-
-      if (!this.didLoadEvents && this.selectedTab === 'events') {
-        const inStore = this.$store.getters['currentStore'](EVENT);
-
-        this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }).then((events) => {
-          this.allEvents = events;
-          this.didLoadEvents = true;
-        });
-      }
     },
 
     /**
@@ -180,6 +174,54 @@ export default {
         this.showConditions = this.$store.getters[`${ this.inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
       }
     },
+
+    /**
+     * Filter out hidden repos from list of all repos
+     */
+    filterEventsLocal(rows) {
+      return rows.filter((event) => event.involvedObject?.uid === this.value?.metadata?.uid);
+    },
+
+    /**
+     * Filter out hidden repos via api
+     *
+     * pagination: PaginationArgs
+     * returns: PaginationArgs
+     */
+    filterEventsApi(pagination) {
+      if (!pagination.filters) {
+        pagination.filters = [];
+      }
+
+      const field = `involvedObject.uid`; // Pending API Support - https://github.com/rancher/rancher/issues/48603
+
+      // of type PaginationParamFilter
+      let existing = null;
+
+      for (let i = 0; i < pagination.filters.length; i++) {
+        const filter = pagination.filters[i];
+
+        if (!!filter.fields.find((f) => f.field === field)) {
+          existing = filter;
+          break;
+        }
+      }
+
+      const required = PaginationParamFilter.createSingleField({
+        field,
+        exact:  true,
+        value:  this.value.metadata.uid,
+        equals: true
+      });
+
+      if (!!existing) {
+        Object.assign(existing, required);
+      } else {
+        pagination.filters.push(required);
+      }
+
+      return pagination;
+    }
   }
 };
 </script>
@@ -208,15 +250,16 @@ export default {
       name="events"
       :weight="-2"
     >
-      <SortableTable
+      <!-- namespaced: false given we don't want the default handling of namespaced resource (apply header filter)  -->
+      <PaginatedResourceTable
         v-if="selectedTab === 'events'"
-        :rows="events"
+        :schema="eventSchema"
+        :local-filter="filterEventsLocal"
+        :api-filter="filterEventsApi"
+        :use-query-params-for-simple-filtering="false"
         :headers="eventHeaders"
-        key-field="id"
-        :search="false"
-        :table-actions="false"
-        :row-actions="false"
-        default-sort-by="date"
+        :paginationHeaders="paginationHeaders"
+        :namespaced="false"
       />
     </Tab>
 

package/components/form/SecretSelector.vue

@@ -70,7 +70,7 @@ export default {
       secrets:            null,
       SECRET,
       allSecretsSettings: {
-        mapResult: (secrets) => {
+        updateResources: (secrets) => {
           const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
           const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
 
@@ -81,7 +81,7 @@ export default {
       },
       paginateSecretsSetting: {
         requestSettings: this.paginatePageOptions,
-        mapResult:       (secrets) => {
+        updateResources: (secrets) => {
           const mappedSecrets = this.mapSecrets(secrets);
 
           this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here

package/components/form/__tests__/KeyValue.test.ts

@@ -127,7 +127,7 @@ describe('component: KeyValue', () => {
     expect(secondKeyInput.exists()).toBe(false);
     expect(secondValueInput.exists()).toBe(false);
 
-    const addButton = wrapper.find('[data-testid="add_link_button"]');
+    const addButton = wrapper.find('[data-testid="add_row_item_button"]');
 
     addButton.trigger('click');
     await nextTick();

package/components/formatter/FleetClusterSummaryGraph.vue

@@ -11,7 +11,7 @@ export default {
       required: true
     },
 
-    clusterLabel: {
+    clusterId: {
       type:     String,
       required: true
     }
@@ -22,6 +22,6 @@ export default {
 <template>
   <FleetSummaryGraph
     :row="row"
-    :clusterLabel="clusterLabel"
+    :clusterId="clusterId"
   />
 </template>

package/components/formatter/FleetSummaryGraph.vue

@@ -14,7 +14,7 @@ export default {
       required: true
     },
 
-    clusterLabel: {
+    clusterId: {
       type:     String,
       required: false,
       default:  null,
@@ -23,10 +23,8 @@ export default {
 
   computed: {
     summary() {
-      if (this.clusterLabel) {
-        return this.row.clusterResourceStatus.find((x) => {
-          return x.clusterLabel === this.clusterLabel;
-        })?.status.resourceCounts || {};
+      if (this.clusterId) {
+        return this.row.statusResourceCountsForCluster(this.clusterId);
       }
 
       return this.row.status?.resourceCounts || {};
@@ -37,7 +35,8 @@ export default {
     },
 
     stateParts() {
-      const keys = Object.keys(this.summary).filter((x) => !x.startsWith('desired'));
+      const summary = this.summary;
+      const keys = Object.keys(summary).filter((x) => !x.startsWith('desired'));
 
       const out = keys.map((key) => {
         const textColor = colorForState(key);
@@ -46,7 +45,7 @@ export default {
           label: ucFirst(key),
           color: textColor.replace(/text-/, 'bg-'),
           textColor,
-          value: this.summary[key],
+          value: summary[key],
           sort:  stateSort(textColor, key),
         };
       }).filter((x) => x.value > 0);

package/components/formatter/WorkloadHealthScale.vue

@@ -182,14 +182,21 @@ export default {
     <div
       id="trigger"
       class="hs-popover__trigger"
+      aria-role="button"
+      tabindex="0"
       :class="{expanded}"
+      :aria-roledescription="t('workload.scaleWorkloads')"
+      :aria-label="t('workload.healthScaleToggle')"
+      :aria-expanded="expanded"
       @click="expanded = !expanded"
+      @keyup.enter.space="expanded = !expanded"
     >
       <ProgressBarMulti
         v-if="parts"
         class="health"
         :values="parts"
         :show-zeros="true"
+        :aria-describedby="t('workload.healthWorkloads')"
       />
       <i :class="{icon: true, 'icon-chevron-up': expanded, 'icon-chevron-down': !expanded}" />
     </div>

package/components/nav/Group.vue

@@ -211,26 +211,40 @@ export default {
       v-if="showHeader"
       class="header"
       :class="{'active': isOverview, 'noHover': !canCollapse}"
+      role="button"
+      tabindex="0"
+      :aria-label="group.labelDisplay || group.label || ''"
       @click="groupSelected()"
+      @keyup.enter="groupSelected()"
+      @keyup.space="groupSelected()"
     >
       <slot name="header">
         <router-link
           v-if="hasOverview"
           :to="group.children[0].route"
           :exact="group.children[0].exact"
+          :tabindex="-1"
         >
-          <h6 v-clean-html="group.labelDisplay || group.label" />
+          <h6>
+            <span v-clean-html="group.labelDisplay || group.label" />
+          </h6>
         </router-link>
         <h6
           v-else
-          v-clean-html="group.labelDisplay || group.label"
-        />
+        >
+          <span v-clean-html="group.labelDisplay || group.label" />
+        </h6>
       </slot>
       <i
         v-if="!onlyHasOverview && canCollapse"
-        class="icon toggle"
+        class="icon toggle toggle-accordion"
         :class="{'icon-chevron-right': !isExpanded, 'icon-chevron-down': isExpanded}"
+        role="button"
+        tabindex="0"
+        :aria-label="t('nav.ariaLabel.collapseExpand')"
         @click="peek($event, true)"
+        @keyup.enter="peek($event, true)"
+        @keyup.space="peek($event, true)"
       />
     </div>
     <ul
@@ -288,6 +302,7 @@ export default {
     cursor: pointer;
     color: var(--body-text);
     height: 33px;
+    outline: none;
 
     H6 {
       color: var(--body-text);
@@ -315,6 +330,17 @@ export default {
 
   .accordion {
     .header {
+      &:focus-visible {
+        h6 span {
+          @include focus-outline;
+          outline-offset: 2px;
+        }
+      }
+      .toggle-accordion:focus-visible {
+        @include focus-outline;
+        outline-offset: -6px;
+      }
+
       &.active {
         color: var(--primary-hover-text);
         background-color: var(--primary-hover-bg);

package/components/nav/Header.vue

@@ -24,6 +24,12 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
 import HeaderPageActionMenu from './HeaderPageActionMenu.vue';
+import {
+  RcDropdown,
+  RcDropdownItem,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
 
 export default {
 
@@ -39,6 +45,10 @@ export default {
     IconOrSvg,
     AppModal,
     HeaderPageActionMenu,
+    RcDropdown,
+    RcDropdownItem,
+    RcDropdownSeparator,
+    RcDropdownTrigger,
   },
 
   props: {
@@ -641,27 +651,18 @@ export default {
         </button>
       </div>
 
-      <header-page-action-menu v-if="showPageActions" />
-
-      <div class="header-spacer" />
-      <div
-        v-if="showUserMenu"
-        class="user user-menu"
-        data-testid="nav_header_showUserMenu"
-        tabindex="0"
-        @blur="showMenu(false)"
-        @click="showMenu(true)"
-        @focus.capture="showMenu(true)"
-      >
-        <v-dropdown
-          :triggers="[]"
-          :shown="isUserMenuOpen"
-          :autoHide="false"
-          :flip="false"
-          :container="false"
-          :placement="'bottom-end'"
+      <div class="center-self">
+        <header-page-action-menu v-if="showPageActions" />
+        <rc-dropdown
+          v-if="showUserMenu"
+          :aria-label="t('nav.userMenu.label')"
         >
-          <div class="user-image text-right hand">
+          <rc-dropdown-trigger
+            ghost
+            small
+            data-testid="nav_header_showUserMenu"
+            :aria-label="t('nav.userMenu.button.label')"
+          >
             <img
               v-if="principal && principal.avatarSrc"
               :src="principal.avatarSrc"
@@ -673,88 +674,47 @@ export default {
               v-else
               class="icon icon-user icon-3x avatar"
             />
-          </div>
-          <template #popper>
-            <div
-              class="user-menu"
+          </rc-dropdown-trigger>
+          <template #dropdownCollection>
+            <template v-if="authEnabled">
+              <div class="user-info">
+                <div class="user-name">
+                  <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
+                </div>
+                <div class="text-small">
+                  <template v-if="principal.loginName !== principal.name">
+                    {{ principal.name }}
+                  </template>
+                </div>
+              </div>
+              <rc-dropdown-separator />
+            </template>
+            <rc-dropdown-item
+              v-if="showPreferencesLink"
+              @click="$router.push({ name: 'prefs'})"
             >
-              <ul
-                class="list-unstyled dropdown"
-                data-testid="user-menu-dropdown"
-                @click.stop="showMenu(false)"
-              >
-                <li
-                  v-if="authEnabled"
-                  class="user-info"
-                >
-                  <div class="user-name">
-                    <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
-                  </div>
-                  <div class="text-small pt-5 pb-5">
-                    <template v-if="principal.loginName !== principal.name">
-                      {{ principal.name }}
-                    </template>
-                  </div>
-                </li>
-                <router-link
-                  v-if="showPreferencesLink"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="{name: 'prefs'}"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a :href="href">{{ t('nav.userMenu.preferences') }}</a>
-                  </li>
-                </router-link>
-                <router-link
-                  v-if="showAccountAndApiKeyLink"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="{name: 'account'}"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a :href="href">{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
-                  </li>
-                </router-link>
-                <!-- SLO modal -->
-                <li
-                  v-if="authEnabled && shouldShowSloLogoutModal"
-                  class="user-menu-item no-link"
-                  @click="showSloModal"
-                  @keypress.enter="showSloModal"
-                >
-                  <span>{{ t('nav.userMenu.logOut') }}</span>
-                </li>
-                <!-- logout -->
-                <router-link
-                  v-else-if="authEnabled"
-                  v-slot="{ href, navigate }"
-                  custom
-                  :to="generateLogoutRoute"
-                >
-                  <li
-                    class="user-menu-item"
-                    @click="navigate"
-                    @keypress.enter="navigate"
-                  >
-                    <a
-                      :href="href"
-                      @blur="showMenu(false)"
-                    >{{ t('nav.userMenu.logOut') }}</a>
-                  </li>
-                </router-link>
-              </ul>
-            </div>
+              {{ t('nav.userMenu.preferences') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="showAccountAndApiKeyLink"
+              @click="$router.push({ name: 'account'})"
+            >
+              {{ t('nav.userMenu.accountAndKeys', {}, true) }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="authEnabled && shouldShowSloLogoutModal"
+              @click="showSloModal"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-else-if="authEnabled"
+              @click="$router.push(generateLogoutRoute)"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
           </template>
-        </v-dropdown>
+        </rc-dropdown>
       </div>
     </div>
   </header>
@@ -957,7 +917,7 @@ export default {
         width: 40px;
       }
 
-      :deep() > div > .btn.role-tertiary {
+      :deep() div .btn.role-tertiary {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--header-btn-bg);
@@ -1010,8 +970,9 @@ export default {
         position: relative;
       }
 
-      .user.user-menu {
-        padding-top: 9.5px;
+      .avatar-round {
+        border: 0;
+        border-radius: 50%;
       }
 
       > .user {
@@ -1047,11 +1008,14 @@ export default {
         }
 
         background-color: var(--header-bg);
+      }
 
-        .avatar-round {
-          border: 0;
-          border-radius: 50%;
-        }
+      > .center-self {
+        align-self: center;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        padding-right: 1rem;
       }
     }
   }
@@ -1063,14 +1027,17 @@ export default {
         justify-content: space-between;
         padding: 10px;
       }
+    }
+  }
 
-      &.user-info {
-        display: block;
-        margin-bottom: 10px;
-        padding: 10px 20px;
-        border-bottom: solid 1px var(--border);
-        min-width: 200px;
-      }
+  div {
+    &.user-info {
+      padding: 0 8px;
+      margin: 0 9px;
+      min-width: 200px;
+      display: flex;
+      gap: 5px;
+      flex-direction: column;
     }
   }
 
@@ -1152,4 +1119,5 @@ export default {
       }
     }
   }
+
 </style>