@rancher/shell 3.0.6 → 3.0.8-rc.1

package/edit/auth/github.vue

@@ -4,16 +4,15 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import { RadioGroup } from '@components/Form/Radio';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import CopyToClipboard from '@shell/components/CopyToClipboard';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import { MANAGEMENT } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
 import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
-import InfoBox from '@shell/components/InfoBox';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
-
-const NAME = 'github';
+import FileSelector from '@shell/components/form/FileSelector';
+import GithubSteps from '@shell/edit/auth/github-steps.vue';
+import GithubAppSteps from '@shell/edit/auth/github-app-steps.vue';
 
 export default {
   components: {
@@ -21,11 +20,12 @@ export default {
     CruResource,
     RadioGroup,
     LabeledInput,
-    CopyToClipboard,
     AllowedPrincipals,
     AuthBanner,
-    InfoBox,
-    AuthProviderWarningBanners
+    AuthProviderWarningBanners,
+    FileSelector,
+    GithubSteps,
+    GithubAppSteps,
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -60,7 +60,7 @@ export default {
     },
 
     displayName() {
-      return this.t(`model.authConfig.provider.${ NAME }`);
+      return this.t(`model.authConfig.provider.${ this.NAME }`);
     },
 
     tArgs() {
@@ -73,7 +73,7 @@ export default {
     },
 
     NAME() {
-      return NAME;
+      return this.isGithubApp ? 'githubapp' : 'github';
     },
 
     AUTH_CONFIG() {
@@ -86,7 +86,27 @@ export default {
         githubConfig: this.model,
         description:  'Enable GitHub',
       };
-    }
+    },
+
+    isGithubApp() {
+      return this.model?.id === 'githubapp';
+    },
+
+    steps() {
+      return this.isGithubApp ? GithubAppSteps : GithubSteps;
+    },
+
+    validationPassed() {
+      if (!this.model.clientId || !this.model.clientSecret) {
+        return false;
+      }
+
+      if (this.isGithubApp && (!this.model.appId || !this.model.privateKey)) {
+        return false;
+      }
+
+      return true;
+    },
 
   },
 
@@ -109,6 +129,10 @@ export default {
         this.model.hostname = match[4] || 'github.com';
       }
     },
+
+    updatePrivateKey(content) {
+      this.model.privateKey = content;
+    },
   },
 };
 </script>
@@ -122,7 +146,7 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="validationPassed"
       :finish-button-mode="model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
@@ -139,7 +163,7 @@ export default {
         >
           <template #rows>
             <tr><td>{{ t(`authConfig.${ NAME }.table.server`) }}: </td><td>{{ baseUrl }}</td></tr>
-            <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ value.clientId }}</td></tr>
+            <tr><td>{{ t(`authConfig.${ NAME }.table.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
           </template>
         </AuthBanner>
 
@@ -156,7 +180,17 @@ export default {
         <AuthProviderWarningBanners
           v-if="!model.enabled"
           :t-args="tArgs"
-        />
+        >
+          <template
+            v-if="isGithubApp"
+            #additional-warning
+          >
+            <span
+              v-clean-html="t(`authConfig.${NAME}.warning`, {}, true)"
+              data-testid="github-app-banner"
+            />
+          </template>
+        </AuthProviderWarningBanners>
 
         <h3 v-t="`authConfig.${NAME}.target.label`" />
         <RadioGroup
@@ -182,60 +216,18 @@ export default {
           </div>
         </div>
 
-        <InfoBox
-          :step="1"
-          class="step-box"
-        >
-          <ul class="step-list">
-            <li v-clean-html="t(`authConfig.${NAME}.form.prefix.1`, tArgs, true)" />
-            <li v-clean-html="t(`authConfig.${NAME}.form.prefix.2`, tArgs, true)" />
-            <li v-clean-html="t(`authConfig.${NAME}.form.prefix.3`, tArgs, true)" />
-          </ul>
-        </InfoBox>
-        <InfoBox
-          :step="2"
-          class="step-box"
-        >
-          <ul class="step-list">
-            <li>
-              {{ t(`authConfig.${NAME}.form.instruction`, tArgs, true) }}
-              <ul class="mt-10">
-                <li><b>{{ t(`authConfig.${NAME}.form.app.label`) }}</b>: <span v-clean-html="t(`authConfig.${NAME}.form.app.value`, tArgs, true)" /></li>
-                <li>
-                  <b>{{ t(`authConfig.${NAME}.form.homepage.label`) }}</b>: {{ serverUrl }} <CopyToClipboard
-                    label-as="tooltip"
-                    :text="serverUrl"
-                    class="icon-btn"
-                    action-color="bg-transparent"
-                  />
-                </li>
-                <li><b>{{ t(`authConfig.${NAME}.form.description.label`) }}</b>: <span v-clean-html="t(`authConfig.${NAME}.form.description.value`, tArgs, true)" /></li>
-                <li>
-                  <b>{{ t(`authConfig.${NAME}.form.callback.label`) }}</b>: {{ serverUrl }} <CopyToClipboard
-                    :text="serverUrl"
-                    label-as="tooltip"
-                    class="icon-btn"
-                    action-color="bg-transparent"
-                  />
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </InfoBox>
-        <InfoBox
-          :step="3"
-          class="mb-20"
-        >
-          <ul class="step-list">
-            <li v-clean-html="t(`authConfig.${NAME}.form.suffix.1`, tArgs, true)" />
-            <li v-clean-html="t(`authConfig.${NAME}.form.suffix.2`, tArgs, true)" />
-          </ul>
-        </InfoBox>
+        <component
+          :is="steps"
+          :t-args="tArgs"
+          :name="NAME"
+        />
 
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientId"
+              required
+              data-testid="client-id"
               :label="t(`authConfig.${NAME}.clientId.label`)"
               :mode="mode"
             />
@@ -243,21 +235,58 @@ export default {
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.clientSecret"
+              required
+              data-testid="client-secret"
               type="password"
               :label="t(`authConfig.${NAME}.clientSecret.label`)"
               :mode="mode"
             />
           </div>
         </div>
+        <template v-if="isGithubApp">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.appId"
+                required
+                data-testid="app-id"
+                :label="t(`authConfig.${NAME}.githubAppId.label`)"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.installationId"
+                data-testid="installation-id"
+                :label="t(`authConfig.${NAME}.installationId.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.privateKey"
+                required
+                data-testid="private-key"
+                type="multiline"
+                :label="t(`authConfig.${NAME}.privateKey.label`)"
+                :mode="mode"
+              />
+              <FileSelector
+                class="btn btn-sm role-secondary mt-10"
+                :label="t('generic.readFromFile')"
+                @selected="updatePrivateKey"
+              />
+            </div>
+          </div>
+        </template>
       </template>
     </CruResource>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .step-list li:not(:last-child) {
-    margin-bottom: 8px;
-  }
   .banner {
     display: block;
 

package/edit/auth/oidc.vue

@@ -59,11 +59,16 @@ export default {
         userInfoEndpoint: null,
       },
       // TODO #13457: this is duplicated due wrong format
-      oidcScope: [],
-      SLO_OPTION_VALUES
+      oidcScope:       [],
+      SLO_OPTION_VALUES,
+      addCustomClaims: false,
     };
   },
 
+  created() {
+    this.registerBeforeHook(this.willSave, 'willSave');
+  },
+
   computed: {
     tArgs() {
       return {
@@ -140,6 +145,10 @@ export default {
       return this.model?.id === 'cognito';
     },
 
+    isGenericOidc() {
+      return this.model?.id === 'genericoidc';
+    },
+
     isLogoutAllSupported() {
       return this.model?.logoutAllSupported;
     },
@@ -220,6 +229,15 @@ export default {
         this.model.logoutAllForced = false;
         break;
       }
+    },
+
+    model: {
+      handler(newVal) {
+        if (newVal?.nameClaim || newVal?.groupsClaim || newVal?.emailClaim) {
+          this.addCustomClaims = true;
+        }
+      },
+      once: true
     }
   },
 
@@ -248,6 +266,14 @@ export default {
 
     updateScope() {
       this.model.scope = this.oidcScope.join(' ');
+    },
+
+    willSave() {
+      if (this.isGenericOidc && !this.addCustomClaims) {
+        this.model.nameClaim = undefined;
+        this.model.groupsClaim = undefined;
+        this.model.emailClaim = undefined;
+      }
     }
   }
 };
@@ -390,21 +416,60 @@ export default {
           </div>
         </div>
 
-        <!-- Allow group search -->
-        <div
-          v-if="supportsGroupSearch"
-          class="row mb-20"
-        >
-          <div class="col span-6">
-            <Checkbox
-              v-model:value="model.groupSearchEnabled"
-              data-testid="input-group-search"
-              :label="t('authConfig.oidc.groupSearch.label')"
-              :tooltip="t('authConfig.oidc.groupSearch.tooltip')"
-              :mode="mode"
-            />
+        <template v-if="isGenericOidc || supportsGroupSearch">
+          <div
+            class="row mb-20"
+          >
+            <div class="col span-6 checkbox-flex">
+              <!-- Allow group search -->
+              <Checkbox
+                v-if="supportsGroupSearch"
+                v-model:value="model.groupSearchEnabled"
+                data-testid="input-group-search"
+                :label="t('authConfig.oidc.groupSearch.label')"
+                :tooltip="t('authConfig.oidc.groupSearch.tooltip')"
+                :mode="mode"
+              />
+              <Checkbox
+                v-if="isGenericOidc"
+                v-model:value="addCustomClaims"
+                data-testid="input-add-custom-claims"
+                :label="t('authConfig.oidc.customClaims.enable.label')"
+                :tooltip="t('authConfig.oidc.customClaims.enable.tooltip')"
+                :mode="mode"
+              />
+            </div>
           </div>
-        </div>
+        </template>
+
+        <template v-if="addCustomClaims">
+          <h4>{{ t('authConfig.oidc.customClaims.label') }}</h4>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.nameClaim"
+                :label="t(`authConfig.oidc.customClaims.nameClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.groupsClaim"
+                :label="t(`authConfig.oidc.customClaims.groupsClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.emailClaim"
+                :label="t(`authConfig.oidc.customClaims.emailClaim.label`)"
+                :mode="mode"
+              />
+            </div>
+          </div>
+        </template>
 
         <!-- Scopes -->
         <div class="row mb-20">
@@ -608,4 +673,9 @@ export default {
       margin: 0 3px;
     }
   }
+
+  .checkbox-flex {
+    display: flex;
+    flex-direction: column;
+  }
 </style>

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

@@ -29,6 +29,8 @@ import UnitInput from '@shell/components/form/UnitInput';
 import FleetClusterTargets from '@shell/components/fleet/FleetClusterTargets/index.vue';
 import { toSeconds } from '@shell/utils/duration';
 import FleetValuesFrom from '@shell/components/fleet/FleetValuesFrom.vue';
+import FleetSecretSelector from '@shell/components/fleet/FleetSecretSelector.vue';
+import FleetConfigMapSelector from '@shell/components/fleet/FleetConfigMapSelector.vue';
 
 const MINIMUM_POLLING_INTERVAL = 15;
 
@@ -50,6 +52,8 @@ export default {
     Checkbox,
     CruResource,
     FleetClusterTargets,
+    FleetConfigMapSelector,
+    FleetSecretSelector,
     FleetValuesFrom,
     YamlEditor,
     LabeledInput,
@@ -230,7 +234,15 @@ export default {
       }
 
       return null;
-    }
+    },
+
+    downstreamSecretsList() {
+      return (this.value.spec.helm.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);
+    },
   },
 
   watch: {
@@ -429,7 +441,24 @@ export default {
         }];
         break;
       }
-    }
+    },
+
+    updateDownstreamResources(kind, list) {
+      switch (kind) {
+      case 'Secret':
+        this.value.spec.helm.downstreamResources = [
+          ...(this.value.spec.helm.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'),
+          ...(list || []).map((name) => ({ name, kind: 'ConfigMap' })),
+        ];
+        break;
+      }
+    },
   },
 };
 </script>
@@ -711,6 +740,26 @@ export default {
 
       <h2 v-t="'fleet.helmOp.resources.label'" />
 
+      <div class="row mt-20 mb-20">
+        <div class="col span-6">
+          <FleetSecretSelector
+            :value="downstreamSecretsList"
+            :namespace="value.metadata.namespace"
+            :mode="mode"
+            @update:value="updateDownstreamResources('Secret', $event)"
+          />
+        </div>
+      </div>
+      <div class="row mt-20 mb-20">
+        <div class="col span-6">
+          <FleetConfigMapSelector
+            :value="downstreamConfigMapsList"
+            :namespace="value.metadata.namespace"
+            :mode="mode"
+            @update:value="updateDownstreamResources('ConfigMap', $event)"
+          />
+        </div>
+      </div>
       <div class="resource-handling mb-30">
         <Checkbox
           v-model:value="correctDriftEnabled"

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

@@ -149,25 +149,35 @@ export default {
   },
   watch: {
     namespace: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.podSelector': {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.namespaceSelector': {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     'value.ipBlock.cidr':   'validateCIDR',
     'value.ipBlock.except': 'validateCIDR',
     podSelectorExpressions: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     },
     namespaceSelectorExpressions: {
-      handler:   'debouncedUpdateMatches',
+      handler() {
+        this.debouncedUpdateMatches();
+      },
       immediate: true
     }
   },

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -475,16 +475,17 @@ describe('component: rke2', () => {
         },
         provider: 'custom'
       },
-      data: () => ({
-        agentArgs: {
+      computed: {
+        ...rke2.computed,
+        agentArgs: () => ({
           'cloud-provider-name': {
             options: [
               'azure',
               'amazon'
             ]
           }
-        }
-      }),
+        })
+      },
       global: {
         mocks: {
           ...defaultMocks,
@@ -519,9 +520,10 @@ describe('component: rke2', () => {
         },
         provider: 'custom'
       },
-      data: () => ({
-        canAzureMigrateOnEdit: true,
-        agentArgs:             {
+      computed: {
+        ...rke2.computed,
+        canAzureMigrateOnEdit: () => true,
+        agentArgs:             () => ({
           'cloud-provider-name': {
             options: [
               'azure',
@@ -529,8 +531,8 @@ describe('component: rke2', () => {
               'external'
             ]
           }
-        }
-      }),
+        })
+      },
       global: {
         mocks: {
           ...defaultMocks,

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -28,7 +28,7 @@ import {
 } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import {
-  getAllOptionsAfterCurrentVersion, filterOutDeprecatedPatchVersions, isHarvesterSatisfiesVersion, labelForAddon, initSchedulingCustomization
+  getAllOptionsAfterCurrentVersion, filterOutDeprecatedPatchVersions, isHarvesterSatisfiesVersion, labelForAddon, initSchedulingCustomization, addonConfigPreserve
 } from '@shell/utils/cluster';
 
 import { BadgeState } from '@components/BadgeState';
@@ -162,6 +162,10 @@ export default {
     this.schedulingCustomizationOriginallyEnabled = sc.schedulingCustomizationOriginallyEnabled;
     this.errors = this.errors.concat(sc.errors);
 
+    if (this.isEdit) {
+      this.originalKubeVersion = this.versionOptions.find((v) => v.value === this.liveValue.spec.kubernetesVersion);
+    }
+
     Object.entries(this.chartValues).forEach(([name, value]) => {
       const key = this.chartVersionKey(name);
 
@@ -278,6 +282,9 @@ export default {
       REGISTRIES_TAB_NAME,
       labelForAddon,
       etcdConfigValid:                          true,
+      addonConfigDiffs:                         {},
+      originalKubeVersion:                      null,
+      isEmpty,
     };
   },
 
@@ -921,8 +928,22 @@ export default {
       }
     },
 
-    selectedVersion() {
-      this.versionInfo = {}; // Invalidate cache such that version info relevent to selected kube version is updated
+    async selectedVersion(neu) {
+      if (this.isEdit) {
+        const {
+          addonConfigDiffs, addonNames, userChartValues, $store
+        } = this;
+
+        await addonConfigPreserve(
+          {
+            addonConfigDiffs, addonNames, userChartValues, $store
+          },
+          this.originalKubeVersion?.charts,
+          neu?.charts
+        );
+      }
+
+      this.versionInfo = {}; // Invalidate cache such that version info relevant to selected kube version is updated
 
       // Allow time for addonNames to update... then fetch any missing addons
       this.$nextTick(() => this.initAddons());
@@ -1511,10 +1532,15 @@ export default {
       });
     },
 
-    showAddonConfirmation() {
-      return new Promise((resolve, reject) => {
+    showAddonConfirmation(addonNames, previousKubeVersion, newKubeVersion) {
+      return new Promise((resolve) => {
         this.$store.dispatch('cluster/promptModal', {
-          component: 'AddonConfigConfirmationDialog',
+          component:      'AddonConfigConfirmationDialog',
+          componentProps: {
+            addonNames,
+            previousKubeVersion,
+            newKubeVersion
+          },
           resources: [(value) => resolve(value)]
         });
       });
@@ -1555,10 +1581,28 @@ export default {
       const isEditVersion = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
 
       if (isEditVersion) {
-        const shouldContinue = await this.showAddonConfirmation();
+        const hasDiffs = Object.values(this.addonConfigDiffs).some((d) => !isEmpty(d));
+
+        if (hasDiffs) {
+          const addonNamesWithDiffs = [];
+
+          for (const name in this.addonConfigDiffs) {
+            const diff = this.addonConfigDiffs[name];
+
+            if (!isEmpty(diff)) {
+              addonNamesWithDiffs.push(name);
+            }
+          }
 
-        if (!shouldContinue) {
-          return btnCb('cancelled');
+          const shouldContinue = await this.showAddonConfirmation(
+            addonNamesWithDiffs,
+            this.liveValue.spec.kubernetesVersion,
+            this.value.spec.kubernetesVersion
+          );
+
+          if (!shouldContinue) {
+            return btnCb('cancelled');
+          }
         }
       }
 
@@ -2521,6 +2565,9 @@ export default {
               :addons-rev="addonsRev"
               :user-chart-values-temp="userChartValuesTemp"
               :init-yaml-editor="initYamlEditor"
+              :has-diff="!isEmpty(addonConfigDiffs[v.name])"
+              :previous-kube-version="liveValue?.spec?.kubernetesVersion"
+              :new-kube-version="value.spec.kubernetesVersion"
               @update:value="$emit('input', $event)"
               @update-questions="syncChartValues"
               @update-values="updateValues"