chore(deps): bump @rancher/shell to 3.0.14 (#1208)

* chore(deps): bump @rancher/shell to 3.0.14

3.0.14 resolves [[name]] tokens in translations from values registered
as l10n globals, which the standalone UI needs to pick the product name.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: save cloud-config template edits with @rancher/shell 3.0.14

The YamlEditor of shell 3.0.14 no longer emits onChanges, so editing a
template saved its old cloud config. Copy the text from update:value,
which both shell versions emit.

Jest transforms @replit/codemirror-vim-core, an ESM-only dependency of
the new YamlEditor, like the dashboard does.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep the YAML editor heights with CodeMirror 6

The min-height rules targeted the CodeMirror 5 element, so the editors
shrank to their text.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: reject IP ranges the network settings don't support

The CIDR check of @rancher/shell 3.0.14 also accepts short forms such as
10.1/16, extra parts and IPv6, so the VM migration, RWX and storage
network settings saved them. Use a strict IPv4 CIDR check of our own.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep the look of the file selector buttons

The FileSelector of @rancher/shell 3.0.14 no longer takes button classes
and renders a medium secondary button. Pass the variant and size that
match the previous primary and secondary buttons.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep Enter in a migration wizard field on the same step

The Wizard of @rancher/shell 3.0.14 renders its step headers as submit
buttons, so Enter in a text field clicked the first one and jumped back
to step 1.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: show the created message after a restore, upgrade or upload

Since @rancher/shell 3.0.14, save() no longer shows the message for
resources with a generated name; callers show it with
notifyGeneratedName().

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* refactor: fold the logging output buffer with the CodeMirror 6 helpers

The YAML editor of @rancher/shell 3.0.14 is CodeMirror 6, and its
CodeMirror 5 methods are deprecated.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: keep the shell's table views off in standalone

@rancher/shell 3.0.14 turns its table views on for every list in the
standalone UI, as the server has no ui-configurable-tables feature and
the default is on. The table views drop the filters the lists put in the
table header, which also left the Images list empty. Add the feature,
disabled, to the management store in standalone only.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: reject zero-padded octets in IP ranges

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

---------

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

pkg/harvester/edit/__tests__/harvesterhci.io.cloudtemplate.test.js

@@ -0,0 +1,141 @@
+import { mount } from '@vue/test-utils';
+import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
+import YamlEditor from '@shell/components/YamlEditor';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+import HarvesterEditCloudTemplate from '../harvesterhci.io.cloudtemplate.vue';
+
+const OLD_CONFIG = '#cloud-config\npassword: old\n';
+const NEW_CONFIG = '#cloud-config\npassword: new\n';
+
+// A cloud-config template as the store gives it, `save` records what would be sent to the API
+function cloudTemplate({ isNew = false } = {}) {
+  const value = {
+    type:     'configmap',
+    metadata: {
+      name:      'tpl',
+      namespace: 'default',
+      ...(isNew ? {} : { labels: { [HCI.CLOUD_INIT]: 'user' } }),
+    },
+    data:      isNew ? undefined : { cloudInit: OLD_CONFIG },
+    $dispatch: jest.fn(),
+    save:      () => Promise.resolve(),
+    saved:     [],
+  };
+
+  jest.spyOn(value, 'save').mockImplementation(() => {
+    value.saved.push(JSON.parse(JSON.stringify({ metadata: value.metadata, data: value.data })));
+
+    return Promise.resolve();
+  });
+
+  return value;
+}
+
+// The real shell YamlEditor, with only its CodeMirror editor stubbed, so the events the form listens to are the
+// ones the shell emits
+function mountForm(mode, value) {
+  return mount(HarvesterEditCloudTemplate, {
+    props:  { value, mode },
+    global: {
+      stubs: {
+        CruResource:       { template: '<div><slot /></div>' },
+        Tabbed:            { template: '<div><slot /></div>' },
+        Tab:               { template: '<div><slot /></div>' },
+        NameNsDescription: true,
+        LabeledSelect:     true,
+        CodeMirror:        {
+          name: 'CodeMirror', template: '<div />', emits: ['onInput', 'onReady', 'validationChanged']
+        },
+        FileDiff: true,
+      },
+      mocks: {
+        $store: {
+          getters: {
+            'prefs/get':           jest.fn(),
+            'type-map/isSpoofed':  () => false,
+            currentStore:          () => 'harvester',
+            'harvester/schemaFor': () => ({ linkFor: () => '/v1/harvester/configmaps' }),
+            'i18n/t':              (key) => key,
+          },
+        },
+        $router: { replace: jest.fn() },
+        $route:  {
+          name: 'c-cluster-product-resource-id', params: {}, query: {}
+        },
+      },
+    },
+  });
+}
+
+// What a user typing in the editor does: CodeMirror reports the new text to the YamlEditor
+async function typeInEditor(wrapper, text) {
+  wrapper.findComponent(YamlEditor).findComponent({ name: 'CodeMirror' }).vm.$emit('onInput', text);
+  await wrapper.vm.$nextTick();
+}
+
+describe('component: HarvesterEditCloudTemplate', () => {
+  it('should save the edited cloud config when editing a template', async() => {
+    const value = cloudTemplate();
+    const wrapper = mountForm(_EDIT, value);
+
+    await typeInEditor(wrapper, NEW_CONFIG);
+    await wrapper.vm.save(jest.fn());
+
+    expect(value.save).toHaveBeenCalledTimes(1);
+    expect(value.saved[0].data).toStrictEqual({ cloudInit: NEW_CONFIG });
+  });
+
+  it('should keep the template type label when editing a template', async() => {
+    const value = cloudTemplate();
+    const wrapper = mountForm(_EDIT, value);
+
+    await typeInEditor(wrapper, NEW_CONFIG);
+    await wrapper.vm.save(jest.fn());
+
+    expect(value.saved[0].metadata.labels).toStrictEqual({ [HCI.CLOUD_INIT]: 'user' });
+  });
+
+  it('should save the last text when the cloud config is edited several times', async() => {
+    const value = cloudTemplate();
+    const wrapper = mountForm(_EDIT, value);
+
+    await typeInEditor(wrapper, '#cloud-config\n');
+    await typeInEditor(wrapper, NEW_CONFIG);
+    await wrapper.vm.save(jest.fn());
+
+    expect(value.saved[0].data).toStrictEqual({ cloudInit: NEW_CONFIG });
+  });
+
+  it('should save the cloud config unchanged when only saving a template', async() => {
+    const value = cloudTemplate();
+    const wrapper = mountForm(_EDIT, value);
+
+    await wrapper.vm.save(jest.fn());
+
+    expect(value.saved[0].data).toStrictEqual({ cloudInit: OLD_CONFIG });
+  });
+
+  it('should save the cloud config and the template type when creating a template', async() => {
+    const value = cloudTemplate({ isNew: true });
+    const wrapper = mountForm(_CREATE, value);
+
+    await typeInEditor(wrapper, NEW_CONFIG);
+    await wrapper.vm.save(jest.fn());
+
+    expect(value.save).toHaveBeenCalledWith({ url: '/v1/harvester/configmaps' });
+    expect(value.saved[0]).toStrictEqual({
+      metadata: {
+        name: 'tpl', namespace: 'default', labels: { [HCI.CLOUD_INIT]: 'user' }
+      },
+      data: { cloudInit: NEW_CONFIG },
+    });
+  });
+
+  it('should show the template cloud config in the editor when viewing a template', () => {
+    const value = cloudTemplate();
+    const wrapper = mountForm(_VIEW, value);
+
+    expect(wrapper.findComponent(YamlEditor).props('value')).toBe(OLD_CONFIG);
+    expect(value.data).toStrictEqual({ cloudInit: OLD_CONFIG });
+  });
+});

pkg/harvester/edit/harvesterhci.io.cloudtemplate.vue

@@ -59,8 +59,8 @@ export default {
   },
 
   methods: {
-    update() {
-      this.value.data = { cloudInit: this.config };
+    update(config) {
+      this.value.data = { cloudInit: config };
     },
 
     updateBeforeSave() {
@@ -119,7 +119,7 @@ export default {
             :mode="mode"
             class="yaml-editor"
             :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-            @onChanges="update"
+            @update:value="update"
           />
         </div>
       </Tab>
@@ -133,9 +133,7 @@ export default {
   :deep() .yaml-editor{
     flex: 1;
     min-height: $yaml-height;
-    & .code-mirror .CodeMirror {
-      position: initial;
-      height: auto;
+    & .code-mirror .cm-editor {
       min-height: $yaml-height;
     }
   }

pkg/harvester/edit/harvesterhci.io.keypair.vue

@@ -88,7 +88,8 @@ export default {
     <div class="header mb-20">
       <FileSelector
         v-if="isCreate"
-        class="btn btn-sm bg-primary mt-10"
+        variant="primary"
+        class="mt-10"
         :label="t('generic.readFromFile')"
         accept=".pub"
         @selected="onKeySelected"

pkg/harvester/edit/harvesterhci.io.logging.output.vue

@@ -16,6 +16,8 @@ import isEmpty from 'lodash/isEmpty';
 import jsyaml from 'js-yaml';
 import { createYaml } from '@shell/utils/create-yaml';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
+import { foldAllComments } from '@components/RcCodeMirror';
+import { unfoldCode } from '@codemirror/language';
 import { FLOW_TYPE } from '../config/harvester-map';
 
 const LOGGING_EVENT = 'Logging/Event';
@@ -172,10 +174,9 @@ export default {
         });
       }
     },
-    onYamlEditorReady(cm) {
-      cm.getMode().fold = 'yamlcomments';
-      cm.execCommand('foldAll');
-      cm.execCommand('unfold');
+    onYamlEditorReady(view) {
+      foldAllComments(view);
+      unfoldCode(view);
     },
   }
 };

pkg/harvester/edit/harvesterhci.io.virtualmachinebackup.vue

@@ -173,6 +173,7 @@ export default {
 
       try {
         await proxyResource.save();
+        proxyResource.notifyGeneratedName?.();
         buttonCb(true);
 
         this.$router.push({

pkg/harvester/edit/harvesterhci.io.virtualmachineimage.vue

@@ -299,6 +299,7 @@ export default {
 
           const res = await this.value.save();
 
+          res.notifyGeneratedName?.();
           res.uploadImage(file);
 
           buttonCb(true);

pkg/harvester/edit/harvesterhci.io.vmsnapshot.vue

@@ -172,6 +172,7 @@ export default {
 
       try {
         await proxyResource.save();
+        proxyResource.notifyGeneratedName?.();
         buttonCb(true);
 
         this.$router.push({

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue

@@ -157,7 +157,7 @@ $yaml-height: 200px;
     flex: 1;
     min-height: $yaml-height;
 
-    & .code-mirror .CodeMirror {
+    & .code-mirror .cm-editor {
       min-height: $yaml-height;
     }
   }

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/index.vue

@@ -289,7 +289,7 @@ $yaml-height: 350px;
     flex: 1;
     min-height: $yaml-height;
 
-    & .code-mirror .CodeMirror {
+    & .code-mirror .cm-editor {
       min-height: $yaml-height;
     }
   }

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineWindowsSysprep/index.vue

@@ -333,7 +333,7 @@ $xml-height: 350px;
     min-height: $xml-height;
     font-family: monospace;
 
-    & .code-mirror .CodeMirror {
+    & .code-mirror .cm-editor {
       min-height: $xml-height;
     }
   }