@rancher/shell 3.0.8 → 3.0.9-rc.2

package/detail/__tests__/workload.test.ts

@@ -17,9 +17,8 @@ describe('findMatchingIngresses', () => {
     const mockThis = {
       ingressSchema:     true,
       allIngresses:      [],
-      matchingServices:  [],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -35,9 +34,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -54,9 +52,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service1' } } }] } }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -72,9 +69,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service2' } } }] } }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -90,9 +86,8 @@ describe('findMatchingIngresses', () => {
           spec:     { }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -108,9 +103,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: {} }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -126,9 +120,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: { paths: [{ backend: {} }] } }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);
@@ -152,9 +145,8 @@ describe('findMatchingIngresses', () => {
           spec:     { rules: [{ http: { paths: [{ backend: { service: { name: 'service2' } } }] } }] }
         }
       ],
-      matchingServices:  [{ metadata: { name: 'service1' } }],
       matchingIngresses: [],
-      value:             { metadata: { namespace: 'test' } }
+      value:             { metadata: { namespace: 'test' }, relatedServices: [{ metadata: { name: 'service1' } }] }
     };
 
     findMatchingIngresses.call(mockThis);

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

@@ -53,6 +53,11 @@ export default {
     },
 
     valuesYaml() {
+      // Prevent crash if data hasn't been fetched yet (e.g. secret during upgrade)
+      if (!this.value?.valuesLoaded) {
+        return '';
+      }
+
       const combined = mergeWithReplace(
         merge({}, this.value?.chartValues || {}),
         this.value?.values || {},
@@ -159,6 +164,7 @@ export default {
           :scrolling="false"
           :value="valuesYaml"
           editor-mode="VIEW_CODE"
+          mode="view"
         />
       </Tab>
       <Tab

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

@@ -59,6 +59,12 @@ export default {
     };
   },
 
+  created() {
+    if (this.workspace !== this.value.namespace) {
+      this.$store.commit('updateWorkspace', { value: this.value.namespace, getters: this.$store.getters });
+    }
+  },
+
   computed: {
     clusterId() {
       return this.value.id;

package/detail/workload/index.vue

@@ -2,22 +2,18 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { NAMESPACE as NAMESPACE_COL } from '@shell/config/table-headers';
 import {
-  POD, WORKLOAD_TYPES, SCALABLE_WORKLOAD_TYPES, SERVICE, INGRESS, NODE, NAMESPACE, WORKLOAD_TYPE_TO_KIND_MAPPING, METRICS_SUPPORTED_KINDS
+  POD, WORKLOAD_TYPES, SERVICE, INGRESS, NODE, NAMESPACE, WORKLOAD_TYPE_TO_KIND_MAPPING, METRICS_SUPPORTED_KINDS
 } from '@shell/config/types';
 import ResourceTable from '@shell/components/ResourceTable';
 import Tab from '@shell/components/Tabbed/Tab';
 import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
-import CountGauge from '@shell/components/CountGauge';
 import { allHash } from '@shell/utils/promise';
 import DashboardMetrics from '@shell/components/DashboardMetrics';
 import { mapGetters } from 'vuex';
 import { allDashboardsExist } from '@shell/utils/grafana';
-import PlusMinus from '@shell/components/form/PlusMinus';
-import { matches } from '@shell/utils/selector';
 import { PROJECT } from '@shell/config/labels-annotations';
 
-const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
 const WORKLOAD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-pods-1/rancher-workload-pods?orgId=1';
 const WORKLOAD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-workload-1/rancher-workload?orgId=1';
 
@@ -27,9 +23,7 @@ export default {
     Tab,
     Loading,
     ResourceTabs,
-    CountGauge,
     ResourceTable,
-    PlusMinus
   },
 
   mixins: [CreateEditView],
@@ -57,10 +51,6 @@ export default {
       hash.pods = this.value.fetchPods();
     }
 
-    if (this.serviceSchema) {
-      hash.servicesInNamespace = this.$store.dispatch('cluster/findAll', { type: SERVICE, opt: { namespaced: this.value.metadata.namespace } });
-    }
-
     if (this.value.type === WORKLOAD_TYPES.CRON_JOB) {
       hash.jobs = this.value.matchingJobs();
     }
@@ -85,7 +75,6 @@ export default {
         this.showProjectMetrics = await allDashboardsExist(this.$store, this.currentCluster.id, [this.WORKLOAD_PROJECT_METRICS_DETAIL_URL, this.WORKLOAD_PROJECT_METRICS_SUMMARY_URL], 'cluster', projectId);
       }
     }
-    this.findMatchingServices();
     this.findMatchingIngresses();
   },
 
@@ -97,9 +86,7 @@ export default {
 
   data() {
     return {
-      servicesInNamespace:             [],
       allIngresses:                    [],
-      matchingServices:                [],
       matchingIngresses:               [],
       allNodes:                        [],
       WORKLOAD_METRICS_DETAIL_URL,
@@ -223,55 +210,10 @@ export default {
       const total = this.isCronJob ? this.totalRuns : this.value.pods.length;
 
       return !jobGauges.find((jg) => jg.count === total);
-    },
-
-    canScale() {
-      return !!SCALABLE_TYPES.includes(this.value.type) && this.value.canUpdate;
-    },
+    }
   },
 
   methods: {
-    async scale(isUp) {
-      try {
-        if (isUp) {
-          await this.value.scaleUp();
-        } else {
-          await this.value.scaleDown();
-        }
-      } catch (err) {
-        this.$store.dispatch('growl/fromError', {
-          title: this.t('workload.list.errorCannotScale', { direction: isUp ? 'up' : 'down', workloadName: this.value.name }),
-          err
-        },
-        { root: true });
-      }
-    },
-    async scaleDown() {
-      await this.scale(false);
-    },
-    async scaleUp() {
-      await this.scale(true);
-    },
-    findMatchingServices() {
-      if (!this.serviceSchema) {
-        return [];
-      }
-
-      // Find Services that have selectors that match this workload's Pod(s).
-      this.matchingServices = this.servicesInNamespace.filter((service) => {
-        const selector = service.spec.selector;
-
-        for (let i = 0; i < this.value.pods.length; i++) {
-          const pod = this.value.pods[i];
-
-          if (service.metadata?.namespace === this.value.metadata?.namespace && matches(pod, selector)) {
-            return true;
-          }
-        }
-
-        return false;
-      });
-    },
     findMatchingIngresses() {
       if (!this.ingressSchema) {
         return [];
@@ -297,8 +239,8 @@ export default {
 
               if (!targetServiceName) continue;
 
-              for (let k = 0; k < this.matchingServices.length; k++) {
-                const service = this.matchingServices[k];
+              for (let k = 0; k < this.value.relatedServices.length; k++) {
+                const service = this.value.relatedServices[k];
                 const matchingServiceName = service?.metadata?.name;
 
                 if (ingress.metadata?.namespace === this.value.metadata?.namespace && matchingServiceName === targetServiceName) {
@@ -331,50 +273,6 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <div
-      v-if="canScale"
-      class="right-align flex"
-    >
-      <PlusMinus
-        class="text-right"
-        :label="t('tableHeaders.scale')"
-        :value="value.spec.replicas"
-        :disabled="!isScalable"
-        @minus="scaleDown"
-        @plus="scaleUp"
-      />
-    </div>
-    <h3>
-      {{ isJob || isCronJob ? t('workload.detailTop.runs') :t('workload.detailTop.pods') }}
-    </h3>
-    <div
-      v-if="value.pods || value.jobGauges"
-      class="gauges mb-20"
-      :class="{'gauges__pods': !!value.pods}"
-    >
-      <template v-if="value.jobGauges">
-        <CountGauge
-          v-for="(group, key) in value.jobGauges"
-          :key="key"
-          :total="isCronJob? totalRuns : value.pods.length"
-          :useful="group.count || 0"
-          :graphical="showJobGaugeCircles"
-          :primary-color-var="`--sizzle-${group.color}`"
-          :name="t(`workload.gaugeStates.${key}`)"
-        />
-      </template>
-      <template v-else>
-        <CountGauge
-          v-for="(group, key) in podGauges"
-          :key="key"
-          :total="value.pods.length"
-          :useful="group.count || 0"
-          :graphical="showPodGaugeCircles"
-          :primary-color-var="`--sizzle-${group.color}`"
-          :name="key"
-        />
-      </template>
-    </div>
     <ResourceTabs
       :value="value"
     >
@@ -455,7 +353,7 @@ export default {
           {{ t('workload.detail.cannotViewServices') }}
         </p>
         <p
-          v-else-if="matchingServices.length === 0"
+          v-else-if="value.relatedServices.length === 0"
           class="caption"
         >
           {{ t('workload.detail.cannotFindServices') }}
@@ -467,8 +365,8 @@ export default {
           {{ t('workload.detail.serviceListCaption') }}
         </p>
         <ResourceTable
-          v-if="serviceSchema && matchingServices.length > 0"
-          :rows="matchingServices"
+          v-if="serviceSchema && value.relatedServices.length > 0"
+          :rows="value.relatedServices"
           :headers="serviceHeaders"
           key-field="id"
           :schema="serviceSchema"

package/edit/__tests__/projectsecret.test.ts

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import ProjectSecretProxy from '@shell/edit/projectsecret.vue';
+import Secret from '@shell/edit/secret/index.vue';
+
+describe('component: ProjectSecretProxy', () => {
+  it('should render Secret component', () => {
+    const wrapper = shallowMount(ProjectSecretProxy, {
+      global: { stubs: { Secret: true } },
+      attrs:  { someAttr: 'someValue' }
+    });
+
+    const secretComponent = wrapper.findComponent(Secret);
+
+    expect(secretComponent.exists()).toBe(true);
+  });
+
+  it('should pass attributes to Secret component', () => {
+    const wrapper = shallowMount(ProjectSecretProxy, {
+      global: { stubs: { Secret: true } },
+      attrs:  {
+        mode:  'create',
+        value: { metadata: { name: 'test' } }
+      }
+    });
+
+    const secretComponent = wrapper.findComponent(Secret);
+
+    expect(secretComponent.attributes('mode')).toBe('create');
+  });
+
+  it('should pass event listeners to Secret component', () => {
+    const onInput = jest.fn();
+    const wrapper = shallowMount(ProjectSecretProxy, {
+      global: { stubs: { Secret: true } },
+      attrs:  { onInput }
+    });
+
+    const secretComponent = wrapper.findComponent(Secret);
+
+    expect(secretComponent.vm.$attrs.onInput).toBe(onInput);
+  });
+});

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

@@ -247,5 +247,55 @@ describe('oidc.vue', () => {
       expect(groupsClaim.exists()).toBe(true);
       expect(emailClaim.exists()).toBe(true);
     });
+
+    it('should render addCustomClaims and supportsGroupSearch  checkbox when provider is keycloak', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      await nextTick();
+
+      const addCustomClaimsCheckbox = wrapper.find('[data-testid="input-add-custom-claims"]');
+      const groupSearchCheckbox = wrapper.find('[data-testid="input-group-search"]');
+
+      expect(addCustomClaimsCheckbox.exists()).toBe(true);
+      expect(groupSearchCheckbox.exists()).toBe(true);
+    });
+
+    it('should render custom claims section when provider is keycloak and addCustomClaims is true', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      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);
+    });
+
+    it('should render both addCustomClaims and groupSearch checkboxes when provider is genericoidc', async() => {
+      wrapper.vm.model.id = 'genericoidc';
+      await nextTick();
+
+      const addCustomClaimsCheckbox = wrapper.find('[data-testid="input-add-custom-claims"]');
+      const groupSearchCheckbox = wrapper.find('[data-testid="input-group-search"]');
+
+      expect(addCustomClaimsCheckbox.exists()).toBe(true);
+      expect(groupSearchCheckbox.exists()).toBe(true);
+    });
+
+    it('should NOT render custom claims section when provider is keycloak and addCustomClaims is false', async() => {
+      wrapper.vm.model.id = 'keycloakoidc';
+      wrapper.vm.addCustomClaims = false;
+      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(false);
+      expect(groupsClaim.exists()).toBe(false);
+      expect(emailClaim.exists()).toBe(false);
+    });
   });
 });

package/edit/auth/oidc.vue

@@ -17,6 +17,8 @@ import { BASE_SCOPES } from '@shell/store/auth';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
 import isUrl from 'is-url';
 
+const PKCE_S256 = 'S256';
+
 export default {
   components: {
     Banner,
@@ -38,6 +40,10 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
 
+  setup() {
+    return { PKCE_S256 };
+  },
+
   data() {
     return {
       customEndpoint: {
@@ -149,6 +155,14 @@ export default {
       return this.model?.id === 'genericoidc';
     },
 
+    isKeycloak() {
+      return this.model?.id === 'keycloakoidc';
+    },
+
+    supportsCustomClaims() {
+      return this.isGenericOidc || this.isKeycloak;
+    },
+
     isLogoutAllSupported() {
       return this.model?.logoutAllSupported;
     },
@@ -169,7 +183,7 @@ export default {
 
     sloEndSessionEndpointUiEnabled() {
       return this.sloType === SLO_OPTION_VALUES.all || this.sloType === SLO_OPTION_VALUES.both;
-    }
+    },
   },
 
   watch: {
@@ -269,7 +283,7 @@ export default {
     },
 
     willSave() {
-      if (this.isGenericOidc && !this.addCustomClaims) {
+      if (this.supportsCustomClaims && !this.addCustomClaims) {
         this.model.nameClaim = undefined;
         this.model.groupsClaim = undefined;
         this.model.emailClaim = undefined;
@@ -310,6 +324,9 @@ export default {
             <tr v-if="model.authEndpoint">
               <td>{{ t('authConfig.oidc.authEndpoint') }}: </td><td>{{ model.authEndpoint }}</td>
             </tr>
+            <tr v-if="model.pkceMethod">
+              <td>{{ t('authConfig.oidc.pkceMethod.label') }}: </td><td>{{ model.pkceMethod }}</td>
+            </tr>
             <tr v-if="isLogoutAllSupported">
               <td>{{ t('authConfig.slo.sloTitle') }}: </td><td>{{ sloTypeText }}</td>
             </tr>
@@ -416,34 +433,38 @@ export default {
           </div>
         </div>
 
-        <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
+          class="row mb-20"
+        >
+          <div class="col span-6 checkbox-flex">
+            <!-- Allow group search -->
+            <Checkbox
+              v-model:value="model.pkceMethod"
+              :value-when-true="PKCE_S256"
+              :label="t('authConfig.oidc.pkce.label')"
+              :tooltip="t('authConfig.oidc.pkce.tooltip')"
+            />
+            <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="supportsCustomClaims"
+              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>
-        </template>
+        </div>
 
         <!-- Custom Claims -->
-        <template v-if="addCustomClaims && isGenericOidc">
+        <template v-if="addCustomClaims && supportsCustomClaims">
           <h4>{{ t('authConfig.oidc.customClaims.label') }}</h4>
           <div class="row mb-20">
             <div class="col span-6">
@@ -475,20 +496,6 @@ export default {
           </div>
         </template>
 
-        <!-- Scopes -->
-        <div class="row mb-20">
-          <div class="col span-6">
-            <ArrayList
-              v-model:value="oidcScope"
-              :mode="mode"
-              :title="t('authConfig.oidc.scope.label')"
-              :value-placeholder="t('authConfig.oidc.scope.placeholder')"
-              :protip="t('authConfig.oidc.scope.protip', {}, true)"
-              @update:value="updateScope"
-            />
-          </div>
-        </div>
-
         <template v-if="!isAmazonCognito">
           <!-- Generated vs Specific Endpoints -->
           <div class="row mb-20">
@@ -546,7 +553,7 @@ export default {
             </div>
           </div>
 
-          <div class="row mb-20">
+          <div class="row">
             <div class="col span-6">
               <LabeledInput
                 v-model:value="model.issuer"
@@ -570,7 +577,10 @@ export default {
           </div>
 
           <!-- Advanced section -->
-          <AdvancedSection :mode="mode">
+          <AdvancedSection
+            class="mb-40"
+            :mode="mode"
+          >
             <div class="row mb-20">
               <div class="col span-6">
                 <LabeledInput
@@ -626,10 +636,24 @@ export default {
           </div>
         </template>
 
+        <!-- Scopes -->
+        <div class="row mb-20">
+          <div class="col span-6">
+            <ArrayList
+              v-model:value="oidcScope"
+              :mode="mode"
+              :title="t('authConfig.oidc.scope.label')"
+              :value-placeholder="t('authConfig.oidc.scope.placeholder')"
+              :protip="t('authConfig.oidc.scope.protip', {}, true)"
+              @update:value="updateScope"
+            />
+          </div>
+        </div>
+
         <!-- SLO logout -->
         <div
           v-if="isLogoutAllSupported"
-          class="mt-40 mb-20"
+          class="mb-20"
         >
           <div class="row">
             <div class="col span-12">