dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/edit/auth/oidc.vue

@@ -5,6 +5,7 @@ import AuthConfig from '@shell/mixins/auth-config';
 import CruResource from '@shell/components/CruResource';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import FileSelector from '@shell/components/form/FileSelector';
+import { Banner } from '@components/Banner';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
@@ -13,9 +14,11 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { BASE_SCOPES } from '@shell/store/auth';
+import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
 
 export default {
   components: {
+    Banner,
     Loading,
     CruResource,
     AllowedPrincipals,
@@ -27,6 +30,7 @@ export default {
     LabeledInput,
     RadioGroup,
     Checkbox,
+    CopyToClipboardText,
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -85,7 +89,11 @@ export default {
         return false;
       }
 
-      if ( !this.customEndpoint.value ) {
+      if (this.isAmazonCognito) {
+        const { issuer } = this.model;
+
+        return !!(clientId && clientSecret && issuer);
+      } else if ( !this.customEndpoint.value ) {
         const { url, realm } = this.oidcUrls;
 
         return !!(clientId && clientSecret && url && realm);
@@ -107,6 +115,20 @@ export default {
      */
     requiredScopes() {
       return this.model.id ? (BASE_SCOPES[this.model.id] || []) ? (BASE_SCOPES[this.model.id] || [])[0].split(' ') : [] : [];
+    },
+
+    requiresCert() {
+      // We assume all do, apart from the ones here, which do not
+      return !(['cognito'].includes(this.model.id));
+    },
+
+    supportsGroupSearch() {
+      // We assume all do, apart from the ones here, which do not
+      return !(['cognito'].includes(this.model.id));
+    },
+
+    isAmazonCognito() {
+      return this.model?.id === 'cognito';
     }
   },
 
@@ -205,7 +227,9 @@ export default {
             <tr><td>{{ t(`authConfig.oidc.rancherUrl`) }}: </td><td>{{ model.rancherUrl }}</td></tr>
             <tr><td>{{ t(`authConfig.oidc.clientId`) }}: </td><td>{{ model.clientId }}</td></tr>
             <tr><td>{{ t(`authConfig.oidc.issuer`) }}: </td><td>{{ model.issuer }}</td></tr>
-            <tr><td>{{ t(`authConfig.oidc.authEndpoint`) }}: </td><td>{{ model.authEndpoint }}</td></tr>
+            <tr v-if="model.authEndpoint">
+              <td>{{ t(`authConfig.oidc.authEndpoint`) }}: </td><td>{{ model.authEndpoint }}</td>
+            </tr>
           </template>
         </AuthBanner>
 
@@ -226,6 +250,25 @@ export default {
 
         <h3>{{ t(`authConfig.oidc.${NAME}`) }}</h3>
 
+        <Banner
+          v-if="!model.enabled && isAmazonCognito"
+          color="info"
+          class="mb-20 mt-0"
+          data-testid="oidc-cognito-banner"
+        >
+          <div>
+            <div
+              v-clean-html="t('authConfig.oidc.cognitoHelp', {}, true)"
+            />
+            <div class="mt-10">
+              <CopyToClipboardText
+                :plain="true"
+                :text="model.rancherUrl"
+              />
+            </div>
+          </div>
+        </Banner>
+
         <!-- Auth credentials -->
         <div class="row mb-20">
           <div class="col span-6">
@@ -249,7 +292,10 @@ export default {
         </div>
 
         <!-- Key/Certificate -->
-        <div class="row mb-20">
+        <div
+          v-if="requiresCert"
+          class="row mb-20"
+        >
           <div class="col span-6">
             <LabeledInput
               v-model:value="model.privateKey"
@@ -283,7 +329,10 @@ export default {
         </div>
 
         <!-- Allow group search -->
-        <div class="row mb-20">
+        <div
+          v-if="supportsGroupSearch"
+          class="row mb-20"
+        >
           <div class="col span-6">
             <Checkbox
               v-model:value="model.groupSearchEnabled"
@@ -309,102 +358,59 @@ export default {
           </div>
         </div>
 
-        <!-- Generated vs Specific Endpoints -->
-        <div class="row mb-20">
-          <div class="col span-6">
-            <RadioGroup
-              v-model:value="customEndpoint.value"
-              name="customEndpoint"
-              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>
-              </template>
-            </RadioGroup>
-          </div>
-        </div>
-
-        <!-- Generated endpoints -->
-        <div class="row mb-20">
-          <div class="col span-6">
-            <LabeledInput
-              v-model:value="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:value="oidcUrls.realm"
-              :label="t(`authConfig.oidc.realm`)"
-              :mode="mode"
-              :required="!customEndpoint.value"
-              :disabled="customEndpoint.value"
-              data-testid="oidc-realm"
-            />
-          </div>
-        </div>
-
-        <!-- Specific Endpoints -->
-        <div class="row mb-20">
-          <div class="col span-6">
-            <LabeledInput
-              v-model:value="model.rancherUrl"
-              :label="t(`authConfig.oidc.rancherUrl`)"
-              :mode="mode"
-              required
-              :disabled="!customEndpoint.value"
-              data-testid="oidc-rancher-url"
-            />
-          </div>
-        </div>
-
-        <div class="row mb-20">
-          <div class="col span-6">
-            <LabeledInput
-              v-model:value="model.issuer"
-              :label="t(`authConfig.oidc.issuer`)"
-              :mode="mode"
-              required
-              :disabled="!customEndpoint.value"
-              data-testid="oidc-issuer"
-            />
-          </div>
-          <div class="col span-6">
-            <LabeledInput
-              v-model:value="model.authEndpoint"
-              :label="t(`authConfig.oidc.authEndpoint`)"
-              :mode="mode"
-              :disabled="!customEndpoint.value"
-              :required="requiresAuthEndpoint"
-              data-testid="oidc-auth-endpoint"
-            />
+        <template v-if="!isAmazonCognito">
+          <!-- Generated vs Specific Endpoints -->
+          <div class="row mb-20">
+            <div class="col span-6">
+              <RadioGroup
+                v-model:value="customEndpoint.value"
+                name="customEndpoint"
+                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>
+                </template>
+              </RadioGroup>
+            </div>
           </div>
-        </div>
 
-        <!-- Advanced section -->
-        <AdvancedSection :mode="mode">
+          <!-- Generated endpoints -->
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model:value="model.jwksUrl"
-                :label="t(`authConfig.oidc.jwksUrl`)"
+                v-model:value="oidcUrls.url"
+                :label="t(`authConfig.oidc.url`)"
                 :mode="mode"
-                :disabled="!customEndpoint.value"
+                :required="!customEndpoint.value"
+                :disabled="customEndpoint.value"
+                data-testid="oidc-url"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model:value="model.tokenEndpoint"
-                :label="t(`authConfig.oidc.tokenEndpoint`)"
+                v-model:value="oidcUrls.realm"
+                :label="t(`authConfig.oidc.realm`)"
                 :mode="mode"
+                :required="!customEndpoint.value"
+                :disabled="customEndpoint.value"
+                data-testid="oidc-realm"
+              />
+            </div>
+          </div>
+
+          <!-- Specific Endpoints -->
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.rancherUrl"
+                :label="t(`authConfig.oidc.rancherUrl`)"
+                :mode="mode"
+                required
                 :disabled="!customEndpoint.value"
+                data-testid="oidc-rancher-url"
               />
             </div>
           </div>
@@ -412,22 +418,82 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model:value="model.userInfoEndpoint"
-                :label="t(`authConfig.oidc.userInfoEndpoint`)"
+                v-model:value="model.issuer"
+                :label="t(`authConfig.oidc.issuer`)"
                 :mode="mode"
+                required
                 :disabled="!customEndpoint.value"
+                data-testid="oidc-issuer"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
-                v-model:value="model.acrValue"
-                :label="t(`authConfig.oidc.acrValue`)"
+                v-model:value="model.authEndpoint"
+                :label="t(`authConfig.oidc.authEndpoint`)"
                 :mode="mode"
                 :disabled="!customEndpoint.value"
+                :required="requiresAuthEndpoint"
+                data-testid="oidc-auth-endpoint"
+              />
+            </div>
+          </div>
+
+          <!-- Advanced section -->
+          <AdvancedSection :mode="mode">
+            <div class="row mb-20">
+              <div class="col span-6">
+                <LabeledInput
+                  v-model:value="model.jwksUrl"
+                  :label="t(`authConfig.oidc.jwksUrl`)"
+                  :mode="mode"
+                  :disabled="!customEndpoint.value"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledInput
+                  v-model:value="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:value="model.userInfoEndpoint"
+                  :label="t(`authConfig.oidc.userInfoEndpoint`)"
+                  :mode="mode"
+                  :disabled="!customEndpoint.value"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledInput
+                  v-model:value="model.acrValue"
+                  :label="t(`authConfig.oidc.acrValue`)"
+                  :mode="mode"
+                  :disabled="!customEndpoint.value"
+                />
+              </div>
+            </div>
+          </AdvancedSection>
+        </template>
+
+        <template v-if="isAmazonCognito">
+          <h3>{{ t(`authConfig.oidc.cognitoIssuer`) }}</h3>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="model.issuer"
+                :label="t(`authConfig.oidc.issuer`)"
+                :mode="mode"
+                required
+                data-testid="oidc-issuer"
               />
             </div>
           </div>
-        </AdvancedSection>
+        </template>
       </template>
     </CruResource>
   </div>

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -206,7 +206,10 @@ export default {
         :mode="mode"
       />
 
-      <Tabbed :side-tabs="true">
+      <Tabbed
+        :side-tabs="true"
+        :use-hash="useTabbedHash"
+      >
         <Tab
           name="target"
           :label="t('hpa.tabs.target')"

package/edit/{cis.cattle.io.clusterscan.vue → compliance.cattle.io.clusterscan.vue}

@@ -5,7 +5,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import UnitInput from '@shell/components/form/UnitInput';
 import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
-import { CIS, CONFIG_MAP } from '@shell/config/types';
+import { COMPLIANCE, CONFIG_MAP } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import createEditView from '@shell/mixins/create-edit-view';
 import { allHash } from '@shell/utils/promise';
@@ -14,7 +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';
+import { fetchSpecsScheduledScanConfig } from '@shell/models/compliance.cattle.io.clusterscan';
 
 const semver = require('semver');
 
@@ -72,14 +72,14 @@ export default {
     this.scanAlertRule = this.value.spec.scheduledScanConfig.scanAlertRule;
 
     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: COMPLIANCE.CLUSTER_SCAN_PROFILE }),
+      benchmarks:             this.$store.dispatch('cluster/findAll', { type: COMPLIANCE.BENCHMARK }),
       // Ensure the clusterscan model has everything it needs
       hasScheduledScanConfig: fetchSpecsScheduledScanConfig(this.schema),
     });
 
     try {
-      this.defaultConfigMap = await this.$store.dispatch('cluster/find', { type: CONFIG_MAP, id: 'cis-operator-system/default-clusterscanprofiles' });
+      this.defaultConfigMap = await this.$store.dispatch('cluster/find', { type: CONFIG_MAP, id: 'compliance-operator-system/default-clusterscanprofiles' });
     } catch {}
 
     this.allProfiles = hash.profiles;
@@ -111,7 +111,7 @@ export default {
     ...mapGetters({ currentCluster: 'currentCluster', t: 'i18n/t' }),
 
     canBeScheduled() {
-      // check if scan was created and run with an older cis install that doesn't support scheduling/alerting/warn state
+      // check if scan was created and run with an older compliance install that doesn't support scheduling/alerting/warn state
       if (this.mode === _VIEW) {
         const warn = get(this.value, 'status.summary.warn');
 
@@ -124,7 +124,7 @@ export default {
     validProfiles() {
       const profileNames = this.allProfiles.filter((profile) => {
         const benchmarkVersion = profile?.spec?.benchmarkVersion;
-        const benchmark = this.$store.getters['cluster/byId'](CIS.BENCHMARK, benchmarkVersion);
+        const benchmark = this.$store.getters['cluster/byId'](COMPLIANCE.BENCHMARK, benchmarkVersion);
 
         return this.validateBenchmark(benchmark, this.currentCluster );
       }).map((profile) => {
@@ -136,12 +136,12 @@ export default {
 
     defaultProfile() {
       if (this.defaultConfigMap) {
-        const profiles = this.defaultConfigMap.data;
+        const profiles = this.defaultConfigMap.data || {}; // The config map might be empty, so ensure we have an object
         const provider = this.currentCluster.status.provider;
 
         let name = profiles[provider] || profiles.default;
 
-        if (name.includes(':')) {
+        if (name?.includes(':')) {
           const pairs = name.split('\n');
           const clusterVersion = this.currentCluster.kubernetesVersion;
 
@@ -160,21 +160,20 @@ export default {
         if (name) {
           const profile = this.allProfiles.find((profile) => profile.id === name);
           const benchmarkVersion = profile?.spec?.benchmarkVersion;
-          const benchmark = this.$store.getters['cluster/byId'](CIS.BENCHMARK, benchmarkVersion);
+          const benchmark = this.$store.getters['cluster/byId'](COMPLIANCE.BENCHMARK, benchmarkVersion);
 
           if (this.validateBenchmark(benchmark, this.currentCluster )) {
             return profile;
           }
         }
-        const cis16 = this.validProfiles.find((profile) => profile.value === 'cis-1.6-profile');
 
-        if (cis16) {
-          return this.allProfiles.find((profile) => profile.id === 'cis-1.6-profile');
-        } else {
-          return this.allProfiles.find((profile) => profile.id === 'cis-1.5-profile');
+        // Just use the first one as the default - check the profiles we consider to be valid for this cluster first
+        if (this.validProfiles.length > 0) {
+          return this.allProfiles.find((profile) => profile.id === this.validProfiles[0].value) || null;
         }
       }
 
+      // Can not find a default
       return null;
     },
 
@@ -217,7 +216,7 @@ export default {
     defaultProfile(neu) {
       if (neu && !this.value.spec.scanProfileName) {
         const benchmarkVersion = neu?.spec?.benchmarkVersion;
-        const benchmark = this.$store.getters['cluster/byId'](CIS.BENCHMARK, benchmarkVersion);
+        const benchmark = this.$store.getters['cluster/byId'](COMPLIANCE.BENCHMARK, benchmarkVersion);
 
         if (!this.validateBenchmark(benchmark, this.currentCluster)) {
           return;
@@ -281,7 +280,7 @@ export default {
     <Banner
       v-if="!validProfiles.length"
       color="warning"
-      :label="t('cis.noProfiles')"
+      :label="t('compliance.noProfiles')"
     />
 
     <div
@@ -292,7 +291,7 @@ export default {
         <LabeledSelect
           v-model:value="value.spec.scanProfileName"
           :mode="mode"
-          :label="t('cis.profile')"
+          :label="t('compliance.profile')"
           :options="validProfiles"
         />
       </div>
@@ -300,8 +299,8 @@ export default {
         v-if="canBeScheduled"
         class="col span-6"
       >
-        <span>{{ t('cis.scoreWarning.label') }}</span> <i
-          v-clean-tooltip="t('cis.scoreWarning.protip')"
+        <span>{{ t('compliance.scoreWarning.label') }}</span> <i
+          v-clean-tooltip="t('compliance.scoreWarning.protip')"
           class="icon icon-info"
         />
         <RadioGroup
@@ -309,19 +308,19 @@ export default {
           :mode="mode"
           name="scoreWarning"
           :options="['pass', 'fail']"
-          :labels="[t('cis.scan.pass'), t('cis.scan.fail')]"
+          :labels="[t('compliance.scan.pass'), t('compliance.scan.fail')]"
         />
       </div>
     </div>
     <template v-if="canBeScheduled">
-      <h3>{{ t('cis.scheduling.title') }}</h3>
+      <h3>{{ t('compliance.scheduling.title') }}</h3>
       <div class="row mb-20">
         <div class="col">
           <RadioGroup
             v-model:value="isScheduled"
             :mode="mode"
             name="scheduling"
-            :options="[ {value: false, label: t('cis.scheduling.disable')}, {value: true, label: t('cis.scheduling.enable')}]"
+            :options="[ {value: false, label: t('compliance.scheduling.disable')}, {value: true, label: t('compliance.scheduling.enable')}]"
           />
         </div>
       </div>
@@ -332,23 +331,23 @@ export default {
               v-model:value="scheduledScanConfig.cronSchedule"
               required
               :mode="mode"
-              :label="t('cis.cronSchedule.label')"
-              :placeholder="t('cis.cronSchedule.placeholder')"
+              :label="t('compliance.cronSchedule.label')"
+              :placeholder="t('compliance.cronSchedule.placeholder')"
               type="cron"
             />
           </div>
           <div class="col span-6">
             <UnitInput
               v-model:value="scheduledScanConfig.retentionCount"
-              :suffix="t('cis.reports')"
+              :suffix="t('compliance.reports')"
               type="number"
               :mode="mode"
-              :label="t('cis.retention')"
+              :label="t('compliance.retention')"
             />
           </div>
         </div>
         <h3 class="mt-20">
-          {{ t('cis.alerting') }}
+          {{ t('compliance.alerting') }}
         </h3>
         <div class="row mb-20">
           <div class="col span-12">
@@ -357,17 +356,17 @@ export default {
               class="mt-0"
               :color="hasAlertManager ? 'info' : 'warning'"
             >
-              <span v-clean-html="t('cis.alertNeeded', {link: monitoringUrl}, true)" />
+              <span v-clean-html="t('compliance.alertNeeded', {link: monitoringUrl}, true)" />
             </banner>
             <Checkbox
               v-model:value="scanAlertRule.alertOnComplete"
               :mode="mode"
-              :label="t('cis.alertOnComplete')"
+              :label="t('compliance.alertOnComplete')"
             />
             <Checkbox
               v-model:value="scanAlertRule.alertOnFailure"
               :mode="mode"
-              :label="t('cis.alertOnFailure')"
+              :label="t('compliance.alertOnFailure')"
             />
           </div>
         </div>

package/edit/{cis.cattle.io.clusterscanbenchmark.vue → compliance.cattle.io.clusterscanbenchmark.vue}

@@ -117,7 +117,7 @@ export default {
           :clearable="true"
           :options="providers"
           :mode="mode"
-          :label="t('cis.clusterProvider')"
+          :label="t('compliance.clusterProvider')"
         />
       </div>
       <div class="col span-6">
@@ -127,7 +127,7 @@ export default {
           option-key="id"
           option-label="id"
           :mode="mode"
-          :label="t('cis.customConfigMap')"
+          :label="t('compliance.customConfigMap')"
           :resource-type="CONFIG_MAP"
           :paginated-resource-settings="configMapPaginateSettings"
         />
@@ -138,14 +138,14 @@ export default {
         <LabeledInput
           v-model:value="value.spec.minKubernetesVersion"
           :mode="mode"
-          :label="t('cis.minKubernetesVersion')"
+          :label="t('compliance.minKubernetesVersion')"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
           v-model:value="value.spec.maxKubernetesVersion"
           :mode="mode"
-          :label="t('cis.maxKubernetesVersion')"
+          :label="t('compliance.maxKubernetesVersion')"
         />
       </div>
     </div>

package/edit/{cis.cattle.io.clusterscanprofile.vue → compliance.cattle.io.clusterscanprofile.vue}

@@ -5,7 +5,7 @@ import ArrayList from '@shell/components/form/ArrayList';
 import createEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import { mapGetters } from 'vuex';
-import { CIS } from '@shell/config/types';
+import { COMPLIANCE } from '@shell/config/types';
 const semver = require('semver');
 
 export default {
@@ -33,7 +33,7 @@ export default {
   },
 
   async fetch() {
-    this.allBenchmarks = await this.$store.dispatch('cluster/findAll', { type: CIS.BENCHMARK });
+    this.allBenchmarks = await this.$store.dispatch('cluster/findAll', { type: COMPLIANCE.BENCHMARK });
   },
 
   data() {
@@ -129,7 +129,7 @@ export default {
           <LabeledSelect
             v-model:value="value.spec.benchmarkVersion"
             :mode="mode"
-            :label="t('cis.benchmarkVersion')"
+            :label="t('compliance.benchmarkVersion')"
             :options="compatibleBenchmarkNames"
           />
         </div>
@@ -139,8 +139,8 @@ export default {
         <div class="col span-6">
           <ArrayList
             v-model:value="value.spec.skipTests"
-            :title="t('cis.testsToSkip')"
-            :value-placeholder="t('cis.testID')"
+            :title="t('compliance.testsToSkip')"
+            :value-placeholder="t('compliance.testID')"
             :mode="mode"
           />
         </div>

package/edit/configmap.vue

@@ -1,4 +1,5 @@
 <script>
+import jsyaml from 'js-yaml';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
@@ -66,7 +67,9 @@ export default {
       const yaml = await this.$refs.cru.createResourceYaml(this.yamlModifiers);
 
       try {
-        await this.value.saveYaml(yaml);
+        const initialYaml = jsyaml.dump(this.initialValue);
+
+        await this.value.saveYaml(yaml, initialYaml);
         this.done();
       } catch (err) {
         this.errors.push(err);
@@ -105,7 +108,10 @@ export default {
       :register-before-hook="registerBeforeHook"
     />
 
-    <Tabbed :side-tabs="true">
+    <Tabbed
+      :side-tabs="true"
+      :use-hash="useTabbedHash"
+    >
       <Tab
         name="data"
         :label="t('configmap.tabs.data.label')"