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

package/core/types-provisioning.ts

@@ -61,9 +61,13 @@ export interface ClusterProvisionerContext {
    */
   axios: any,
   /**
-   * Definition of the extension
+   * [Deprecated] Definition of the extension
    */
   $plugin: any,
+  /**
+   * Definition of the extension
+   */
+  $extension: any,
   /**
    * Function to retrieve a localised string
    */
@@ -158,6 +162,9 @@ export interface IClusterProvisioner {
    */
   hideCreate?: boolean
 
+  /** Is extension Prime-only */
+  prime?: boolean
+
   /**
    * Also show the provider card in the cluster importing flow
    * If not set, the card will only be shown in the cluster creation page

package/detail/pod.vue

@@ -97,6 +97,7 @@ export default {
 
         return {
           ...container,
+          kind:             'Container',
           status:           status || {},
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,

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

@@ -33,6 +33,8 @@ import { isAlternate } from '@shell/utils/platform';
 import DetailPage from '@shell/components/Resource/Detail/Page.vue';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
 import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+import AutoscalerTab from '@shell/components/AutoscalerTab.vue';
+import { isAutoscalerFeatureFlagEnabled } from '@shell/utils/autoscaler-utils';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
@@ -62,6 +64,7 @@ export default {
   emits: ['input'],
 
   components: {
+    AutoscalerTab,
     Banner,
     ResourceTable,
     ResourceTabs,
@@ -93,15 +96,15 @@ export default {
     await this.value.waitForProvisioner();
 
     // Support for the 'provisioner' extension
-    const extClass = this.$plugin.getDynamic('provisioner', this.value.machineProvider);
+    const extClass = this.$extension.getDynamic('provisioner', this.value.machineProvider);
 
     if (extClass) {
       this.extProvider = new extClass({
-        dispatch: this.$store.dispatch,
-        getters:  this.$store.getters,
-        axios:    this.$store.$axios,
-        $plugin:  this.$store.app.$plugin,
-        $t:       this.t
+        dispatch:   this.$store.dispatch,
+        getters:    this.$store.getters,
+        axios:      this.$store.$axios,
+        $extension: this.$store.app.$extension,
+        $t:         this.t
       });
 
       this.extDetailTabs = {
@@ -575,6 +578,7 @@ export default {
       // Hosted kubernetes providers with private endpoints need the registration tab
       // https://github.com/rancher/dashboard/issues/6036
       // https://github.com/rancher/dashboard/issues/4545
+
       if ( this.value.isHostedKubernetesProvider && this.value.isPrivateHostedProvider && !this.isClusterReady ) {
         return this.extDetailTabs.registration;
       }
@@ -620,6 +624,10 @@ export default {
 
     extDetailTabsConditions() {
       return this.extDetailTabs?.conditions;
+    },
+
+    showAutoScalerTab() {
+      return isAutoscalerFeatureFlagEnabled(this.$store) && this.value.hasAccessToAutoscalerConfigMap;
     }
   },
 
@@ -870,7 +878,7 @@ export default {
                     </div>
                   </div>
                   <div
-                    v-if="group.ref"
+                    v-if="group.ref && !group.ref.isAutoscalerEnabled"
                     class="right group-header-buttons mr-20"
                   >
                     <MachineSummaryGraph
@@ -1119,6 +1127,10 @@ export default {
               </template>
             </SortableTable>
           </Tab>
+          <AutoscalerTab
+            v-if="showAutoScalerTab"
+            :value="value"
+          />
         </ResourceTabs>
       </div>
     </template>

package/dialog/DeveloperLoadExtensionDialog.vue

@@ -4,6 +4,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { UI_PLUGIN } from '@shell/config/types';
 import { UI_PLUGIN_CHART_ANNOTATIONS, UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { DEVELOPER_LOAD_NAME_SUFFIX } from '@shell/core/extension-manager-impl';
 
 export default {
   emits: ['close'],
@@ -101,8 +102,16 @@ export default {
       const parts = name.split('-');
 
       if (parts.length >= 2) {
-        version = parts.pop();
-        crdName = parts.join('-');
+        // fixing the name-version separation, especially in RC versions
+        // like: elemental-3.0.1-rc.1
+        // on capturing version it must be "digit + dot + digit" + rest of string
+        const regex = /^(?<name>.+?)-(?<version>\d+\.\d+.*)$/;
+        const match = name.match(regex);
+
+        if (match && match.groups) {
+          version = match.groups.version;
+          crdName = match.groups.name;
+        }
       }
 
       if (this.persist) {
@@ -114,7 +123,7 @@ export default {
           },
           spec: {
             plugin: {
-              name:     crdName,
+              name:     `${ crdName }${ DEVELOPER_LOAD_NAME_SUFFIX }`,
               version,
               endpoint: url,
               noCache:  true,
@@ -136,7 +145,7 @@ export default {
         }
       }
 
-      this.$plugin.loadAsync(name, url).then(() => {
+      this.$extension.loadAsync(name, url).then(() => {
         this.closeDialog(true);
 
         this.$store.dispatch('growl/success', {

package/dialog/RollbackWorkloadDialog.vue

@@ -165,12 +165,9 @@ export default {
       return option.label;
     },
     sizeDialog() {
-      const dialogs = document.getElementsByClassName('modal-container');
-      const width = this.showDiff ? '85%' : '600px';
+      const modalWidth = this.showDiff ? '85%' : '600px';
 
-      if (dialogs.length === 1) {
-        dialogs[0].style.setProperty('width', width);
-      }
+      this.$store.commit('action-menu/updateModalData', [{ key: 'modalWidth', value: modalWidth }]);
     },
     sanitizeYaml(obj, path = '') {
       const res = {};

package/dialog/SearchDialog.vue

@@ -106,6 +106,7 @@ export default {
           :group="g"
           :can-collapse="false"
           :fixed-open="true"
+          :highlight-route="false"
           @close="$emit('close')"
         >
           <template #accordion>

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