@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.3

package/edit/secret/tls.vue

@@ -1,7 +1,10 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
+import { useStore } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import FileSelector, { createOnSelected } from '@shell/components/form/FileSelector';
+import { useFormRules } from '@shell/composables/useFormValidation';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   components: { LabeledInput, FileSelector },
@@ -18,6 +21,28 @@ export default {
     }
   },
 
+  setup() {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const { getRules } = useFormRules(
+      t,
+      [
+        {
+          path:           'tls.key',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.privateKey',
+        },
+        {
+          path:           'tls.crt',
+          rules:          ['required'],
+          translationKey: 'secret.certificate.certificate',
+        },
+      ]
+    );
+
+    return { getRules };
+  },
+
   data() {
     // do not show existing key when editing
     const originalKey = this.value.decodedData['tls.key'] || '';
@@ -63,9 +88,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="key"
+          name="tls.key"
+          required
           type="multiline"
           :label="t('secret.certificate.privateKey')"
           :mode="mode"
+          :rules="getRules('tls.key')"
           :placeholder="t('secret.certificate.privateKeyPlaceholder')"
         />
         <FileSelector
@@ -77,10 +105,12 @@ export default {
       <div class="col span-6">
         <LabeledInput
           v-model:value="crt"
+          name="tls.crt"
           required
           type="multiline"
           :label="t('secret.certificate.certificate')"
           :mode="mode"
+          :rules="getRules('tls.crt')"
           :placeholder="t('secret.certificate.certificatePlaceholder')"
         />
         <FileSelector

package/edit/service.vue

@@ -203,10 +203,9 @@ export default {
     },
 
     provisioningCluster() {
-      const out = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER).find((c) => c?.status?.clusterName === this.currentCluster.metadata.name);
-
-      return out;
+      return this.currentCluster.provCluster;
     },
+
     errorMessages() {
       if (!this.serviceType) {
         return [];
@@ -273,8 +272,9 @@ export default {
         const hash = {};
 
         if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-          hash.provClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+          hash.provClusters = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
         }
+
         if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
           hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
         }

package/edit/workload/Upgrading.vue

@@ -133,10 +133,10 @@ export default {
       } = this;
       let { maxSurge, maxUnavailable } = this;
 
-      if (this.surgeUnits === '%' && !maxSurge.includes('%')) {
+      if (this.surgeUnits === '%' && !`${ maxSurge }`.includes('%')) {
         maxSurge = `${ maxSurge }%`;
       }
-      if (this.unavailableUnits === '%' && !maxUnavailable.includes('%')) {
+      if (this.unavailableUnits === '%' && !`${ maxUnavailable }`.includes('%')) {
         maxUnavailable = `${ maxUnavailable }%`;
       }
 
@@ -204,7 +204,7 @@ export default {
       if (units === 'Pods') {
         this[target] = parseInt(value);
       } else {
-        this[target] = `${ value }%`;
+        this[target] = value;
       }
       if (target === 'maxSurge') {
         this.surgeUnits = units;

package/edit/workload/__tests__/Upgrading.test.ts

@@ -25,20 +25,17 @@ describe('component: Upgrading', () => {
     expect(wrapper.props('value')?.[key]).toBe(newValue);
   });
 
-  // TODO: #6179: Integrate test with component fix, as the scope is not to check the value of the input
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip.each([
-    ['surge', 'maxSurge', '%'],
-    ['unavailable', 'maxUnavailable', '%'],
-  ])('should set typed value in %p into %p and unit', (field, key, unit) => {
+  it.each([
+    ['maxSurge', '%'],
+    ['maxUnavailable', '%'],
+  ])('should set typed value in %p with %p unit', (key, unit) => {
     const wrapper = mount(Upgrading);
-    const input = wrapper.find(`[data-testid="input-policy-${ field }"]`).find('input');
     const newValue = 123;
     const expectation = `${ newValue }${ unit }`;
 
-    input.setValue(newValue);
-    input.trigger('blur');
+    wrapper.vm.updateWithUnits({ selected: unit, text: newValue }, key);
 
+    expect(wrapper.vm[key]).toBe(newValue);
     expect(wrapper.props('value')?.strategy.rollingUpdate[key]).toBe(expectation);
   });
 

package/edit/workload/mixins/workload.js

@@ -151,7 +151,8 @@ export default {
     const fetches = {};
 
     if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
-      fetches.rancherClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+      // I could only find one place where a prov cluster might be used by this and parent components - shell/components/form/WorkloadPorts.vue provisioningCluster
+      fetches.rancherCluster = this.$store.dispatch('management/find', { type: CAPI.RANCHER_CLUSTER, id: this.currentCluster.provClusterId });
     }
 
     if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {

package/initialize/App.vue

@@ -1,10 +1,16 @@
 <script>
 import GlobalLoading from '@shell/components/nav/GlobalLoading.vue';
+import WindowManager from '@shell/components/nav/WindowManager';
 
 import '@shell/assets/styles/app.scss';
 
 export default {
-  data: () => ({ isOnline: true }),
+  data() {
+    return {
+      isOnline:      true,
+      currentLayout: null,
+    };
+  },
 
   created() {
     // add to window so we can listen when ready
@@ -36,6 +42,14 @@ export default {
     this.$loading = this.$refs.loading;
   },
 
+  provide() {
+    return {
+      notifyWmContainerReady: (layout) => {
+        this.currentLayout = layout;
+      }
+    };
+  },
+
   computed: {
     isOffline() {
       return !this.isOnline;
@@ -55,7 +69,10 @@ export default {
     },
   },
 
-  components: { GlobalLoading }
+  components: {
+    GlobalLoading,
+    WindowManager,
+  }
 };
 </script>
 <template>
@@ -65,6 +82,16 @@ export default {
       id="__layout"
     >
       <router-view />
+      <!--
+        WindowManager is teleported into each template's wm-container
+        This keeps a single instance that never re-mounts while appearing in each template
+      -->
+      <Teleport
+        v-if="currentLayout"
+        :to="`#wm-container-${currentLayout}`"
+      >
+        <WindowManager :layout="currentLayout" />
+      </Teleport>
     </div>
   </div>
 </template>

package/initialize/install-plugins.js

@@ -21,7 +21,6 @@ import plugin from '@shell/plugins/plugin';
 import pluginsLoader from '@shell/core/plugins-loader.js';
 import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
-import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
 import { initUiApis } from '@shell/apis/impl/apis';
 
@@ -57,7 +56,6 @@ export async function installInjectedPlugins(app, vueApp) {
     replaceAll,
     plugin,
     steveCreateWorker,
-    emberCookie,
     dynamicContent,
   ];
 

package/list/__tests__/management.cattle.io.feature.test.ts

@@ -0,0 +1,105 @@
+import { shallowMount } from '@vue/test-utils';
+
+jest.mock('@shell/mixins/resource-fetch', () => ({
+  __esModule: true,
+  default:    {
+    data() {
+      return {
+        forceUpdateLiveAndDelayed: 0, loading: false, rows: []
+      };
+    },
+    async $fetchType() {}
+  }
+}));
+
+// eslint-disable-next-line import/first
+import ManagementFeature from '@shell/list/management.cattle.io.feature.vue';
+
+const createMockStore = () => ({
+  getters: {
+    'i18n/t':               (key: string) => key,
+    'management/schemaFor': () => ({ resourceMethods: ['PUT'] }),
+  },
+  dispatch: jest.fn(),
+});
+
+const createWrapper = (rows: any[]) => {
+  return shallowMount(ManagementFeature, {
+    props: {
+      resource: 'management.cattle.io.feature',
+      schema:   { id: 'management.cattle.io.feature' } as any,
+    },
+    data:   () => ({ rows }),
+    global: {
+      mocks: {
+        $store:      createMockStore(),
+        $fetchState: { pending: false },
+        $fetchType:  jest.fn(),
+      },
+      stubs: {
+        // Render the cell:name slot directly so we can assert on the lock icon
+        ResourceTable: {
+          props:    ['rows'],
+          template: '<div><slot name="cell:name" :row="rows[0]" /></div>',
+        },
+      },
+    }
+  });
+};
+
+describe('list/management.cattle.io.feature', () => {
+  describe('locked icon rendering in cell:name slot', () => {
+    it('should render the lock icon when status.lockedValue is not null', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+        status:      { lockedValue: true },
+      };
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(true);
+    });
+
+    it('should not render the lock icon when status.lockedValue is null', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+        status:      { lockedValue: null },
+      };
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(false);
+    });
+
+    it('should not throw and should not render the lock icon when status is missing (malformed feature flag)', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+      };
+
+      expect(() => createWrapper([row])).not.toThrow();
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(false);
+    });
+  });
+
+  describe('filteredRows', () => {
+    it('should filter out hidden feature flags', () => {
+      const rows = [
+        { metadata: { name: 'fleet' } },
+        { metadata: { name: 'some-feature' } },
+      ];
+
+      const wrapper = createWrapper(rows);
+
+      const filtered = (wrapper.vm as any).filteredRows;
+
+      expect(filtered).toHaveLength(1);
+      expect(filtered[0].metadata.name).toBe('some-feature');
+    });
+  });
+});

package/list/catalog.cattle.io.app.vue

@@ -40,14 +40,15 @@ export default {
     data-testid="installed-app-catalog-list"
   >
     <template #cell:upgrade="{row}">
-      <span
+      <div
         v-if="row.upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE"
-        class="badge-state bg-warning hand"
+        v-clean-tooltip="row.upgradeAvailableVersion"
+        class="badge-state bg-warning hand app-upgrade-badge"
         @click="row.goToUpgrade(row.upgradeAvailableVersion)"
       >
-        {{ row.upgradeAvailableVersion }}
+        <div>{{ row.upgradeAvailableVersion }}</div>
         <i class="icon icon-upload" />
-      </span>
+      </div>
       <span
         v-else-if="row.upgradeAvailable === APP_UPGRADE_STATUS.NOT_APPLICABLE"
         v-t="'catalog.app.managed'"
@@ -69,8 +70,27 @@ export default {
   </PaginatedResourceTable>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .apps :deep() .state-description{
   color: var(--error)
 }
+
+.badge-state.app-upgrade-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--border-radius);
+  padding: 2px 4px;
+
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  > .icon {
+    flex-shrink: 0;
+  }
+}
+
 </style>

package/list/fleet.cattle.io.bundle.vue

@@ -1,19 +1,9 @@
 <script>
-import { FLEET } from '@shell/config/types';
-import { Banner } from '@components/Banner';
-import ResourceTable from '@shell/components/ResourceTable';
-import ResourceFetch from '@shell/mixins/resource-fetch';
-import {
-  AGE,
-  STATE,
-  NAME,
-} from '@shell/config/table-headers';
-import { isHarvesterCluster } from '@shell/utils/cluster';
+import FleetBundles from '@shell/components/fleet/FleetBundles';
 
 export default {
   name:       'ListBundle',
-  components: { Banner, ResourceTable },
-  mixins:     [ResourceFetch],
+  components: { FleetBundles },
   props:      {
     resource: {
       type:     String,
@@ -28,100 +18,13 @@ export default {
       default: false
     }
   },
-
-  async fetch() {
-    await this.$fetchType(this.resource);
-    if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
-      this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
-    }
-  },
-
-  data() {
-    return { allFleet: [] };
-  },
-
-  computed: {
-    harvesterClusters() {
-      const harvester = {};
-
-      this.allFleet.forEach((c) => {
-        if (isHarvesterCluster(c)) {
-          harvester[c.metadata.name] = c;
-        }
-      });
-
-      return harvester;
-    },
-
-    bundles() {
-      const harvester = this.harvesterClusters;
-
-      return this.rows.filter((bundle) => {
-        const targets = bundle.spec?.targets || [];
-
-        // Filter out any bundle that has one target whose cluster is a harvester cluster
-        if (targets.length === 1) {
-          return !harvester[targets[0].clusterName];
-        }
-
-        return true;
-      });
-    },
-
-    hidden() {
-      return this.rows.length - this.bundles.length;
-    },
-
-    headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'deploymentsReady',
-          labelKey: 'tableHeaders.bundleDeploymentsReady',
-          value:    'status.display.readyClusters',
-          sort:     'status.display.readyClusters',
-          search:   ['status.summary.ready', 'status.summary.desiredReady'],
-        },
-        AGE
-      ];
-
-      return out;
-    },
-  },
-
-  // override with relevant info for the loading indicator since this doesn't use it's own masthead
-  $loadingResources() {
-    // results are filtered so we wouldn't get the correct count on indicator...
-    return { loadIndeterminate: true };
-  },
 };
 </script>
 
 <template>
-  <div>
-    <Banner
-      v-if="hidden"
-      color="info"
-      :label="t('fleet.bundles.harvester', {count: hidden} )"
-    />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="bundles"
-      :loading="loading"
-      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
-      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-    >
-      <template #cell:deploymentsReady="{row}">
-        <span
-          v-if="row.status && row.status.summary && (row.status.summary.desiredReady !== row.status.summary.ready)"
-          class="text-warning"
-        >
-          {{ row.status.summary.ready || 0 }}/{{ row.status.summary.desiredReady }}</span>
-        <span v-else-if="row.status && row.status.summary">{{ row.status.summary.desiredReady }}</span>
-        <span v-else>-</span>
-      </template>
-    </ResourceTable>
-  </div>
+  <FleetBundles
+    :resource="resource"
+    :schema="schema"
+    :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+  />
 </template>

package/list/fleet.cattle.io.clusterregistrationtoken.vue

@@ -4,6 +4,8 @@ import { Banner } from '@components/Banner';
 import ResourceTable from '@shell/components/ResourceTable';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import { HARVESTER_CONTAINER } from '@shell/store/features';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 
 export default {
   name:       'ListClusterGroup',
@@ -25,6 +27,16 @@ export default {
   },
 
   async fetch() {
+    try {
+      await checkSchemasForFindAllHash({
+        cluster: {
+          inStoreType: 'management',
+          type:        FLEET.CLUSTER
+        },
+      }, this.$store);
+    } catch (e) {
+    }
+
     await this.$fetchType(this.resource);
     if (this.$store.getters['management/schemaFor']( FLEET.CLUSTER )) {
       this.allFleet = await this.$store.getters['management/all'](FLEET.CLUSTER);
@@ -35,6 +47,10 @@ export default {
     return { allFleet: [] };
   },
 
+  mounted() {
+    this.areHarvesterHostsVisible = this.$store.getters['features/get'](HARVESTER_CONTAINER);
+  },
+
   computed: {
     harvesterClusters() {
       const harvester = {};
@@ -50,6 +66,10 @@ export default {
     tokens() {
       const harvester = this.harvesterClusters;
 
+      if (this.areHarvesterHostsVisible) {
+        return this.rows;
+      }
+
       return this.rows.filter((token) => {
         const refs = token.metadata?.ownerReferences || [];
 

package/list/management.cattle.io.feature.vue

@@ -69,7 +69,7 @@ export default {
         <div class="feature-name">
           <div>{{ scope.row.nameDisplay }}</div>
           <i
-            v-if="scope.row.status.lockedValue !== null"
+            v-if="scope.row.status && scope.row.status.lockedValue !== null"
             class="icon icon-lock"
           />
         </div>

package/list/management.cattle.io.fleetworkspace.vue

@@ -21,6 +21,14 @@ export default {
     }
   },
 
+  created() {
+    this.$store.dispatch('showWorkspaceSwitcher', false);
+  },
+
+  beforeUnmount() {
+    this.$store.dispatch('showWorkspaceSwitcher', true);
+  },
+
   async fetch() {
     try {
       await this.$fetchType(this.resource);