@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

package/components/fleet/dashboard/ResourcePanel.vue

@@ -337,7 +337,8 @@ export default {
           }
 
           &.bg-error {
-            background: var(--click-badge-error-bg);
+            // background: var(--click-badge-error-bg); TODO revert after dashboard theme colors refactoring
+            background: var(--error);
             color: var(--click-badge-error);
           }
 

package/components/form/ClusterAppearance.vue

@@ -75,6 +75,7 @@ export default {
       <button
         :disabled="disable"
         @click="customBadgeDialog"
+        @keydown.enter.space.prevent="customBadgeDialog"
       >
         <i class="icon icon-brush-icon" />
         <span>
@@ -118,6 +119,10 @@ export default {
         color: var(--link);
         background: transparent;
 
+        &:focus-visible {
+          @include focus-outline;
+        }
+
         i {
           margin-right: 2px;
         }

package/components/form/FileImageSelector.vue

@@ -132,7 +132,7 @@ $logo: 60px;
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: var(--overlay-bg);
+      background-color: var(--subtle-overlay-bg);
     }
 
   }

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -282,7 +282,7 @@ export default {
             <i
               v-if="permission.locked"
               v-clean-tooltip="permission.tooltip"
-              class="icon icon-lock icon-fw"
+              class="icon icon-lock"
             />
           </div>
         </div>

package/components/form/NameNsDescription.vue

@@ -429,6 +429,7 @@ export default {
 
 <template>
   <div class="row mb-20">
+    <slot name="project-selector" />
     <div
       v-if="namespaced && !nameNsHidden && createNamespace"
       :data-testid="componentTestid + '-namespace-create'"

package/components/form/Networking.vue

@@ -31,28 +31,23 @@ export default {
     const t = this.$store.getters['i18n/t'];
 
     return {
-      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
-      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
-      hostAliases: [],
-      nameservers: null,
-      searches:    null,
-      hostname:    null,
-      subdomain:   null,
-      options:     null,
+      dnsPolicy:      this.value.dnsPolicy || 'ClusterFirst',
+      networkMode:    this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
+      tmpHostAliases: [],
+      nameservers:    null,
+      searches:       null,
+      hostname:       null,
+      subdomain:      null,
+      options:        null,
     };
   },
 
   created() {
-    const hostAliases = (this.value.hostAliases || []).map((entry) => {
-      return {
-        ip:        entry.ip,
-        hostnames: entry.hostnames.join(', ')
-      };
-    });
+    const hostAliases = this.value.hostAliases || [];
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    this.hostAliases = hostAliases;
+    this.tmpHostAliases = hostAliases;
     this.nameservers = nameservers;
     this.searches = searches;
     this.hostname = hostname;
@@ -89,6 +84,15 @@ export default {
       ];
     },
 
+    hostAliases() {
+      return (this.value.hostAliases || []).map((entry) => {
+        return {
+          ip:        entry.ip,
+          hostnames: entry.hostnames?.join(', ') ?? ''
+        };
+      });
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
 
@@ -121,12 +125,12 @@ export default {
 
   methods: {
     updateHostAliases(neu) {
-      this.hostAliases = neu.map((entry) => {
+      this.tmpHostAliases = neu.map((entry) => {
         const ip = entry.ip.trim();
         const hostnames = entry.hostnames.trim().split(/[\s,]+/).filter((x) => !!x);
 
         return { ip, hostnames };
-      }).filter((entry) => entry.ip && entry.hostnames.length);
+      });
       this.update();
     },
 
@@ -142,7 +146,7 @@ export default {
         dnsConfig,
         dnsPolicy:   this.dnsPolicy,
         hostname:    this.hostname,
-        hostAliases: this.hostAliases,
+        hostAliases: this.tmpHostAliases,
         subdomain:   this.subdomain,
         hostNetwork: this.networkMode.value
       };
@@ -256,7 +260,8 @@ export default {
       <div class="col span-12">
         <KeyValue
           key="hostAliases"
-          v-model:value="hostAliases"
+          data-test="hostAliases"
+          :value="hostAliases"
           :mode="mode"
           :title="t('workload.networking.hostAliases.label')"
           :protip="t('workload.networking.hostAliases.tip')"

package/components/form/ProjectMemberEditor.vue

@@ -309,7 +309,7 @@ export default {
             <i
               v-if="permission.locked"
               v-clean-tooltip="permission.tooltip"
-              class="icon icon-lock icon-fw"
+              class="icon icon-lock"
             />
           </div>
         </div>

package/components/form/ResourceLabeledSelect.vue

@@ -34,7 +34,7 @@ export default defineComponent({
 
     inStore: {
       type:    String,
-      default: 'cluster',
+      default: undefined,
     },
 
     /**
@@ -63,7 +63,20 @@ export default defineComponent({
   },
 
   data() {
-    return { paginate: false };
+    let validInStore = this.inStore;
+
+    if (!validInStore && this.resourceType) {
+      validInStore = this.$store.getters['currentStore'](this.resourceType);
+    }
+
+    if (!validInStore) {
+      validInStore = 'cluster';
+    }
+
+    return {
+      paginate: false,
+      validInStore,
+    };
   },
 
   async fetch() {
@@ -72,13 +85,13 @@ export default defineComponent({
       this.paginate = false;
       break;
     case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
-      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
+      this.paginate = this.$store.getters[`${ this.validInStore }/paginationEnabled`](this.resourceType);
       break;
     }
 
     if (!this.paginate) {
       // The resource won't be paginated and component expects everything up front
-      await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
+      await this.$store.dispatch(`${ this.validInStore }/findAll`, { type: this.resourceType });
     }
   },
 
@@ -104,7 +117,7 @@ export default defineComponent({
         return [];
       }
 
-      const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
+      const all = this.$store.getters[`${ this.validInStore }/all`](this.resourceType);
 
       return this.allResourcesSettings?.updateResources ? this.allResourcesSettings.updateResources(all) : all;
     }
@@ -127,9 +140,10 @@ export default defineComponent({
       const defaultOptions: LabelSelectPaginationFunctionOptions = {
         opts,
         filters,
-        type: this.resourceType,
-        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch },
-        sort: [{ asc: true, field: 'metadata.name' }],
+        type:  this.resourceType,
+        ctx:   { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort:  [{ asc: true, field: 'metadata.name' }],
+        store: this.validInStore
       };
       const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
       const res = await labelSelectPaginationFunction(options);

package/components/form/ResourceTabs/index.vue

@@ -234,6 +234,8 @@ export default {
 
 <template>
   <Tabbed
+    class="resource-tabs"
+    :class="{[mode]: true}"
     v-bind="$attrs"
     :default-tab="defaultTab"
     :resource="value"
@@ -296,3 +298,21 @@ export default {
     </Tab>
   </Tabbed>
 </template>
+
+<style lang="scss" scoped>
+.resource-tabs {
+  // For the time being we're only targeting detail pages for the new styling. Remove this if we want this style to apply to all pages.
+  &.view {
+    :deep() .tabs.horizontal {
+      border: none;
+    }
+
+    :deep() .tabs.horizontal + .tab-container {
+      border: none;
+      border-top: 1px solid var(--border);
+      padding: 0;
+      padding-top: 24px;
+    }
+  }
+}
+</style>

package/components/form/SecretSelector.vue

@@ -138,6 +138,13 @@ export default {
     }
   },
 
+  watch: {
+    namespace() {
+      // Namespace has changed, reset the selections
+      this.$emit('update:value', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: undefined, [this.keyKey]: '' } } });
+    }
+  },
+
   methods: {
     /**
      * Provide a set of options for the LabelSelect ([none, ...{label, value}])
@@ -208,6 +215,7 @@ export default {
     <div class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
       <ResourceLabeledSelect
+        :key="namespace"
         v-model:value="name"
         :disabled="!isView && disabled"
         :label="secretNameLabel"
@@ -219,6 +227,7 @@ export default {
       />
       <LabeledSelect
         v-if="showKeySelector"
+        :key="namespace"
         v-model:value="key"
         class="col span-6"
         :disabled="isKeyDisabled"

package/components/form/SelectOrCreateAuthSecret.vue

@@ -237,7 +237,7 @@ export default {
       let filteredSecrets = [];
 
       if (this.allSecrets) {
-        // Fitler secrets given their namespace and required secret type
+        // Filter secrets given their namespace and required secret type
         filteredSecrets = this.allSecrets
           .filter((x) => this.filterByNamespace ? x.metadata.namespace === this.namespace : true
           )
@@ -450,6 +450,7 @@ export default {
             ),
           ],
         }),
+        watch: this.cacheSecrets,
       };
 
       if (this.cacheSecrets) {
@@ -464,9 +465,11 @@ export default {
         null,
         findPageArgs
       );
-      const res = await this.$store.dispatch(`cluster/request`, { url });
+      // Strictly speaking this could be any store (request action should be agnostic)
+      const res = await this.$store.dispatch(`${ this.inStore }/request`, { url });
 
-      return res?.data || [];
+      // Classify
+      return await this.$store.dispatch(`${ this.inStore }/createMany`, res?.data || []);
     },
 
     updateKeyVal() {

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

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils';
+import Networking from '@shell/components/form/Networking.vue';
+import { nextTick } from 'vue';
+
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
+describe('component: Networking', () => {
+  it.each([
+    {
+      ip:        '10.1.1.1',
+      hostnames: ['host1']
+    },
+    {
+      ip:        '10.1.1.2',
+      hostnames: ['host1', 'host2']
+    },
+    {
+      ip:        '10.1.1.3',
+      hostnames: []
+    }
+  ])('should render host aliases form if the value contains host aliases config: [%j]', (hostAliasesConfig) => {
+    const wrapper = mount(Networking, {
+      props: {
+        value: { hostAliases: [hostAliasesConfig] },
+        mode:  'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.element.value).toBe(hostAliasesConfig.ip);
+    expect(valueInput.find('[data-testid="value-multiline"]').element.value).toBe(hostAliasesConfig.hostnames.join(', '));
+  });
+
+  it('should not render host aliases form, if there is no host aliases configuration', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(keyInput.exists()).toBe(false);
+    expect(valueInput.exists()).toBe(false);
+    expect(wrapper.props('value')).toStrictEqual({});
+  });
+
+  it('should render host aliases form correctly if click add host aliases button', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+
+    const keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    const valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+    const v = wrapper.props('value');
+
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('');
+    expect(v.hostAliases[0].hostnames).toStrictEqual([]);
+  });
+
+  it('should render host aliases form correctly if modify the form values', async() => {
+    const wrapper = mount(Networking, {
+      props: {
+        value:            {},
+        'onUpdate:value': (e) => wrapper.setProps({ value: e }),
+        mode:             'create',
+      },
+      global: { mocks: { $store: { getters: { 'i18n/t': jest.fn() } } } }
+    });
+
+    const hostAliases = wrapper.findComponent('[data-test="hostAliases"]');
+    const addButton = hostAliases.find('[data-testid="add_row_item_button"]');
+
+    addButton.trigger('click');
+    await nextTick();
+    let v = wrapper.props('value');
+    let keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    let valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    keyInput.setValue('10.1.1.1');
+    valueInput.find('[data-testid="value-multiline"]').setValue('test1, test2');
+    await nextTick();
+    v = wrapper.props('value');
+    keyInput = hostAliases.find('[data-testid="input-kv-item-key-0"]');
+    valueInput = hostAliases.find('[data-testid="kv-item-value-0"]');
+
+    expect(v.hostAliases).toHaveLength(1);
+    expect(v.hostAliases[0].ip).toBe('10.1.1.1');
+    expect(v.hostAliases[0].hostnames).toStrictEqual(['test1', 'test2']);
+    expect(keyInput.exists()).toBe(true);
+    expect(valueInput.exists()).toBe(true);
+  });
+});

package/components/form/labeled-select-utils/labeled-select-pagination.ts

@@ -1,46 +1,11 @@
 import { debounce } from 'lodash';
 import { PropType, defineComponent } from 'vue';
-import { ComputedOptions, MethodOptions } from 'vue/types/v3-component-options';
 import { LabelSelectPaginateFn, LABEL_SELECT_NOT_OPTION_KINDS, LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
-interface Props {
-  paginate?: LabelSelectPaginateFn
-}
-
-interface Data {
-  currentPage: number,
-  search: string,
-  pageSize: number,
-
-  page: any[],
-  pages: number,
-  totalResults: number,
-
-  paginating: boolean,
-
-  debouncedRequestPagination: Function
-}
-
-interface Computed extends ComputedOptions {
-  canPaginate: () => boolean,
-
-  canLoadMore: () => boolean,
-
-  optionsInPage: () => number,
-
-  optionCounts: () => string,
-}
-
-interface Methods extends MethodOptions {
-  loadMore: () => void
-  setPaginationFilter: (filter: string) => void
-  requestPagination: () => Promise<any>;
-}
-
 /**
  * 'mixin' to provide pagination support to LabeledSelect
  */
-export default defineComponent<Props, any, Data, Computed, Methods>({
+export default defineComponent({
   props: {
     paginate: {
       default: null,
@@ -61,7 +26,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
     },
   },
 
-  data(): Data {
+  data() {
     return {
       // Internal
       currentPage: 1,
@@ -72,7 +37,7 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
       debouncedRequestPagination: debounce(this.requestPagination, 700),
 
       // External
-      page:         [],
+      page:         [] as any[],
       totalResults: 0,
       paginating:   false,
     };

package/components/formatter/FleetApplicationSource.vue

@@ -40,32 +40,40 @@ export default {
 </script>
 
 <template>
-  <template v-if="row.source.showLink">
+  <template v-if="row.source.value">
     <Link
+      v-if="row.source.showLink"
       class="source-link"
       label-key="source.display"
       before-icon-key="source.icon"
       url-key="source.value"
       :row="row"
-      :value="row.source.value || ''"
+      :value="row.source.value"
     />
-    <template v-if="row.source.value && row.sourceSub.value">
-      <div class="text-label">
-        <Shortened
-          long-value-key="sourceSub.value"
-          :row="row"
-          :value="row.sourceSub.display"
-        />
-      </div>
-    </template>
+    <span v-else>
+      {{ row.source.value }}
+    </span>
+    <div
+      v-if="row.sourceSub.value"
+      class="text-label"
+    >
+      <Shortened
+        long-value-key="sourceSub.value"
+        :row="row"
+        :value="row.sourceSub.display"
+      />
+    </div>
   </template>
-  <span v-else>
-    {{ row.source.value }}
-  </span>
+  <div
+    v-else
+    class="text-muted"
+  >
+    &mdash;
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.source-link {
-  width: fit-content;
-}
+  .source-link {
+    width: fit-content;
+  }
 </style>

package/components/formatter/PodImages.vue

@@ -56,7 +56,7 @@ export default {
 
 <template>
   <span class="formatter-pod-images">
-    <span>{{ mainImage }}</span><br>
+    <span v-clean-tooltip.bottom="mainImage">{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
       v-clean-tooltip.bottom="imageLabels"

package/components/formatter/__tests__/LiveDate.test.ts

@@ -16,6 +16,15 @@ const defaultMock = {
 };
 
 describe('component: LiveDate', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2025-07-10T10:00:00.000Z'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('should show a dash if no date is provided', () => {
     const wrapper = mount(LiveDate as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { global: { mocks: defaultMock } });
     const element = wrapper.find('span');
@@ -55,8 +64,7 @@ describe('component: LiveDate', () => {
     let element = wrapper.find('span');
 
     expect(element.text()).toContain('Just now');
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    await wrapper.vm.liveUpdate(Date.now());
+    await wrapper.vm.liveUpdate(Date.now() + 1000);
 
     element = wrapper.find('span');
     expect(element.text()).toContain('1 %unit.sec%');