@rancher/shell 0.3.25 → 0.3.27

package/assets/translations/en-us.yaml

@@ -653,6 +653,10 @@ asyncButton:
     action: Save
     success: Saved
     waiting: Saving…
+  editAndContinue:
+    action: Save and Continue
+    success: Saved
+    waiting: Saving…
   enable:
     action: Enable
     success: Enabled
@@ -1673,6 +1677,7 @@ cluster:
     haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available on this screen will be limited; you may want to use the YAML editor.
     deprecatedPsp: Pod Security Policies are deprecated as of Kubernetes v1.21, and have been removed in Kubernetes v1.25.
     removedPsp: Pod Security Policies have been removed in Kubernetes v1.25. Use Pod Security Admission instead.
+    cloudProviderAddConfig: 'On Kubernetes 1.27 or greater, the Amazon Cloud Provider requires additional configuration. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/amazon" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
     machinePoolError: |-
       {count, plural,
         =1 { {pool_name}: The provided value for {fields} was not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
@@ -1841,6 +1846,9 @@ cluster:
       pspChange:
         title: Pod Security Policy deprecation
         body: <p>Kubernetes has removed support for Pod Security Policies (PSPs) starting with version 1.25. If your cluster has PodSecurityPolicy admission controller enabled via "kube-apiserver-arg.enable-admission-plugins" in Cluster YAML, it has to be <i>manually</i> removed before proceeding with the upgrade. Additionally, any PSPs that may be present in the cluster will no longer be available/enforced. Do you want to proceed?</p>
+      editYamlMachinePool:
+        title: Save Machine Configurations
+        body: Machine Configurations define how machines in Pools are deployed.<br><br> They will be saved upfront to ensure valid Cluster YAML can be saved.
     snapshots:
       suffix: Snapshots per node
     systemService:
@@ -2756,7 +2764,7 @@ landing:
     cpuUsed: CPU Used
     memoryUsed: Memory Used
   seeWhatsNew: Learn more about the improvements and new capabilities in this version.
-  whatsNewLink: "What's new in 2.7"
+  whatsNewLink: "What's new in 2.8"
   learnMore: Learn More
   support: Support
   psps: PSPs
@@ -2826,7 +2834,7 @@ logging:
     dockerRootDirectory: Docker Root Directory
     systemdLogPath: systemd Log Path
     tooltip: 'Some kubernetes distributions log to <code>journald</code>. In order to collect these logs the <code>systemdLogPath</code> needs to be defined. While the <code>/run/log/journal</code> directory is used by default, some Linux distributions do not default to this path.'
-    url: '<a href="https://rancher.com/docs/rancher/v2.6/en/logging/helm-chart-options/" target="_blank" rel="noopener nofollow noreferrer">Learn more</a>'
+    url: '<a href="https://ranchermanager.docs.rancher.com/v2.8/integrations-in-rancher/logging/logging-helm-chart-options" target="_blank" rel="noopener nofollow noreferrer">Learn more</a>'
     default: /run/log/journal
   elasticsearch:
     host: Host
@@ -4606,6 +4614,7 @@ rbac:
       restricted-admin:
         label: Restricted Administrator
         description: Restricted Admins have full control over all resources in all downstream clusters but no access to the local cluster.
+        deprecation: 'Warning: The Restricted Administrator role has been deprecated as of Rancher 2.8.0 and will be removed in a future release - Check out the <a href="{releaseNotesUrl}" target="_blank" rel="noopener noreferrer nofollow">Release Notes</a>'
       user:
         label: Standard User
         description: Standard Users can create new clusters and manage clusters and projects they have been granted access to.
@@ -7072,7 +7081,6 @@ advancedSettings:
     'auth-user-session-ttl-minutes': 'Custom TTL (in minutes) on a user auth session.'
     'auth-token-max-ttl-minutes': 'Max TTL (in minutes) for all authentication tokens. When set to 0, the token never expires.'
     'kubeconfig-generate-token': 'Automatically generate tokens for users when a kubeconfig is requested.'
-    'kubeconfig-token-ttl-minutes': 'TTL used for tokens generated via the CLI. Deprecated: This setting will be removed, and kubeconfig-default-token-ttl-minutes will be used for all kubeconfig tokens.'
     'kubeconfig-default-token-ttl-minutes': 'TTL (in minutes) applied on all kubeconfig tokens. When set to 0, the token never expires.'
     'rke-metadata-config': 'Configure RKE metadata refresh parameters.'
     'ui-banners': 'Classification banner is used to display a custom fixed banner in the header, footer, or both.'

package/assets/translations/zh-hans.yaml

@@ -2735,7 +2735,7 @@ landing:
     cpuUsed: 已用 CPU
     memoryUsed: 已用内存
   seeWhatsNew: 点击右侧链接，了解此版本的新功能和优化。
-  whatsNewLink: "2.7 的新功能"
+  whatsNewLink: "2.8 的新功能"
   learnMore: 了解更多
   support: 支持
   psps: PSP
@@ -2805,7 +2805,7 @@ logging:
     dockerRootDirectory: Docker 根目录
     systemdLogPath: systemd 日志路径
     tooltip: '某些 Kubernetes 发行版在 <code>journald</code>中记录日志。你需要定义<code>systemdLogPath</code> 以收集日志。默认路径是<code>/run/log/journal</code>，但某些 Linux 发行版不默认使用该路径。'
-    url: '<a href="https://rancher.com/docs/rancher/v2.6/en/logging/helm-chart-options/" target="_blank" rel="noopener nofollow noreferrer">了解更多</a>'
+    url: '<a href="https://ranchermanager.docs.rancher.com/v2.8/integrations-in-rancher/logging/logging-helm-chart-options" target="_blank" rel="noopener nofollow noreferrer">了解更多</a>'
     default: /run/log/journal
   elasticsearch:
     host: 主机
@@ -7051,7 +7051,6 @@ advancedSettings:
     'auth-user-session-ttl-minutes': '用户认证会话的自定义 TTL（单位：分钟）。'
     'auth-token-max-ttl-minutes': '所有身份认证 Token 的最大 TTL（单位：分钟）。如果设置为 0，则 Token 永不过期。'
     'kubeconfig-generate-token': '请求 kubeconfig 时自动为用户生成 Token。'
-    'kubeconfig-token-ttl-minutes': '在 CLI 中生成的 Token TTL。已弃用：此设置将被删除，kubeconfig-default-token-ttl-minutes 将用于所有 kubeconfig Token。'
     'kubeconfig-default-token-ttl-minutes': '应用于所有 kubeconfig Token 的 TTL（单位：分钟）。如果设置为 0，则 Token 永不过期。'
     'rke-metadata-config': '配置 RKE 元数据刷新参数。'
     'ui-banners': '分类横幅用于在页眉、页脚或两者中显示自定义的固定横幅。'

package/components/AlertTable.vue

@@ -82,14 +82,16 @@ export default {
     },
 
     async fetchDeps() {
-      try {
-        const am = await this.$store.dispatch('cluster/find', { type: ENDPOINTS, id: `${ this.monitoringNamespace }/${ this.alertServiceEndpoint }` });
+      if (this.$store.getters['cluster/canList'](ENDPOINTS)) {
+        try {
+          const am = await this.$store.dispatch('cluster/find', { type: ENDPOINTS, id: `${ this.monitoringNamespace }/${ this.alertServiceEndpoint }` });
 
-        if (!isEmpty(am) && !isEmpty(am.subsets)) {
-          this.alertManagerPoller.start();
-        }
-      } catch {
+          if (!isEmpty(am) && !isEmpty(am.subsets)) {
+            this.alertManagerPoller.start();
+          }
+        } catch {
 
+        }
       }
     },
   }

package/components/CruResource.vue

@@ -327,10 +327,13 @@ export default {
 
     async showPreviewYaml() {
       if ( this.applyHooks ) {
-        await this.applyHooks(
-          BEFORE_SAVE_HOOKS,
-          CONTEXT_HOOK_EDIT_YAML,
-        );
+        try {
+          await this.applyHooks(BEFORE_SAVE_HOOKS, CONTEXT_HOOK_EDIT_YAML);
+        } catch (e) {
+          console.warn('Unable to show yaml: ', e); // eslint-disable-line no-console
+
+          return;
+        }
       }
 
       const resourceYaml = this.createResourceYaml(this.yamlModifiers);

package/components/EmberPage.vue

@@ -597,11 +597,11 @@ export default {
 
   .ember-iframe {
     border: 0;
-    left: var(--nav-width);
+    left: calc(var(--nav-width) + $app-bar-collapsed-width);
     height: calc(100vh - var(--header-height));
     position: absolute;
     top: var(--header-height);
-    width: calc(100vw - var(--nav-width));
+    width: calc(100vw - var(--nav-width) - $app-bar-collapsed-width);
     visibility: show;
   }
 

package/components/EtcdInfoBanner.vue

@@ -9,8 +9,18 @@ export default {
   components: { Banner, Loading },
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
-    const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
-    const monitoringVersion = res?.currentVersion;
+    let monitoringVersion = '';
+
+    if (this.$store.getters[`${ inStore }/canList}`](CATALOG.APP)) {
+      try {
+        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
+
+        monitoringVersion = res?.currentVersion;
+      } catch (err) {
+
+      }
+    }
+
     const leader = await hasLeader(monitoringVersion, this.$store.dispatch, this.currentCluster.id);
 
     this.hasLeader = leader ? this.t('generic.yes') : this.t('generic.no');

package/components/GlobalRoleBindings.vue

@@ -94,6 +94,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['releaseNotesUrl']),
     ...mapGetters({ t: 'i18n/t' }),
 
     isCreate() {
@@ -347,6 +348,11 @@ export default {
                     </div>
                   </template>
                 </Checkbox>
+                <p
+                  v-if="role.id === 'restricted-admin'"
+                  v-clean-html="t('rbac.globalRoles.role.restricted-admin.deprecation', { releaseNotesUrl }, true)"
+                  class="deprecation-notice"
+                />
               </div>
             </div>
           </template>
@@ -364,6 +370,10 @@ export default {
 </style>
 <style lang='scss' scoped>
   $detailSize: 11px;
+
+  .deprecation-notice {
+    margin: 8px 0 8px 20px;
+  }
   .role-group {
     .type-title {
       display: flex;

package/components/GrafanaDashboard.vue

@@ -40,13 +40,18 @@ export default {
   },
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
-    const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
 
-    this.monitoringVersion = res?.currentVersion;
+    if (this.$store.getters[`${ inStore }/canList`](CATALOG.APP)) {
+      try {
+        const res = await this.$store.dispatch(`${ inStore }/find`, { type: CATALOG.APP, id: 'cattle-monitoring-system/rancher-monitoring' });
+
+        this.monitoringVersion = res?.currentVersion;
+      } catch (err) {}
+    }
   },
   data() {
     return {
-      loading: false, error: false, interval: null, errorTimer: null, monitoringVersion: null
+      loading: false, error: false, interval: null, errorTimer: null, monitoringVersion: ''
     };
   },
   computed: {

package/components/Wizard.vue

@@ -182,6 +182,12 @@ export default {
         this.activeStep = this.visibleSteps[this.initStepIndex];
         this.goToStep(this.activeStepIndex + 1);
       }
+    },
+    errors() {
+      // Ensurce we scroll the errors into view
+      this.$nextTick(() => {
+        this.$refs.wizard.scrollTop = this.$refs.wizard.scrollHeight;
+      });
     }
   },
 
@@ -253,7 +259,10 @@ export default {
 </script>
 
 <template>
-  <div class="outer-container">
+  <div
+    ref="wizard"
+    class="outer-container"
+  >
     <Loading
       v-if="!stepsLoaded"
       mode="relative"
@@ -397,6 +406,7 @@ export default {
             color="error"
             :label="err"
             :closable="true"
+            class="footer-error"
             @close="errors.splice(idx, 1)"
           />
         </div>
@@ -647,6 +657,12 @@ $spacer: 10px;
   }
 }
 
+// We have to account for the absolute position of the .controls-row
+.footer-error {
+  margin-top: -40px;
+  margin-bottom: 70px;
+}
+
   .controls-row {
 
     // Overrides outlet padding

package/components/__tests__/ProjectRow.test.ts

@@ -0,0 +1,63 @@
+import ProjectRow from '@shell/components/form/ResourceQuota/ProjectRow.vue';
+import { RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+
+const CONFIGMAP_STRING = RANCHER_TYPES[0].value;
+
+describe('component: ProjectRow.vue', () => {
+  const wrapper = shallowMount(ProjectRow,
+    {
+      propsData: {
+        mode:  'edit',
+        types: RANCHER_TYPES,
+        type:  CONFIGMAP_STRING,
+        value: {
+          spec: {
+            namespaceDefaultResourceQuota: { limit: {} },
+            resourceQuota:                 { limit: {} }
+          }
+        }
+      }
+    });
+
+  it('should render the correct input fields and set the correct computed values, based on the provided data', () => {
+    const typeInput = wrapper.find(`[data-testid="projectrow-type-input"]`);
+    const projectQuotaInput = wrapper.find(`[data-testid="projectrow-project-quota-input"]`);
+    const namespaceQuotaInput = wrapper.find(`[data-testid="projectrow-namespace-quota-input"]`);
+
+    expect(typeInput.exists()).toBe(true);
+    expect(projectQuotaInput.exists()).toBe(true);
+    expect(namespaceQuotaInput.exists()).toBe(true);
+    expect(wrapper.vm.resourceQuotaLimit).toStrictEqual({});
+    expect(wrapper.vm.namespaceDefaultResourceQuotaLimit).toStrictEqual({});
+  });
+
+  it('triggering "updateQuotaLimit" should trigger Vue.set with the correct data', () => {
+    const vueSet = jest.spyOn(Vue, 'set');
+
+    wrapper.vm.updateQuotaLimit('resourceQuota', CONFIGMAP_STRING, 10);
+
+    expect(vueSet).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.value).toStrictEqual({
+      spec: {
+        namespaceDefaultResourceQuota: { limit: {} },
+        resourceQuota:                 { limit: { [`${ CONFIGMAP_STRING }`]: 10 } }
+      }
+    });
+  });
+
+  it('triggering "updateType" with the same type that existed should clear limits and trigger emit', () => {
+    wrapper.vm.updateType(CONFIGMAP_STRING);
+
+    expect(wrapper.vm.value).toStrictEqual({
+      spec: {
+        namespaceDefaultResourceQuota: { limit: {} },
+        resourceQuota:                 { limit: {} }
+      }
+    });
+
+    expect(wrapper.emitted('type-change')).toBeTruthy();
+    expect(wrapper.emitted('type-change')[0]).toStrictEqual([CONFIGMAP_STRING]);
+  });
+});

package/components/auth/RoleDetailEdit.vue

@@ -1,4 +1,5 @@
 <script>
+import { mapGetters } from 'vuex';
 import { MANAGEMENT, RBAC } from '@shell/config/types';
 import CruResource from '@shell/components/CruResource';
 import CreateEditView from '@shell/mixins/create-edit-view';
@@ -14,6 +15,7 @@ import { ucFirst } from '@shell/utils/string';
 import SortableTable from '@shell/components/SortableTable';
 import { _CLONE, _DETAIL } from '@shell/config/query-params';
 import { SCOPED_RESOURCES } from '@shell/config/roles';
+import { Banner } from '@components/Banner';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
 import Loading from '@shell/components/Loading';
@@ -60,7 +62,8 @@ export default {
     Tabbed,
     SortableTable,
     Loading,
-    Error
+    Error,
+    Banner
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -152,12 +155,22 @@ export default {
       });
     }
 
+    if (this.value?.metadata?.name && !this.value.displayName) {
+      this.$set(this.value, 'displayName', this.value.metadata.name);
+    }
+
     this.$nextTick(() => {
       this.$emit('set-subtype', this.label);
     });
   },
 
   computed: {
+    ...mapGetters(['releaseNotesUrl']),
+
+    showRestrictedAdminDeprecationBanner() {
+      return this.value.subtype === GLOBAL && this.value.id === 'restricted-admin';
+    },
+
     label() {
       return this.t(`rbac.roletemplate.subtypes.${ this.value.subtype }.label`);
     },
@@ -537,6 +550,13 @@ export default {
     @finish="save"
     @cancel="cancel"
   >
+    <Banner
+      v-if="showRestrictedAdminDeprecationBanner"
+      color="warning"
+      class="mb-20"
+    >
+      <span v-clean-html="t('rbac.globalRoles.role.restricted-admin.deprecation', { releaseNotesUrl }, true)" />
+    </Banner>
     <template v-if="isDetail">
       <SortableTable
         key-field="index"

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import RoleDetailEdit from '@shell/components/auth/RoleDetailEdit.vue';
+import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
+
+const role = {
+  apiVersion:            'management.cattle.io/v3',
+  kind:                  'GlobalRole',
+  metadata:              { name: 'global-role-with-inherited' },
+  inheritedClusterRoles: ['cluster-admin'],
+  rules:
+[{
+  verbs:     ['get', 'list'],
+  resources: ['pods'],
+  apiGroups: ['']
+}],
+  subtype: SUBTYPE_MAPPING.GLOBAL.id
+};
+
+describe('component: RoleDetailEdit', () => {
+  it('does not have validation errors when the role has no displayName', () => {
+    const wrapper = mount(RoleDetailEdit, {
+      propsData: { value: role },
+      mocks:     {
+        $fetchState: { pending: false },
+        $route:      { name: 'anything' },
+        $store:      {
+          getters: {
+            currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn()
+          }
+        }
+      },
+      stubs: {
+        CruResource: { template: '<div><slot></slot></div>' },
+        // NameNsDescription: true,
+        Tab:         { template: '<div><slot></slot></div>' },
+      }
+    });
+
+    expect((wrapper.vm as any).fvFormIsValid).toBe(true);
+  });
+});

package/components/form/ArrayList.vue

@@ -164,6 +164,10 @@ export default {
       removeAt(this.rows, index);
       this.queueUpdate();
     },
+
+    /**
+     * Cleanup rows and emit input
+     */
     update() {
       if ( this.isView ) {
         return;
@@ -180,22 +184,24 @@ export default {
       }
       this.$emit('input', out);
     },
+
+    /**
+     * Handle paste event, e.g. split multiple lines in rows
+     */
     onPaste(index, event) {
-      if (this.valueMultiline) {
-        return;
-      }
       event.preventDefault();
       const text = event.clipboardData.getData('text/plain');
-      const split = text.split('\n').map((value) => ({ value }));
-
-      if (split.length === 1) {
-        // It's not multi-line, so don't treat it as such
-        return;
-      }
 
-      event.preventDefault();
+      if (this.valueMultiline) {
+        // Allow to paste multiple lines
+        this.rows[index].value = text;
+      } else {
+        // Prevent to paste the value and emit text in multiple rows
+        const split = text.split('\n').map((value) => ({ value }));
 
-      this.rows.splice(index, 1, ...split);
+        event.preventDefault();
+        this.rows.splice(index, 1, ...split);
+      }
 
       this.update();
     }
@@ -256,6 +262,7 @@ export default {
                 v-if="valueMultiline"
                 ref="value"
                 v-model="row.value"
+                :data-testid="`textarea-${idx}`"
                 :placeholder="valuePlaceholder"
                 :mode="mode"
                 :disabled="disabled"
@@ -266,6 +273,7 @@ export default {
                 v-else-if="rules.length > 0"
                 ref="value"
                 v-model="row.value"
+                :data-testid="`labeled-input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 :rules="rules"
@@ -277,6 +285,7 @@ export default {
                 v-else
                 ref="value"
                 v-model="row.value"
+                :data-testid="`input-${idx}`"
                 :placeholder="valuePlaceholder"
                 :disabled="isView || disabled"
                 @paste="onPaste(idx, $event)"

package/components/form/ResourceQuota/ProjectRow.vue

@@ -2,6 +2,7 @@
 import Select from '@shell/components/form/Select';
 import UnitInput from '@shell/components/form/UnitInput';
 import { ROW_COMPUTED } from './shared';
+import Vue from 'vue';
 
 export default {
   components: { Select, UnitInput },
@@ -57,10 +58,10 @@ export default {
 
     updateQuotaLimit(prop, type, val) {
       if (!this.value.spec[prop]) {
-        this.value.spec[prop] = { limit: { } };
+        Vue.set(this.value.spec, prop, { limit: { } });
       }
 
-      this.value.spec[prop].limit[type] = val;
+      Vue.set(this.value.spec[prop].limit, type, val);
     }
   },
 };
@@ -75,6 +76,7 @@ export default {
       :mode="mode"
       :value="type"
       :options="types"
+      data-testid="projectrow-type-input"
       @input="updateType($event)"
     />
     <UnitInput
@@ -86,6 +88,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
+      data-testid="projectrow-project-quota-input"
       @input="updateQuotaLimit('resourceQuota', type, $event)"
     />
     <UnitInput
@@ -96,6 +99,7 @@ export default {
       :input-exponent="typeOption.inputExponent"
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
+      data-testid="projectrow-namespace-quota-input"
       @input="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
     />
   </div>

package/components/form/__tests__/ArrayList.test.ts

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils';
 import ArrayList from '@shell/components/form/ArrayList.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
 
 describe('the ArrayList', () => {
   it('is empty', () => {
@@ -71,4 +73,46 @@ describe('the ArrayList', () => {
 
     expect(arrayListButtons).toHaveLength(0);
   });
+
+  describe('onPaste', () => {
+    it('should emit value with updated row text', () => {
+      const text = 'test';
+      const expectation = [text];
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+
+    it('should emit value with multiple rows', () => {
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, { propsData: { value: [''] } });
+      const text = `multiline
+      rows`;
+      const expectation = ['multiline', 'rows'];
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+
+    it('should allow emit multiline pasted values if enabled', () => {
+      const wrapper = mount(ArrayList as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+        propsData: {
+          value:          [''],
+          valueMultiline: true,
+        }
+      });
+      const text = `multiline
+      text`;
+      const expectation = [text];
+      const event = { preventDefault: jest.fn(), clipboardData: { getData: jest.fn().mockReturnValue(text) } } as any;
+
+      wrapper.vm.onPaste(0, event);
+
+      expect(wrapper.emitted().input?.[0][0]).toStrictEqual(expectation);
+    });
+  });
 });

package/components/nav/Header.vue

@@ -706,7 +706,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-  $side-menu-logo-margin-left: 5px;
   // It would be nice to grab this from `Group.vue`, but there's margin, padding and border, which is overkill to var
   $side-menu-group-padding-left: 16px;
 
@@ -724,9 +723,11 @@ export default {
       &.isSingleProduct  {
         display: flex;
         justify-content: center;
+
         // Align the icon with the side nav menu items ($side-menu-group-padding-left)
-        // There's margin already in the icon component, so take that in to account ($side-menu-logo-margin-left)
-        margin-left: $side-menu-group-padding-left - $side-menu-logo-margin-left;
+        .side-menu-logo {
+          margin-left: $side-menu-group-padding-left;
+        }
       }
     }
 
@@ -815,7 +816,7 @@ export default {
       display: flex;
       margin-right: 8px;
       height: 55px;
-      margin-left: $side-menu-logo-margin-left;
+      margin-left: 5px;
       max-width: 200px;
       padding: 12px 0;
     }