@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.10

package/directives/ui-context.ts

@@ -0,0 +1,103 @@
+import { get, isEmpty } from '@shell/utils/object';
+import { generateRandomAlphaString } from '@shell/utils/string';
+
+interface Context {
+  tag: string;
+  path?: string;
+  value?: any;
+  hookable?: boolean;
+  description?: string;
+  icon?: string;
+  store?: any;
+}
+
+function isValid(context: Context ): context is Context {
+  return (
+    context !== null &&
+    typeof context === 'object' &&
+    (
+      (context.path === undefined && context.value === undefined) || // both undefined is allowed
+      (typeof context.path === 'string' && context.path?.length > 0 && context.value === undefined) || // path defined, value undefined
+      (context.value !== undefined && context.path === undefined) // value defined, path undefined
+    ) &&
+    typeof context.tag === 'string' && context.tag?.length > 0 &&
+    (typeof context.description === 'string' || context.description === undefined)
+  );
+}
+
+/** UI Context Directive
+ *
+ * Usage:
+ *   <div v-ui-context="{ tag: 'example-tag', path: 'some.path.in.component', description: 'An example context' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', value: 'Direct Value', description: 'An example context with direct value' }"></div>
+ *   or
+ *   <div v-ui-context="{ tag: 'example-tag', description: 'An example context with text content' }">Text Content Value</div>
+ *
+ * The directive will register the context on mount and unregister it before unmounting.
+ *
+ * The context object must have a 'tag' and either a 'path' or a 'value'.
+ * If both 'path' and 'value' are undefined, the element's textContent will be used as the value.
+ *
+ * !IMPORTANT:
+ *   The value object will be reactive only when using 'path'.
+ *   Using 'value' or textContent will not be reactive.
+ *
+*/
+export default {
+  async mounted(el: any, binding: { value: Context, instance: any }) {
+    const context: Context = binding.value;
+
+    if (!context || isEmpty(context)) {
+      return;
+    }
+
+    if (!isValid(context)) {
+      // eslint-disable-next-line no-console
+      console.warn(`[ui-context] invalid value: ${ JSON.stringify({ tag: (context as Context).tag, description: (context as Context).description }) }`);
+
+      return;
+    }
+
+    if (context.path === undefined && context.value === undefined) {
+      // path and value undefined, use textContent as value
+      context.value = el.textContent;
+    } else if (context.value === undefined) {
+      // Use context.value directly if provided, otherwise resolve it from the component instance using context.path
+      const value = get(binding.instance, context.path);
+
+      if (value === undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(`[ui-context] path "${ context.path }" is undefined on the component instance`);
+
+        return;
+      }
+
+      context.value = value;
+    }
+
+    delete context.path;
+
+    if (context.hookable) {
+      const hookId = generateRandomAlphaString(12);
+
+      el.setAttribute('ux-context-hook-id', hookId);
+      (context as any).hookId = hookId;
+    }
+
+    const store = context.store || binding.instance.$store || binding.instance.store;
+
+    if (store) {
+      delete context.store;
+      const id = await store.dispatch('ui-context/add', context);
+
+      el._uiContextRemove = async() => await store.dispatch('ui-context/remove', id);
+    }
+  },
+
+  async beforeUnmount(el: any) {
+    if (el._uiContextRemove) {
+      await el._uiContextRemove();
+    }
+  }
+};

package/edit/__tests__/fleet.cattle.io.helmop.test.ts

@@ -243,7 +243,7 @@ describe.each([
 
     await fleetSecretSelector.vm.$emit('update:value', ['secret2', 'secret3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
   });
 
   it('should update downstreamResources with new ConfigMaps when FleetConfigMapSelector emits update event', async() => {
@@ -260,6 +260,6 @@ describe.each([
 
     await fleetConfigMapSelector.vm.$emit('update:value', ['configMap2', 'configMap3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
   });
 });

package/edit/auth/__tests__/oidc.test.ts

@@ -221,5 +221,31 @@ describe('oidc.vue', () => {
       expect(issuer).toBe('');
       expect(endpoint).toBe('');
     });
+
+    it('custom claims fields should not appear in UI if Amazon cognito', async() => {
+      wrapper.vm.model.id = 'cognito';
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(false);
+      expect(groupsClaim.exists()).toBe(false);
+      expect(emailClaim.exists()).toBe(false);
+    });
+
+    it('custom claims fields should appear in UI if genericoidc', async() => {
+      wrapper.vm.model.id = 'genericoidc';
+      wrapper.vm.addCustomClaims = true;
+      await nextTick();
+
+      const nameClaim = wrapper.find('[data-testid="input-name-claim"]');
+      const groupsClaim = wrapper.find('[data-testid="input-groups-claim"]');
+      const emailClaim = wrapper.find('[data-testid="input-email-claim"]');
+
+      expect(nameClaim.exists()).toBe(true);
+      expect(groupsClaim.exists()).toBe(true);
+      expect(emailClaim.exists()).toBe(true);
+    });
   });
 });

package/edit/auth/github.vue

@@ -97,6 +97,11 @@ export default {
     },
 
     validationPassed() {
+      // Allows for configuring authorized users and groups
+      if ( this.model.enabled && !this.editConfig ) {
+        return true;
+      }
+
       if (!this.model.clientId || !this.model.clientSecret) {
         return false;
       }

package/edit/auth/oidc.vue

@@ -442,12 +442,14 @@ export default {
           </div>
         </template>
 
-        <template v-if="addCustomClaims">
+        <!-- Custom Claims -->
+        <template v-if="addCustomClaims && isGenericOidc">
           <h4>{{ t('authConfig.oidc.customClaims.label') }}</h4>
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.nameClaim"
+                data-testid="input-name-claim"
                 :label="t(`authConfig.oidc.customClaims.nameClaim.label`)"
                 :mode="mode"
               />
@@ -455,6 +457,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.groupsClaim"
+                data-testid="input-groups-claim"
                 :label="t(`authConfig.oidc.customClaims.groupsClaim.label`)"
                 :mode="mode"
               />
@@ -464,6 +467,7 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.emailClaim"
+                data-testid="input-email-claim"
                 :label="t(`authConfig.oidc.customClaims.emailClaim.label`)"
                 :mode="mode"
               />

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -209,6 +209,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="target"

package/edit/cloudcredential.vue

@@ -139,8 +139,8 @@ export default {
       const fromDrivers = [...this.nodeDrivers, ...this.kontainerDrivers]
         .filter((x) => x.spec.active && x.id !== 'rancherkubernetesengine')
         .map((x) => x.spec.displayName || x.id);
+      const fromExtensions = this.extensions?.filter((x) => !x.hidden).map((x) => x.id) || [];
 
-      const fromExtensions = this.extensions?.filter((x) => !!this.getCustomCloudCredentialComponent(x?.id)).map((x) => x?.id) || [];
       const providers = [...fromDrivers, ...fromExtensions];
 
       let types = uniq(providers.map((x) => this.$store.getters['plugins/credentialDriverFor'](x)));

package/edit/configmap.vue

@@ -111,6 +111,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"

package/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -278,6 +278,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="onTabChanged"
       >
         <Tab

package/edit/fleet.cattle.io.gitrepo.vue

@@ -400,16 +400,6 @@ export default {
       }
     },
 
-    scrollToBottom() {
-      this.$nextTick(() => {
-        const scrollable = document.getElementsByTagName('main')[0];
-
-        if (scrollable) {
-          scrollable.scrollTop = scrollable.scrollHeight;
-        }
-      });
-    },
-
     updateBeforeSave() {
       this.value.spec['correctDrift'] = { enabled: this.correctDriftEnabled };
 

package/edit/fleet.cattle.io.helmop.vue

@@ -237,11 +237,11 @@ export default {
     },
 
     downstreamSecretsList() {
-      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'Secret').map((r) => r.name);
+      return (this.value.spec.downstreamResources || []).filter((r) => r.kind === 'Secret').map((r) => r.name);
     },
 
     downstreamConfigMapsList() {
-      return (this.value.spec.helm.downstreamResources || []).filter((r) => r.kind === 'ConfigMap').map((r) => r.name);
+      return (this.value.spec.downstreamResources || []).filter((r) => r.kind === 'ConfigMap').map((r) => r.name);
     },
   },
 
@@ -446,14 +446,14 @@ export default {
     updateDownstreamResources(kind, list) {
       switch (kind) {
       case 'Secret':
-        this.value.spec.helm.downstreamResources = [
-          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'Secret'),
+        this.value.spec.downstreamResources = [
+          ...(this.value.spec.downstreamResources || []).filter((r) => r.kind !== 'Secret'),
           ...(list || []).map((name) => ({ name, kind: 'Secret' })),
         ];
         break;
       case 'ConfigMap':
-        this.value.spec.helm.downstreamResources = [
-          ...(this.value.spec.helm.downstreamResources || []).filter((r) => r.kind !== 'ConfigMap'),
+        this.value.spec.downstreamResources = [
+          ...(this.value.spec.downstreamResources || []).filter((r) => r.kind !== 'ConfigMap'),
           ...(list || []).map((name) => ({ name, kind: 'ConfigMap' })),
         ];
         break;

package/edit/helm.cattle.io.projecthelmchart.vue

@@ -143,6 +143,7 @@ export default {
           ref="tabs"
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Questions
             v-model:value="value.spec.values"

package/edit/k8s.cni.cncf.io.networkattachmentdefinition.vue

@@ -74,6 +74,7 @@ export default {
       class="mt-15"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="basics"

package/edit/logging-flow/index.vue

@@ -405,6 +405,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @changed="tabChanged($event)"
     >
       <Tab

package/edit/logging.banzaicloud.io.output/index.vue

@@ -212,6 +212,7 @@ export default {
         ref="tabbed"
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @changed="tabChanged($event)"
       >
         <Tab

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

@@ -199,7 +199,7 @@ export default {
 
     <Tabbed
       :side-tabs="true"
-      default-tab="members"
+      :default-tab="defaultTab || 'members'"
       :use-hash="useTabbedHash"
     >
       <!-- <Tab name="members" label-key="generic.members" :weight="2">

package/edit/management.cattle.io.project.vue

@@ -198,6 +198,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         v-if="canViewMembers"

package/edit/monitoring.coreos.com.alertmanagerconfig/index.vue

@@ -204,7 +204,10 @@ export default {
       @input="$emit('input', $event)"
     />
 
-    <Tabbed :use-hash="useTabbedHash">
+    <Tabbed
+      :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
+    >
       <Tab
         :label="t('monitoring.route.label')"
         :weight="1"

package/edit/monitoring.coreos.com.alertmanagerconfig/receiverConfig.vue

@@ -313,8 +313,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -155,6 +155,7 @@ export default {
         :side-tabs="true"
         :show-tabs-add-remove="mode !== 'view'"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
         @addTab="addRuleGroup"
         @removeTab="removeGroupRule"
       >

package/edit/monitoring.coreos.com.receiver/index.vue

@@ -218,8 +218,9 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
+
       @changed="tabChanged"
     >
       <Tab

package/edit/monitoring.coreos.com.route.vue

@@ -102,7 +102,7 @@ export default {
     <Tabbed
       ref="tabbed"
       :side-tabs="true"
-      default-tab="overview"
+      :default-tab="defaultTab || 'overview'"
       :use-hash="useTabbedHash"
     >
       <Tab

package/edit/namespace.vue

@@ -203,6 +203,7 @@ export default {
       :mode="mode"
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab

package/edit/networking.istio.io.destinationrule/index.vue

@@ -69,6 +69,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="subsets"

package/edit/networking.k8s.io.ingress/index.vue

@@ -229,6 +229,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         :label="firstTabLabel"

package/edit/networking.k8s.io.networkpolicy/PolicyRules.vue

@@ -59,6 +59,7 @@ export default {
           :side-tabs="true"
           :show-tabs-add-remove="mode !== 'view'"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
           @addTab="addPolicyRule"
           @removeTab="removePolicyRule"
         >

package/edit/networking.k8s.io.networkpolicy/index.vue

@@ -178,6 +178,7 @@ export default {
         <Tabbed
           :side-tabs="true"
           :use-hash="useTabbedHash"
+          :default-tab="defaultTab"
         >
           <Tab
             name="ingress"

package/edit/node.vue

@@ -51,6 +51,7 @@ export default {
       :value="value"
       :mode="mode"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
       @update:value="$emit('input', $event)"
     >
       <Tab

package/edit/persistentvolume/index.vue

@@ -22,6 +22,8 @@ import InfoBox from '@shell/components/InfoBox';
 import { mapFeature, UNSUPPORTED_STORAGE_DRIVERS } from '@shell/store/features';
 import ResourceManager from '@shell/mixins/resource-manager';
 
+const DEFAULT_ACCESS_MODES = ['ReadWriteOnce'];
+
 export default {
   name:         'PersistentVolume',
   inheritAttrs: false,
@@ -64,36 +66,42 @@ export default {
   },
 
   data() {
-    const NONE_OPTION = {
-      label: this.t('generic.none'),
-      value: ''
+    return {
+      secondaryResourceData: this.secondaryResourceDataConfig(),
+      storageClassOptions:   [],
+      currentClaim:          null,
+      plugin:                '',
+      initialNodeAffinity:   null,
+      NODE,
     };
-    const defaultAccessModes = ['ReadWriteOnce'];
+  },
 
+  created() {
     this.value['spec'] = this.value.spec || {};
-    this.value.spec['accessModes'] = this.value.spec.accessModes || defaultAccessModes;
+    this.value.spec['accessModes'] = this.value.spec.accessModes || DEFAULT_ACCESS_MODES;
     this.value.spec['capacity'] = this.value.spec.capacity || {};
     this.value.spec.capacity['storage'] = this.value.spec.capacity.storage || '10Gi';
-    this.value.spec['storageClassName'] = this.value.spec.storageClassName || NONE_OPTION.value;
+    this.value.spec['storageClassName'] = this.value.spec.storageClassName || this.noneOption.value;
 
     const foundPlugin = this.value.isLonghorn ? LONGHORN_PLUGIN : VOLUME_PLUGINS.find((plugin) => this.value.spec[plugin.value]);
-    const plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
 
-    return {
-      secondaryResourceData: this.secondaryResourceDataConfig(),
-      storageClassOptions:   [],
-      currentClaim:          null,
-      plugin,
-      NONE_OPTION,
-      NODE,
-      initialNodeAffinity:   clone(this.value.spec.nodeAffinity),
-    };
+    this.plugin = (foundPlugin || VOLUME_PLUGINS[0]).value;
+    this.initialNodeAffinity = clone(this.value.spec.nodeAffinity);
+
+    this.registerBeforeHook(this.willSave, 'willSave');
   },
 
   computed: {
     showUnsupportedStorage: mapFeature(UNSUPPORTED_STORAGE_DRIVERS),
     ...mapGetters(['currentProduct', 'currentCluster']),
 
+    noneOption() {
+      return {
+        label: this.t('generic.none'),
+        value: ''
+      };
+    },
+
     readWriteOnce: {
       get() {
         return this.value.spec.accessModes.includes('ReadWriteOnce');
@@ -149,10 +157,6 @@ export default {
     }
   },
 
-  created() {
-    this.registerBeforeHook(this.willSave, 'willSave');
-  },
-
   methods: {
     secondaryResourceDataConfig() {
       return {
@@ -168,7 +172,7 @@ export default {
                     value: s.metadata.name
                   }));
 
-                  storageClassOptions.unshift(this.NONE_OPTION);
+                  storageClassOptions.unshift(this.noneOption);
 
                   return storageClassOptions;
                 }
@@ -194,7 +198,7 @@ export default {
       return require(`./plugins/${ name }`).default;
     },
     willSave() {
-      if (this.value.spec.storageClassName === this.NONE_OPTION.value) {
+      if (this.value.spec.storageClassName === this.noneOption.value) {
         this.value.spec['storageClassName'] = null;
       }
 
@@ -280,6 +284,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="plugin-configuration"

package/edit/persistentvolume/plugins/awsElasticBlockStore.vue

@@ -14,25 +14,24 @@ export default {
       required: true,
     },
   },
-  data() {
+  created() {
     this.value.spec['awsElasticBlockStore'] = this.value.spec.awsElasticBlockStore || {};
     this.value.spec.awsElasticBlockStore['readOnly'] = this.value.spec.awsElasticBlockStore.readOnly || false;
     this.value.spec.awsElasticBlockStore['partition'] = this.value.spec.awsElasticBlockStore.partition || 0;
-
-    const readOnlyOptions = [
-      {
-        label: this.t('generic.yes'),
-        value: true
-      },
-      {
-        label: this.t('generic.no'),
-        value: false
-      }
-    ];
-
-    return { readOnlyOptions };
   },
   computed: {
+    readOnlyOptions() {
+      return [
+        {
+          label: this.t('generic.yes'),
+          value: true
+        },
+        {
+          label: this.t('generic.no'),
+          value: false
+        }
+      ];
+    },
     partition: {
       get() {
         return this.value.spec.awsElasticBlockStore.partition;