@rancher/shell 3.0.9-rc.5 → 3.0.9

package/edit/token.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import sortBy from 'lodash/sortBy';
-import { MANAGEMENT, NORMAN } from '@shell/config/types';
+import { MANAGEMENT, EXT } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import DetailText from '@shell/components/DetailText';
 import Footer from '@shell/components/form/Footer';
@@ -14,6 +14,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { diffFrom } from '@shell/utils/time';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';
 import { SETTING } from '@shell/config/settings';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 
 export default {
   components: {
@@ -24,6 +25,7 @@ export default {
     LabeledSelect,
     RadioGroup,
     Select,
+    Checkbox,
   },
 
   mixins: [CreateEditView],
@@ -41,7 +43,11 @@ export default {
 
     return {
       errors: null,
+      user:   null,
       form:   {
+        enabled:           true,
+        description:       '',
+        clusterName:       '',
         expiryType:        'never',
         customExpiry:      0,
         customExpiryUnits: 'minute',
@@ -51,11 +57,13 @@ export default {
       accessKey:  '',
       secretKey:  '',
       maxTTL,
+      ttl:        ''
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
+
     scopes() {
       const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
       const kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
@@ -71,16 +79,20 @@ export default {
       const options = ['never', 'day', 'month', 'year', 'custom'];
       let opts = options.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.expiry.options.${ opt }`) }));
 
-      // When the TTL is anything other than 0, present only two options
+      // When the TTL is greater than 0, present only two options
       // (1) The maximum allowed
       // (2) Custom
-      if (this.maxTTL !== 0 ) {
+      if (this.maxTTL > 0 ) {
         const now = day();
         const expiry = now.add(this.maxTTL, 'minute');
         const max = diffFrom(expiry, now, this.t);
 
         opts = opts.filter((opt) => opt.value === 'custom');
         opts.unshift({ value: 'max', label: this.t('accountAndKeys.apiKeys.add.expiry.options.maximum', { value: max.string }) });
+      } else {
+        // maxTTL <= 0 means there is no maximum, so we can show the 'never' option which results in an infinite TTL
+        // OR if we set a positive TTL, then it assumes that value
+        opts = opts.filter((opt) => opt.value === 'never' || opt.value === 'custom');
       }
 
       return opts;
@@ -91,6 +103,9 @@ export default {
 
       return filtered.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.customExpiry.options.${ opt }`) }));
     },
+    hasNeverOption() {
+      return this.expiryOptions?.filter((opt) => opt.value === 'never')?.length === 1;
+    }
   },
 
   mounted() {
@@ -115,31 +130,33 @@ export default {
       });
     },
 
-    async actuallySave(url) {
+    async actuallySave() {
+      // update expiration value before save
       this.updateExpiry();
-      if ( this.isCreate ) {
-        // Description is a bit weird, so need to clone and set this
-        // rather than use this.value - need to find a way to set this if we ever
-        // want to allow edit (which I don't think we do)
-        const res = await this.value.save();
 
-        this.created = res;
-        this.ttlLimited = res.ttl !== this.value.ttl;
-        const token = this.created.token.split(':');
+      if ( this.isCreate ) {
+        const steveToken = await this.$store.dispatch('management/create', {
+          type: EXT.TOKEN,
+          spec: {
+            description:   this.form.description,
+            kind:          '',
+            userPrincipal: null, // will be set by the backend to the current user
+            clusterName:   this.form.clusterName,
+            enabled:       this.form.enabled,
+            ttl:           this.ttl
+            // userID: not needed as it will be set by the backend to the current user
+          }
+        });
+
+        const steveTokenSaved = await steveToken.save();
+
+        this.created = steveTokenSaved;
+        this.ttlLimited = this.created?.spec?.ttl !== this.ttl;
+        const token = this.created?.status?.bearerToken?.split(':');
 
         this.accessKey = token[0];
         this.secretKey = (token.length > 1) ? token[1] : '';
-        this.token = this.created.token;
-
-        // Force a refresh of the token so we get the expiry date correctly
-        await this.$store.dispatch('rancher/find', {
-          type: NORMAN.TOKEN,
-          id:   res.id,
-          opt:  { force: true }
-        }, { root: true });
-      } else {
-        // Note: update of existing key not supported currently
-        await this.value.save();
+        this.token = this.created?.status?.bearerToken;
       }
     },
 
@@ -159,7 +176,9 @@ export default {
       const units = (v === 'custom') ? this.form.customExpiryUnits : v;
       let ttl = 0;
 
-      if (units === 'max') {
+      if (v === 'never') {
+        ttl = -1;
+      } else if (units === 'max') {
         ttl = this.maxTTL * 60 * 1000;
       } else if ( units !== 'never' ) {
         const now = day();
@@ -167,7 +186,8 @@ export default {
 
         ttl = expiry.diff(now);
       }
-      this.value.ttl = ttl;
+
+      this.ttl = ttl;
     }
   }
 };
@@ -178,7 +198,7 @@ export default {
     <div class="pl-10 pr-10">
       <LabeledInput
         key="description"
-        v-model:value="value.description"
+        v-model:value="form.description"
         :placeholder="t('accountAndKeys.apiKeys.add.description.placeholder')"
         label-key="accountAndKeys.apiKeys.add.description.label"
         mode="edit"
@@ -186,13 +206,30 @@ export default {
       />
 
       <LabeledSelect
-        v-model:value="value.clusterId"
+        v-model:value="form.clusterName"
         class="mt-20 scope-select"
         label-key="accountAndKeys.apiKeys.add.scope"
         :options="scopes"
       />
 
-      <h5 class="pt-20">
+      <Checkbox
+        v-model:value="form.enabled"
+        class="mt-20 mb-20"
+        :mode="mode"
+        label-key="accountAndKeys.apiKeys.add.enabled"
+      />
+
+      <Banner
+        v-if="hasNeverOption"
+        color="warning"
+        class="mt-20"
+      >
+        <div>
+          {{ t('accountAndKeys.apiKeys.info.expiryOptionsWithNever') }}
+        </div>
+      </Banner>
+
+      <h5 class="mb-20">
         {{ t('accountAndKeys.apiKeys.add.expiry.label') }}
       </h5>
 
@@ -204,7 +241,9 @@ export default {
           class="mr-20"
           name="expiryGroup"
         />
-        <div class="ml-20 mt-10 expiry">
+        <div
+          class="ml-20 mt-10 expiry"
+        >
           <input
             v-model="form.customExpiry"
             :disabled="form.expiryType !== 'custom'"

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

@@ -68,6 +68,8 @@ describe('component: Workload', () => {
             $store:      {
               getters: {
                 'cluster/schemaFor': jest.fn(),
+                'cluster/canList':   jest.fn(),
+                currentStore:        () => 'cluster',
                 'type-map/labelFor': jest.fn(),
                 'i18n/t':            (text: string, v: {[key:string]: string}) => {
                   return `${ text }, ${ Object.values(v || {}) }`;
@@ -99,42 +101,5 @@ describe('component: Workload', () => {
 
       expect(result).toStrictEqual(newMessage);
     });
-
-    describe('secondaryResourceDataConfig', () => {
-      it('should filter out nodes with control-plane or etcd taints from workerNodes parsingFunc', () => {
-        const allNodeObjects = [
-          {
-            id:   'node-1',
-            spec: { taints: [{ key: 'node-role.kubernetes.io/control-plane', effect: 'NoSchedule' }] }
-          },
-          {
-            id:   'node-2',
-            spec: { taints: [{ key: 'node-role.kubernetes.io/etcd', effect: 'NoSchedule' }] }
-          },
-          {
-            id:   'node-3',
-            spec: { taints: [{ key: 'node-role.kubernetes.io/worker', effect: 'NoSchedule' }] }
-          },
-          {
-            id:   'node-4',
-            spec: { taints: [] }
-          },
-          {
-            id:   'node-5',
-            spec: {}
-          },
-          {
-            id:   'node-6',
-            spec: null
-          }
-        ];
-
-        const { data } = (Workload.mixins[2] as any).methods.secondaryResourceDataConfig.apply({ value: { metadata: { namespace: 'test' } } });
-        const workerNodesParsingFunc = data.node.applyTo.find((r: any) => r.var === 'workerNodes').parsingFunc;
-        const result = workerNodesParsingFunc(allNodeObjects);
-
-        expect(result).toStrictEqual(['node-3', 'node-4', 'node-5', 'node-6']);
-      });
-    });
   });
 });

package/edit/workload/index.vue

@@ -4,6 +4,7 @@ import FormValidation from '@shell/mixins/form-validation';
 import WorkLoadMixin from '@shell/edit/workload/mixins/workload';
 import { mapGetters } from 'vuex';
 import { FORM_TYPES } from '@shell/components/form/Security';
+import { NODE } from '@shell/config/types';
 
 export default {
   name:   'Workload',
@@ -21,9 +22,13 @@ export default {
     },
   },
   data() {
+    const inStore = this.$store.getters['currentStore'](NODE);
+    const canNode = this.$store.getters[`${ inStore }/canList`](NODE);
+
     return {
       selectedName: null,
       errors:       [],
+      canNode,
       FORM_TYPES
     };
   },
@@ -506,11 +511,11 @@ export default {
               <PodAffinity
                 :mode="mode"
                 :value="podTemplateSpec"
-                :nodes="allNodeObjects"
                 :loading="isLoadingSecondaryResources"
               />
             </Tab>
             <Tab
+              v-if="canNode"
               :label="t('workload.container.titles.nodeScheduling')"
               name="nodeScheduling-pod"
               :weight="tabWeightMap['nodeScheduling']"
@@ -518,7 +523,6 @@ export default {
               <NodeScheduling
                 :mode="mode"
                 :value="podTemplateSpec"
-                :nodes="workerNodes"
                 :loading="isLoadingSecondaryResources"
               />
             </Tab>

package/edit/workload/mixins/workload.js

@@ -5,7 +5,6 @@ import {
   CONFIG_MAP,
   SECRET,
   WORKLOAD_TYPES,
-  NODE,
   SERVICE,
   PVC,
   SERVICE_ACCOUNT,
@@ -263,9 +262,6 @@ export default {
     return {
       secondaryResourceData:      this.secondaryResourceDataConfig(),
       namespacedConfigMaps:       [],
-      allNodes:                   null,
-      workerNodes:                null,
-      allNodeObjects:             [],
       namespacedSecrets:          [],
       imagePullNamespacedSecrets: [],
       allServices:                [],
@@ -690,34 +686,6 @@ export default {
               }
             ]
           },
-          [NODE]: {
-            applyTo: [
-              { var: 'allNodeObjects' },
-              {
-                var:         'allNodes',
-                parsingFunc: (data) => {
-                  return data.map((node) => node.id);
-                }
-              },
-              {
-                var:         'workerNodes',
-                parsingFunc: (data) => {
-                  const keys = [
-                    `node-role.kubernetes.io/control-plane`,
-                    `node-role.kubernetes.io/etcd`
-                  ];
-
-                  return data
-                    .filter((node) => {
-                      const taints = node?.spec?.taints || [];
-
-                      return taints.every((taint) => !keys.includes(taint.key));
-                    })
-                    .map((node) => node.id);
-                }
-              },
-            ]
-          },
           [SERVICE]: {
             applyTo: [
               { var: 'allServices' },

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

@@ -0,0 +1,198 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import ManagementSetting from '@shell/list/management.cattle.io.setting.vue';
+import { SETTING } from '@shell/config/settings';
+
+const mockStore = {
+  getters: {
+    'prefs/get': () => false,
+    'i18n/t':    (key: string) => key,
+  },
+  dispatch: jest.fn()
+};
+
+const mockRoute = {
+  hash:   '',
+  params: {}
+};
+
+const mockRouter = {
+  push:    jest.fn(),
+  replace: jest.fn()
+};
+
+// Mock scrollIntoView
+const mockScrollIntoView = jest.fn();
+
+Object.defineProperty(Element.prototype, 'scrollIntoView', {
+  value:    mockScrollIntoView,
+  writable: true
+});
+
+// Mock querySelector
+const mockQuerySelector = jest.fn();
+
+Object.defineProperty(document, 'querySelector', {
+  value:    mockQuerySelector,
+  writable: true
+});
+
+describe('managementSetting - Scroll Behavior', () => {
+  let wrapper: any;
+
+  const createWrapper = (routeHash = '') => {
+    const route = { ...mockRoute, hash: routeHash };
+
+    return mount(ManagementSetting, {
+      global: {
+        mocks: {
+          $store:      mockStore,
+          $route:      route,
+          $router:     mockRouter,
+          $fetchState: { pending: false }
+        },
+        stubs: {
+          Loading: true,
+          Banner:  true,
+          Setting: true
+        }
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockScrollIntoView.mockClear();
+    mockQuerySelector.mockClear();
+
+    // Mock successful API response with cluster agent setting
+    mockStore.dispatch.mockResolvedValue([
+      {
+        id:               SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS,
+        value:            '{"enabled": true}',
+        default:          '{"enabled": false}',
+        availableActions: ['edit']
+      },
+      {
+        id:               SETTING.FLEET_AGENT_DEFAULT_PRIORITY_CLASS,
+        value:            '{"enabled": true}',
+        default:          '{"enabled": false}',
+        availableActions: ['edit']
+      }
+    ]);
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it('should scroll to hash anchor after data is loaded', async() => {
+    const mockElement = document.createElement('div');
+
+    mockQuerySelector.mockReturnValue(mockElement);
+
+    wrapper = createWrapper('#cluster-agent-default-priority-class');
+
+    // Trigger fetch manually since we can't easily test the async fetch hook
+    await wrapper.vm.$options.fetch.call(wrapper.vm);
+    await nextTick();
+
+    expect(mockQuerySelector).toHaveBeenCalledWith('#cluster-agent-default-priority-class');
+    expect(mockScrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block:    'start'
+    });
+  });
+
+  it('should not scroll if hash is empty', async() => {
+    wrapper = createWrapper('');
+
+    await wrapper.vm.$options.fetch.call(wrapper.vm);
+    await nextTick();
+
+    expect(mockQuerySelector).not.toHaveBeenCalled();
+    expect(mockScrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it('should not scroll if element is not found', async() => {
+    mockQuerySelector.mockReturnValue(null);
+
+    wrapper = createWrapper('#non-existent-element');
+
+    await wrapper.vm.$options.fetch.call(wrapper.vm);
+    await nextTick();
+
+    expect(mockQuerySelector).toHaveBeenCalledWith('#non-existent-element');
+    expect(mockScrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it('should scroll to fleet agent setting hash', async() => {
+    const mockElement = document.createElement('div');
+
+    mockQuerySelector.mockReturnValue(mockElement);
+
+    wrapper = createWrapper('#fleet-agent-default-priority-class');
+
+    await wrapper.vm.$options.fetch.call(wrapper.vm);
+    await nextTick();
+
+    expect(mockQuerySelector).toHaveBeenCalledWith('#fleet-agent-default-priority-class');
+    expect(mockScrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block:    'start'
+    });
+  });
+
+  it('should handle hash with special characters', async() => {
+    const mockElement = document.createElement('div');
+
+    mockQuerySelector.mockReturnValue(mockElement);
+
+    wrapper = createWrapper('#setting-with-special-chars_123');
+
+    await wrapper.vm.$options.fetch.call(wrapper.vm);
+    await nextTick();
+
+    expect(mockQuerySelector).toHaveBeenCalledWith('#setting-with-special-chars_123');
+    expect(mockScrollIntoView).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      block:    'start'
+    });
+  });
+
+  it('should render settings with correct IDs for anchors', async() => {
+    wrapper = createWrapper();
+
+    // Manually set the data to simulate successful fetch
+    wrapper.vm.settings = [
+      {
+        id:          SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS,
+        description: 'test-description',
+        data:        { value: 'test' },
+        customized:  false,
+        fromEnv:     false,
+        hasActions:  true
+      }
+    ];
+    wrapper.vm.provisioningSettings = [
+      {
+        id:          SETTING.FLEET_AGENT_DEFAULT_PRIORITY_CLASS,
+        description: 'test-description',
+        data:        { value: 'test' },
+        customized:  false,
+        fromEnv:     false,
+        hasActions:  true
+      }
+    ];
+
+    await nextTick();
+
+    const settingDivs = wrapper.findAll('div[id]');
+    const ids = settingDivs.map((div: any) => div.attributes('id'));
+
+    expect(ids).toContain(SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS);
+    expect(ids).toContain(SETTING.FLEET_AGENT_DEFAULT_PRIORITY_CLASS);
+  });
+});

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

@@ -66,6 +66,17 @@ export default {
 
     this.settings = settings;
     this.provisioningSettings = provisioningSettings;
+
+    this.$nextTick(() => {
+      // Handle scrolling to hash anchor after data is loaded
+      if (this.$route.hash) {
+        const element = document.querySelector(this.$route.hash);
+
+        if (element) {
+          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }
+    });
   },
 
   data() {
@@ -89,6 +100,7 @@ export default {
     </Banner>
     <div
       v-for="(setting) in settings"
+      :id="setting.id"
       :key="setting.id"
     >
       <Setting
@@ -101,6 +113,7 @@ export default {
     </h2>
     <div
       v-for="(setting) in provisioningSettings"
+      :id="setting.id"
       :key="setting.id"
     >
       <Setting

package/list/provisioning.cattle.io.cluster.vue

@@ -167,6 +167,12 @@ export default {
 
   },
 
+  methods: {
+    getCustomDetailLink(cluster) {
+      return cluster.isCapiHybrid ? null : cluster.detailLocation;
+    }
+  },
+
   $loadingResources() {
     // results are filtered so we wouldn't get the correct count on indicator...
     return { loadIndeterminate: true };
@@ -211,7 +217,6 @@ export default {
         </router-link>
       </template>
     </Masthead>
-
     <ResourceTable
       :headers="headers"
       :table-actions="true"
@@ -221,6 +226,8 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :get-custom-detail-link="getCustomDetailLink"
+      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->
@@ -266,6 +273,48 @@ export default {
           {{ t('cluster.explore') }}
         </button>
       </template>
+      <template #additional-sub-row="{row, fullColspan, tableActions}">
+        <tr
+          class="capi-unsupported"
+          :class="{'has-description': !!row.stateDescription}"
+        >
+          <td
+            v-if="row.isCapiHybrid"
+            class="row-check"
+          />
+          <td
+            v-if="row.isCapiHybrid"
+            :data-testid="`capi-unsupported-warning-${row?.metadata?.name}`"
+            :colspan="fullColspan - (tableActions ? 1: 0)"
+          >
+            <div
+              class="text-warning"
+              :class="{'mt-5': !!row.stateDescription.trim()}"
+            >
+              <i class="icon icon-warning" />{{ t('cluster.capi.notSupported') }}
+            </div>
+          </td>
+        </tr>
+      </template>
     </ResourceTable>
   </div>
 </template>
+
+<style scoped lang="scss">
+  .capi-unsupported {
+    &.has-description {
+      border-bottom: none;
+      padding: 0px;
+      td {
+        padding-top: 0px;
+      }
+    }
+
+    & div {
+      & i {
+        margin-right: 0.1em;
+      }
+      display: flex;
+    }
+  }
+</style>

package/list/secret.vue

@@ -7,8 +7,8 @@ import PaginatedResourceTable from '@shell/components/PaginatedResourceTable';
 import { TableColumn } from '@shell/types/store/type-map';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { mapGetters } from 'vuex';
-import { SECRET_CLONE, SECRET_PROJECT_SCOPED } from '@shell/config/table-headers';
-import { STEVE_SECRET_CLONE } from '@shell/config/pagination-table-headers';
+import { SECRET_ORIGIN } from '@shell/config/table-headers';
+import { STEVE_SECRET_ORIGIN } from '@shell/config/pagination-table-headers';
 
 export default {
   name: 'ListSecret',
@@ -61,13 +61,8 @@ export default {
 
     if (this.canViewProjects) {
       // if the user can see projects, add a column to let them know if it's a secret from a project scoped secret
-      headers.push(SECRET_CLONE);
-      headersSSP.push(STEVE_SECRET_CLONE);
-      if (this.currentCluster.isLocal) {
-        // if the user is on the local cluster, add a column to let them know if it's a project scoped secret (from another cluster)
-        headers.push(SECRET_PROJECT_SCOPED);
-        headersSSP.push(SECRET_PROJECT_SCOPED);
-      }
+      headers.push(SECRET_ORIGIN);
+      headersSSP.push(STEVE_SECRET_ORIGIN);
     }
 
     headers.push(this.namespacedHeaders[this.namespacedHeaders.length - 1]);