@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.7

package/dialog/RotateEncryptionKeyDialog.vue

@@ -1,5 +1,5 @@
 <script>
-import { SNAPSHOT, NORMAN } from '@shell/config/types';
+import { SNAPSHOT } from '@shell/config/types';
 import AsyncButton from '@shell/components/AsyncButton';
 import { Card } from '@components/Card';
 import { Banner } from '@components/Banner';
@@ -64,23 +64,11 @@ export default {
     },
 
     async getEtcdBackups() {
-      if ( this.cluster.isRke1) {
-        let etcdBackups = await this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP });
+      let etcdBackups = await this.$store.dispatch('management/findAll', { type: SNAPSHOT });
 
-        etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.metadata.name);
+      etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.id);
 
-        return etcdBackups;
-      }
-
-      if (this.cluster.isRke2) {
-        let etcdBackups = await this.$store.dispatch('management/findAll', { type: SNAPSHOT });
-
-        etcdBackups = etcdBackups.filter((backup) => backup.clusterId === this.cluster.id);
-
-        return etcdBackups;
-      }
-
-      return [];
+      return etcdBackups;
     },
 
     getFormattedCreatedDate(createdDate) {
@@ -93,23 +81,15 @@ export default {
     },
 
     async apply(buttonDone) {
-      const isRke2 = this.cluster.isRke2;
-
       try {
-        if (isRke2) {
-          const currentGeneration = this.cluster.spec?.rkeConfig?.rotateEncryptionKeys?.generation || 0;
-
-          // To rotate the encryption keys, increment
-          // rkeConfig.rotateEncyrptionKeys.generation in the YAML.
-          set(this.cluster, 'spec.rkeConfig.rotateEncryptionKeys.generation', currentGeneration + 1);
-          await this.cluster.save();
+        const currentGeneration = this.cluster.spec?.rkeConfig?.rotateEncryptionKeys?.generation || 0;
 
-          this.close(buttonDone);
-        } else {
-          await this.cluster.mgmt.doAction('rotateEncryptionKey');
+        // To rotate the encryption keys, increment
+        // rkeConfig.rotateEncyrptionKeys.generation in the YAML.
+        set(this.cluster, 'spec.rkeConfig.rotateEncryptionKeys.generation', currentGeneration + 1);
+        await this.cluster.save();
 
-          this.close(buttonDone);
-        }
+        this.close(buttonDone);
       } catch (err) {
         this.errors = exceptionToErrorsArray(err);
         buttonDone(false);

package/edit/auth/ldap/__tests__/config.test.ts

@@ -41,4 +41,18 @@ describe('lDAP config', () => {
     expect(userLoginFilter.element.value).toBe(expectedValue);
     expect(wrapper.vm.model.userLoginFilter).toBeUndefined();
   });
+
+  it.each([
+    'openldap', 'freeipa'
+  ])('should display searchUsingServiceAccount checkbox if type %p', (type) => {
+    const wrapper = mount(LDAPConfig, {
+      propsData: {
+        value: {},
+        type,
+      }
+    });
+    const checkbox = wrapper.find('[data-testid="searchUsingServiceAccount"]');
+
+    expect(checkbox).toBeDefined();
+  });
 });

package/edit/auth/ldap/config.vue

@@ -11,6 +11,8 @@ const DEFAULT_TLS_PORT = 636;
 
 export const SHIBBOLETH = 'shibboleth';
 export const OKTA = 'okta';
+export const OPEN_LDAP = 'openldap';
+export const FREE_IPA = 'freeipa';
 
 export default {
   emits: ['update:value'],
@@ -64,6 +66,11 @@ export default {
     // Does the auth provider support LDAP for search in addition to SAML?
     isSamlProvider() {
       return this.type === SHIBBOLETH || this.type === OKTA;
+    },
+
+    // Allow to enable user search just for these providers
+    isSearchAllowed() {
+      return this.type === OPEN_LDAP || this.type === FREE_IPA;
     }
   },
 
@@ -226,6 +233,23 @@ export default {
         />
       </div>
     </div>
+
+    <div
+      v-if="isSearchAllowed"
+      class="row mb-20"
+    >
+      <div class="col">
+        <Checkbox
+          v-model:value="model.searchUsingServiceAccount"
+          :mode="mode"
+          data-testid="searchUsingServiceAccount"
+          class="full-height"
+          :label="t('authConfig.ldap.searchUsingServiceAccount.label')"
+          :tooltip="t('authConfig.ldap.searchUsingServiceAccount.tip')"
+        />
+      </div>
+    </div>
+
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput

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

@@ -79,7 +79,7 @@ export default {
     });
 
     try {
-      this.defaultConfigMap = await this.$store.dispatch('cluster/find', { type: CONFIG_MAP, id: 'rancher-compliance-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;

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);

package/edit/networking.k8s.io.ingress/Certificate.vue

@@ -35,8 +35,16 @@ export default {
       defaultCert,
       hosts,
       secretName,
+      secretVal: this.value.secretName ?? DEFAULT_CERT_VALUE,
     };
   },
+  watch: {
+    value(newVal) {
+      this.hosts = newVal.hosts;
+      this.secretName = newVal.secretName;
+      this.secretVal = this.secretName === null ? DEFAULT_CERT_VALUE : this.secretName;
+    },
+  },
   computed: {
     certsWithDefault() {
       return [this.defaultCert, ...this.certs.map((c) => ({ label: c, value: c }))];
@@ -51,15 +59,10 @@ export default {
     },
   },
   methods: {
-    addHost(ev) {
-      ev.preventDefault();
-      this.hosts.push('');
-      this.update();
-    },
     update() {
       const out = { hosts: this.hosts };
 
-      out.secretName = this.secretName;
+      out.secretName = this.secretVal;
 
       if (out.secretName === DEFAULT_CERT_VALUE) {
         out.secretName = null;
@@ -68,7 +71,7 @@ export default {
       this.$emit('update:value', out);
     },
     onSecretInput(e) {
-      this.secretName = e && typeof e === 'object' ? e.label : e;
+      this.secretVal = e && typeof e === 'object' ? e.label : e;
       this.update();
     },
     onHostsInput(e) {
@@ -80,13 +83,10 @@ export default {
 </script>
 
 <template>
-  <div
-    class="cert row"
-    @update:value="update"
-  >
+  <div class="cert row">
     <div class="col span-6">
       <LabeledSelect
-        v-model:value="secretName"
+        v-model:value="secretVal"
         class="secret-name"
         :options="certsWithDefault"
         :label="t('ingress.certificates.certificate.label')"

package/edit/networking.k8s.io.ingress/__tests__/Certificate.test.ts

@@ -0,0 +1,165 @@
+import { shallowMount } from '@vue/test-utils';
+import Certificate from '../Certificate.vue';
+
+const DEFAULT_CERT_VALUE = '__[[DEFAULT_CERT]]__';
+
+const createWrapper = (propsData = {}) => {
+  return shallowMount(Certificate, { propsData });
+};
+
+describe('networking.k8s.io.ingress/Certificate.vue', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('initializes with default values', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.vm.hosts).toStrictEqual(['']);
+    expect(wrapper.vm.secretVal).toStrictEqual(DEFAULT_CERT_VALUE);
+    expect(wrapper.vm.secretName).toStrictEqual(DEFAULT_CERT_VALUE);
+  });
+
+  it('initializes with provided props', () => {
+    const value = { hosts: ['host1', 'host2'], secretName: 'some-secret' };
+    const certs = ['cert1', 'cert2'];
+    const rules = { host: ['rule1'] };
+    const wrapper = createWrapper({
+      value, certs, rules
+    });
+
+    expect(wrapper.vm.hosts).toStrictEqual(['host1', 'host2']);
+    expect(wrapper.vm.secretVal).toStrictEqual('some-secret');
+    expect(wrapper.vm.secretName).toStrictEqual('some-secret');
+    expect(wrapper.vm.certs).toStrictEqual(certs);
+    expect(wrapper.vm.rules).toStrictEqual(rules);
+  });
+
+  it('emits update:value when update is called', async() => {
+    const wrapper = createWrapper();
+
+    wrapper.vm.hosts = ['host1'];
+    wrapper.vm.secretVal = 'cert1';
+    wrapper.vm.update();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[0][0]).toStrictEqual({
+      hosts:      ['host1'],
+      secretName: 'cert1',
+    });
+  });
+
+  it('sets secretName to null when secretVal is DEFAULT_CERT_VALUE', async() => {
+    const wrapper = createWrapper();
+
+    wrapper.vm.hosts = ['host1'];
+    wrapper.vm.secretVal = DEFAULT_CERT_VALUE;
+    wrapper.vm.update();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:value')[0][0].secretName).toBeNull();
+  });
+
+  it('updates secretVal when onSecretInput is called with an object', async() => {
+    const wrapper = createWrapper();
+    const newCert = { label: 'cert1', value: 'cert1' };
+
+    wrapper.vm.onSecretInput(newCert);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.secretVal).toStrictEqual('cert1');
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[0][0].secretName).toStrictEqual('cert1');
+  });
+
+  it('updates secretVal when onSecretInput is called with a string', async() => {
+    const wrapper = createWrapper();
+
+    wrapper.vm.onSecretInput('cert1');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.secretVal).toStrictEqual('cert1');
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[0][0].secretName).toStrictEqual('cert1');
+  });
+
+  it('updates hosts when onHostsInput is called', async() => {
+    const wrapper = createWrapper();
+
+    wrapper.vm.onHostsInput(['host1', 'host2']);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.hosts).toStrictEqual(['host1', 'host2']);
+    expect(wrapper.emitted('update:value')).toBeTruthy();
+    expect(wrapper.emitted('update:value')[0][0].hosts).toStrictEqual(['host1', 'host2']);
+  });
+
+  it('computes certsWithDefault correctly', () => {
+    const certs = ['cert1', 'cert2'];
+    const wrapper = createWrapper({ certs });
+    const expectedCerts = [
+      { label: '%ingress.certificates.defaultCertLabel%', value: DEFAULT_CERT_VALUE },
+      { label: 'cert1', value: 'cert1' },
+      { label: 'cert2', value: 'cert2' },
+    ];
+
+    expect(wrapper.vm.certsWithDefault).toStrictEqual(expectedCerts);
+  });
+
+  it('returns warning status for non-existent certificate', () => {
+    const wrapper = createWrapper({
+      certs: ['cert1', 'cert2'],
+      value: { hosts: [''], secretName: 'non-existent-cert' },
+    });
+
+    expect(wrapper.vm.certificateStatus).toStrictEqual('warning');
+  });
+
+  it('returns null status for existing certificate', () => {
+    const wrapper = createWrapper({
+      certs: ['cert1', 'cert2'],
+      value: { hosts: [''], secretName: 'cert1' },
+    });
+
+    expect(wrapper.vm.certificateStatus).toBeNull();
+  });
+
+  it('returns null status for default certificate', () => {
+    const wrapper = createWrapper({
+      certs: ['cert1', 'cert2'],
+      value: { hosts: [''], secretName: null },
+    });
+
+    expect(wrapper.vm.certificateStatus).toBeNull();
+  });
+
+  it('returns correct tooltip for non-existent certificate', () => {
+    const wrapper = createWrapper({
+      certs: ['cert1', 'cert2'],
+      value: { hosts: [''], secretName: 'non-existent-cert' },
+    });
+
+    expect(wrapper.vm.certificateTooltip).toStrictEqual('%ingress.certificates.certificate.doesntExist%');
+  });
+
+  it('returns null tooltip for existing certificate', () => {
+    const wrapper = createWrapper({
+      certs: ['cert1', 'cert2'],
+      value: { hosts: [''], secretName: 'cert1' },
+    });
+
+    expect(wrapper.vm.certificateTooltip).toBeNull();
+  });
+
+  it('watches value prop changes', async() => {
+    const wrapper = createWrapper({ value: { hosts: ['host1'], secretName: 'cert1' } });
+
+    await wrapper.setProps({ value: { hosts: ['host2'], secretName: 'cert2' } });
+    expect(wrapper.vm.hosts).toStrictEqual(['host2']);
+    expect(wrapper.vm.secretVal).toStrictEqual('cert2');
+    expect(wrapper.vm.secretName).toStrictEqual('cert2');
+  });
+
+  it('handles null secretName in value prop', async() => {
+    const wrapper = createWrapper({ value: { hosts: ['host1'], secretName: null } });
+
+    expect(wrapper.vm.secretVal).toStrictEqual(DEFAULT_CERT_VALUE);
+    expect(wrapper.vm.secretName).toBeNull();
+  });
+});

package/edit/provisioning.cattle.io.cluster/__tests__/rke2.test.ts

@@ -240,11 +240,12 @@ describe('component: rke2', () => {
 
     // we need to mock the "save" method from the create-edit-view-mixin
     // otherwise we get console errors
-    jest.spyOn(wrapper.vm, 'save').mockImplementation();
+    // jest.spyOn(wrapper.vm, 'save').mockImplementation();
 
     await wrapper.vm._doSaveOverride(jest.fn());
+    const chartKey = wrapper.vm.chartVersionKey(HARVESTER_CLOUD_PROVIDER);
 
-    const cloudConfigPath = get(wrapper.vm.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`);
+    const cloudConfigPath = get(wrapper.vm.userChartValues, `${ chartKey }.cloudConfigPath`);
 
     expect(cloudConfigPath).toStrictEqual('my-k8s-distro-path/etc/config-files/cloud-provider-config');
   });

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

@@ -7,6 +7,7 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import FormValidation from '@shell/mixins/form-validation';
 import { normalizeName } from '@shell/utils/kube';
 import AccountAccess from '@shell/components/google/AccountAccess.vue';
+import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 
 import {
   CAPI,
@@ -226,6 +227,7 @@ export default {
       allPSAs:                         [],
       credentialId:                    '',
       credential:                      null,
+      initialMachinePoolsValues:       {},
       machinePools:                    null,
       rke2Versions:                    null,
       k3sVersions:                     null,
@@ -856,6 +858,9 @@ export default {
       set(newValue) {
         this.$emit('update:value', newValue);
       }
+    },
+    hideFooter() {
+      return this.needCredential && !this.credential;
     }
   },
 
@@ -946,6 +951,7 @@ export default {
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
     this.registerBeforeHook(this.handleVsphereCpiSecret, 'sync-vsphere-cpi');
     this.registerBeforeHook(this.handleVsphereCsiSecret, 'sync-vsphere-csi');
+    this.registerBeforeHook(this.setHarvesterChartValues, 'set-harvester-chart-values');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
 
@@ -1214,7 +1220,7 @@ export default {
           // @TODO what if the pool is missing?
           const id = `pool${ ++this.lastIdx }`;
 
-          out.push({
+          const poolData = {
             id,
             remove: false,
             create: false,
@@ -1222,7 +1228,15 @@ export default {
             pool:   clone(pool),
             config: config ? await this.$store.dispatch('management/clone', { resource: config }) : null,
             configMissing
-          });
+          };
+
+          // add data to machine pools array
+          out.push(poolData);
+
+          // but we also store the initial data so that we can handle conflicts
+          if (poolData?.config?.id) {
+            this.initialMachinePoolsValues[poolData.config.id] = structuredClone(poolData.config);
+          }
         }
       }
 
@@ -1317,17 +1331,25 @@ export default {
         const _latestConfig = await this.$store.dispatch('management/request', { url: `/v1/${ machinePool.config.type }s/${ machinePool.config.id }` });
         const latestConfig = await this.$store.dispatch('management/create', _latestConfig);
 
-        const clonedCurrentConfig = await this.$store.dispatch('management/clone', { resource: machinePool.config });
-        const clonedLatestConfig = await this.$store.dispatch('management/clone', { resource: latestConfig });
-
-        // We don't allow the user to edit any of the fields in metadata from the UI so it's safe to override it with the
-        // metadata defined by the latest backend value. This is primarily used to ensure the resourceVersion is up to date.
-        delete clonedCurrentConfig.metadata;
+        const _initialMachinePoolValue = this.initialMachinePoolsValues[machinePool?.config?.id] || {};
+        const initialMachinePoolValue = await this.$store.dispatch('management/create', _initialMachinePoolValue);
+
+        // if there's the initial machine pool config, we are in a good position to apply the handleConflict function
+        // to deal with out-of-sync data between machinePools configs. This also mutates the data inside machinePool.config through object reference
+        const conflict = await handleConflict(
+          initialMachinePoolValue,
+          machinePool.config,
+          latestConfig,
+          {
+            dispatch: this.$store.dispatch,
+            getters:  this.$store.getters
+          },
+          'management'
+        );
 
-        if (this.provider === VMWARE_VSPHERE || this.provider === GOOGLE) {
-          machinePool.config = mergeWithReplace(clonedLatestConfig, clonedCurrentConfig, { mutateOriginal: true });
-        } else {
-          machinePool.config = merge(clonedLatestConfig, clonedCurrentConfig);
+        // if there's conflicts, throw Error stops save process and surfaces error to user
+        if (conflict) {
+          throw Error(conflict);
         }
       }
     },
@@ -1536,41 +1558,7 @@ export default {
       }
 
       try {
-        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
-
         this.applyChartValues(this.value.spec.rkeConfig);
-
-        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
-
-        if (this.agentConfig?.['cloud-provider-name'] === HARVESTER && clusterId && (this.isCreate || isUpgrade)) {
-          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
-
-          const res = await this.$store.dispatch('management/request', {
-            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
-            method: 'POST',
-            data:   {
-              csiClusterRoleName: 'harvesterhci.io:csi-driver',
-              clusterRoleName:    'harvesterhci.io:cloudprovider',
-              namespace,
-              serviceAccountName: this.value.metadata.name,
-            },
-          });
-
-          const kubeconfig = res.data;
-
-          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
-
-          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
-
-          if (this.isCreate) {
-            set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.global.cattle.clusterName`, this.value.metadata.name);
-          }
-
-          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
-          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
-
-          set(this.chartValues, `${ HARVESTER_CLOUD_PROVIDER }.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
-        }
       } catch (err) {
         this.errors.push(err);
 
@@ -1617,6 +1605,62 @@ export default {
       }
     },
 
+    async setHarvesterChartValues() {
+      const isHarvester = this.agentConfig?.['cloud-provider-name'] === HARVESTER;
+
+      if (!isHarvester) {
+        return;
+      }
+      try {
+        const clusterId = get(this.credential, 'decodedData.clusterId') || '';
+        const isUpgrade = this.isEdit && this.liveValue?.spec?.kubernetesVersion !== this.value?.spec?.kubernetesVersion;
+
+        if (!this.value?.metadata?.name) {
+          const err = this.t('cluster.harvester.kubeconfigSecret.nameRequired');
+
+          throw new Error(err);
+        }
+
+        if (clusterId && (this.isCreate || isUpgrade)) {
+          const namespace = this.machinePools?.[0]?.config?.vmNamespace;
+
+          const res = await this.$store.dispatch('management/request', {
+            url:    `/k8s/clusters/${ clusterId }/v1/harvester/kubeconfig`,
+            method: 'POST',
+            data:   {
+              csiClusterRoleName: 'harvesterhci.io:csi-driver',
+              clusterRoleName:    'harvesterhci.io:cloudprovider',
+              namespace,
+              serviceAccountName: this.value.metadata.name,
+            },
+          });
+
+          const kubeconfig = res.data;
+
+          const harvesterKubeconfigSecret = await this.createKubeconfigSecret(kubeconfig);
+
+          this.agentConfig['cloud-provider-config'] = `secret://fleet-default:${ harvesterKubeconfigSecret?.metadata?.name }`;
+
+          const harvesterCloudProviderKey = this.chartVersionKey(HARVESTER_CLOUD_PROVIDER);
+
+          if (this.isCreate) {
+            set(this.userChartValues, `'${ harvesterCloudProviderKey }'.global.cattle.clusterName`, this.value.metadata.name);
+          }
+
+          const distroSubdir = this.value?.spec?.kubernetesVersion?.includes('k3s') ? DEFAULT_SUBDIRS.K8S_DISTRO_K3S : DEFAULT_SUBDIRS.K8S_DISTRO_RKE2;
+          const distroRoot = this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro?.length ? this.value?.spec?.rkeConfig?.dataDirectories?.k8sDistro : `${ DEFAULT_COMMON_BASE_PATH }/${ distroSubdir }`;
+
+          set(this.userChartValues, `'${ harvesterCloudProviderKey }'.cloudConfigPath`, `${ distroRoot }/etc/config-files/cloud-provider-config`);
+        }
+      } catch (e) {
+        const cause = e.errors ? e.errors.join('; ') : e?.message;
+        const msg = this.t('cluster.harvester.kubeconfigSecret.error', { err: cause });
+
+        this.errors.push(msg);
+        throw new Error(msg);
+      }
+    },
+
     // create a secret to reference the harvester cluster kubeconfig in rkeConfig
     async createKubeconfigSecret(kubeconfig = '') {
       const clusterName = this.value.metadata.name;
@@ -1893,6 +1937,7 @@ export default {
 
       charts.forEach((name) => {
         const key = this.chartVersionKey(name);
+
         const userValues = this.userChartValues[key];
 
         if (userValues) {
@@ -2174,7 +2219,10 @@ export default {
       @error="e=>errors.push(e)"
       @cancel-credential="cancelCredential"
     />
-    <div v-else>
+    <div
+      v-else
+      class="authenticated"
+    >
       <SelectCredential
         v-if="needCredential"
         v-model:value="credentialId"
@@ -2568,7 +2616,7 @@ export default {
       />
     </div>
     <template
-      v-if="needCredential && !credentialId"
+      v-if="hideFooter"
       #form-footer
     >
       <div><!-- Hide the outer footer --></div>
@@ -2577,6 +2625,12 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.authenticated {
+    display:flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
 .min-height {
   min-height: 40em;
 }