@rancher/shell 1.2.0 → 2.0.0

package/edit/auth/oidc.vue

@@ -3,26 +3,31 @@ import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import AuthConfig from '@shell/mixins/auth-config';
 import CruResource from '@shell/components/CruResource';
-import { LabeledInput } from '@components/Form/LabeledInput';
-import { Banner } from '@components/Banner';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import FileSelector from '@shell/components/form/FileSelector';
 import AuthBanner from '@shell/components/auth/AuthBanner';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
+import AdvancedSection from '@shell/components/AdvancedSection.vue';
+import ArrayList from '@shell/components/form/ArrayList';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 
 export default {
   components: {
     Loading,
     CruResource,
-    LabeledInput,
-    Banner,
     AllowedPrincipals,
     FileSelector,
     AuthBanner,
+    AuthProviderWarningBanners,
+    AdvancedSection,
+    ArrayList,
+    LabeledInput,
     RadioGroup
   },
 
   mixins: [CreateEditView, AuthConfig],
+
   data() {
     return {
       customEndpoint: {
@@ -36,10 +41,14 @@ export default {
           true
         ]
       },
-      keycloakUrls: {
-        url:   null,
-        realm: null
-      }
+      oidcUrls: {
+        url:              null,
+        realm:            null,
+        jwksUrl:          null,
+        tokenEndpoint:    null,
+        userInfoEndpoint: null,
+      },
+      oidcScope: []
     };
   },
 
@@ -59,42 +68,84 @@ export default {
       };
     },
 
+    validationPassed() {
+      if ( this.model.enabled && !this.editConfig ) {
+        return true;
+      }
+
+      const { clientId, clientSecret } = this.model;
+      const isValidScope = this.model.id === 'keycloakoidc' || this.oidcScope?.includes('openid');
+
+      if ( !isValidScope ) {
+        return false;
+      }
+
+      if ( !this.customEndpoint.value ) {
+        const { url, realm } = this.oidcUrls;
+
+        return !!(clientId && clientSecret && url && realm);
+      } else {
+        const { rancherUrl, issuer } = this.model;
+
+        return !!(clientId && clientSecret && rancherUrl && issuer);
+      }
+    }
   },
+
   watch: {
-    'keycloakUrls.url'() {
-      this.updateIssuerEndpoint();
+    'oidcUrls.url'() {
+      this.updateEndpoints();
     },
-    'keycloakUrls.realm'() {
-      this.updateIssuerEndpoint();
+
+    'oidcUrls.realm'() {
+      this.updateEndpoints();
     },
+
     'model.enabled'(neu) {
       // Cover case where oidc gets disabled and we return to the edit screen with a reset model
       if (!neu) {
-        this.keycloakUrls = {
-          url:   null,
-          realm: null
+        this.oidcUrls = {
+          url:              null,
+          realm:            null,
+          jwksUrl:          null,
+          tokenEndpoint:    null,
+          userInfoEndpoint: null,
         };
         this.customEndpoint.value = false;
+        this.oidcScope = this.model?.scope?.split(' ');
+      } else {
+        this.oidcScope = this.model?.scope?.split(' ');
       }
     },
+
     editConfig(neu, old) {
-      // Cover use case where user edits existing oidc (keycloakUrls aren't persisted, so if we have issuer & authEndpoint set custom endpoints to true)
+      // Cover use case where user edits existing oidc (oidcUrls aren't persisted, so if we have issuer set custom endpoints to true)
       if (!old && neu) {
-        this.customEndpoint.value = (!this.keycloakUrls.url && !this.keycloakUrls.authEndpoint) && (!!this.model.issuer && !!this.model.authEndpoint);
+        this.customEndpoint.value = !this.oidcUrls.url && !!this.model.issuer;
       }
     }
   },
 
   methods: {
-    updateIssuerEndpoint() {
-      if (!this.keycloakUrls.url) {
+    updateEndpoints() {
+      if (!this.oidcUrls.url) {
         return;
       }
-      const url = this.keycloakUrls.url.replaceAll(' ', '');
+      const isKeycloak = this.model.id === 'keycloakoidc';
 
-      this.model.issuer = `${ url }/auth/realms/${ this.keycloakUrls.realm || '' }`;
-      this.model.authEndpoint = `${ this.model.issuer || '' }/protocol/openid-connect/auth`;
+      const url = this.oidcUrls.url.replaceAll(' ', '');
+      const realmsPath = isKeycloak ? 'auth/realms' : 'realms';
+
+      this.model.issuer = `${ url }/${ realmsPath }/${ this.oidcUrls.realm || '' }`;
+
+      if ( isKeycloak ) {
+        this.model.authEndpoint = `${ this.model.issuer || '' }/protocol/openid-connect/auth`;
+      }
     },
+
+    updateScope() {
+      this.model.scope = this.oidcScope.join(' ');
+    }
   }
 };
 </script>
@@ -108,7 +159,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"
@@ -141,10 +192,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
 
         <h3>{{ t(`authConfig.oidc.${NAME}`) }}</h3>
@@ -156,6 +206,7 @@ export default {
               :label="t(`authConfig.oidc.clientId`)"
               :mode="mode"
               required
+              data-testid="oidc-client-id"
             />
           </div>
           <div class="col span-6">
@@ -164,6 +215,7 @@ export default {
               :label="t(`authConfig.oidc.clientSecret`)"
               :mode="mode"
               required
+              data-testid="oidc-client-secret"
             />
           </div>
         </div>
@@ -201,6 +253,19 @@ export default {
           </div>
         </div>
 
+        <div class="row mb-20">
+          <div class="col span-6">
+            <ArrayList
+              v-model="oidcScope"
+              :mode="mode"
+              :title="t('authConfig.oidc.scope.label')"
+              :value-placeholder="t('authConfig.oidc.scope.placeholder')"
+              :protip="t('authConfig.oidc.scope.protip', {}, true)"
+              @input="updateScope"
+            />
+          </div>
+        </div>
+
         <div class="row mb-20">
           <div class="col span-6">
             <RadioGroup
@@ -209,6 +274,7 @@ export default {
               label-key="authConfig.oidc.customEndpoint.label"
               :labels="customEndpoint.labels"
               :options="customEndpoint.options"
+              data-testid="oidc-custom-endpoint"
             >
               <template #label>
                 <h4>{{ t('authConfig.oidc.customEndpoint.label') }}</h4>
@@ -220,20 +286,22 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledInput
-              v-model="keycloakUrls.url"
-              :label="t(`authConfig.oidc.keycloak.url`)"
+              v-model="oidcUrls.url"
+              :label="t(`authConfig.oidc.url`)"
               :mode="mode"
               :required="!customEndpoint.value"
               :disabled="customEndpoint.value"
+              data-testid="oidc-url"
             />
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="keycloakUrls.realm"
-              :label="t(`authConfig.oidc.keycloak.realm`)"
+              v-model="oidcUrls.realm"
+              :label="t(`authConfig.oidc.realm`)"
               :mode="mode"
               :required="!customEndpoint.value"
               :disabled="customEndpoint.value"
+              data-testid="oidc-realm"
             />
           </div>
         </div>
@@ -246,6 +314,7 @@ export default {
               :mode="mode"
               required
               :disabled="!customEndpoint.value"
+              data-testid="oidc-rancher-url"
             />
           </div>
         </div>
@@ -258,6 +327,7 @@ export default {
               :mode="mode"
               required
               :disabled="!customEndpoint.value"
+              data-testid="oidc-issuer"
             />
           </div>
           <div class="col span-6">
@@ -265,26 +335,57 @@ export default {
               v-model="model.authEndpoint"
               :label="t(`authConfig.oidc.authEndpoint`)"
               :mode="mode"
-              required
               :disabled="!customEndpoint.value"
+              :required="model.id === 'keycloakoidc'"
+              data-testid="oidc-auth-endpoint"
             />
           </div>
         </div>
+
+        <AdvancedSection :mode="mode">
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model="model.jwksUrl"
+                :label="t(`authConfig.oidc.jwksUrl`)"
+                :mode="mode"
+                :disabled="!customEndpoint.value"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model="model.tokenEndpoint"
+                :label="t(`authConfig.oidc.tokenEndpoint`)"
+                :mode="mode"
+                :disabled="!customEndpoint.value"
+              />
+            </div>
+          </div>
+
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model="model.userInfoEndpoint"
+                :label="t(`authConfig.oidc.userInfoEndpoint`)"
+                :mode="mode"
+                :disabled="!customEndpoint.value"
+              />
+            </div>
+            <div class="col span-6">
+              <LabeledInput
+                v-model="model.acrValue"
+                :label="t(`authConfig.oidc.acrValue`)"
+                :mode="mode"
+                :disabled="!customEndpoint.value"
+              />
+            </div>
+          </div>
+        </AdvancedSection>
       </template>
-      <div
-        v-if="!model.enabled"
-        class="row"
-      >
-        <div class="col span-12">
-          <Banner
-            v-clean-html="t('authConfig.associatedWarning', tArgs, true)"
-            color="info"
-          />
-        </div>
-      </div>
     </CruResource>
   </div>
 </template>
+
 <style lang="scss" scoped>
   .banner {
     display: block;

package/edit/auth/saml.vue

@@ -10,6 +10,7 @@ import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import FileSelector from '@shell/components/form/FileSelector';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import config from '@shell/edit/auth/ldap/config';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 
 export const SHIBBOLETH = 'shibboleth';
 export const OKTA = 'okta';
@@ -46,7 +47,8 @@ export default {
     Checkbox,
     FileSelector,
     config,
-    AuthBanner
+    AuthBanner,
+    AuthProviderWarningBanners
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -189,10 +191,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
 
         <h3>{{ t(`authConfig.saml.${NAME}`) }}</h3>
@@ -304,16 +305,6 @@ export default {
             />
           </div>
         </div>
-        <div
-          v-if="!model.enabled"
-          class="row"
-        >
-          <div class="col span-12">
-            <Banner color="info">
-              <div v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
-            </Banner>
-          </div>
-        </div>
         <div v-if="supportsLDAPSearch">
           <div class="row">
             <h2>{{ t('authConfig.saml.search.title') }}</h2>

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -1,4 +1,5 @@
 <script>
+import Vue from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Footer from '@shell/components/form/Footer';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -6,7 +7,9 @@ import { RadioGroup } from '@components/Form/Radio';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Labels from '@shell/components/form/Labels';
 import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
-import { MANAGEMENT, NAMESPACE } from '@shell/config/types';
+import InfoBox from '@shell/components/InfoBox';
+import { Checkbox } from '@components/Form/Checkbox';
+import { MANAGEMENT, NAMESPACE, CLUSTER_REPO_TYPES } from '@shell/config/types';
 
 export default {
   name: 'CruCatalogRepo',
@@ -18,12 +21,22 @@ export default {
     NameNsDescription,
     Labels,
     SelectOrCreateAuthSecret,
+    InfoBox,
+    Checkbox
   },
 
   mixins: [CreateEditView],
 
   data() {
-    return { isGit: !!this.value.spec.gitRepo };
+    const clusterRepoType = !!this.value.spec.gitRepo ? CLUSTER_REPO_TYPES.GIT_REPO : this.value.isOciType ? CLUSTER_REPO_TYPES.OCI_URL : CLUSTER_REPO_TYPES.HELM_URL;
+
+    return {
+      CLUSTER_REPO_TYPES,
+      clusterRepoType,
+      ociMinWait:    this.value.spec.exponentialBackOffValues?.minWait,
+      ociMaxWait:    this.value.spec.exponentialBackOffValues?.maxWait,
+      ociMaxRetries: this.value.spec.exponentialBackOffValues?.maxRetries
+    };
   },
 
   computed: {
@@ -42,6 +55,62 @@ export default {
       return this.$store.getters[`${ this.inStore }/all`](NAMESPACE)[0]?.id;
     }
   },
+
+  methods: {
+    onTargetChange(clusterRepoType) {
+      // reset input fields when switching options
+      switch (clusterRepoType) {
+      case CLUSTER_REPO_TYPES.GIT_REPO:
+        this.resetOciValues();
+        this.resetHelmValues();
+        break;
+      case CLUSTER_REPO_TYPES.OCI_URL:
+        // set insecurePlainHttp to false as a secondary flag, alongside checking for 'oci://' in the URL, to determine OCI type later
+        Vue.set(this.value.spec, 'insecurePlainHttp', false);
+        this.resetGitRepoValues();
+        this.resetHelmValues();
+        break;
+      case CLUSTER_REPO_TYPES.HELM_URL:
+        this.resetOciValues();
+        this.resetGitRepoValues();
+        break;
+      }
+      this.resetClientSecret();
+    },
+    updateExponentialBackOffValues(key, newVal) {
+      if (!Object.prototype.hasOwnProperty.call(this.value.spec, 'exponentialBackOffValues')) {
+        Vue.set(this.value.spec, 'exponentialBackOffValues', {});
+      }
+      // when user removes the value we remove the key too, backend will set the default value
+      if (newVal === '') {
+        Vue.delete(this.value.spec.exponentialBackOffValues, key);
+
+        return;
+      }
+
+      Vue.set(this.value.spec.exponentialBackOffValues, key, Number(newVal));
+    },
+    resetGitRepoValues() {
+      Vue.delete(this.value.spec, 'gitRepo');
+      Vue.delete(this.value.spec, 'gitBranch');
+    },
+    resetOciValues() {
+      Vue.delete(this.value.spec, 'url');
+      Vue.delete(this.value.spec, 'insecurePlainHttp');
+      Vue.delete(this.value.spec, 'insecureSkipTLSVerify');
+      Vue.delete(this.value.spec, 'caBundle');
+      Vue.delete(this.value.spec, 'exponentialBackOffValues');
+      this.ociMinWait = undefined;
+      this.ociMaxWait = undefined;
+      this.ociMaxRetries = undefined;
+    },
+    resetHelmValues() {
+      Vue.delete(this.value.spec, 'url');
+    },
+    resetClientSecret() {
+      Vue.set(this.value.spec, 'clientSecret', null);
+    }
+  },
 };
 </script>
 
@@ -55,20 +124,21 @@ export default {
 
     <h2>{{ t('catalog.repo.target.label') }}</h2>
     <div class="row mb-10">
-      <div class="col span-6">
+      <div class="col span-8">
         <RadioGroup
-          v-model="isGit"
-          name="isGit"
-          :options="[false, true]"
-          :labels="[t('catalog.repo.target.http'), t('catalog.repo.target.git')]"
+          v-model="clusterRepoType"
+          :name="clusterRepoType"
+          :options="[CLUSTER_REPO_TYPES.HELM_URL, CLUSTER_REPO_TYPES.GIT_REPO, CLUSTER_REPO_TYPES.OCI_URL]"
+          :labels="[t('catalog.repo.target.http'), t('catalog.repo.target.git'), t('catalog.repo.target.oci', null, true)]"
           :mode="mode"
           data-testid="clusterrepo-radio-input"
+          @input="onTargetChange"
         />
       </div>
     </div>
 
     <div
-      v-if="isGit"
+      v-if="clusterRepoType === CLUSTER_REPO_TYPES.GIT_REPO"
       class="row mb-10"
     >
       <div class="col span-6">
@@ -93,6 +163,20 @@ export default {
       </div>
     </div>
 
+    <div v-else-if="clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL">
+      <InfoBox class="p-10">
+        {{ t('catalog.repo.oci.info') }}
+      </InfoBox>
+      <LabeledInput
+        v-model.trim="value.spec.url"
+        :required="true"
+        :label="t('catalog.repo.oci.urlLabel')"
+        :placeholder="t('catalog.repo.oci.placeholder', null, true)"
+        :mode="mode"
+        data-testid="clusterrepo-oci-url-input"
+      />
+    </div>
+
     <LabeledInput
       v-else
       v-model.trim="value.spec.url"
@@ -100,18 +184,92 @@ export default {
       :label="t('catalog.repo.url.label')"
       :placeholder="t('catalog.repo.url.placeholder', null, true)"
       :mode="mode"
+      data-testid="clusterrepo-helm-url-input"
     />
-
     <SelectOrCreateAuthSecret
+      :key="clusterRepoType"
       v-model="value.spec.clientSecret"
+      :mode="mode"
       data-testid="clusterrepo-auth-secret"
       :register-before-hook="registerBeforeHook"
       :namespace="secretNamespace"
       :limit-to-namespace="false"
       :in-store="inStore"
+      :allow-ssh="clusterRepoType !== CLUSTER_REPO_TYPES.OCI_URL"
       generate-name="clusterrepo-auth-"
+      :cache-secrets="true"
     />
 
+    <div v-if="clusterRepoType === CLUSTER_REPO_TYPES.OCI_URL">
+      <div class="row">
+        <div class="col span-6">
+          <LabeledInput
+            v-model="value.spec.caBundle"
+            class="mt-20"
+            type="multiline"
+            label="CA Cert Bundle"
+            :mode="mode"
+            data-testid="clusterrepo-oci-cabundle-input"
+          />
+          <Checkbox
+            v-model="value.spec.insecureSkipTLSVerify"
+            class="mt-10"
+            :mode="mode"
+            :label="t('catalog.repo.oci.skipTlsVerifications')"
+            data-testid="clusterrepo-oci-skip-tls-checkbox"
+          />
+          <Checkbox
+            v-model="value.spec.insecurePlainHttp"
+            class="mt-10"
+            :mode="mode"
+            :label="t('catalog.repo.oci.insecurePlainHttp')"
+            data-testid="clusterrepo-oci-insecure-plain-http"
+          />
+        </div>
+      </div>
+      <h4 class="mb-10 mt-20">
+        {{ t('catalog.repo.oci.exponentialBackOff.label') }}
+      </h4>
+      <div class="row mb-10 mt-10">
+        <div class="col span-4">
+          <LabeledInput
+            v-model.trim="ociMinWait"
+            :label="t('catalog.repo.oci.exponentialBackOff.minWait.label')"
+            :placeholder="!ociMinWait ? t('catalog.repo.oci.exponentialBackOff.minWait.placeholder') : undefined"
+            :mode="mode"
+            type="number"
+            min="1"
+            data-testid="clusterrepo-oci-min-wait-input"
+            @input="updateExponentialBackOffValues('minWait', $event)"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledInput
+            v-model.trim="ociMaxWait"
+            :label="t('catalog.repo.oci.exponentialBackOff.maxWait.label')"
+            :placeholder="!ociMaxWait ? t('catalog.repo.oci.exponentialBackOff.maxWait.placeholder') : undefined"
+            :mode="mode"
+            type="number"
+            min="1"
+            data-testid="clusterrepo-oci-max-wait-input"
+            @input="updateExponentialBackOffValues('maxWait', $event)"
+          />
+        </div>
+        <div class="col span-4">
+          <LabeledInput
+            v-model.trim="ociMaxRetries"
+            :label="t('catalog.repo.oci.exponentialBackOff.maxRetries.label')"
+            :placeholder="!ociMaxRetries ? t('catalog.repo.oci.exponentialBackOff.maxRetries.placeholder') : undefined"
+            :mode="mode"
+            type="number"
+            min="0"
+            data-testid="clusterrepo-oci-max-retries-input"
+            @input="updateExponentialBackOffValues('maxRetries', $event)"
+          />
+        </div>
+      </div>
+    </div>
+
     <Labels
       default-section-class="mt-20"
       :value="value"
@@ -120,6 +278,7 @@ export default {
     />
 
     <Footer
+      data-testid="clusterrepo-footer"
       :mode="mode"
       :errors="errors"
       @save="save"
@@ -127,3 +286,12 @@ export default {
     />
   </form>
 </template>
+
+<style lang="scss">
+  span.oci-experimental-badge {
+    background-color: var(--warning);
+    color: var(--darker-active-bg);
+    font-size: 12px;
+    padding: 2px 6px;
+  }
+</style>

package/edit/cis.cattle.io.clusterscan.vue

@@ -14,6 +14,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { get } from '@shell/utils/object';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
 import { isValidCron } from 'cron-validator';
+import { fetchSpecsScheduledScanConfig } from '@shell/models/cis.cattle.io.clusterscan';
 
 const semver = require('semver');
 
@@ -39,8 +40,10 @@ export default {
 
   async fetch() {
     const hash = await allHash({
-      profiles:   this.$store.dispatch('cluster/findAll', { type: CIS.CLUSTER_SCAN_PROFILE }),
-      benchmarks: this.$store.dispatch('cluster/findAll', { type: CIS.BENCHMARK }),
+      profiles:               this.$store.dispatch('cluster/findAll', { type: CIS.CLUSTER_SCAN_PROFILE }),
+      benchmarks:             this.$store.dispatch('cluster/findAll', { type: CIS.BENCHMARK }),
+      // Ensure the clusterscan model has everything it needs
+      hasScheduledScanConfig: fetchSpecsScheduledScanConfig(this.schema),
     });
 
     try {