@rancher/shell 0.3.7 → 0.3.9

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

@@ -69,6 +69,7 @@ import S3Config from './S3Config';
 import SelectCredential from './SelectCredential';
 import AdvancedSection from '@shell/components/AdvancedSection.vue';
 import { ELEMENTAL_SCHEMA_IDS, KIND, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
+import AgentConfiguration, { cleanAgentConfiguration } from './AgentConfiguration';
 
 const PUBLIC = 'public';
 const PRIVATE = 'private';
@@ -96,6 +97,8 @@ const NODE_TOTAL = {
     icon:  'icon-checkmark'
   }
 };
+const CLUSTER_AGENT_CUSTOMIZATION = 'clusterAgentDeploymentCustomization';
+const FLEET_AGENT_CUSTOMIZATION = 'fleetAgentDeploymentCustomization';
 
 export default {
   components: {
@@ -107,6 +110,7 @@ export default {
     BadgeState,
     Banner,
     Checkbox,
+    AgentConfiguration,
     ClusterMembershipEditor,
     CruResource,
     DrainOptions,
@@ -274,6 +278,18 @@ export default {
 
       this.userChartValues[key] = value;
     });
+
+    // Ensure we have empty models for the two agent configurations
+
+    // Cluster Agent Configuration
+    if ( !this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]) {
+      set(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION, {});
+    }
+
+    // Fleet Agent Configuration
+    if ( !this.value.spec[FLEET_AGENT_CUSTOMIZATION] ) {
+      set(this.value.spec, FLEET_AGENT_CUSTOMIZATION, {});
+    }
   },
 
   data() {
@@ -306,12 +322,7 @@ export default {
     const lastDefaultPodSecurityPolicyTemplateName = this.value.spec.defaultPodSecurityPolicyTemplateName;
     const previousKubernetesVersion = this.value.spec.kubernetesVersion;
 
-    const truncateLimit = this.value.machinePoolDefaults?.hostnameLengthLimit;
-
-    // Is hostname truncation supported by the backend?
-    const provSchema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
-    const specSchemaName = provSchema?.resourceFields?.spec?.type;
-    const specSchema = specSchemaName ? this.$store.getters['management/schemaFor'](specSchemaName) : {};
+    const truncateLimit = this.value.defaultHostnameLengthLimit;
 
     return {
       loadedOnce:                      false,
@@ -350,7 +361,6 @@ export default {
       psps:                  null, // List of policies if any
       truncateHostnames:     truncateLimit === NETBIOS_TRUNCATION_LENGTH,
       truncateLimit,
-      supportsTruncation:    !!specSchema?.resourceFields?.machinePoolDefaults,
     };
   },
 
@@ -1087,6 +1097,7 @@ export default {
   created() {
     this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools');
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
+    this.registerBeforeHook(this.agentConfigurationCleanup, 'cleanup-agent-config');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
   },
@@ -1095,19 +1106,20 @@ export default {
     nlToBr,
     set,
 
+    agentConfigurationCleanup() {
+      // Clean agent configuration objects, so we only send values when the user has configured something
+      cleanAgentConfiguration(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION);
+      cleanAgentConfiguration(this.value.spec, FLEET_AGENT_CUSTOMIZATION);
+    },
+
     /**
      * set instanceNameLimit to 15 to all pool machine if truncateHostnames checkbox is clicked
      */
     truncateName() {
       if (this.truncateHostnames) {
-        this.value.machinePoolDefaults = this.value.machinePoolDefaults || {};
-        this.value.machinePoolDefaults.hostnameLengthLimit = 15;
+        this.value.defaultHostnameLengthLimit = NETBIOS_TRUNCATION_LENGTH;
       } else {
-        delete this.value.machinePoolDefaults.hostnameLengthLimit;
-
-        if (Object.keys(this.value.machinePoolDefaults).length === 0) {
-          delete this.value.machinePoolDefaults;
-        }
+        this.value.removeDefaultHostnameLengthLimit();
       }
     },
     /**
@@ -1478,7 +1490,20 @@ export default {
         delete this.value.spec.rkeConfig.machineGlobalConfig.profile;
       }
 
+      // store the current data for fleet and cluster agent so that we can re-apply it later if the save fails
+      // we also have a before hook (check created() hooks) where the cleanup of the data occurs
+      const clusterAgentDeploymentCustomization = JSON.parse(JSON.stringify(this.value.spec[CLUSTER_AGENT_CUSTOMIZATION]));
+      const fleetAgentDeploymentCustomization = JSON.parse(JSON.stringify(this.value.spec[FLEET_AGENT_CUSTOMIZATION]));
+
       await this.save(btnCb);
+
+      // comes from createEditView mixin
+      // if there are any errors saving, restore the agent config data
+      if (this.errors?.length) {
+        // Ensure the agent configuration is set back to the values before we changed (cleaned) it
+        set(this.value.spec, CLUSTER_AGENT_CUSTOMIZATION, clusterAgentDeploymentCustomization);
+        set(this.value.spec, FLEET_AGENT_CUSTOMIZATION, fleetAgentDeploymentCustomization);
+      }
     },
     // create a secret to reference the harvester cluster kubeconfig in rkeConfig
     async createKubeconfigSecret(kubeconfig = '') {
@@ -2598,7 +2623,6 @@ export default {
               />
             </div>
             <div
-              v-if="supportsTruncation"
               class="col span-6"
             >
               <Checkbox
@@ -2833,6 +2857,30 @@ export default {
           </div>
         </Tab>
 
+        <!-- Cluster Agent Configuration -->
+        <Tab
+          name="clusteragentconfig"
+          label-key="cluster.agentConfig.tabs.cluster"
+        >
+          <AgentConfiguration
+            v-model="value.spec.clusterAgentDeploymentCustomization"
+            type="cluster"
+            :mode="mode"
+          />
+        </Tab>
+
+        <!-- Fleet Agent Configuration -->
+        <Tab
+          name="fleetagentconfig"
+          label-key="cluster.agentConfig.tabs.fleet"
+        >
+          <AgentConfiguration
+            v-model="value.spec.fleetAgentDeploymentCustomization"
+            type="fleet"
+            :mode="mode"
+          />
+        </Tab>
+
         <!-- Advanced -->
         <Tab
           v-if="haveArgInfo || agentArgs['protect-kernel-defaults']"

package/edit/workload/mixins/workload.js

@@ -26,7 +26,7 @@ import Loading from '@shell/components/Loading';
 import Networking from '@shell/components/form/Networking';
 import VolumeClaimTemplate from '@shell/edit/workload/VolumeClaimTemplate';
 import Job from '@shell/edit/workload/Job';
-import { _EDIT, _CREATE, _VIEW } from '@shell/config/query-params';
+import { _EDIT, _CREATE, _VIEW, _CLONE } from '@shell/config/query-params';
 import WorkloadPorts from '@shell/components/form/WorkloadPorts';
 import ContainerResourceLimit from '@shell/components/ContainerResourceLimit';
 import KeyValue from '@shell/components/form/KeyValue';
@@ -178,7 +178,7 @@ export default {
 
     // EDIT view for POD
     // Transform it from POD world to workload
-    if ((this.mode === _EDIT || this.mode === _VIEW ) && this.value.type === 'pod' ) {
+    if ((this.mode === _EDIT || this.mode === _VIEW || this.realMode === _CLONE ) && this.value.type === 'pod') {
       const podSpec = { ...this.value.spec };
       const metadata = { ...this.value.metadata };
 
@@ -198,6 +198,7 @@ export default {
     if (
       this.mode === _CREATE ||
       this.mode === _VIEW ||
+      this.realMode === _CLONE ||
       (!createSidecar && !this.value.hasSidecars) // hasSideCars = containers.length > 1 || initContainers.length;
     ) {
       container = containers[0];
@@ -703,7 +704,7 @@ export default {
       if (
         this.type !== WORKLOAD_TYPES.JOB &&
         this.type !== WORKLOAD_TYPES.CRON_JOB &&
-        this.mode === _CREATE
+        (this.mode === _CREATE || this.realMode === _CLONE)
       ) {
         this.spec.selector = { matchLabels: this.value.workloadSelector };
         Object.assign(this.value.metadata.labels, this.value.workloadSelector);
@@ -721,7 +722,7 @@ export default {
       if (
         this.type !== WORKLOAD_TYPES.JOB &&
         this.type !== WORKLOAD_TYPES.CRON_JOB &&
-        this.mode === _CREATE
+        (this.mode === _CREATE || this.realMode === _CLONE)
       ) {
         if (!template.metadata) {
           template.metadata = { labels: this.value.workloadSelector };
@@ -784,6 +785,13 @@ export default {
 
       template.metadata.namespace = this.value.metadata.namespace;
 
+      // Handle the case where the user has changed the name of the workload
+      // Only do this for clone. Not allowed for edit
+      if (this.realMode === _CLONE) {
+        template.metadata.name = this.value.metadata.name;
+        template.metadata.description = this.value.metadata.description;
+      }
+
       // delete this.value.kind;
       if (this.container && !this.container.name) {
         this.$set(this.container, 'name', this.value.metadata.name);

package/layouts/blank.vue

@@ -1,7 +1,9 @@
 <script>
 import Brand from '@shell/mixins/brand';
+import Inactivity from '@shell/components/Inactivity';
 
 export default {
+  components: { Inactivity },
   middleware: ['authenticated'],
   mixins:     [Brand],
 };
@@ -10,6 +12,8 @@ export default {
 <template>
   <main class="main-layout">
     <nuxt />
+
+    <Inactivity />
   </main>
 </template>
 

package/layouts/default.vue

@@ -16,6 +16,7 @@ import PromptModal from '@shell/components/PromptModal';
 import AssignTo from '@shell/components/AssignTo';
 import Group from '@shell/components/nav/Group';
 import Header from '@shell/components/nav/Header';
+import Inactivity from '@shell/components/Inactivity';
 import Brand from '@shell/mixins/brand';
 import FixedBanner from '@shell/components/FixedBanner';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
@@ -57,6 +58,7 @@ export default {
     AwsComplianceBanner,
     AzureWarning,
     DraggableZone,
+    Inactivity
   },
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
@@ -765,6 +767,7 @@ export default {
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <Inactivity />
     <DraggableZone ref="draggableZone" />
   </div>
 </template>

package/layouts/home.vue

@@ -7,6 +7,7 @@ import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import Inactivity from '@shell/components/Inactivity';
 import { mapState } from 'vuex';
 
 export default {
@@ -16,7 +17,8 @@ export default {
     FixedBanner,
     GrowlManager,
     AzureWarning,
-    AwsComplianceBanner
+    AwsComplianceBanner,
+    Inactivity
   },
 
   mixins: [Brand, BrowserTabVisibility],
@@ -51,6 +53,7 @@ export default {
 <template>
   <div class="dashboard-root">
     <FixedBanner :header="true" />
+    <Inactivity />
     <AwsComplianceBanner />
     <AzureWarning />
 

package/layouts/plain.vue

@@ -11,6 +11,7 @@ import GrowlManager from '@shell/components/GrowlManager';
 import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
 import AzureWarning from '@shell/components/auth/AzureWarning';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import Inactivity from '@shell/components/Inactivity';
 
 export default {
 
@@ -23,7 +24,8 @@ export default {
     FixedBanner,
     GrowlManager,
     AwsComplianceBanner,
-    AzureWarning
+    AzureWarning,
+    Inactivity
   },
 
   middleware: ['authenticated'],
@@ -83,6 +85,7 @@ export default {
 
     <FixedBanner :footer="true" />
     <GrowlManager />
+    <Inactivity />
   </div>
 </template>
 

package/mixins/chart.js

@@ -14,7 +14,7 @@ import { CAPI, CATALOG } from '@shell/config/types';
 import { isPrerelease } from '@shell/utils/version';
 import difference from 'lodash/difference';
 import { LINUX } from '@shell/store/catalog';
-import { clone } from 'utils/object';
+import { clone } from '@shell/utils/object';
 import { merge } from 'lodash';
 
 export default {

package/models/batch.cronjob.js

@@ -2,6 +2,7 @@ import { insertAt } from '@shell/utils/array';
 import { clone } from '@shell/utils/object';
 import { WORKLOAD_TYPES } from '@shell/config/types';
 import Workload from './workload';
+import { WORKLOAD_TYPE_TO_KIND_MAPPING } from '@shell/detail/workload/index';
 
 export default class CronJob extends Workload {
   get state() {
@@ -47,12 +48,26 @@ export default class CronJob extends Workload {
   }
 
   async runNow() {
-    const job = await this.$dispatch('create', clone(this.spec.jobTemplate));
+    const ownerRef = {
+      apiVersion: this.apiVersion,
+      controller: true,
+      kind:       this.kind,
+      name:       this.metadata.name,
+      uid:        this.metadata.uid
+    };
+
+    // Set type and kind to ensure the correct model is returned (via classify). This object will be persisted to the store
+    const job = await this.$dispatch('create', {
+      type: WORKLOAD_TYPES.JOB,
+      kind: WORKLOAD_TYPE_TO_KIND_MAPPING[WORKLOAD_TYPES.JOB],
+      ...clone(this.spec.jobTemplate)
+    });
 
-    job.type = WORKLOAD_TYPES.JOB;
     job.metadata = job.metadata || {};
     job.metadata.namespace = this.metadata.namespace;
-    job.metadata.generateName = `${ this.metadata.name }-`;
+    // Can't use `generatedName` and no `name`... as this fails schema validation
+    job.metadata.name = `${ this.metadata.name }-${ Date.now() }`;
+    job.metadata.ownerReferences = [ownerRef];
 
     await job.save();
 

package/models/provisioning.cattle.io.cluster.js

@@ -393,6 +393,30 @@ export default class ProvCluster extends SteveModel {
     }
   }
 
+  get machinePoolDefaults() {
+    return this.spec.rkeConfig?.machinePoolDefaults;
+  }
+
+  set defaultHostnameLengthLimit(value) {
+    this.spec.rkeConfig = this.spec.rkeConfig || {};
+    this.spec.rkeConfig.machinePoolDefaults = this.spec.rkeConfig.machinePoolDefaults || {};
+    this.spec.rkeConfig.machinePoolDefaults.hostnameLengthLimit = value;
+  }
+
+  get defaultHostnameLengthLimit() {
+    return this.spec.rkeConfig?.machinePoolDefaults?.hostnameLengthLimit;
+  }
+
+  removeDefaultHostnameLengthLimit() {
+    if (this.machinePoolDefaults?.hostnameLengthLimit) {
+      delete this.spec.rkeConfig.machinePoolDefaults.hostnameLengthLimit;
+
+      if (Object.keys(this.spec?.rkeConfig?.machinePoolDefaults).length === 0) {
+        delete this.spec.rkeConfig.machinePoolDefaults;
+      }
+    }
+  }
+
   get nodes() {
     return this.$rootGetters['management/all'](MANAGEMENT.NODE).filter(node => node.id.startsWith(this.mgmtClusterId));
   }

package/models/workload.js

@@ -296,7 +296,7 @@ export default class Workload extends WorkloadService {
   }
 
   get endpoint() {
-    return this?.metadata?.annotations[CATTLE_PUBLIC_ENDPOINTS];
+    return this?.metadata?.annotations?.[CATTLE_PUBLIC_ENDPOINTS];
   }
 
   get desired() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -69,7 +69,7 @@
     "dagre-d3": "0.6.4",
     "dayjs": "1.8.29",
     "diff2html": "2.11.2",
-    "dompurify": "2.0.12",
+    "dompurify": "2.4.5",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-import-resolver-node": "0.3.4",
@@ -89,7 +89,6 @@
     "jest": "27.5.1",
     "jest-serializer-vue": "2.0.2",
     "jexl": "2.2.2",
-    "jquery": "3.5.1",
     "js-cookie": "2.2.1",
     "js-yaml": "4.1.0",
     "js-yaml-loader": "1.2.2",

package/pages/auth/login.vue

@@ -303,6 +303,7 @@ export default {
         </h1>
         <div
           class="login-messages"
+          data-testid="login__messages"
           :class="{'login-messages--hasContent': hasLoginMessage}"
         >
           <Banner

package/pages/c/_cluster/explorer/index.vue

@@ -23,7 +23,6 @@ import {
   WORKLOAD_TYPES,
   COUNT,
   CATALOG,
-  POD,
   PSP,
 } from '@shell/config/types';
 import { mapPref, CLUSTER_TOOLS_TIP, PSP_DEPRECATION_BANNER } from '@shell/store/prefs';
@@ -264,11 +263,9 @@ export default {
     },
 
     podsUsed() {
-      const pods = resourceCounts(this.$store, POD);
-
       return {
         total:  parseSi(this.currentCluster?.status?.allocatable?.pods || '0'),
-        useful: pods.total
+        useful: parseSi(this.currentCluster?.status?.requested?.pods || '0'),
       };
     },
 

package/pages/c/_cluster/settings/performance.vue

@@ -23,13 +23,17 @@ export default {
   async fetch() {
     try {
       this.uiPerfSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
-    } catch (e) {
+    } catch {
       this.uiPerfSetting = await this.$store.dispatch('management/create', { type: MANAGEMENT.SETTING }, { root: true });
       // Setting does not exist - create a new one
       this.uiPerfSetting.value = JSON.stringify(DEFAULT_PERF_SETTING);
       this.uiPerfSetting.metadata = { name: SETTING.UI_PERFORMANCE };
     }
 
+    try {
+      this.authUserTTL = await this.$store.dispatch(`management/find`, { type: MANAGEMENT.SETTING, id: SETTING.AUTH_USER_SESSION_TTL_MINUTES });
+    } catch {}
+
     const sValue = this.uiPerfSetting?.value || JSON.stringify(DEFAULT_PERF_SETTING);
 
     this.value = {
@@ -42,11 +46,13 @@ export default {
 
   data() {
     return {
-      uiPerfSetting:    DEFAULT_PERF_SETTING,
-      bannerVal:        {},
-      value:            {},
-      errors:           [],
-      gcStartedEnabled: null
+      uiPerfSetting:              DEFAULT_PERF_SETTING,
+      authUserTTL:                null,
+      bannerVal:                  {},
+      value:                      {},
+      errors:                     [],
+      gcStartedEnabled:           null,
+      isInactivityThresholdValid: false,
     };
   },
 
@@ -56,9 +62,28 @@ export default {
 
       return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
     },
+
+    canSave() {
+      return this.value.inactivity.enabled ? this.isInactivityThresholdValid : true;
+    }
   },
 
   methods: {
+    validateInactivityThreshold(value) {
+      if (!this.authUserTTL?.value) {
+        this.isInactivityThresholdValid = true;
+
+        return;
+      }
+
+      if (parseInt(value) > parseInt(this.authUserTTL?.value)) {
+        this.isInactivityThresholdValid = false;
+
+        return this.t('performance.inactivity.authUserTTL', { current: this.authUserTTL.value });
+      }
+      this.isInactivityThresholdValid = true;
+    },
+
     async save(btnCB) {
       this.uiPerfSetting.value = JSON.stringify(this.value);
       this.errors = [];
@@ -89,8 +114,36 @@ export default {
     </h1>
     <div>
       <div class="ui-perf-setting">
-        <!-- Websocket Notifications -->
+        <!-- Inactivity -->
         <div class="mt-20">
+          <h2>{{ t('performance.inactivity.title') }}</h2>
+          <p>{{ t('performance.inactivity.description') }}</p>
+          <Checkbox
+            v-model="value.inactivity.enabled"
+            :mode="mode"
+            :label="t('performance.inactivity.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <LabeledInput
+              v-model="value.inactivity.threshold"
+              :mode="mode"
+              :label="t('performance.inactivity.inputLabel')"
+              :disabled="!value.inactivity.enabled"
+              class="input mb-10"
+              type="number"
+              min="0"
+              :rules="[validateInactivityThreshold]"
+            />
+            <span
+              v-clean-html="t('performance.inactivity.information', {}, true)"
+              :class="{ 'text-muted': !value.incrementalLoading.enabled }"
+            />
+          </div>
+        </div>
+        <!-- Websocket Notifications -->
+        <div class="mt-40">
           <h2>{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
@@ -296,6 +349,7 @@ export default {
       <AsyncButton
         class="pull-right mt-20"
         mode="apply"
+        :disabled="!canSave"
         @click="save"
       />
     </div>

package/pages/prefs.vue

@@ -163,7 +163,9 @@ export default {
       <h4 v-t="'prefs.language'" />
       <div class="row">
         <div class="col span-4">
-          <LocaleSelector />
+          <LocaleSelector
+            data-testid="prefs__languageSelector"
+          />
         </div>
       </div>
     </div>
@@ -173,6 +175,7 @@ export default {
       <h4 v-t="'prefs.theme.label'" />
       <ButtonGroup
         v-model="theme"
+        data-testid="prefs__themeOptions"
         :options="themeOptions"
       />
       <div class="mt-10">
@@ -190,7 +193,9 @@ export default {
     >
       <hr>
       <h4 v-t="'prefs.landing.label'" />
-      <LandingPagePreference />
+      <LandingPagePreference
+        data-testid="prefs__landingPagePreference"
+      />
     </div>
     <!-- Display Settings -->
     <div class="mt-10 mb-10">
@@ -203,6 +208,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="dateFormat"
+            data-testid="prefs__displaySetting__dateFormat"
             :label="t('prefs.dateFormat.label')"
             :options="dateOptions"
           />
@@ -210,6 +216,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model="timeFormat"
+            data-testid="prefs__displaySetting__timeFormat"
             :label="t('prefs.timeFormat.label')"
             :options="timeOptions"
           />
@@ -220,6 +227,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="perPage"
+            data-testid="prefs__displaySetting__perPage"
             :label="t('prefs.perPage.label')"
             :options="perPageOptions"
             option-key="value"
@@ -230,6 +238,7 @@ export default {
         <div class="col span-4">
           <LabeledSelect
             v-model.number="menuMaxClusters"
+            data-testid="prefs__displaySetting__menuMaxClusters"
             :label="t('prefs.clusterToShow.label')"
             :options="menuClusterOptions"
             option-key="value"
@@ -245,6 +254,7 @@ export default {
       <h4 v-t="'prefs.confirmationSetting.title'" />
       <Checkbox
         v-model="scalingDownPrompt"
+        data-testid="prefs__scalingDownPrompt"
         :label="t('prefs.confirmationSetting.scalingDownPrompt')"
         class="mt-10"
       />
@@ -255,18 +265,21 @@ export default {
       <h4 v-t="'prefs.advFeatures.title'" />
       <Checkbox
         v-model="viewInApi"
+        data-testid="prefs__viewInApi"
         :label="t('prefs.advFeatures.viewInApi', {}, true)"
         class="mt-10"
       />
       <br>
       <Checkbox
         v-model="allNamespaces"
+        data-testid="prefs__allNamespaces"
         :label="t('prefs.advFeatures.allNamespaces', {}, true)"
         class="mt-20"
       />
       <br>
       <Checkbox
         v-model="themeShortcut"
+        data-testid="prefs__themeShortcut"
         :label="t('prefs.advFeatures.themeShortcut', {}, true)"
         class="mt-20"
       />
@@ -274,6 +287,7 @@ export default {
       <Checkbox
         v-if="!isSingleProduct"
         v-model="hideDescriptions"
+        data-testid="prefs__hideDescriptions"
         :label="t('prefs.hideDesc.label')"
         class="mt-20"
       />
@@ -292,6 +306,7 @@ export default {
       <h4 v-t="'prefs.keymap.label'" />
       <ButtonGroup
         v-model="keymap"
+        data-testid="prefs__keymapOptions"
         :options="keymapOptions"
       />
     </div>
@@ -304,6 +319,7 @@ export default {
       <h4 v-t="'prefs.helm.label'" />
       <ButtonGroup
         v-model="showPreRelease"
+        data-testid="prefs__helmOptions"
         :options="helmOptions"
       />
     </div>