@rancher/shell 3.0.11 → 3.0.12-rc.2

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/SelectIconGrid.vue

@@ -38,6 +38,10 @@ export default {
       type:    String,
       default: 'disabled',
     },
+    tooltipField: {
+      type:    String,
+      default: 'tooltip',
+    },
 
     asLink: {
       type:    Boolean,
@@ -104,6 +108,7 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      v-clean-tooltip="get(r, tooltipField) || null"
       :role="asLink ? 'link' : null"
       :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
       :aria-label="get(r, nameField)"

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/__tests__/CountBox.test.ts

@@ -0,0 +1,72 @@
+import { shallowMount } from '@vue/test-utils';
+import CountBox from '@shell/components/CountBox.vue';
+
+describe('component: CountBox', () => {
+  const defaultProps = {
+    name:            'Test',
+    count:           5,
+    primaryColorVar: '--sizzle-1',
+  };
+
+  describe('when clickable is false', () => {
+    it('should render as a div', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.element.tagName).toBe('DIV');
+    });
+
+    it('should not have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.classes()).not.toContain('clickable');
+    });
+
+    it('should not emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toBeUndefined();
+    });
+  });
+
+  describe('when clickable is true', () => {
+    it('should have the clickable class', () => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      expect(wrapper.classes()).toContain('clickable');
+    });
+
+    it('should emit click event when clicked', async() => {
+      const wrapper = shallowMount(CountBox, {
+        props: {
+          ...defaultProps,
+          clickable: true,
+        },
+      });
+
+      await wrapper.trigger('click');
+
+      expect(wrapper.emitted('click')).toHaveLength(1);
+    });
+  });
+
+  describe('display', () => {
+    it('should display the count', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('h1').text()).toBe('5');
+    });
+
+    it('should display the name', () => {
+      const wrapper = shallowMount(CountBox, { props: defaultProps });
+
+      expect(wrapper.find('label').text()).toBe('Test');
+    });
+  });
+});

package/components/__tests__/DetailText.test.ts

@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils';
+
+import DetailText from '@shell/components/DetailText.vue';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
+describe('component: DetailText', () => {
+  const defaultMocks = {
+    $store: {
+      getters: {
+        'i18n/t':    jest.fn((key: string) => `%${ key }%`),
+        'prefs/get': jest.fn(() => true),
+      }
+    }
+  };
+
+  describe('concealment', () => {
+    it('should not render the actual secret value in the content area when concealed', () => {
+      const secretValue = 'super-secret-password-xyz';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   secretValue,
+          conceal: true,
+          label:   'Password',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain(secretValue);
+    });
+
+    it('should render the actual value when not concealed', () => {
+      const visibleValue = 'visible-value-123';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   visibleValue,
+          conceal: false,
+          label:   'Data',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html': (el: HTMLElement, binding: { value: string }) => {
+              el.innerHTML = binding.value;
+            },
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const contentSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(contentSpan.exists()).toBe(true);
+      expect(contentSpan.classes()).not.toContain('conceal');
+    });
+
+    it('should not render JSON secret values in CodeMirror when concealed', () => {
+      const jsonSecret = '{"api_key": "secret-key-123"}';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   jsonSecret,
+          conceal: true,
+          label:   'Config',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const codeMirror = wrapper.findComponent({ name: 'CodeMirror' });
+
+      expect(codeMirror.exists()).toBe(false);
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain('secret-key-123');
+    });
+  });
+});

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/FleetClusterTargets/index.vue

@@ -124,6 +124,15 @@ export default {
         this.update();
       }
     },
+
+    allClusters(clusters: any[]) {
+      if (clusters.length) {
+        // Resolve metadata.name values to nameDisplay for UI display
+        this.selectedClusters = this.selectedClusters.map(
+          (name) => this.resolveClusterDisplayName(name)
+        );
+      }
+    },
   },
 
   computed: {
@@ -159,7 +168,7 @@ export default {
     clustersOptions() {
       return this.allClusters
         .filter((x) => x.metadata.namespace === this.namespace && !isHarvesterCluster(x))
-        .map((x) => ({ label: x.nameDisplay, value: x.metadata.name }));
+        .map((x) => ({ label: x.nameDisplay, value: x.nameDisplay }));
     },
 
     clusterGroupsOptions() {
@@ -352,6 +361,14 @@ export default {
       return undefined;
     },
 
+    resolveClusterDisplayName(name: string): string {
+      const cluster = this.allClusters.find(
+        (c: any) => c.metadata.namespace === this.namespace && c.metadata.name === name
+      );
+
+      return cluster ? cluster.nameDisplay : name;
+    },
+
     reset() {
       this.targetMode = 'all';
       this.selectedClusters = [];

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/InputWithSelect.vue

@@ -1,18 +1,22 @@
 <script>
-import labeledFormElement from '@shell/mixins/labeled-form-element';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Select from '@shell/components/form/Select';
+import { computed } from 'vue';
+import { _VIEW, _EDIT } from '@shell/config/query-params';
+
 export default {
-  name:       'InputWithSelect',
+  name: 'InputWithSelect',
+
+  inheritAttrs: false,
+
   emits:      ['update:value'],
   components: {
     LabeledInput,
     LabeledSelect,
     Select,
   },
-  mixins: [labeledFormElement],
-  props:  {
+  props: {
     disabled: {
       type:    Boolean,
       default: false,
@@ -84,10 +88,20 @@ export default {
     selectRules: {
       default: () => [],
       type:    Array,
+    },
+    mode: {
+      type:    String,
+      default: _EDIT,
     }
 
   },
 
+  setup(props) {
+    const isView = computed(() => props.mode === _VIEW);
+
+    return { isView };
+  },
+
   data() {
     return {
       selected: this.selectValue || this.options[0].value,
@@ -95,12 +109,6 @@ export default {
     };
   },
 
-  computed: {
-    canPaginate() {
-      return false;
-    }
-  },
-
   methods: {
     focus() {
       const comp = this.$refs.text;

package/components/form/KeyValue.vue

@@ -778,11 +778,16 @@ export default {
                     @onInput="onInputMarkdownMultiline(i, $event)"
                     @onFocus="onFocusMarkdownMultiline(i, $event)"
                   />
+                  <div
+                    v-else-if="valueConcealed"
+                    class="concealed-value conceal"
+                    data-testid="concealed-value"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
+                  />
                   <TextAreaAutoGrow
                     v-else-if="valueMultiline && row[valueName] !== undefined"
                     v-model:value="row[valueName]"
                     data-testid="value-multiline"
-                    :class="{'conceal': valueConcealed}"
                     :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
@@ -809,6 +814,7 @@ export default {
                     class="btn btn-sm role-secondary file-selector"
                     :label="t('generic.upload')"
                     :include-file-name="true"
+                    :accept="readAccept"
                     :aria-label="t('generic.ariaLabel.value', {index: i+1})"
                     @selected="onValueFileSelected(i, $event)"
                   />
@@ -896,6 +902,7 @@ export default {
           class="role-tertiary"
           :label="t('generic.readFromFile')"
           :include-file-name="true"
+          :accept="readAccept"
           data-testid="read_all_key_value_button"
           @selected="onFileSelected"
         />
@@ -941,6 +948,15 @@ export default {
         padding: 10px 10px 10px 10px;
       }
 
+      .concealed-value {
+        padding: 10px;
+        min-height: 40px;
+        user-select: none;
+        &::before {
+          content: '••••••••••••••••••••';
+        }
+      }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }