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

package/components/nav/HeaderPageActionMenu.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
-import { useClickOutside } from '@shell/composables/useClickOutside';
+import {
+  RcDropdown,
+  RcDropdownItem,
+  RcDropdownSeparator,
+  RcDropdownTrigger
+} from '@components/RcDropdown';
 
 const isPageActionMenuOpen = ref(false);
 
@@ -15,141 +20,32 @@ const pageAction = (action: string) => {
   store.dispatch('handlePageAction', action);
   showPageActionsMenu(false);
 };
-
-const target = ref(null);
-
-useClickOutside(target, () => showPageActionsMenu(false));
-
-const handleBlurEvent = (event: KeyboardEvent) => {
-  if (event.key === 'Tab') {
-    showPageActionsMenu(false);
-  }
-};
 </script>
 
 <template>
-  <v-dropdown
-    class="actions"
-    :triggers="[]"
-    :shown="isPageActionMenuOpen"
-    :autoHide="false"
-    :flip="false"
-    :placement="'bottom-end'"
-    :distance="-6"
-    :container="'.page-actions'"
-  >
-    <i
+  <rc-dropdown :aria-label="t('nav.actionMenu.label')">
+    <rc-dropdown-trigger
+      tertiary
       data-testid="page-actions-menu"
-      class="icon icon-actions"
-      tabindex="0"
-      @keydown="handleBlurEvent"
-      @click="showPageActionsMenu(true)"
-      @focus.capture="showPageActionsMenu(true)"
-    />
-
-    <template #popper>
-      <div
-        ref="target"
-        class="user-menu"
+      :aria-label="t('nav.actionMenu.button.label')"
+    >
+      <i class="icon icon-actions" />
+    </rc-dropdown-trigger>
+    <template #dropdownCollection>
+      <template
+        v-for="(a) in pageActions"
+        :key="a.label"
       >
-        <ul
-          data-testid="page-actions-dropdown"
-          class="list-unstyled dropdown"
+        <rc-dropdown-item
+          v-if="!a.separator"
+          @click="pageAction(a)"
         >
-          <li
-            v-for="(a) in pageActions"
-            :key="a.label"
-            class="user-menu-item"
-          >
-            <a
-              v-if="!a.separator"
-              @click="pageAction(a)"
-            >{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
-            <div
-              v-else
-              class="menu-separator"
-            >
-              <div class="menu-separator-line" />
-            </div>
-          </li>
-        </ul>
-      </div>
+          {{ a.labelKey ? t(a.labelKey) : a.label }}
+        </rc-dropdown-item>
+        <rc-dropdown-separator
+          v-else
+        />
+      </template>
     </template>
-  </v-dropdown>
-  <div class="page-actions">
-    <!--Empty container for mounting popper content-->
-  </div>
+  </rc-dropdown>
 </template>
-
-<style lang="scss" scoped>
-  .page-actions :deep(.v-popper__popper) {
-    .v-popper__wrapper {
-      .v-popper__arrow-container {
-        display: none;
-      }
-
-      .v-popper__inner {
-        padding: 10px 0 10px 0;
-      }
-    }
-  }
-
-  .icon-actions:focus {
-    outline: 0;
-  }
-
-  .user-menu-item {
-    a, &.no-link > span {
-      cursor: pointer;
-      padding: 0px 10px;
-
-      &:hover {
-        background-color: var(--dropdown-hover-bg);
-        color: var(--dropdown-hover-text);
-        text-decoration: none;
-      }
-
-      // When the menu item is focused, pop the margin and compensate the padding, so that
-      // the focus border appears within the menu
-      &:focus {
-        margin: 0 2px;
-        padding: 10px 8px;
-      }
-    }
-
-    &.no-link > span {
-      display: flex;
-      justify-content: space-between;
-      padding: 10px;
-      color: var(--link);
-    }
-
-    div.menu-separator {
-      cursor: default;
-      padding: 4px 0;
-
-      .menu-separator-line {
-        background-color: var(--border);
-        height: 1px;
-      }
-    }
-  }
-
-  .list-unstyled {
-    li {
-      a {
-        display: flex;
-        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;
-      }
-    }
-  }
-</style>

package/components/nav/NamespaceFilter.vue

@@ -1008,7 +1008,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                color: var(--dropdown-hover-bg);
+                color: var(--primary);
               }
             }
 

package/components/nav/Type.vue

@@ -118,7 +118,10 @@ export default {
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
       </TabTitle>
       <a
+        role="link"
+        :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
+        class="type-link"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
@@ -161,9 +164,11 @@ export default {
     data-testid="link-type"
   >
     <a
+      role="link"
       :href="type.link"
       :target="type.target"
       rel="noopener noreferrer nofollow"
+      :aria-label="type.label"
     >
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
@@ -178,6 +183,16 @@ export default {
     margin-right: 4px;
   }
 
+  .type-link:focus-visible span.label {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
+
+  .nav-link a:focus-visible .label {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
+
   .child {
     margin: 0 var(--outline) 0 0;
 

package/composables/focusTrap.ts

@@ -0,0 +1,68 @@
+/**
+ * focusTrap is a composable based on the "focus-trap" package that allows us to implement focus traps
+ * on components for keyboard navigation is a safe and reusable way
+ */
+import { watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { createFocusTrap, FocusTrap } from 'focus-trap';
+
+export function getFirstFocusableElement(element:any = document):any {
+  const focusableElements = element.querySelectorAll(
+    'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+  );
+  const filteredFocusableElements:any = [];
+
+  focusableElements.forEach((el:any) => {
+    if (!el.hasAttribute('disabled')) {
+      filteredFocusableElements.push(el);
+    }
+  });
+
+  return filteredFocusableElements.length ? filteredFocusableElements[0] : document.body;
+}
+
+export const DEFAULT_FOCUS_TRAP_OPTS = {
+  escapeDeactivates: true,
+  allowOutsideClick: true
+};
+
+export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  onMounted(() => {
+    focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+    focusTrapInstance = createFocusTrap(focusEl, opts);
+
+    nextTick(() => {
+      focusTrapInstance.activate();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+        focusTrapInstance = createFocusTrap(focusEl, opts);
+
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    } else if (!neu && Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}

package/config/home-links.js

@@ -33,9 +33,11 @@ const DEFAULT_LINKS = [
   },
 ];
 
-const COLLECTIVE_LINK = {
-  key:     'suseCollective',
-  value:   'https://susecollective.suse.com/join/prime',
+const COLLECTIVE_LINK_ID = 'suseCollective';
+
+const APP_COLLECTION_LINK = {
+  key:     'appCo',
+  value:   'https://apps.rancher.io/',
   enabled: true,
 };
 
@@ -55,9 +57,12 @@ const CN_FORUMS_LINK = {
 // We add a version attribute to the setting so we know what has been migrated and which version of the setting we have
 export const CUSTOM_LINKS_VERSION = 'v1';
 
-// Version with collective added (Prime)
+// Version with SUSE Collective link added (Prime)
 export const CUSTOM_LINKS_COLLECTIVE_VERSION = 'v1.1';
 
+// Version with Application Collective added (Prime)
+export const CUSTOM_LINKS_APP_CO_VERSION = 'v1.2';
+
 // Fetch the settings required for the links, taking into account legacy settings if we have not migrated
 export async function fetchLinks(store, hasSupport, isSupportPage, t) {
   let uiLinks = {};
@@ -75,23 +80,26 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
 
   // If uiLinks is set and has the correct version, then we are okay, otherwise we need to migrate from the old settings
   if (uiLinks?.version?.startsWith(CUSTOM_LINKS_VERSION)) {
-    // v1 > v1.1 migration
-    if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
-      uiLinks.version = CUSTOM_LINKS_COLLECTIVE_VERSION;
+    // v1 or v1.1 > v1.2 migration
+    if (uiLinks?.version === CUSTOM_LINKS_VERSION || uiLinks?.version === CUSTOM_LINKS_COLLECTIVE_VERSION) {
+      uiLinks.version = CUSTOM_LINKS_APP_CO_VERSION;
 
       // Add collective link so that it is enabled by default
-      if (!uiLinks.defaults.includes(COLLECTIVE_LINK.key)) {
-        uiLinks.defaults.push(COLLECTIVE_LINK.key);
+      if (!uiLinks.defaults.includes(APP_COLLECTION_LINK.key)) {
+        uiLinks.defaults.push(APP_COLLECTION_LINK.key);
       }
+
+      // Delete the SUSE Collective link if it is there since it has been removed
+      uiLinks.defaults = uiLinks.defaults.filter((link) => link !== COLLECTIVE_LINK_ID);
     }
 
     // Map out the default settings, as we only store keys of the ones to show
     if (uiLinks.defaults) {
       const defaults = [...DEFAULT_LINKS];
 
-      // Add prime link if necessary
+      // Add Prime link if necessary
       if (isRancherPrime()) {
-        defaults.push(COLLECTIVE_LINK);
+        defaults.push(APP_COLLECTION_LINK);
       }
 
       // Map the link name stored to the default link, if it exists
@@ -115,9 +123,9 @@ export async function fetchLinks(store, hasSupport, isSupportPage, t) {
     custom:   []
   };
 
-  // Add prime link if necessary
+  // Add prime link (application collection) if necessary
   if (isRancherPrime()) {
-    links.defaults.push(COLLECTIVE_LINK);
+    links.defaults.push(APP_COLLECTION_LINK);
   }
 
   // There are two legacy settings:

package/config/labels-annotations.js

@@ -112,6 +112,8 @@ export const FLEET = {
   CLUSTER_DISPLAY_NAME: 'management.cattle.io/cluster-display-name',
   CLUSTER_NAME:         'management.cattle.io/cluster-name',
   BUNDLE_ID:            'fleet.cattle.io/bundle-id',
+  BUNDLE_NAME:          'fleet.cattle.io/bundle-name',
+  BUNDLE_NAMESPACE:     'fleet.cattle.io/bundle-namespace',
   MANAGED:              'fleet.cattle.io/managed',
   CLUSTER_NAMESPACE:    'fleet.cattle.io/cluster-namespace',
   CLUSTER:              'fleet.cattle.io/cluster'

package/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';

package/config/pagination-table-headers.js

@@ -1,5 +1,7 @@
 import {
-  STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT
+  STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT,
+  EVENT_LAST_SEEN_TIME,
+  EVENT_TYPE
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -52,6 +54,18 @@ export const STEVE_EVENT_OBJECT = {
   search: 'involvedObject.kind',
 };
 
+export const STEVE_EVENT_LAST_SEEN = {
+  ...EVENT_LAST_SEEN_TIME,
+  value: 'metadata.fields.0',
+  sort:  'metadata.fields.0',
+};
+
+export const STEVE_EVENT_TYPE = {
+  ...EVENT_TYPE,
+  value: '_type',
+  sort:  '_type',
+};
+
 export const STEVE_LIST_GROUPS = [{
   tooltipKey: 'resourceTable.groupBy.none',
   icon:       'icon-list-flat',

package/config/product/explorer.js

@@ -20,12 +20,13 @@ import {
   STORAGE_CLASS_PROVISIONER, PERSISTENT_VOLUME_SOURCE,
   HPA_REFERENCE, MIN_REPLICA, MAX_REPLICA, CURRENT_REPLICA,
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, LAST_USED, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
-  DURATION, MESSAGE, REASON, LAST_SEEN_TIME, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA
+  DURATION, MESSAGE, REASON, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA,
+  EVENT_LAST_SEEN_TIME
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
 import {
-  STEVE_AGE_COL, STEVE_EVENT_OBJECT, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
+  STEVE_AGE_COL, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
@@ -321,23 +322,12 @@ export function init(store) {
     ]
   );
 
-  const eventLastSeenTime = {
-    ...LAST_SEEN_TIME,
-    defaultSort: true,
-  };
-
   headers(EVENT,
-    [STATE, eventLastSeenTime, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL],
+    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL],
     [
-      STEVE_STATE_COL, {
-        ...eventLastSeenTime,
-        value: 'metadata.fields.0',
-        sort:  'metadata.fields.0',
-      }, {
-        ...EVENT_TYPE,
-        value: '_type',
-        sort:  '_type',
-      },
+      STEVE_STATE_COL,
+      STEVE_EVENT_LAST_SEEN,
+      STEVE_EVENT_TYPE,
       REASON,
       STEVE_EVENT_OBJECT,
       'Subobject',

package/config/table-headers.js

@@ -515,6 +515,12 @@ export const LAST_SEEN_TIME = {
   sort:     'lastTimestamp:desc',
   tooltip:  'tableHeaders.lastSeenTooltip'
 };
+
+export const EVENT_LAST_SEEN_TIME = {
+  ...LAST_SEEN_TIME,
+  defaultSort: true,
+};
+
 export const LAST_HEARTBEAT_TIME = {
   name:      'lastHeartbeatTime',
   labelKey:  'tableHeaders.lastSeen',

package/config/version.js

@@ -1,7 +1,11 @@
 /**
  * Store version data retrieved from the backend /rancherversion API
  */
-let _versionData = { RancherPrime: 'false' };
+let _versionData = {
+  Version:      '',
+  RancherPrime: 'false',
+  GitCommit:    '',
+};
 let _kubeVersionData = {};
 
 export function isRancherPrime() {

package/core/plugin.ts

@@ -13,10 +13,19 @@ import {
   LocationConfig,
   ExtensionPoint,
   TabLocation,
-  PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut
+  ModelExtensionConstructor,
+  PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig, OnNavToPackage, OnNavAwayFromPackage, OnLogOut,
+  ExtensionEnvironment
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
+import { getVersionData, CURRENT_RANCHER_VERSION } from '@shell/config/version';
+
+// Registration IDs used for different extension points in the extensions catalog
+export const EXT_IDS = {
+  MODELS:          'models',
+  MODEL_EXTENSION: 'model-extension',
+};
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
@@ -25,6 +34,7 @@ export class Plugin implements IPlugin {
   public name: string;
   public types: any = {};
   public l10n: { [key: string]: Function[] } = {};
+  public modelExtensions: { [key: string]: Function[] } = {};
   public locales: { locale: string, label: string}[] = [];
   public products: ProductFunction[] = [];
   public productNames: string[] = [];
@@ -57,6 +67,17 @@ export class Plugin implements IPlugin {
     });
   }
 
+  get environment(): ExtensionEnvironment {
+    const versionData = getVersionData();
+
+    return {
+      version:     versionData.Version,
+      commit:      versionData.GitCommit,
+      isPrime:     versionData.RancherPrime === 'true',
+      docsVersion: `v${ CURRENT_RANCHER_VERSION }`
+    };
+  }
+
   get metadata() {
     return this._metadata;
   }
@@ -186,6 +207,17 @@ export class Plugin implements IPlugin {
     this._addUIConfig(ExtensionPoint.CARD, where, when, this._createAsyncComponent(card));
   }
 
+  /**
+   * Adds a model extension
+   * @experimental May change or be removed in the future
+   *
+   * @param type Model type
+   * @param clz  Class for the model extension (constructor)
+   */
+  addModelExtension(type: string, clz: ModelExtensionConstructor): void {
+    this.register(EXT_IDS.MODEL_EXTENSION, type, clz);
+  }
+
   /**
    * Wraps a component from an extensionConfig with defineAsyncComponent and
    * markRaw. This prepares the component to be loaded dynamically and prevents
@@ -317,10 +349,18 @@ export class Plugin implements IPlugin {
       }
 
       this.l10n[name].push(fn);
+
+    // Accumulate model extensions
+    } else if (type === EXT_IDS.MODEL_EXTENSION) {
+      if (!this.modelExtensions[name]) {
+        this.modelExtensions[name] = [];
+      }
+      this.modelExtensions[name].push(fn);
     } else {
       if (!this.types[type]) {
         this.types[type] = {};
       }
+
       this.types[type][name] = fn;
     }
   }