@rancher/shell 3.0.10 → 3.0.12-rc.1

package/components/EmptyProductPage.vue

@@ -0,0 +1,76 @@
+<script>
+export default {
+  name:   'EmptyProductPage',
+  layout: 'plain',
+  data() {
+    const err = this.$route.meta?.pageError;
+
+    let msg;
+
+    switch (err) {
+    case 'no-nav':
+      msg = [
+        'When a component is not provided for a product, the layout with side navigation is used',
+        'No child items were specified, so this "Default" empty view has been added',
+        'Please add child items to this product'
+      ];
+      break;
+    default:
+      msg = ['No component defined for this extension product... Define a component or child pages so it can be rendered here.'];
+    }
+
+    return {
+      img: require('~shell/assets/images/generic-plugin.svg'),
+      msg,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="empty-product-page">
+    <img
+      :src="img"
+      alt="Extension Product Error"
+    >
+    <div class="err-messages">
+      <p
+        v-for="(m, index) in msg"
+        :key="index"
+      >
+        {{ m }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty-product-page {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  opacity: 0.75;
+
+  > img {
+    width: 128px;
+    margin-bottom: 20px;
+  }
+
+  .err-messages {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+
+    > * {
+      margin-bottom: 8px;
+      font-size: 16px;
+
+      &:last-child {
+        font-weight: bold;
+        color: var(--error);
+      }
+    }
+  }
+}
+</style>

package/components/ExplorerProjectsNamespaces.vue

@@ -593,15 +593,12 @@ export default {
 
 .project-namespaces {
   & :deep() {
-    .project-namespaces-table table {
-      table-layout: fixed;
-    }
-
     .project-name {
       line-height: 30px;
     }
 
     .project-bar {
+      contain: inline-size;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

package/components/LazyImage.vue

@@ -1,5 +1,6 @@
 <script>
 import { BLANK_IMAGE } from '@shell/utils/style';
+import genericCatalogSvg from '@shell/assets/images/generic-catalog.svg';
 
 export default {
   props: {
@@ -10,7 +11,7 @@ export default {
 
     errorSrc: {
       type:    String,
-      default: require('@shell/assets/images/generic-catalog.svg'),
+      default: genericCatalogSvg,
     },
 
     src: {

package/components/Resource/Detail/Card/Scaler.vue

@@ -54,9 +54,9 @@ const i18n = useI18n(store);
 .scaler {
   display: inline-flex;
   align-items: center;
-  background-color: hsl(from var(--primary) h s calc(l + 30));
+  background-color: var(--accent-btn);
   border-radius: var(--border-radius-md);
-  border: 1px solid var(--primary);
+  border: solid thin var(--primary);
   overflow: hidden;
 
   button {
@@ -77,7 +77,7 @@ const i18n = useI18n(store);
     }
 
     &:hover {
-      background-color: hsl(from var(--primary) h s calc(l + 20));
+      background-color: var(--accent-btn);
     }
 
     &[disabled] {
@@ -88,7 +88,7 @@ const i18n = useI18n(store);
   }
 
   .value {
-    color: initial;
+    color: var(--body-text);
     cursor: default;
     padding: 4px;
     padding-top: 5px;

package/components/Resource/Detail/CopyToClipboard.vue

@@ -70,8 +70,7 @@ const onClick = (ev: MouseEvent) => {
         border-color: var(--success-border);
         color: var(--success-text);
 
-        transition: all 0.25s;
-        transition-timing-function: ease;
+        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
     }
 
     &:focus-visible {

package/components/Resource/Detail/Metadata/KeyValueRow.vue

@@ -77,12 +77,15 @@ const previewId = randomStr();
   position: relative;
   padding: 0;
 
+  $topShift: -6px;
+  $topShiftHidden: -100vh; //100% of the viewport
+
   .copy-to-clipboard {
     position: fixed;
 
     right: -20px;
-    top: -6px;
-    z-index: 20px;
+    top: $topShiftHidden;
+    z-index: z-index('copyToClipboard');
   }
 
   &, .btn, .rc-tag {
@@ -126,13 +129,16 @@ const previewId = randomStr();
       }
 
       & + .copy-to-clipboard {
+        // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
         position: absolute;
+        top: $topShift;
       }
     }
 
     .copy-to-clipboard:focus-visible, .copy-to-clipboard:hover {
+      // This is how we "hide" the component but still allow it to be visible to accessibility (tab focus)
       position: absolute;
-
+      top: $topShift;
     }
 
     .btn:has(+ .copy-to-clipboard:focus-visible), .btn:has(+ .copy-to-clipboard:hover)  {

package/components/Resource/Detail/TitleBar/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: TitleBar/index should match the full component snapshot 1`] = `
+<div class="title-bar">
+  <div class="top">
+    <h1 class="title">
+      <!----><a class="resource-link">RESOURCE_TYPE_LABEL: </a><span class="resource-name masthead-resource-title">RESOURCE_NAME</span><span class="badge-state bg-success badge-state"><!--v-if--><span class="msg">Active</span></span>
+    </h1>
+    <div class="actions"><button role="button" class="rc-button btn variant-primary btn-medium">
+        <!--v-if-->Deploy
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-secondary btn-large">
+        <!--v-if-->Rollback
+        <!--v-if-->
+      </button><button role="button" class="rc-button btn variant-primary btn-large show-configuration" data-testid="show-configuration-cta" aria-label="component.resource.detail.titleBar.ariaLabel.showConfiguration-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+        <!--v-if--><i class="icon icon-document" aria-hidden="true"></i> component.resource.detail.titleBar.showConfiguration
+        <!--v-if-->
+      </button>
+      <div class="v-popper v-popper--theme-dropdown"><button role="button" class="rc-button btn variant-multi-action btn-medium" aria-haspopup="menu" aria-expanded="false" data-testid="masthead-action-menu" aria-label="component.resource.detail.titleBar.ariaLabel.actionMenu-{&quot;resource&quot;:&quot;RESOURCE_NAME&quot;}">
+          <!--v-if--><i class="icon icon-actions"></i>
+          <!--v-if-->
+        </button></div>
+      <div class="popperContainer">
+        <!--Empty container for mounting popper content-->
+      </div>
+    </div>
+  </div>
+  <div class="bottom description text-deemphasized">A test description</div>
+  <!--v-if-->
+</div>
+`;

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -1,5 +1,5 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
-import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import TitleBar, { AdditionalActionButton } from '@shell/components/Resource/Detail/TitleBar/index.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { createStore } from 'vuex';
 import { defineComponent, h } from 'vue';
@@ -240,5 +240,49 @@ describe('component: TitleBar/index', () => {
       expect(wrapper.find('.slot-button').exists()).toBeTruthy();
       expect(wrapper.find('.slot-button').text()).toBe('Slot Button');
     });
+
+    it('should render the actions container correctly when additional-actions slot contains nested buttons', async() => {
+      const wrapper = mount(TitleBar, {
+        props:  { resourceTypeLabel, resourceName },
+        slots:  { 'additional-actions': '<div class="btn-group"><button class="nested-btn">A</button><button class="nested-btn">B</button></div>' },
+        global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+      });
+
+      const actions = wrapper.find('.actions');
+
+      expect(actions.find('.btn-group').exists()).toBeTruthy();
+      expect(actions.findAll('.btn-group .nested-btn')).toHaveLength(2);
+    });
+  });
+
+  it('should match the full component snapshot', () => {
+    const additionalActions: AdditionalActionButton[] = [
+      {
+        label: 'Deploy', variant: 'primary', onClick: jest.fn()
+      },
+      {
+        label: 'Rollback', variant: 'secondary', size: 'large', onClick: jest.fn()
+      },
+    ];
+
+    const wrapper = mount(TitleBar, {
+      props: {
+        resource:           {},
+        resourceTypeLabel,
+        resourceName,
+        resourceTo,
+        description:        'A test description',
+        badge:              { color: 'bg-success', label: 'Active' },
+        additionalActions,
+        actionMenuResource: { resource: 'test-menu' },
+        onShowConfiguration() {},
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub },
+        provide: { store }
+      }
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
   });
 });

package/components/Resource/Detail/TitleBar/index.vue

@@ -178,7 +178,7 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
     align-items: center;
   }
 
-  .show-configuration, &:deep() .actions button {
+  .show-configuration, &:deep() .actions > button {
     margin-left: 16px;
   }
 

package/components/Resource/Detail/ViewOptions/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component: ViewOptions/index should match the snapshot 1`] = `
+<div class="btn-group"><button data-testid="button-group-child-0" type="button" class="btn bg-primary" role="button" aria-label="%resourceDetail.masthead.detail%" aria-pressed="true">
+    <!--v-if--><span k="resourceDetail.masthead.detail"></span>
+  </button><button data-testid="button-group-child-1" type="button" class="btn bg-disabled" role="button" aria-label="%resourceDetail.masthead.graph%" aria-pressed="false">
+    <!--v-if--><span k="resourceDetail.masthead.graph"></span>
+  </button></div>
+`;

package/components/Resource/Detail/ViewOptions/__tests__/index.test.ts

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils';
+import ViewOptions from '@shell/components/Resource/Detail/ViewOptions/index.vue';
+import ButtonGroup from '@shell/components/ButtonGroup.vue';
+import { _CONFIG, _GRAPH } from '@shell/config/query-params';
+
+const mockPush = jest.fn();
+const mockQuery = { view: _CONFIG };
+
+jest.mock('vue-router', () => ({
+  useRouter: () => ({ push: mockPush }),
+  useRoute:  () => ({ query: mockQuery }),
+}));
+
+describe('component: ViewOptions/index', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockQuery.view = _CONFIG;
+  });
+
+  const createWrapper = () => {
+    return mount(ViewOptions);
+  };
+
+  it('should render a ButtonGroup component', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.findComponent(ButtonGroup).exists()).toBeTruthy();
+  });
+
+  it('should provide two view options: detail and graph', () => {
+    const wrapper = createWrapper();
+    const buttonGroup = wrapper.findComponent(ButtonGroup);
+    const options = buttonGroup.props('options');
+
+    expect(options).toHaveLength(2);
+    expect(options[0].value).toStrictEqual(_CONFIG);
+    expect(options[1].value).toStrictEqual(_GRAPH);
+  });
+
+  it('should set the initial view from the route query', () => {
+    const wrapper = createWrapper();
+    const buttonGroup = wrapper.findComponent(ButtonGroup);
+
+    expect(buttonGroup.props('value')).toStrictEqual(_CONFIG);
+  });
+
+  it('should push to router when view changes', async() => {
+    const wrapper = createWrapper();
+    const buttons = wrapper.findAll('.btn-group button');
+    const graphButton = buttons[1];
+
+    await graphButton.trigger('click');
+
+    expect(mockPush).toHaveBeenCalledWith({ query: { view: _GRAPH } });
+  });
+
+  it('should match the snapshot', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/components/Resource/Detail/ViewOptions/index.vue

@@ -14,7 +14,8 @@ const view = ref(currentView.value);
 const viewOptions = computed(() => {
   return [
     {
-      labelKey: 'resourceDetail.masthead.config',
+      labelKey: 'resourceDetail.masthead.detail',
+      // _CONFIG is the default when there is no query on the router
       value:    _CONFIG,
     },
     {

package/components/ResourceList/Masthead.vue

@@ -85,7 +85,29 @@ export default {
   data() {
     const params = { ...this.$route.params };
 
-    const formRoute = { name: `${ this.$route.name }-create`, params };
+    // Determine if the current product has a topLevelProduct defined, and if so,
+    // use that for the formRoute instead of the current route's product.
+    // This allows resources from extensions (new product registration) to use the correct route for creation,
+    // which may be different from the route of the resource list.
+    let currPluginName = '';
+    let formRoute;
+    let overrideCreateLocationByExtension = false;
+    const plugins = this.$extension.getPlugins();
+
+    Object.keys(plugins).forEach((key) => {
+      if (plugins[key].productNames.includes(this.$store.getters['productId'])) {
+        currPluginName = key;
+      }
+    });
+
+    if (currPluginName && plugins[currPluginName]?.topLevelProduct) {
+      // override create route for extension resource lists
+      formRoute = { name: `${ this.$route.name }-create`, params: { ...params, product: this.$store.getters['productId'] } };
+      overrideCreateLocationByExtension = true;
+    } else {
+      // this was the original logic before the topLevelProduct override was added
+      formRoute = { name: `${ this.$route.name }-create`, params };
+    }
 
     const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
 
@@ -96,6 +118,7 @@ export default {
     };
 
     return {
+      overrideCreateLocationByExtension,
       formRoute,
       yamlRoute,
       hasEditComponent,
@@ -149,7 +172,7 @@ export default {
     },
 
     _createLocation() {
-      return this.createLocation || this.formRoute;
+      return this.overrideCreateLocationByExtension ? this.formRoute : this.createLocation || this.formRoute;
     },
 
     _yamlCreateLocation() {

package/components/SideNav.vue

@@ -229,6 +229,19 @@ export default {
 
       this.getExplorerGroups(out);
 
+      // If there's a root group, pull its children up to the top level
+      // so that we can order them alongside group items in the nav
+      const rootGroupIndex = out.findIndex((g) => g.name.toLowerCase() === 'root');
+      const rootGroup = out[rootGroupIndex];
+
+      if (rootGroup && rootGroup.children?.length) {
+        out.splice(rootGroupIndex, 1);
+
+        rootGroup.children.forEach((child) => {
+          addObject(out, { ...child, children: [] });
+        });
+      }
+
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
 
       this.gettingGroups = false;

package/components/Tabbed/index.vue

@@ -76,6 +76,12 @@ export default {
       type:    Boolean,
       default: true,
     },
+
+    extensionParams: {
+      type:    Object,
+      default: null,
+    },
+
     /**
      * Inherited global identifier prefix for tests
      * Define a term based on the parent component to avoid conflicts on multiple components

package/components/__tests__/ConsumptionGauge.test.ts

@@ -64,6 +64,37 @@ describe('component: ConsumptionGauge', () => {
     expect(slotTitle.text()).toBe('some-resource-name');
   });
 
+  it('should display the default "Used" label when usedLabel is not provided', () => {
+    const wrapper = mount(ConsumptionGauge, {
+      props: {
+        resourceName: 'some-resource-name',
+        capacity:     100,
+        used:         50,
+      }
+    });
+
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+
+    expect(usedSpan.exists()).toBe(true);
+    expect(usedSpan.text()).toBe('%node.detail.glance.consumptionGauge.used%');
+  });
+
+  it('usedLabel should override the default "Used" label text', () => {
+    const wrapper = mount(ConsumptionGauge, {
+      props: {
+        resourceName: 'some-resource-name',
+        capacity:     100,
+        used:         50,
+        usedLabel:    'Running'
+      }
+    });
+
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+
+    expect(usedSpan.exists()).toBe(true);
+    expect(usedSpan.text()).toBe('Running');
+  });
+
   it('passing slot TITLE should render correctly', () => {
     const colorStops = {
       0: '--success', 30: '--warning', 70: '--error'

package/components/__tests__/PromptModal.test.ts

@@ -24,6 +24,7 @@ import DeveloperLoadExtensionDialog from '@shell/dialog/DeveloperLoadExtensionDi
 import AddExtensionReposDialog from '@shell/dialog/AddExtensionReposDialog.vue';
 import InstallExtensionDialog from '@shell/dialog/InstallExtensionDialog.vue';
 import UninstallExtensionDialog from '@shell/dialog/UninstallExtensionDialog.vue';
+import UninstallExistingExtensionDialog from '@shell/dialog/UninstallExistingExtensionDialog.vue';
 import KnownHostsEditDialog from '@shell/dialog/KnownHostsEditDialog.vue';
 import ImportDialog from '@shell/dialog/ImportDialog.vue';
 import SearchDialog from '@shell/dialog/SearchDialog.vue';
@@ -110,6 +111,7 @@ describe('component: PromptModal', () => {
     ['AddExtensionReposDialog', AddExtensionReposDialog],
     ['InstallExtensionDialog', InstallExtensionDialog],
     ['UninstallExtensionDialog', UninstallExtensionDialog],
+    ['UninstallExistingExtensionDialog', UninstallExistingExtensionDialog],
     ['KnownHostsEditDialog', KnownHostsEditDialog],
     ['ImportDialog', ImportDialog],
     ['SearchDialog', SearchDialog],

package/components/fleet/FleetClusters.vue

@@ -107,6 +107,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :sub-rows="true"
     :loading="loading"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :ignore-filter="ignoreFilter"

package/components/fleet/__tests__/FleetClusters.test.ts

@@ -573,4 +573,75 @@ describe('component: FleetClusters', () => {
       expect(additionalSubRow.exists()).toBe(false);
     });
   });
+
+  describe('labels visibility regardless of error state', () => {
+    it('should pass sub-rows prop as true to ResourceTable so labels always render', () => {
+      const wrapper = createWrapper();
+
+      // sub-rows=true ensures SortableTable.showSubRow() returns true,
+      // which makes the #additional-sub-row slot render regardless of stateDescription.
+      // Without this, labels only appear when there is an error (stateDescription).
+      const resourceTableStub = wrapper.findComponent('.resource-table') as any;
+
+      expect(resourceTableStub.props('subRows')).toBe(true);
+    });
+
+    it('should render labels when cluster has no stateDescription (no error)', () => {
+      const rows = [{
+        customLabels:        ['env:prod', 'team:backend'],
+        displayCustomLabels: false,
+        stateDescription:    undefined,
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0].text()).toBe('env:prod');
+      expect(tags[1].text()).toBe('team:backend');
+    });
+
+    it('should render labels when cluster has a stateDescription (error)', () => {
+      const rows = [{
+        customLabels:        ['env:prod', 'team:backend'],
+        displayCustomLabels: false,
+        stateDescription:    'Something went wrong',
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(2);
+      expect(tags[0].text()).toBe('env:prod');
+      expect(tags[1].text()).toBe('team:backend');
+    });
+
+    it('should render labels when stateDescription is empty string', () => {
+      const rows = [{
+        customLabels:        ['env:staging'],
+        displayCustomLabels: false,
+        stateDescription:    '',
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0].text()).toBe('env:staging');
+    });
+
+    it('should render labels when stateDescription is null', () => {
+      const rows = [{
+        customLabels:        ['region:eu-west'],
+        displayCustomLabels: false,
+        stateDescription:    null,
+      }];
+
+      const wrapper = createWrapper({ rows });
+      const tags = wrapper.findAll('.tag');
+
+      expect(tags).toHaveLength(1);
+      expect(tags[0].text()).toBe('region:eu-west');
+    });
+  });
 });

package/components/form/NodeScheduling.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
@@ -18,6 +19,7 @@ const parseNode = (node: string | KubeNode) => typeof node === 'string' ? node :
 export default {
   components: {
     RadioGroup,
+    LabeledSelect,
     ResourceLabeledSelect,
     NodeAffinity,
   },
@@ -35,7 +37,7 @@ export default {
      */
     nodes: {
       type:    Array,
-      default: () => []
+      default: () => null
     },
 
     mode: {
@@ -218,14 +220,14 @@ export default {
       handler(nodeSelector) {
         // Harvester specific code should not live in rancher/dashboard components
         // This was brought into harvester/dashboard via https://github.com/harvester/dashboard/pull/342
-        // rancher/dashboard via https://github.com/rancher/dashboard/pull/6310
+        // and then rancher/dashboard via https://github.com/rancher/dashboard/pull/6310
         if (this.isHarvester && nodeSelector?.[HOSTNAME]) {
           this.selectNode = 'nodeSelector';
           const nodeName = nodeSelector[HOSTNAME];
 
           this.nodeName = nodeName;
 
-          const array = this.nodes.map((n) => n.value);
+          const array = this.nodes?.map((n) => n.value) || [];
 
           if (nodeName && !array.includes(nodeName)) {
             this.$store.dispatch('growl/error', {
@@ -259,7 +261,19 @@ export default {
     <template v-if="selectNode === 'nodeSelector'">
       <div class="row">
         <div class="col span-6">
+          <LabeledSelect
+            v-if="nodes"
+            v-model:value="nodeName"
+            :label="t('workload.scheduling.affinity.nodeName')"
+            :options="nodes || []"
+            :mode="mode"
+            :multiple="false"
+            :loading="loading"
+            :data-testid="'node-scheduling-nodeSelector'"
+            @update:value="update"
+          />
           <ResourceLabeledSelect
+            v-else
             v-model:value="nodeName"
             :label="t('workload.scheduling.affinity.nodeName')"
             :resource-type="NODE"