@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

package/edit/provisioning.cattle.io.cluster/tabs/Ingress.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { _CREATE, _VIEW, _EDIT } from '@shell/config/query-params';
+import { ref, computed, useTemplateRef } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { Banner } from '@components/Banner';
+import IngressCards from '@shell/edit/provisioning.cattle.io.cluster/ingress/IngressCards.vue';
+import {
+  INGRESS_OPTIONS, INGRESS_DUAL, TRAEFIK, INGRESS_NGINX, INGRESS_NONE, INGRESS_MIGRATION_KB_LINK, INGRESS_CLASS_DEFAULT, INGRESS_CONTROLLER_CLASS_DEFAULT, INGRESS_CLASS_MIGRATION, INGRESS_CONTROLLER_CLASS_MIGRATION
+} from '@shell/edit/provisioning.cattle.io.cluster/shared';
+import IngressConfiguration from '@shell/edit/provisioning.cattle.io.cluster/ingress/IngressConfiguration.vue';
+import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+import { set, get, mergeWithReplace } from '@shell/utils/object';
+import { saferDump } from '@shell/utils/create-yaml';
+import RichTranslation from '@shell/components/RichTranslation.vue';
+
+interface Props {
+  mode?: string;
+  value: string | string[];
+  nginxSupported: boolean;
+  nginxChart: string;
+  traefikChart: string;
+  userChartValues: any;
+  versionInfo: any;
+}
+const {
+  mode = _CREATE,
+  value,
+  nginxChart,
+  traefikChart,
+  nginxSupported,
+  userChartValues,
+  versionInfo
+} = defineProps<Props>();
+
+const emit = defineEmits(['update:value', 'error', 'config-validation-changed', 'yaml-validation-changed', 'update-values']);
+const store = useStore();
+const { t } = useI18n(store);
+const nginxYaml = useTemplateRef('nginx-yaml');
+const traefikYaml = useTemplateRef('traefik-yaml');
+
+const showAdvanced = ref<Boolean>(false);
+const isView = computed(() => mode === _VIEW);
+const isEdit = computed(() => mode === _EDIT);
+const showTraefikBanner = ref<Boolean>(false);
+
+const ingressSelection = computed(() => {
+  if (Array.isArray(value) ) {
+    return INGRESS_DUAL;
+  } else if (!value || value.length === 0) {
+    return INGRESS_NONE;
+  } else {
+    return value;
+  }
+});
+const ingressOptions = computed(() => {
+  return INGRESS_OPTIONS.filter((option) => !(option.id === INGRESS_DUAL && mode === _CREATE) &&
+  !((option.id === INGRESS_NGINX || option.id === INGRESS_DUAL) && !nginxSupported)
+  ).map((option) => {
+    return {
+      ...option,
+      selected: option.id === ingressSelection.value
+    };
+  });
+});
+
+const ingressEnabled = computed({
+  get() {
+    return ingressSelection.value !== INGRESS_NONE;
+  },
+  set(val) {
+    if (!val) {
+      emit('update:value', INGRESS_NONE);
+    } else {
+      emit('update:value', TRAEFIK);
+    }
+  }
+});
+
+function initYamlEditor(chart: string) {
+  const defaultChartValue = versionInfo[chart];
+
+  return mergeWithReplace(defaultChartValue?.values, userChartValues[chart]);
+}
+
+function setCompatibilityModeValues(val: boolean) {
+  set(traefikMerged.value, 'providers.kubernetesIngressNginx.enabled', val);
+  if (!val) {
+    set(traefikMerged.value, 'providers.kubernetesIngressNginx.ingressClass', INGRESS_CLASS_DEFAULT);
+    set(traefikMerged.value, 'providers.kubernetesIngressNginx.controllerClass', INGRESS_CONTROLLER_CLASS_DEFAULT);
+  } else {
+    set(traefikMerged.value, 'providers.kubernetesIngressNginx.ingressClass', INGRESS_CLASS_MIGRATION);
+    set(traefikMerged.value, 'providers.kubernetesIngressNginx.controllerClass', INGRESS_CONTROLLER_CLASS_MIGRATION);
+  }
+}
+
+function preconfigureTraefik() {
+  set(traefikMerged.value, 'ports.web.hostPort', 8000);
+  set(traefikMerged.value, 'ports.websecure.hostPort', 8443);
+  setCompatibilityModeValues(true);
+  emit('update-values', traefikChart, traefikMerged.value);
+}
+
+const traefikMerged = ref(initYamlEditor(traefikChart));
+const nginxMerged = ref(initYamlEditor(nginxChart));
+
+const nginxHttp = computed({
+  get() {
+    return get(nginxMerged.value, 'controller.hostPort.ports.http');
+  },
+  set(val: string) {
+    set(nginxMerged.value, 'controller.hostPort.ports.http', Number(val));
+    emit('update-values', nginxChart, nginxMerged.value);
+    updateYaml(nginxYaml.value, nginxMerged.value);
+  }
+});
+const nginxHttps = computed({
+  get() {
+    return get(nginxMerged.value, 'controller.hostPort.ports.https');
+  },
+  set(val: string) {
+    set(nginxMerged.value, 'controller.hostPort.ports.https', Number(val));
+    emit('update-values', nginxChart, nginxMerged.value);
+    updateYaml(nginxYaml.value, nginxMerged.value);
+  }
+});
+const traefikHttp = computed({
+  get() {
+    return get(traefikMerged.value, 'ports.web.hostPort');
+  },
+  set(val: string) {
+    set(traefikMerged.value, 'ports.web.hostPort', Number(val));
+    emit('update-values', traefikChart, traefikMerged.value);
+    updateYaml(traefikYaml.value, traefikMerged.value);
+  }
+});
+const traefikHttps = computed({
+  get() {
+    return get(traefikMerged.value, 'ports.websecure.hostPort');
+  },
+  set(val: string) {
+    set(traefikMerged.value, 'ports.websecure.hostPort', Number(val));
+    emit('update-values', traefikChart, traefikMerged.value);
+    updateYaml(traefikYaml.value, traefikMerged.value);
+  }
+});
+
+const compatibilityMode = computed({
+  get() {
+    return get(traefikMerged.value, 'providers.kubernetesIngressNginx.enabled');
+  },
+  set(val: boolean) {
+    setCompatibilityModeValues(val);
+    emit('update-values', traefikChart, traefikMerged.value);
+    updateYaml(traefikYaml.value, traefikMerged.value);
+  }
+});
+
+function selectIngress(id: string) {
+  if ( id === INGRESS_DUAL) {
+    emit('update:value', [TRAEFIK, INGRESS_NGINX]);
+    preconfigureTraefik();
+  } else {
+    emit('update:value', id);
+    if (id === TRAEFIK && !!isEdit.value) {
+      showTraefikBanner.value = true;
+    }
+  }
+}
+
+function updateYaml(component: any, value: any) {
+  if (component) {
+    component.updateValue(saferDump(value));
+  }
+}
+
+</script>
+<template>
+  <h3 class="mb-10">
+    {{ t('cluster.ingress.title') }}
+  </h3>
+  <Checkbox
+    v-model:value="ingressEnabled"
+    :mode="mode"
+    :label="t('cluster.ingress.enableIngress')"
+  />
+  <div v-if="!ingressEnabled">
+    <Banner
+      color="warning"
+      label-key="cluster.ingress.banners.disabled.label"
+    />
+  </div>
+  <div v-else>
+    <Banner
+      color="info"
+      label-key="cluster.ingress.banners.transitioning.label"
+    />
+    <IngressCards
+      :options="ingressOptions"
+      :mode="mode"
+      @select="selectIngress"
+    />
+    <Banner
+      v-if="(isEdit && ingressSelection !== TRAEFIK) || showTraefikBanner"
+      color="warning"
+    >
+      <RichTranslation :k="`cluster.ingress.banners.selected.${ingressSelection}.label`">
+        <template #docsUrl="{ content }">
+          <a
+            :href="`${INGRESS_MIGRATION_KB_LINK}`"
+            tabindex="0"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+          >
+            {{ content }} <i class="icon icon-external-link" />
+            <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+          </a>
+        </template>
+      </RichTranslation>
+    </Banner>
+    <div class="mt-20">
+      <IngressConfiguration
+        v-model:compatibility-mode="compatibilityMode"
+        v-model:nginxHttp="nginxHttp"
+        v-model:nginxHttps="nginxHttps"
+        v-model:traefikHttp="traefikHttp"
+        v-model:traefikHttps="traefikHttps"
+        :mode="mode"
+        :ingress-selection="ingressSelection"
+        @validation-changed="emit('config-validation-changed', $event)"
+      />
+    </div>
+    <div>
+      <button
+        type="button"
+        class="btn role-link advanced-toggle mb-0"
+        @click="showAdvanced = !showAdvanced"
+      >
+        {{ showAdvanced ? t('cluster.ingress.hideAdvanced') : t('cluster.ingress.showAdvanced') }}
+      </button>
+    </div>
+    <template v-if="showAdvanced">
+      <div class="row">
+        <div
+          v-if="ingressSelection === TRAEFIK || ingressSelection === INGRESS_DUAL"
+          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
+        >
+          <p
+            v-if="ingressSelection === INGRESS_DUAL"
+            class="mb-10"
+          >
+            {{ t('cluster.ingress.traefik.header') }}
+          </p>
+          <YamlEditor
+            ref="traefik-yaml"
+            class="ingress-yaml-editor"
+            data-testid="traefik-yaml-editor"
+            :value="traefikMerged"
+            :mode="mode"
+            :scrolling="true"
+            :as-object="true"
+            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+            :hide-preview-buttons="true"
+            @update:value="emit('update-values', traefikChart, $event)"
+            @validationChanged="emit('yaml-validation-changed', {name: traefikChart, val: $event})"
+          />
+        </div>
+        <div
+          v-if="ingressSelection === INGRESS_NGINX || ingressSelection === INGRESS_DUAL"
+          :class="{ 'col': true, 'span-6': ingressSelection === INGRESS_DUAL, 'span-12': ingressSelection !== INGRESS_DUAL }"
+        >
+          <p
+            v-if="ingressSelection === INGRESS_DUAL"
+            class="mb-10"
+          >
+            {{ t('cluster.ingress.nginx.header') }}
+          </p>
+          <YamlEditor
+            ref="nginx-yaml"
+            class="ingress-yaml-editor"
+            data-testid="ingress-nginx-yaml-editor"
+            :value="nginxMerged"
+            :mode="mode"
+            :scrolling="true"
+            :as-object="true"
+            :editor-mode="isView ? EDITOR_MODES.VIEW_CODE : EDITOR_MODES.EDIT_CODE"
+            :hide-preview-buttons="true"
+            @update:value="emit('update-values', nginxChart, $event)"
+            @validationChanged="emit('yaml-validation-changed', {name: nginxChart, val: $event})"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.advanced-toggle {
+  padding: 0;
+  gap: 0;
+  min-height: 20px;
+
+  &:focus-visible {
+    border-color: var(--primary);
+    @include focus-outline;
+    outline-offset: -2px;
+  }
+}
+
+.ingress-yaml-editor {
+  :deep(.CodeMirror) {
+    height: auto !important;
+  }
+  :deep(.CodeMirror-scroll) {
+    max-height: 600px;
+  }
+}
+</style>

package/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue

@@ -354,7 +354,8 @@ export default {
       :is="configComponent"
       v-if="value.config && configComponent"
       ref="configComponent"
-      v-model:has-ipv6="value.hasIpv6"
+      v-model:is-ipv6="value.isIpv6"
+      v-model:is-dualStack="value.isDualStack"
       :cluster="cluster"
       :uuid="uuid"
       :mode="mode"

package/edit/provisioning.cattle.io.cluster/tabs/etcd/__tests__/S3Config.test.ts

@@ -1,6 +1,18 @@
 import { shallowMount } from '@vue/test-utils';
 import S3Config from '@shell/edit/provisioning.cattle.io.cluster/tabs/etcd/S3Config.vue';
-
+jest.mock('@shell/edit/provisioning.cattle.io.cluster/shared', () => ({
+  RETENTION_DEFAULT:         5,
+  RKE2_INGRESS_NGINX:        'rke2-ingress-nginx',
+  RKE2_TRAEFIK:              'rke2-traefik',
+  INGRESS_NGINX:             'ingress-nginx',
+  INGRESS_CONTROLLER:        'ingress-controller',
+  TRAEFIK:                   'traefik',
+  HARVESTER:                 'harvester',
+  INGRESS_DUAL:              'dual',
+  INGRESS_NONE:              'none',
+  INGRESS_OPTIONS:           [],
+  INGRESS_MIGRATION_KB_LINK: 'mock-link'
+}));
 describe('s3Config', () => {
   const defaultProps = {
     mode:                'create',

package/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue

@@ -2,7 +2,7 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
-import { _EDIT, _VIEW, _CREATE } from '@shell/config/query-params';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
 import ArrayList from '@shell/components/form/ArrayList';
 import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
@@ -20,7 +20,7 @@ export default {
     'update:value', 'cluster-cidr-changed', 'local-cluster-auth-endpoint-changed',
     'service-cidr-changed', 'cluster-domain-changed', 'cluster-dns-changed',
     'truncate-hostname-changed', 'ca-certs-changed', 'service-node-port-range-changed',
-    'fqdn-changed', 'tls-san-changed', 'stack-preference-changed', 'validationChanged', 'enable-flannel-masq-changed'
+    'fqdn-changed', 'tls-san-changed', 'stack-preference-changed', 'validationChanged', 'flannel-ipv6-masq-changed'
   ],
 
   components: {
@@ -59,29 +59,12 @@ export default {
       default: false
     },
 
-    enableFlannelMasq: {
+    flannelIpv6Masq: {
       type:    Boolean,
       default: false
     }
   },
 
-  watch: {
-    isProbablyIPv6(neu) {
-      if (this.mode === _CREATE && this.showFlannelMasq) {
-        this.$emit('enable-flannel-masq-changed', neu);
-      }
-    },
-
-    isK3s(neu) {
-      if (!neu) {
-        this.$emit('enable-flannel-masq-changed', null);
-      } else if (this.isProbablyIPv6) {
-        this.$emit('enable-flannel-masq-changed', true);
-      }
-    },
-
-  },
-
   data() {
     return { STACK_PREFS };
   },
@@ -157,11 +140,11 @@ export default {
       return this.isK3s && flannelEnabled;
     },
 
-    hasIpv6StackPref() {
+    isIpv6StackPref() {
       return [STACK_PREFS.IPV6, STACK_PREFS.DUAL].includes(this.value?.spec?.rkeConfig?.networking?.stackPreference);
     },
 
-    hasIpv6ServerConfig() {
+    isIpv6ServerConfig() {
       const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
       const serviceCIDR = this.serverConfig['service-cidr'] || '';
 
@@ -169,25 +152,7 @@ export default {
     },
 
     isProbablyIPv6() {
-      return this.hasSomeIpv6Pools || this.hasIpv6StackPref || this.hasIpv6ServerConfig;
-    },
-  },
-
-  methods: {
-    // if ipv6 pools are detected, we enforce dual-stack or ipv6 stack prefs.
-    // If ipv6 pools are not detected we don't know for sure they aren't there so we don't validate the input
-    // also not validating the input when editing existing clusters to ensure we don't prevent editing clusters using dual-stack VPCs provisioned before the ipv6 feature was added
-    stackPreferenceValidator(val) {
-      const value = val?.value || val;
-      let isValid;
-
-      if (this.hasSomeIpv6Pools && this.mode === _CREATE) {
-        isValid = value !== STACK_PREFS.IPV4;
-
-        return isValid ? null : this.t('cluster.rke2.stackPreference.errorNeedsIpv6');
-      } else {
-        return null;
-      }
+      return this.hasSomeIpv6Pools || this.isIpv6StackPref || this.isIpv6ServerConfig;
     },
   }
 };
@@ -212,6 +177,7 @@ export default {
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.clusterCidr.label')"
+          data-testid="cluster-cidr"
           @update:value="$emit('cluster-cidr-changed', $event)"
         />
       </div>
@@ -224,6 +190,7 @@ export default {
           :mode="mode"
           :disabled="isEdit"
           :label="t('cluster.rke2.address.serviceCidr.label')"
+          data-testid="service-cidr"
           @update:value="$emit('service-cidr-changed', $event)"
         />
       </div>
@@ -331,7 +298,6 @@ export default {
           :value="localValue?.spec?.rkeConfig?.networking?.stackPreference || STACK_PREFS.IPV4"
           :mode="mode"
           :options="stackPreferenceOptions"
-          :rules="[stackPreferenceValidator]"
           data-testid="network-tab-stackpreferences"
           :require-dirty="false"
           @selecting="e=>$emit('stack-preference-changed', e)"
@@ -357,11 +323,11 @@ export default {
           class="col"
         >
           <Checkbox
-            :value="enableFlannelMasq"
+            :value="flannelIpv6Masq"
             data-testid="cluster-rke2-flannel-masq-checkbox"
             :mode="mode"
             :label="t('cluster.k3s.flannelMasq.label')"
-            @update:value="e=>$emit('enable-flannel-masq-changed', e)"
+            @update:value="e=>$emit('flannel-ipv6-masq-changed', e)"
           />
         </div>
       </div>

package/edit/secret/index.vue

@@ -72,7 +72,7 @@ export default {
         this.value.metadata.namespace = this.filteredProjects[0].status.backingNamespace;
         this.value.metadata.labels[UI_PROJECT_SECRET] = this.filteredProjects[0].metadata.name;
       } else {
-        this.projectName = this.filteredProjects.find((p) => p.metadata.name === projectScopedLabel).metadata.name;
+        this.projectName = this.filteredProjects.find((p) => p.metadata.name === projectScopedLabel)?.metadata.name;
       }
     }
   },

package/edit/token.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import day from 'dayjs';
 import sortBy from 'lodash/sortBy';
-import { MANAGEMENT, NORMAN } from '@shell/config/types';
+import { MANAGEMENT, EXT } from '@shell/config/types';
 import { Banner } from '@components/Banner';
 import DetailText from '@shell/components/DetailText';
 import Footer from '@shell/components/form/Footer';
@@ -14,6 +14,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import { diffFrom } from '@shell/utils/time';
 import { filterHiddenLocalCluster, filterOnlyKubernetesClusters } from '@shell/utils/cluster';
 import { SETTING } from '@shell/config/settings';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 
 export default {
   components: {
@@ -24,6 +25,7 @@ export default {
     LabeledSelect,
     RadioGroup,
     Select,
+    Checkbox,
   },
 
   mixins: [CreateEditView],
@@ -41,7 +43,11 @@ export default {
 
     return {
       errors: null,
+      user:   null,
       form:   {
+        enabled:           true,
+        description:       '',
+        clusterName:       '',
         expiryType:        'never',
         customExpiry:      0,
         customExpiryUnits: 'minute',
@@ -51,11 +57,13 @@ export default {
       accessKey:  '',
       secretKey:  '',
       maxTTL,
+      ttl:        ''
     };
   },
 
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
+
     scopes() {
       const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
       const kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
@@ -71,16 +79,20 @@ export default {
       const options = ['never', 'day', 'month', 'year', 'custom'];
       let opts = options.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.expiry.options.${ opt }`) }));
 
-      // When the TTL is anything other than 0, present only two options
+      // When the TTL is greater than 0, present only two options
       // (1) The maximum allowed
       // (2) Custom
-      if (this.maxTTL !== 0 ) {
+      if (this.maxTTL > 0 ) {
         const now = day();
         const expiry = now.add(this.maxTTL, 'minute');
         const max = diffFrom(expiry, now, this.t);
 
         opts = opts.filter((opt) => opt.value === 'custom');
         opts.unshift({ value: 'max', label: this.t('accountAndKeys.apiKeys.add.expiry.options.maximum', { value: max.string }) });
+      } else {
+        // maxTTL <= 0 means there is no maximum, so we can show the 'never' option which results in an infinite TTL
+        // OR if we set a positive TTL, then it assumes that value
+        opts = opts.filter((opt) => opt.value === 'never' || opt.value === 'custom');
       }
 
       return opts;
@@ -91,6 +103,9 @@ export default {
 
       return filtered.map((opt) => ({ value: opt, label: this.t(`accountAndKeys.apiKeys.add.customExpiry.options.${ opt }`) }));
     },
+    hasNeverOption() {
+      return this.expiryOptions?.filter((opt) => opt.value === 'never')?.length === 1;
+    }
   },
 
   mounted() {
@@ -115,31 +130,33 @@ export default {
       });
     },
 
-    async actuallySave(url) {
+    async actuallySave() {
+      // update expiration value before save
       this.updateExpiry();
-      if ( this.isCreate ) {
-        // Description is a bit weird, so need to clone and set this
-        // rather than use this.value - need to find a way to set this if we ever
-        // want to allow edit (which I don't think we do)
-        const res = await this.value.save();
 
-        this.created = res;
-        this.ttlLimited = res.ttl !== this.value.ttl;
-        const token = this.created.token.split(':');
+      if ( this.isCreate ) {
+        const steveToken = await this.$store.dispatch('management/create', {
+          type: EXT.TOKEN,
+          spec: {
+            description:   this.form.description,
+            kind:          '',
+            userPrincipal: null, // will be set by the backend to the current user
+            clusterName:   this.form.clusterName,
+            enabled:       this.form.enabled,
+            ttl:           this.ttl
+            // userID: not needed as it will be set by the backend to the current user
+          }
+        });
+
+        const steveTokenSaved = await steveToken.save();
+
+        this.created = steveTokenSaved;
+        this.ttlLimited = this.created?.spec?.ttl !== this.ttl;
+        const token = this.created?.status?.bearerToken?.split(':');
 
         this.accessKey = token[0];
         this.secretKey = (token.length > 1) ? token[1] : '';
-        this.token = this.created.token;
-
-        // Force a refresh of the token so we get the expiry date correctly
-        await this.$store.dispatch('rancher/find', {
-          type: NORMAN.TOKEN,
-          id:   res.id,
-          opt:  { force: true }
-        }, { root: true });
-      } else {
-        // Note: update of existing key not supported currently
-        await this.value.save();
+        this.token = this.created?.status?.bearerToken;
       }
     },
 
@@ -159,7 +176,9 @@ export default {
       const units = (v === 'custom') ? this.form.customExpiryUnits : v;
       let ttl = 0;
 
-      if (units === 'max') {
+      if (v === 'never') {
+        ttl = -1;
+      } else if (units === 'max') {
         ttl = this.maxTTL * 60 * 1000;
       } else if ( units !== 'never' ) {
         const now = day();
@@ -167,7 +186,8 @@ export default {
 
         ttl = expiry.diff(now);
       }
-      this.value.ttl = ttl;
+
+      this.ttl = ttl;
     }
   }
 };
@@ -178,7 +198,7 @@ export default {
     <div class="pl-10 pr-10">
       <LabeledInput
         key="description"
-        v-model:value="value.description"
+        v-model:value="form.description"
         :placeholder="t('accountAndKeys.apiKeys.add.description.placeholder')"
         label-key="accountAndKeys.apiKeys.add.description.label"
         mode="edit"
@@ -186,13 +206,30 @@ export default {
       />
 
       <LabeledSelect
-        v-model:value="value.clusterId"
+        v-model:value="form.clusterName"
         class="mt-20 scope-select"
         label-key="accountAndKeys.apiKeys.add.scope"
         :options="scopes"
       />
 
-      <h5 class="pt-20">
+      <Checkbox
+        v-model:value="form.enabled"
+        class="mt-20 mb-20"
+        :mode="mode"
+        label-key="accountAndKeys.apiKeys.add.enabled"
+      />
+
+      <Banner
+        v-if="hasNeverOption"
+        color="warning"
+        class="mt-20"
+      >
+        <div>
+          {{ t('accountAndKeys.apiKeys.info.expiryOptionsWithNever') }}
+        </div>
+      </Banner>
+
+      <h5 class="mb-20">
         {{ t('accountAndKeys.apiKeys.add.expiry.label') }}
       </h5>
 
@@ -204,7 +241,9 @@ export default {
           class="mr-20"
           name="expiryGroup"
         />
-        <div class="ml-20 mt-10 expiry">
+        <div
+          class="ml-20 mt-10 expiry"
+        >
           <input
             v-model="form.customExpiry"
             :disabled="form.expiryType !== 'custom'"