@rancher/shell 0.3.13 → 0.3.14

package/assets/translations/en-us.yaml

@@ -4844,6 +4844,12 @@ servicesPage:
     title: Add-on Config
     ipam:
       label: IPAM
+    useShareIP:
+      label: Use Share IP
+    useIpam:
+      label: Use IPAM
+    shareIP:
+      label: Share IP LB
 
   ips:
     define: Service Ports

package/components/HarvesterServiceAddOnConfig.vue

@@ -1,13 +1,22 @@
 <script>
+import { mapGetters } from 'vuex';
+import semver from 'semver';
+
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { _CREATE } from '@shell/config/query-params';
 import { get } from '@shell/utils/object';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { SERVICE } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
 
 const HARVESTER_ADD_ON_CONFIG = [{
   variableName: 'ipam',
   key:          HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM,
   default:      'dhcp'
+}, {
+  variableName: 'sharedService',
+  key:          HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE,
+  default:      ''
 }];
 
 export default {
@@ -38,6 +47,19 @@ export default {
     }
   },
 
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    const hash = {
+      rke2Versions: this.$store.dispatch('management/request', { url: '/v1-rke2-release/releases' }),
+      services:     this.$store.dispatch(`${ inStore }/findAll`, { type: SERVICE }),
+    };
+
+    const res = await allHash(hash);
+
+    this.rke2Versions = res.rke2Versions;
+  },
+
   data() {
     const harvesterAddOnConfig = {};
 
@@ -45,10 +67,24 @@ export default {
       harvesterAddOnConfig[c.variableName] = this.value.metadata.annotations[c.key] || c.default;
     });
 
-    return { ...harvesterAddOnConfig };
+    let showShareIP;
+
+    if (this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE]) {
+      showShareIP = true;
+    } else {
+      showShareIP = false;
+    }
+
+    return {
+      ...harvesterAddOnConfig,
+      showShareIP,
+      rke2Versions: {},
+    };
   },
 
   computed: {
+    ...mapGetters(['allowedNamespaces', 'namespaces', 'currentCluster']),
+
     ipamOptions() {
       return [{
         label: 'DHCP',
@@ -64,13 +100,71 @@ export default {
 
       return ports.filter(p => p.port && p.protocol === 'TCP').map(p => p.port) || [];
     },
+
+    serviceOptions() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const services = this.$store.getters[`${ inStore }/all`](SERVICE);
+
+      const namespaces = this.namespaces();
+
+      const out = services.filter((s) => {
+        const ingress = s?.status?.loadBalancer?.ingress || [];
+
+        return ingress.length > 0 &&
+                !s?.metadata?.annotations?.['cloudprovider.harvesterhci.io/primary-service'] &&
+                s.spec?.type === 'LoadBalancer' &&
+                namespaces[s.metadata.namespace];
+      });
+
+      return out.map(s => s.id);
+    },
+
+    shareIPEnabled() {
+      const kubernetesVersion = this.currentCluster.kubernetesVersion || '';
+      const kubernetesVersionExtension = this.currentCluster.kubernetesVersionExtension;
+
+      if (kubernetesVersionExtension.startsWith('+rke2')) {
+        const charts = ((this.rke2Versions?.data || []).find(v => v.id === kubernetesVersion) || {}).charts;
+        let ccmVersion = charts?.['harvester-cloud-provider']?.version || '';
+
+        if (ccmVersion.endsWith('00')) {
+          ccmVersion = ccmVersion.slice(0, -2);
+        }
+
+        return semver.satisfies(ccmVersion, '>=0.2.0');
+      } else {
+        return true;
+      }
+    },
   },
 
   methods: {
     willSave() {
+      const errors = [];
+
+      if (this.showShareIP) {
+        if (!this.sharedService) {
+          errors.push(this.t('validation.required', { key: this.t('servicesPage.harvester.shareIP.label') }, true));
+        }
+      }
+
+      if (errors.length > 0) {
+        return Promise.reject(errors);
+      }
+
       HARVESTER_ADD_ON_CONFIG.forEach((c) => {
         this.value.metadata.annotations[c.key] = String(get(this, c.variableName));
       });
+
+      if (this.showShareIP) {
+        delete this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.CLOUD_PROVIDER_IPAM];
+      } else {
+        delete this.value.metadata.annotations[HCI_LABELS_ANNOTATIONS.PRIMARY_SERVICE];
+      }
+    },
+
+    toggleShareIP() {
+      this.showShareIP = !this.showShareIP;
     },
   },
 };
@@ -81,11 +175,31 @@ export default {
     <div class="row mt-30">
       <div class="col span-6">
         <LabeledSelect
+          v-if="showShareIP"
+          v-model="sharedService"
+          :mode="mode"
+          :options="serviceOptions"
+          :label="t('servicesPage.harvester.shareIP.label')"
+          :disabled="mode === 'edit'"
+        />
+        <LabeledSelect
+          v-else
           v-model="ipam"
           :mode="mode"
           :options="ipamOptions"
           :label="t('servicesPage.harvester.ipam.label')"
         />
+        <div
+          v-if="mode === 'create'"
+          class="mt-10"
+        >
+          <a
+            role="button"
+            @click="toggleShareIP"
+          >
+            {{ showShareIP ? t('servicesPage.harvester.useIpam.label') : t('servicesPage.harvester.useShareIP.label') }}
+          </a>
+        </div>
       </div>
     </div>
   </div>

package/config/labels-annotations.js

@@ -138,6 +138,7 @@ export const HCI = {
   CLOUD_PROVIDER_NAMESPACE: 'cloudprovider.harvesterhci.io/namespace',
   CLOUD_PROVIDER_NETWORK:   'cloudprovider.harvesterhci.io/network',
   CLOUD_PROVIDER_PROJECT:   'cloudprovider.harvesterhci.io/project',
+  PRIMARY_SERVICE:          'cloudprovider.harvesterhci.io/primary-service',
 };
 
 // Annotations that can be on management.cattle.io.cluster to configure a custom badge

package/creators/app/files/.gitignore

@@ -59,9 +59,6 @@ jspm_packages/
 # Optional REPL history
 .node_repl_history
 
-# Output of 'npm pack'
-*.tgz
-
 # Yarn Integrity file
 .yarn-integrity
 

package/creators/pkg/package-lock.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rancher/create-pkg",
+  "version": "0.1.37",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/rancher-components/StringList/StringList.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import { StringList } from './index';
+
+describe('StringList.vue', () => {
+
+  it('is empty', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: [] },
+    });
+    const box = wrapper.find('[data-testid="div-string-list-box"]').element as HTMLElement;
+
+    expect(box.children.length).toBe(0);
+  });
+
+  it('is showing one element', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
+    });
+    const box = wrapper.find('.string-list-box').element as HTMLElement;
+
+    expect(box.children.length).toBe(1);
+  });
+
+  it('action-buttons are visible', () => {
+    const wrapper = mount(StringList, { 
+      propsData: { items: ['test'] },
+    });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
+
+    expect(actionButtons).not.toBe(undefined);
+  });
+
+  it('action-buttons are hidden when is view-only mode', () => {
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items: ['test'],
+        readonly: true,
+      },
+    });
+    const actionButtons = wrapper.find('[data-testid="div-action-buttons"]').element as HTMLElement;
+
+    expect(actionButtons).toBe(undefined);
+  });
+
+  it('show new item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
+
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items,
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
+
+    expect(elements.length).toBe(10);
+
+    await wrapper.setProps({ items: [ ...items, 'new' ] });
+
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(11);
+  });
+
+  it('remove item when "items" property change', async () => {
+    const items = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k'];
+
+    const wrapper = mount(StringList, { 
+      propsData: {
+        items,
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(elements.length).toBe(10);
+
+    await wrapper.setProps({ items: [ ...items.filter(f => f !== 'a') ] });
+
+    const newElements = wrapper.findAll('[data-testid^="div-item"]');
+    expect(newElements.length).toBe(9);
+  });
+
+});

package/rancher-components/StringList/StringList.vue

@@ -0,0 +1,593 @@
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { findStringIndex, hasDuplicatedStrings } from '@shell/utils/array';
+
+type Error = 'duplicate';
+type ErrorMessages = Record<Error, string>;
+
+type Arrow = 'up' | 'down';
+
+const DIRECTION: Record<Arrow, number> = {
+  up:   -1,
+  down: 1,
+};
+
+const INPUT = {
+  create: 'item-create',
+  edit:   'item-edit',
+};
+
+const BOX = 'box';
+
+const CLASS = {
+  item:  'item',
+  error: 'error',
+};
+
+/**
+ * Manage a list of strings
+ */
+export default Vue.extend({
+  components: { LabeledInput },
+
+  name: 'StringList',
+
+  props: {
+    /**
+     * The items source
+     */
+    items: {
+      type: Array as PropType<string[]>,
+      default() {
+        return [];
+      },
+    },
+    /**
+     * Determines if items with same text will be treated differently, depending on the letters case
+     * It is used to compare items during create/edit actions and detect duplicates.
+     */
+    caseSensitive: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * Determines if the list of items is editable or view-only
+     */
+    readonly: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * The placeholder to show in input field when create or edit items
+     */
+    placeholder: {
+      type:    String,
+      default: null,
+    },
+    /**
+     * Determines the action buttons position at the bottom of the main box
+     */
+    actionsPosition: {
+      type:    String,
+      default: 'right',
+    },
+    /**
+     * Custom Error messages
+     */
+    errorMessages: {
+      type: Object as PropType<ErrorMessages>,
+      default() {
+        return {} as ErrorMessages;
+      },
+    },
+  },
+  data() {
+    return {
+      value:             null as string | null,
+      selected:          null as string | null,
+      editedItem:        null as string | null,
+      isCreateItem:      false,
+      errors:            { duplicate: false } as Record<Error, boolean>
+    };
+  },
+
+  computed: {
+
+    /**
+     * Create an array of error messages, one for each current error
+     */
+    errorMessagesArray(): string[] {
+      return (Object.keys(this.errors) as Error[])
+        .filter(f => this.errors[f] && this.errorMessages[f])
+        .map(k => this.errorMessages[k]);
+    },
+  },
+
+  watch: {
+    /**
+     * Shutdown any user actions on the component when it becomes readonly
+     */
+    readonly() {
+      this.toggleEditMode(false);
+      this.toggleCreateMode(false);
+    },
+    errors: {
+      handler(val) {
+        this.$emit('errors', val);
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    onChange(value: string) {
+      this.value = value;
+
+      const items = [
+        ...this.items,
+        this.value
+      ];
+
+      this.toggleError(
+        'duplicate',
+        hasDuplicatedStrings(items, this.caseSensitive),
+        this.isCreateItem ? INPUT.create : INPUT.edit
+      );
+    },
+
+    onSelect(item: string) {
+      if (this.readonly || this.isCreateItem || this.editedItem === item) {
+        return;
+      }
+      this.selected = item;
+    },
+
+    onSelectNext(arrow: Arrow) {
+      const index = findStringIndex(
+        this.items,
+        this.selected as string,
+      );
+
+      if (index !== -1) {
+        /**
+         * Select next item in the arrow's direction if it exists,
+         * else select again this.selected (do nothing)
+         */
+        const item = (this.items[index + DIRECTION[arrow]] || this.selected) as string;
+
+        this.onSelect(item);
+        this.moveScrollbar(arrow);
+      }
+    },
+
+    onSelectLeave(item?: string) {
+      if (item === this.selected) {
+        this.selected = null;
+      }
+    },
+
+    onClickEmptyBody() {
+      if (!this.isCreateItem && !this.editedItem) {
+        this.toggleCreateMode(true);
+      }
+    },
+
+    onClickPlusButton() {
+      this.onSelectLeave();
+      this.toggleCreateMode(true);
+    },
+
+    onClickMinusButton() {
+      if (this.isCreateItem) {
+        this.toggleCreateMode(false);
+
+        return;
+      }
+      if (this.editedItem) {
+        this.toggleEditMode(false);
+
+        return;
+      }
+      if (this.selected) {
+        const index = findStringIndex(this.items, this.selected, false);
+
+        if (index !== -1) {
+          /**
+           * Select the next item in the list when an item is to be deleted.
+           */
+          const item = (this.items[index + 1] || this.items[index - 1]);
+
+          this.onSelect(item);
+          this.setFocus(item);
+
+          this.deleteItem(this.items[index]);
+        }
+      }
+    },
+
+    setFocus(refId: string) {
+      this.$nextTick(() => this.getElemByRef(refId)?.focus());
+    },
+
+    /**
+     * Move scrollbar when the selected item is over the top or bottom side of the box
+     */
+    moveScrollbar(arrow: Arrow, value?: number) {
+      const box = this.getElemByRef(BOX);
+      const item = this.getElemByRef(this.selected || '');
+
+      if (box && item && item.className.includes(CLASS.item)) {
+        const boxRect = box.getClientRects()[0];
+        const itemRect = item.getClientRects()[0];
+
+        if (
+          (arrow === 'down' && itemRect.bottom > boxRect.bottom) ||
+          (arrow === 'up' && itemRect.top < boxRect.top)
+        ) {
+          const top = (value ?? itemRect.height) * DIRECTION[arrow];
+
+          box.scrollBy({ top });
+        }
+      }
+    },
+
+    /**
+     * Set an error and eventually assign an error class to the element
+     */
+    toggleError(type: Error, val: boolean, refId?: string) {
+      this.errors[type] = val;
+
+      if (refId) {
+        this.toggleErrorClass(refId, val);
+      }
+    },
+
+    toggleErrorClass(refId: string, val: boolean) {
+      const input = this.getElemByRef(refId)?.$el;
+
+      if (input) {
+        if (val) {
+          input.classList.add(CLASS.error);
+        } else {
+          input.classList.remove(CLASS.error);
+        }
+      }
+    },
+
+    /**
+     * Show/Hide the input line to create new item
+     */
+    toggleCreateMode(show: boolean) {
+      if (this.readonly) {
+        return;
+      }
+      if (show) {
+        this.toggleEditMode(false);
+        this.value = '';
+
+        this.isCreateItem = true;
+        this.setFocus(INPUT.create);
+      } else {
+        this.value = null;
+        this.toggleError('duplicate', false);
+        this.onSelectLeave();
+
+        this.isCreateItem = false;
+      }
+    },
+
+    /**
+     * Show/Hide the in-line editing to edit an existing item
+     */
+    toggleEditMode(show: boolean, item?: string) {
+      if (this.readonly) {
+        return;
+      }
+      if (show) {
+        this.toggleCreateMode(false);
+        this.value = this.editedItem;
+
+        this.editedItem = item || '';
+        this.setFocus(INPUT.edit);
+      } else {
+        this.value = null;
+        this.toggleError('duplicate', false);
+        this.onSelectLeave();
+
+        this.editedItem = null;
+      }
+    },
+
+    getElemByRef(id: string) {
+      const ref = this.$refs[id];
+
+      return (Array.isArray(ref) ? ref[0] : ref) as any;
+    },
+
+    /**
+     * Create a new item and insert in the items list
+     */
+    saveItem(closeInput = true) {
+      const value = this.value?.trim();
+
+      if (value) {
+        const items = [
+          ...this.items,
+          value,
+        ];
+
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
+        }
+      }
+
+      if (closeInput) {
+        this.toggleCreateMode(false);
+      }
+    },
+
+    /**
+     * Update an existing item in the items list
+     */
+    updateItem(item: string, closeInput = true) {
+      const value = this.value?.trim();
+
+      if (value) {
+        const items = [...this.items];
+        const index = findStringIndex(items, item, false);
+
+        if (index !== -1) {
+          items[index] = value;
+        }
+
+        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.updateItems(items);
+        }
+      }
+
+      if (closeInput) {
+        this.toggleEditMode(false);
+      }
+    },
+
+    /**
+     * Remove an item from items list
+     */
+    deleteItem(item?: string) {
+      const items = this.items.filter(f => f !== item);
+
+      this.updateItems(items);
+    },
+
+    /**
+     * Update items list and emit to parent component
+     */
+    updateItems(items: string[]) {
+      this.$emit('change', items);
+    },
+  },
+
+});
+</script>
+
+<template>
+  <div
+    class="string-list"
+    :class="{ readonly }"
+  >
+    <div
+      ref="box"
+      data-testid="div-string-list-box"
+      class="string-list-box"
+      tabindex="0"
+      @dblclick="onClickEmptyBody()"
+    >
+      <div
+        v-for="item in items"
+        :key="item"
+        :ref="item"
+        :class="{
+          selected: selected === item,
+          readonly
+        }"
+        :data-testid="`div-item-${item}`"
+        class="item static"
+        tabindex="0"
+        @mousedown="onSelect(item)"
+        @dblclick.stop="toggleEditMode(true, item)"
+        @keydown.down.prevent="onSelectNext('down')"
+        @keydown.up.prevent="onSelectNext('up')"
+        @blur="onSelectLeave(item)"
+      >
+        <span
+          v-if="!editedItem || editedItem !== item"
+          class="label static"
+        >
+          {{ item }}
+        </span>
+        <LabeledInput
+          v-if="editedItem && editedItem === item"
+          ref="item-edit"
+          class="edit-input static"
+          :value="value != null ? value : item"
+          @input="onChange($event)"
+          @blur.prevent="updateItem(item)"
+          @keydown.native.enter="updateItem(item, !errors.duplicate)"
+        />
+      </div>
+      <div
+        v-if="isCreateItem"
+        class="create-field static"
+      >
+        <LabeledInput
+          ref="item-create"
+          class="create-input static"
+          type="text"
+          :value="value"
+          :placeholder="placeholder"
+          @input="onChange($event)"
+          @blur.prevent="saveItem"
+          @keydown.native.enter="saveItem(!errors.duplicate)"
+        />
+      </div>
+    </div>
+    <div
+      v-if="!readonly"
+      class="string-list-footer"
+      :class="{[actionsPosition]: true }"
+    >
+      <div
+        data-testid="div-action-buttons"
+        class="action-buttons"
+      >
+        <button
+          class="btn btn-sm role-tertiary remove-button"
+          :disabled="!selected && !isCreateItem && !editedItem"
+          @mousedown.prevent="onClickMinusButton"
+        >
+          <span class="icon icon-minus icon-sm" />
+        </button>
+        <button
+          class="btn btn-sm role-tertiary add-button"
+          :disabled="isCreateItem || editedItem"
+          @click.prevent="onClickPlusButton"
+        >
+          <span class="icon icon-plus icon-sm" />
+        </button>
+      </div>
+      <div class="messages">
+        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
+        <span
+          v-for="(msg, idx) in errorMessagesArray"
+          :key="idx"
+          class="error"
+        >
+          {{ idx > 0 ? '; ' : '' }}
+          {{ msg }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+.string-list {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+
+  &.readonly {
+    cursor: default;
+    opacity: 0.4;
+  }
+
+  .string-list-box {
+    min-height: 200px;
+    height: 100%;
+    outline: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border: solid var(--border-width) var(--input-border);
+    padding-top: 3px;
+
+    .static {
+      height: 25px;
+      padding: 3px;
+    }
+
+    .item {
+      outline: none;
+
+      &.selected {
+        background: var(--primary);
+        color: var(--primary-hover-text);
+      }
+
+      &.readonly {
+        pointer-events: none;
+      }
+
+      .label {
+        display: block;
+        width: auto;
+        user-select: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 1px;
+      }
+    }
+
+    .create-field {
+      padding-top: 1px;
+      margin-bottom: 7px;
+    }
+
+    .labeled-input {
+      padding-top: 0;
+      padding-bottom: 0;
+      border-radius: 0;
+      &.error {
+        border: none;
+        box-shadow: 0 0 0 var(--outline-width) var(--error);
+      }
+    }
+  }
+
+  .string-list-footer {
+    --footer-height: 28px;
+    height: var(--footer-height);
+    margin-top: 5px;
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+
+    &.left {
+      flex-direction: row;
+    }
+
+    &.right {
+      flex-direction: row-reverse;
+    }
+
+    .action-buttons {
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 0.5rem;
+
+      .btn {
+        min-height: var(--footer-height);
+        line-height: 0;
+        border-radius: 2px;
+
+        &:disabled {
+          cursor: default;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .messages {
+      line-height: var(--footer-height);
+
+      .error, .icon-warning {
+        color: var(--error);
+        line-height: inherit;
+      }
+    }
+  }
+}
+
+::v-deep {
+  .labeled-input INPUT.no-label,
+  .labeled-input INPUT:hover.no-label,
+  .labeled-input INPUT:focus.no-label {
+    padding: 1px 0px 0px 0px;
+  }
+  .labeled-input.compact-input {
+    min-height: 0;
+  }
+}
+</style>

package/rancher-components/StringList/index.ts

@@ -0,0 +1 @@
+export { default as StringList } from './StringList.vue';

package/types/shell/index.d.ts

@@ -2844,35 +2844,35 @@ export namespace KEY {
 }
 }
 
-// @shell/utils/poller
+// @shell/utils/poller-sequential
 
-declare module '@shell/utils/poller' {
-export default class Poller {
+declare module '@shell/utils/poller-sequential' {
+export default class PollerSequential {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    intervalId: any;
+    timeoutId: any;
     tryCount: number;
     start(): void;
     stop(): void;
+    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }
 
-// @shell/utils/poller-sequential
+// @shell/utils/poller
 
-declare module '@shell/utils/poller-sequential' {
-export default class PollerSequential {
+declare module '@shell/utils/poller' {
+export default class Poller {
     constructor(fn: any, pollRateMs: any, maxRetries?: number);
     fn: any;
     pollRateMs: any;
     maxRetries: number;
-    timeoutId: any;
+    intervalId: any;
     tryCount: number;
     start(): void;
     stop(): void;
-    _poll(): void;
     _intervalMethod(): Promise<void>;
 }
 }

package/yarn-error.log

@@ -0,0 +1,196 @@
+Arguments: 
+  /Users/aalves/.nvm/versions/node/v16.16.0/bin/node /Users/aalves/.nvm/versions/node/v16.16.0/bin/yarn publish . --new-version 0.3.3 --no-git-tag-version --access public
+
+PATH: 
+  /Users/aalves/.nvm/versions/node/v16.16.0/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.16.0
+
+Platform: 
+  darwin arm64
+
+Trace: 
+  Error: https://registry.yarnpkg.com/-/user/org.couchdb.user:aalves08: failed to authenticate: Could not authenticate aalves08: bad password
+      at Request.params.callback [as _callback] (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:66145:18)
+      at Request.self.callback (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:140890:22)
+      at Request.emit (node:events:527:28)
+      at Request.<anonymous> (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:141862:10)
+      at Request.emit (node:events:527:28)
+      at IncomingMessage.<anonymous> (/Users/aalves/.nvm/versions/node/v16.16.0/lib/node_modules/yarn/lib/cli.js:141784:12)
+      at Object.onceWrapper (node:events:641:28)
+      at IncomingMessage.emit (node:events:539:35)
+      at endReadableNT (node:internal/streams/readable:1345:12)
+      at processTicksAndRejections (node:internal/process/task_queues:83:21)
+
+npm manifest: 
+  {
+    "name": "@rancher/shell",
+    "version": "0.3.3",
+    "description": "Rancher Dashboard Shell",
+    "repository": "https://github.com/rancherlabs/dashboard",
+    "license": "Apache-2.0",
+    "author": "SUSE",
+    "private": false,
+    "engines": {
+      "node": ">=12"
+    },
+    "files": [
+      "**/*"
+    ],
+    "scripts": {
+      "clean": "./scripts/clean",
+      "lint": "./node_modules/.bin/eslint --max-warnings 0 --ext .ts,.js,.vue .",
+      "test": "./node_modules/.bin/nyc ava --serial --verbose",
+      "nuxt": "./node_modules/.bin/nuxt",
+      "dev": "./node_modules/.bin/nuxt dev",
+      "mem-dev": "node --max-old-space-size=8192 ./node_modules/.bin/nuxt dev",
+      "docker-dev": "docker run --rm --name dashboard-dev -p 8005:8005 -e API=$API -v $(pwd):/src -v dashboard_node:/src/node_modules rancher/dashboard:dev",
+      "build": "./node_modules/.bin/nuxt build --devtools",
+      "analyze": "./node_modules/.bin/nuxt build --analyze",
+      "start": "./node_modules/.bin/nuxt start",
+      "generate": "./node_modules/.bin/nuxt generate",
+      "dev-debug": "node --inspect ./node_modules/.bin/nuxt",
+      "cy:run": "cypress run",
+      "cy:open": "cypress open",
+      "e2e:pre": "NODE_ENV=dev yarn build",
+      "e2e:run": "NODE_ENV=dev START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start  https://localhost:8005/ cy:run",
+      "e2e:dev": "start-server-and-test dev https://localhost:8005 cy:open"
+    },
+    "dependencies": {
+      "@aws-sdk/client-ec2": "3.1.0",
+      "@aws-sdk/client-eks": "3.1.0",
+      "@aws-sdk/client-kms": "3.8.1",
+      "@babel/plugin-proposal-optional-chaining": "7.14.5",
+      "@babel/plugin-proposal-private-property-in-object": "7.14.5",
+      "@babel/preset-typescript": "7.16.7",
+      "@innologica/vue-dropdown-menu": "0.1.3",
+      "@novnc/novnc": "1.2.0",
+      "@nuxt/types": "2.14.6",
+      "@nuxt/typescript-build": "2.1.0",
+      "@nuxtjs/axios": "5.12.0",
+      "@nuxtjs/eslint-config-typescript": "6.0.1",
+      "@nuxtjs/eslint-module": "1.2.0",
+      "@nuxtjs/proxy": "1.3.3",
+      "@nuxtjs/style-resources": "1.2.1",
+      "@nuxtjs/webpack-profile": "0.1.0",
+      "@popperjs/core": "2.4.4",
+      "@types/node": "16.4.3",
+      "@typescript-eslint/eslint-plugin": "4.33.0",
+      "@typescript-eslint/parser": "4.33.0",
+      "@vue/cli-plugin-babel": "4.5.15",
+      "@vue/cli-plugin-typescript": "4.5.15",
+      "@vue/cli-service": "4.5.15",
+      "@vue/test-utils": "1.2.1",
+      "@vue/vue2-jest": "27.0.0",
+      "add": "2.0.6",
+      "ansi_up": "5.0.0",
+      "babel-eslint": "10.1.0",
+      "babel-plugin-module-resolver": "4.0.0",
+      "babel-preset-vue": "2.0.2",
+      "browser-env": "3.3.0",
+      "cookie": "0.5.0",
+      "cookie-universal-nuxt": "2.1.4",
+      "core-js": "3.21.1",
+      "cron-validator": "1.2.0",
+      "cronstrue": "1.95.0",
+      "cross-env": "6.0.3",
+      "css-loader": "4.3.0",
+      "csv-loader": "3.0.3",
+      "cypress": "10.3.1",
+      "d3": "7.3.0",
+      "d3-selection": "1.4.1",
+      "dagre-d3": "0.6.4",
+      "dayjs": "1.8.29",
+      "diff2html": "2.11.2",
+      "dompurify": "2.0.12",
+      "eslint": "7.32.0",
+      "eslint-config-standard": "16.0.3",
+      "eslint-import-resolver-node": "0.3.4",
+      "eslint-module-utils": "2.6.1",
+      "eslint-plugin-cypress": "2.12.1",
+      "eslint-plugin-import": "2.23.4",
+      "eslint-plugin-jest": "24.4.0",
+      "eslint-plugin-n": "15.2.0",
+      "eslint-plugin-vue": "7.14.0",
+      "event-target-shim": "5.0.1",
+      "express": "4.17.1",
+      "file-saver": "2.0.2",
+      "frontmatter-markdown-loader": "3.7.0",
+      "identicon.js": "2.3.3",
+      "intl-messageformat": "7.8.4",
+      "is-url": "1.2.4",
+      "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",
+      "jsdiff": "1.1.1",
+      "jsdom-global": "3.0.2",
+      "jsonpath-plus": "6.0.1",
+      "jsrsasign": "10.2.0",
+      "jszip": "3.7.0",
+      "lodash": "4.17.21",
+      "marked": "4.0.17",
+      "nodemon": "2.0.4",
+      "nuxt": "2.15.8",
+      "nyc": "15.1.0",
+      "papaparse": "5.3.0",
+      "portal-vue": "2.1.7",
+      "rancher-icons": "rancher/icons#v2.0.13",
+      "require-extension-hooks": "0.3.3",
+      "require-extension-hooks-babel": "1.0.0",
+      "require-extension-hooks-vue": "3.0.0",
+      "sass": "1.51.0",
+      "sass-loader": "10.2.1",
+      "serve-static": "1.14.1",
+      "set-cookie-parser": "2.4.6",
+      "shell-quote": "1.7.3",
+      "sinon": "8.1.1",
+      "start-server-and-test": "1.13.1",
+      "style-loader": "1.2.1",
+      "ts-node": "8.10.2",
+      "typescript": "4.1.6",
+      "url-parse": "1.5.10",
+      "v-tooltip": "2.0.3",
+      "vue": "2.6.14",
+      "vue-clipboard2": "0.3.1",
+      "vue-codemirror": "4.0.6",
+      "vue-js-modal": "1.3.35",
+      "vue-resize": "0.4.5",
+      "vue-select": "3.18.3",
+      "vue-server-renderer": "2.6.14",
+      "vue-shortkey": "3.1.7",
+      "vue-template-compiler": "2.6.14",
+      "vue-virtual-scroll-list": "^2.3.4",
+      "vue2-transitions": "0.3.0",
+      "vuedraggable": "2.24.3",
+      "vuex": "3.6.2",
+      "webpack-bundle-analyzer": "4.5.0",
+      "webpack-virtual-modules": "0.4.3",
+      "xterm": "5.0.0",
+      "xterm-addon-fit": "0.6.0",
+      "xterm-addon-search": "0.10.0",
+      "xterm-addon-web-links": "0.7.0",
+      "xterm-addon-webgl": "0.13.0",
+      "worker-loader": "3.0.8",
+      "yarn": "1.22.18"
+    },
+    "nyc": {
+      "extension": [
+        ".js",
+        ".vue"
+      ]
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile