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

package/pages/home.vue

@@ -4,7 +4,7 @@ import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from
 import { Banner } from '@components/Banner';
 import BannerGraphic from '@shell/components/BannerGraphic.vue';
 import IndentedPanel from '@shell/components/IndentedPanel.vue';
-import PaginatedResourceTable, { FetchPageSecondaryResourcesOpts, FetchSecondaryResourcesOpts } from '@shell/components/PaginatedResourceTable.vue';
+import PaginatedResourceTable from '@shell/components/PaginatedResourceTable.vue';
 import { BadgeState } from '@components/BadgeState';
 import CommunityLinks from '@shell/components/CommunityLinks.vue';
 import SingleClusterInfo from '@shell/components/SingleClusterInfo.vue';
@@ -23,11 +23,12 @@ 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';
 import { sameContents } from '@shell/utils/array';
+import { PagTableFetchPageSecondaryResourcesOpts, PagTableFetchSecondaryResourcesOpts, PagTableFetchSecondaryResourcesReturns } from '@shell/types/components/paginatedResourceTable';
 
 export default defineComponent({
   name:       'Home',
@@ -56,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
@@ -238,9 +243,9 @@ export default defineComponent({
 
   methods: {
     /**
-     * Of type FetchSecondaryResources
+     * Of type PagTableFetchSecondaryResources
      */
-    fetchSecondaryResources(opts: FetchSecondaryResourcesOpts): Promise<any> {
+    fetchSecondaryResources(opts: PagTableFetchSecondaryResourcesOpts): PagTableFetchSecondaryResourcesReturns {
       if (opts.canPaginate) {
         return Promise.resolve({});
       }
@@ -271,7 +276,7 @@ export default defineComponent({
 
     async fetchPageSecondaryResources({
       canPaginate, force, page, pagResult
-    }: FetchPageSecondaryResourcesOpts) {
+    }: PagTableFetchPageSecondaryResourcesOpts) {
       if (!canPaginate || !page?.length) {
         this.clusterCount = 0;
 
@@ -367,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;
@@ -406,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);
 

package/plugins/clean-html.js

@@ -30,6 +30,8 @@ const ALLOWED_TAGS = [
   'blockquote'
 ];
 
+let linkInterceptors = [];
+
 // Allow 'A' tags to keep the target=_blank attribute if they have it
 DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
   if (node.tagName === 'A' && data.attrName === 'target' && data.attrValue === '_blank') {
@@ -46,8 +48,56 @@ DOMPurify.addHook('afterSanitizeAttributes', (node) => {
 
     node.setAttribute('rel', combined.join(' '));
   }
+
+  if (node.tagName === 'A' && linkInterceptors.length) {
+    let link = node.href;
+
+    // Allow each interceptor to modify the link href
+    link = processLink(link);
+
+    // If the link is different from the original update the href
+    if (link !== node.href) {
+      node.href = link;
+    }
+  }
 });
 
 export const purifyHTML = (value, options = { ALLOWED_TAGS }) => {
   return DOMPurify.sanitize(value, options);
 };
+
+// Link Interceptors are typically used to allow different doc links to be used
+
+export function addLinkInterceptor(fn, name) {
+  // Check the arg is not undefined and is a function
+  if (fn && typeof fn === 'function') {
+    linkInterceptors.push(fn);
+  } else {
+    if (name) {
+      console.error(`Invalid link interceptor function for ${ name }`); // eslint-disable-line no-console
+    } else {
+      console.error('Invalid link interceptor function'); // eslint-disable-line no-console
+    }
+  }
+}
+
+export function removeLinkInterceptor(fn) {
+  linkInterceptors = linkInterceptors.filter((item) => item !== fn);
+}
+
+/**
+ * Process a link through all of the link interceptors
+ */
+export function processLink(link) {
+  // Allow each interceptor to modify the link href
+  for (let i = 0; i < linkInterceptors.length; i++) {
+    const updated = linkInterceptors[i](link);
+
+    // If a value if returned, use that in place of the original value
+    if (updated) {
+      link = updated;
+    }
+  }
+
+  return link;
+}

package/plugins/dashboard-store/resource-class.js

@@ -604,6 +604,10 @@ export default class Resource {
     return this.$ctx.rootState;
   }
 
+  get '$plugin'() {
+    return this.$ctx.rootState?.$plugin;
+  }
+
   get customValidationRules() {
     return [
       /**

package/plugins/plugin.js

@@ -1,4 +1,4 @@
-// This plugin loads any UI Plugins at app load time
+// This plugin loads any UI Extensions at app load time
 import { allHashSettled } from '@shell/utils/promise';
 import { shouldNotLoadPlugin, UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { getKubeVersionData, getVersionData } from '@shell/config/version';
@@ -11,14 +11,14 @@ export default async function(context) {
 
   const hash = {};
 
-  // Provide a mechanism to load the UI without the plugins loaded - in case there is a problem
+  // Provide a mechanism to load the UI without the extensions loaded - in case there is a problem
   let loadPlugins = true;
 
   const queryKeys = Object.keys(context.route?.query || {}).map((q) => q.toLowerCase());
 
   if (queryKeys.includes('safemode')) {
     loadPlugins = false;
-    console.warn('Safe Mode - plugins will not be loaded'); // eslint-disable-line no-console
+    console.warn('Safe Mode - extensions will not be loaded'); // eslint-disable-line no-console
     setTimeout(() => {
       context.store.dispatch('growl/success', {
         title:   context.store.getters['i18n/t']('plugins.safeMode.title'),
@@ -27,62 +27,67 @@ export default async function(context) {
     }, 1000);
   }
 
+  const fetches = { versions: versions.fetch(context) };
+
+  // If we are loading extensions then add the API fetch for the list of extensions to the fetches we will make
   if (loadPlugins) {
-    // Fetch list of installed plugins from endpoint
-    try {
-      const res = await allHashSettled({
-        versions: versions.fetch(context),
-        plugins:  context.store.dispatch('management/request', {
-          url:                  `${ UI_PLUGIN_BASE_URL }`,
-          method:               'GET',
-          headers:              { accept: 'application/json' },
-          redirectUnauthorized: false,
-        })
-      });
-
-      if (res.plugins.status === 'rejected') {
-        throw new Error(res.reason);
-      }
+    fetches.plugins = context.store.dispatch('management/request', {
+      url:                  `${ UI_PLUGIN_BASE_URL }`,
+      method:               'GET',
+      headers:              { accept: 'application/json' },
+      redirectUnauthorized: false,
+    });
+  }
 
-      const kubeVersion = getKubeVersionData()?.gitVersion;
-      const rancherVersion = getVersionData().Version;
-
-      const plugins = res.plugins.value;
-      const entries = plugins.entries || plugins.Entries || {};
-
-      Object.values(entries).forEach((plugin) => {
-        const shouldNotLoad = shouldNotLoadPlugin(plugin, { rancherVersion, kubeVersion }, context.store.getters['uiplugins/plugins'] || []); // Error key string or boolean
-
-        if (!shouldNotLoad) {
-          hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
-        } else {
-          context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
-        }
-      });
-    } catch (e) {
-      if (e?.code === 404) {
-        // Not found, so extensions operator probably not installed
-        console.log('Could not load UI Extensions list (Extensions Operator may not be installed)'); // eslint-disable-line no-console
-      } else {
-        console.error('Could not load UI Extensions list', e); // eslint-disable-line no-console
-      }
+  // Fetch list of installed extensions from the extensions endpoint if needed and the version information
+  try {
+    const res = await allHashSettled(fetches);
+
+    // Initialize the built-in extensions now - this is now done here so that built-in extensions get the same, correct environment data (version etc)
+    context.$plugin.loadBuiltinExtensions();
+
+    if (res.plugins?.status === 'rejected') {
+      throw new Error(res.reason);
     }
 
-    // Load all of the plugins
-    const pluginLoads = await allHashSettled(hash);
+    const kubeVersion = getKubeVersionData()?.gitVersion;
+    const rancherVersion = getVersionData().Version;
 
-    // Some pluigns may have failed to load - store this
-    Object.keys(pluginLoads).forEach((name) => {
-      const res = pluginLoads[name];
+    const plugins = res.plugins?.value || {};
+    const entries = plugins.entries || plugins.Entries || {};
 
-      if (res?.status === 'rejected') {
-        console.error(`Failed to load plugin: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
+    Object.values(entries).forEach((plugin) => {
+      const shouldNotLoad = shouldNotLoadPlugin(plugin, { rancherVersion, kubeVersion }, context.store.getters['uiplugins/plugins'] || []); // Error key string or boolean
 
-        // Record error in the uiplugins store, so that we can show this to the user
-        context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
+      if (!shouldNotLoad) {
+        hash[plugin.name] = context.$plugin.loadPluginAsync(plugin);
+      } else {
+        context.store.dispatch('uiplugins/setError', { name: plugin.name, error: shouldNotLoad });
       }
     });
+  } catch (e) {
+    if (e?.code === 404) {
+      // Not found, so extensions operator probably not installed
+      console.log('Could not load UI Extensions list (Extensions Operator may not be installed)'); // eslint-disable-line no-console
+    } else {
+      console.error('Could not load UI Extensions list', e); // eslint-disable-line no-console
+    }
   }
 
+  // Load all of the extensions
+  const pluginLoads = await allHashSettled(hash);
+
+  // Some extensions may have failed to load - store this
+  Object.keys(pluginLoads).forEach((name) => {
+    const res = pluginLoads[name];
+
+    if (res?.status === 'rejected') {
+      console.error(`Failed to load extension: ${ name }. `, res.reason || 'Unknown reason'); // eslint-disable-line no-console
+
+      // Record error in the uiplugins store, so that we can show this to the user
+      context.store.dispatch('uiplugins/setError', { name, error: 'plugins.error.load' }); // i18n-uses plugins.error.load
+    }
+  });
+
   return true;
 }

package/plugins/steve/mutations.js

@@ -31,7 +31,7 @@ function registerNamespace(state, namespace) {
 }
 
 /**
- * update the podsByNamespace cache with new or changed pods
+ * update the podsByNamespace cache with new or changed pods.
  */
 function updatePodsByNamespaceCache(state, ctx, pods, loadAll) {
   if (loadAll) {

package/plugins/steve/steve-class.js

@@ -2,6 +2,7 @@ import { DESCRIPTION } from '@shell/config/labels-annotations';
 import HybridModel from './hybrid-class';
 import { NEVER_ADD } from '@shell/utils/create-yaml';
 import { deleteProperty } from '@shell/utils/object';
+import { EXT_IDS } from '@shell/core/plugin';
 
 // Some fields that are removed for YAML (NEVER_ADD) are required via API
 const STEVE_ADD = [
@@ -41,6 +42,13 @@ export default class SteveModel extends HybridModel {
     this._description = value;
   }
 
+  /**
+   * Get all model extensions for this model
+   */
+  get modelExtensions() {
+    return this.$plugin.getDynamic(EXT_IDS.MODEL_EXTENSION, this.type) || [];
+  }
+
   cleanForSave(data, forNew) {
     const val = super.cleanForSave(data);
 

package/plugins/steve/steve-pagination-utils.ts

@@ -157,6 +157,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: '_type' },
       { field: 'reason' },
       { field: 'involvedObject.kind' },
+      // { field: 'involvedObject.uid' }, // Pending API Support - https://github.com/rancher/rancher/issues/48603
       { field: 'message' },
     ],
     [CATALOG.CLUSTER_REPO]: [
@@ -431,7 +432,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              const exactPartial = field.exact ? `'${ field.value }'` : field.value;
+              const value = encodeURIComponent(field.value);
+              const exactPartial = field.exact ? `'${ value }'` : value;
 
               return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ exactPartial }`;
             }

package/rancher-components/Accordion/Accordion.vue

@@ -47,12 +47,12 @@ export default defineComponent({
         data-testid="accordion-chevron"
       />
       <slot name="header">
-        <h4
+        <h2
           data-testid="accordion-title-slot-content"
           class="mb-0"
         >
           {{ titleKey ? t(titleKey) : title }}
-        </h4>
+        </h2>
       </slot>
     </div>
     <div
@@ -70,7 +70,7 @@ export default defineComponent({
   border: 1px solid var(--border)
 }
 .accordion-header {
-  padding: 5px;
+  padding: 16px 16px 16px 11px;
   display: flex;
   align-items: center;
   &>*{
@@ -81,6 +81,6 @@ export default defineComponent({
   }
 }
 .accordion-body {
-  padding: 10px;
+  padding: 0px 16px 16px;
 }
 </style>

package/rancher-components/BadgeState/BadgeState.vue

@@ -94,6 +94,13 @@ export default defineComponent({
       background: transparent;
       border-color: var(--success);
     }
+
+    // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent
+    &.badge-disabled {
+      color: var(--badge-state-disabled-text);
+      background-color: var( --badge-state-disabled-bg);
+      border: 1px solid var(--badge-state-disabled-border);
+    }
   }
 </style>
 <style lang="scss">

package/rancher-components/Card/Card.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import { useBasicSetupFocusTrap } from '@shell/composables/focusTrap';
 
 export default defineComponent({
+
   name:  'Card',
   props: {
     /**
@@ -50,12 +52,22 @@ export default defineComponent({
       type:    Boolean,
       default: false,
     },
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    if (props.triggerFocusTrap) {
+      useBasicSetupFocusTrap('#focus-trap-card-container-element');
+    }
   }
 });
 </script>
 
 <template>
   <div
+    id="focus-trap-card-container-element"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -264,13 +264,15 @@ export default defineComponent({
           <template v-else-if="label">{{ label }}</template>
           <i
             v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
+            v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
           <i
             v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
+            v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             class="checkbox-info icon icon-info icon-lg"
+            :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
       </span>
@@ -329,6 +331,11 @@ $fontColor: var(--input-label);
   .checkbox-info {
     line-height: normal;
     margin-left: 2px;
+
+    &:focus-visible {
+      @include focus-outline;
+      outline-offset: 2px;
+    }
   }
 
  .checkbox-custom {

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -20,7 +20,7 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
 
-  it('using mode "multiline" should emit input value correctly', () => {
+  it('using type "multiline" should emit input value correctly', () => {
     const value = 'any-string';
     const delay = 1;
     const wrapper = mount(LabeledInput, {
@@ -37,4 +37,21 @@ describe('component: LabeledInput', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')![0][0]).toBe(value);
   });
+
+  describe('using type "chron"', () => {
+    it.each([
+      ['0 * * * *', 'Every hour, every day'],
+      ['@daily', 'At 12:00 AM, every day'],
+      ['You must fail! Go!', '%generic.invalidCron%'],
+    ])('passing value %p should display hint %p', (value, hint) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: { value, type: 'cron' },
+        mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+      });
+
+      const subLabel = wrapper.find('[data-testid="sub-label"]');
+
+      expect(subLabel.text()).toBe(hint);
+    });
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -179,14 +179,28 @@ export default defineComponent({
       if (this.type !== 'cron' || !this.value) {
         return;
       }
+
+      // TODO - #13202: This is required due use of 2 libraries and 3 different libraries through the code.
+      const predefined = [
+        '@yearly',
+        '@annually',
+        '@monthly',
+        '@weekly',
+        '@daily',
+        '@midnight',
+        '@hourly'
+      ];
+      const isPredefined = predefined.includes(this.value as string);
+
       // refer https://github.com/GuillaumeRochat/cron-validator#readme
-      if (!isValidCron(this.value as string, {
+      if (!isPredefined && !isValidCron(this.value as string, {
         alias:              true,
         allowBlankDay:      true,
         allowSevenAsSunday: true,
       })) {
         return this.t('generic.invalidCron');
       }
+
       try {
         const hint = cronstrue.toString(this.value as string || '', { verbose: true });
 
@@ -350,6 +364,7 @@ export default defineComponent({
       <input
         v-else
         ref="value"
+        role="textbox"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :maxlength="_maxlength"
@@ -382,9 +397,12 @@ export default defineComponent({
     <div
       v-if="cronHint || subLabel"
       class="sub-label"
+      data-testid="sub-label"
     >
       <div
         v-if="cronHint"
+        role="alert"
+        :aria-label="cronHint"
       >
         {{ cronHint }}
       </div>

package/rancher-components/Form/ToggleSwitch/ToggleSwitch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
 
 type StateType = boolean | 'true' | 'false' | undefined;
 
@@ -33,6 +33,29 @@ export default defineComponent({
 
   emits: ['update:value'],
 
+  setup() {
+    const switchChrome = useTemplateRef<HTMLElement>('switchChrome');
+    const focus = () => {
+      switchChrome.value?.classList.add('focus');
+    };
+
+    const blur = () => {
+      switchChrome.value?.classList.remove('focus');
+    };
+
+    const switchInput = useTemplateRef<HTMLInputElement>('switchInput');
+
+    onMounted(() => {
+      switchInput.value?.addEventListener('focus', focus);
+      switchInput.value?.addEventListener('blur', blur);
+    });
+
+    onBeforeUnmount(() => {
+      switchInput.value?.removeEventListener('focus', focus);
+      switchInput.value?.removeEventListener('blur', blur);
+    });
+  },
+
   data() {
     return { state: false as StateType };
   },
@@ -64,11 +87,18 @@ export default defineComponent({
     >{{ offLabel }}</span>
     <label class="switch hand">
       <input
+        ref="switchInput"
         type="checkbox"
+        role="switch"
         :checked="state"
+        :aria-label="onLabel"
         @input="toggle(null)"
+        @keydown.enter="toggle(null)"
       >
-      <span class="slider round" />
+      <span
+        ref="switchChrome"
+        class="slider round"
+      />
     </label>
     <span
       class="label no-select hand"
@@ -118,6 +148,13 @@ $toggle-height: 16px;
   background-color: var(--checkbox-disabled-bg);
   -webkit-transition: .4s;
   transition: .4s;
+
+  &.focus {
+    @include focus-outline;
+    outline-offset: 2px;
+    -webkit-transition: 0s;
+    transition: 0s;
+  }
 }
 
 .slider:before {