@rancher/shell 0.3.22 → 0.3.23

package/rancher-components/StringList/StringList.vue

@@ -30,10 +30,10 @@ const CLASS = {
  * Manage a list of strings
  */
 export default Vue.extend({
-
-  name:       'StringList',
   components: { LabeledInput },
 
+  name: 'StringList',
+
   props: {
     /**
      * The items source
@@ -85,11 +85,11 @@ export default Vue.extend({
   },
   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>
+      value:             null as string | null,
+      selected:          null as string | null,
+      isEditItem:        null as string | null,
+      isCreateItem:      false,
+      errors:            { duplicate: false } as Record<Error, boolean>
     };
   },
 
@@ -100,8 +100,8 @@ export default Vue.extend({
      */
     errorMessagesArray(): string[] {
       return (Object.keys(this.errors) as Error[])
-        .filter((f) => this.errors[f] && this.errorMessages[f])
-        .map((k) => this.errorMessages[k]);
+        .filter(f => !!(this.errors)[f])
+        .map(k => this.errorMessages[k]);
     },
   },
 
@@ -113,35 +113,23 @@ export default Vue.extend({
       this.toggleEditMode(false);
       this.toggleCreateMode(false);
     },
-    value(val) {
-      this.$emit('type:item', val);
-    },
-    errors: {
-      handler(val) {
-        this.$emit('errors', val);
-      },
-      deep: true
-    }
   },
 
   methods: {
     onChange(value: string) {
       this.value = value;
-
-      const items = [
-        ...this.items,
-        this.value
-      ];
-
+      /**
+       * Remove duplicate error when a new value is typed
+       */
       this.toggleError(
         'duplicate',
-        hasDuplicatedStrings(items, this.caseSensitive),
-        this.isCreateItem ? INPUT.create : INPUT.edit
+        false,
+        this.isCreateItem ? INPUT.create : INPUT.edit,
       );
     },
 
     onSelect(item: string) {
-      if (this.readonly || this.isCreateItem || this.editedItem === item) {
+      if (this.isCreateItem || this.isEditItem === item) {
         return;
       }
       this.selected = item;
@@ -172,7 +160,7 @@ export default Vue.extend({
     },
 
     onClickEmptyBody() {
-      if (!this.isCreateItem && !this.editedItem) {
+      if (!this.isCreateItem && !this.isEditItem) {
         this.toggleCreateMode(true);
       }
     },
@@ -188,43 +176,38 @@ export default Vue.extend({
 
         return;
       }
-      if (this.editedItem) {
-        this.deleteAndSelectNext(this.editedItem);
+      if (this.isEditItem) {
         this.toggleEditMode(false);
 
         return;
       }
       if (this.selected) {
-        this.deleteAndSelectNext(this.selected);
-      }
-    },
-
-    deleteAndSelectNext(currItem: string) {
-      const index = findStringIndex(this.items, currItem, false);
+        const index = findStringIndex(this.items, this.selected, false);
 
-      if (index !== -1) {
-        /**
-         * Select the next item in the list.
-         */
-        const item = (this.items[index + 1] || this.items[index - 1]);
+        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.onSelect(item);
+          this.setFocus(item);
 
-        this.deleteItem(this.items[index]);
+          this.deleteItem(this.items[index]);
+        }
       }
     },
 
     setFocus(refId: string) {
-      this.$nextTick(() => (this.getElemByRef(refId) as Vue & HTMLElement)?.focus());
+      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) as HTMLElement;
-      const item = this.getElemByRef(this.selected || '') as HTMLElement;
+      const box = this.getElemByRef(BOX);
+      const item = this.getElemByRef(this.selected || '');
 
       if (box && item && item.className.includes(CLASS.item)) {
         const boxRect = box.getClientRects()[0];
@@ -246,14 +229,13 @@ export default Vue.extend({
      */
     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) as Vue)?.$el;
+      const input = this.getElemByRef(refId)?.$el;
 
       if (input) {
         if (val) {
@@ -268,11 +250,7 @@ export default Vue.extend({
      * 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;
@@ -290,34 +268,31 @@ export default Vue.extend({
      * 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.value = this.isEditItem;
 
-        this.editedItem = item || '';
+        this.isEditItem = item || '';
         this.setFocus(INPUT.edit);
       } else {
         this.value = null;
         this.toggleError('duplicate', false);
         this.onSelectLeave();
 
-        this.editedItem = null;
+        this.isEditItem = null;
       }
     },
 
     getElemByRef(id: string) {
       const ref = this.$refs[id];
 
-      return Array.isArray(ref) ? ref[0] : ref;
+      return (Array.isArray(ref) ? ref[0] : ref) as any;
     },
 
     /**
      * Create a new item and insert in the items list
      */
-    saveItem(closeInput = true) {
+    saveItem() {
       const value = this.value?.trim();
 
       if (value) {
@@ -326,20 +301,21 @@ export default Vue.extend({
           value,
         ];
 
-        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.updateItems(items);
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.create);
+
+          return;
         }
-      }
 
-      if (closeInput) {
-        this.toggleCreateMode(false);
+        this.updateItems(items);
       }
+      this.toggleCreateMode(false);
     },
 
     /**
      * Update an existing item in the items list
      */
-    updateItem(item: string, closeInput = true) {
+    updateItem(item: string) {
       const value = this.value?.trim();
 
       if (value) {
@@ -350,21 +326,22 @@ export default Vue.extend({
           items[index] = value;
         }
 
-        if (!hasDuplicatedStrings(items, this.caseSensitive)) {
-          this.updateItems(items);
+        if (hasDuplicatedStrings(items, this.caseSensitive)) {
+          this.toggleError('duplicate', true, INPUT.edit);
+
+          return;
         }
-      }
 
-      if (closeInput) {
-        this.toggleEditMode(false);
+        this.updateItems(items);
       }
+      this.toggleEditMode(false);
     },
 
     /**
      * Remove an item from items list
      */
     deleteItem(item?: string) {
-      const items = this.items.filter((f) => f !== item);
+      const items = this.items.filter(f => f !== item);
 
       this.updateItems(items);
     },
@@ -410,20 +387,19 @@ export default Vue.extend({
         @blur="onSelectLeave(item)"
       >
         <span
-          v-if="!editedItem || editedItem !== item"
+          v-if="!isEditItem || isEditItem !== item"
           class="label static"
         >
           {{ item }}
         </span>
         <LabeledInput
-          v-if="editedItem && editedItem === item"
+          v-if="isEditItem && isEditItem === item"
           ref="item-edit"
-          :data-testid="`item-edit-${item}`"
           class="edit-input static"
           :value="value != null ? value : item"
           @input="onChange($event)"
-          @blur.prevent="updateItem(item)"
-          @keydown.native.enter="updateItem(item, !errors.duplicate)"
+          @blur.prevent="toggleEditMode(false)"
+          @keydown.native.enter="updateItem(item)"
         />
       </div>
       <div
@@ -432,14 +408,12 @@ export default Vue.extend({
       >
         <LabeledInput
           ref="item-create"
-          data-testid="item-create"
           class="create-input static"
           type="text"
           :value="value"
           :placeholder="placeholder"
           @input="onChange($event)"
-          @blur.prevent="saveItem"
-          @keydown.native.enter="saveItem(!errors.duplicate)"
+          @keydown.native.enter="saveItem"
         />
       </div>
     </div>
@@ -453,32 +427,25 @@ export default Vue.extend({
         class="action-buttons"
       >
         <button
-          data-testid="button-remove"
           class="btn btn-sm role-tertiary remove-button"
-          :disabled="!selected && !isCreateItem && !editedItem"
+          :disabled="!selected && !isCreateItem && !isEditItem"
           @mousedown.prevent="onClickMinusButton"
         >
           <span class="icon icon-minus icon-sm" />
         </button>
         <button
-          data-testid="button-add"
           class="btn btn-sm role-tertiary add-button"
-          :disabled="isCreateItem || editedItem"
+          :disabled="isCreateItem"
           @click.prevent="onClickPlusButton"
         >
           <span class="icon icon-plus icon-sm" />
         </button>
       </div>
       <div class="messages">
-        <i
-          v-if="errorMessagesArray.length > 0"
-          data-testid="i-warning-icon"
-          class="icon icon-warning icon-lg"
-        />
+        <i v-if="errorMessagesArray.length > 0" class="icon icon-warning icon-lg" />
         <span
           v-for="(msg, idx) in errorMessagesArray"
           :key="idx"
-          :data-testid="`span-error-message-${msg}`"
           class="error"
         >
           {{ idx > 0 ? '; ' : '' }}
@@ -532,7 +499,6 @@ export default Vue.extend({
         width: auto;
         user-select: none;
         overflow: hidden;
-        white-space: no-wrap;
         text-overflow: ellipsis;
         padding-top: 1px;
       }

package/types/shell/index.d.ts

@@ -3376,6 +3376,12 @@ export function haveSetFavIcon(): boolean;
 export function setFavIcon(store: any): void;
 }
 
+// @shell/utils/formatter
+
+declare module '@shell/utils/formatter' {
+export function formatEncryptionSecretNames(secrets: any, chartNamespace: any): any;
+}
+
 // @shell/utils/grafana
 
 declare module '@shell/utils/grafana' {
@@ -3599,35 +3605,35 @@ export namespace KEY {
 }
 }
 
-// @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>;
 }
 }
 
-// @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>;
 }
 }

package/utils/__tests__/formatter.test.ts

@@ -0,0 +1,77 @@
+import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+
+describe('formatter', () => {
+  const secrets = [
+    {
+      id:       'test5',
+      _type:    'Opaque',
+      data:     { hash: 'test5', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test5',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test2',
+      _type:    'Opaque',
+      data:     { hash: 'test', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test2',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test4',
+      _type:    'Opaque',
+      data:     { hash: 'test4' },
+      metadata: {
+        name:      'test4',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        }
+      }
+    },
+    {
+      id:       'test1',
+      _type:    'Custom',
+      data:     { hash: 'test1', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test1',
+        namespace: 'test',
+        state:     {
+          error: false, message: 'Resource is always ready', name: 'active', transitioning: false
+        },
+      }
+    },
+    {
+      id:       'test6',
+      _type:    'Opaque',
+      data:     { hash: 'test5', 'encryption-provider-config.yaml': 'MTIzNFFhYWEh' },
+      metadata: {
+        name:      'test5',
+        namespace: 'test',
+        state:     {
+          error: true, message: 'Failed', name: 'active', transitioning: true
+        }
+      }
+    }];
+  const chart = 'test';
+
+  it.each([[chart, 2], ['test1', 0]])('should show correct number of secrets', (chartVal: string, result: number) => {
+    const res = formatEncryptionSecretNames(secrets, chartVal);
+
+    expect(res).toHaveLength(result);
+  });
+  it('should return correct results in a correct order', () => {
+    const res = formatEncryptionSecretNames(secrets, chart);
+
+    expect(res).toStrictEqual(['test2', 'test5']);
+  });
+});

package/utils/formatter.js

@@ -0,0 +1,11 @@
+
+import { SECRET_TYPES } from '@shell/config/secret';
+
+export function formatEncryptionSecretNames(secrets, chartNamespace) {
+  return secrets.filter(
+    (secret) => (secret.data || {})['encryption-provider-config.yaml'] &&
+      secret.metadata.namespace === chartNamespace &&
+      !secret.metadata?.state?.error &&
+      secret._type === SECRET_TYPES.OPAQUE
+  ).map((secret) => secret.metadata.name).sort();
+}

package/vue.config.js

@@ -72,7 +72,9 @@ module.exports = function(dir, _appConfig) {
   ];
 
   if (instrumentCode) {
-    babelPlugins.push('babel-plugin-istanbul');
+    babelPlugins.push([
+      'babel-plugin-istanbul', { extension: ['.js', '.vue'] }, 'add-vue'
+    ]);
 
     console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
   }
@@ -451,7 +453,9 @@ module.exports = function(dir, _appConfig) {
       ];
 
       if (instrumentCode) {
-        babelPlugins.push('babel-plugin-istanbul');
+        babelPlugins.push([
+          'babel-plugin-istanbul', { extension: ['.js', '.vue'] }, 'add-vue'
+        ]);
 
         console.warn('Instrumenting code for coverage'); // eslint-disable-line no-console
       }

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

@@ -1,37 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { Card } from './index';
-
-describe('component: Card', () => {
-  const title = 'Card title';
-  const body = 'Card body';
-
-  it('should have a card title', () => {
-    const wrapper = mount(Card, {
-      propsData: { title },
-      slots:     { title: '<div>Card title</div>' }
-    });
-
-    const element = wrapper.find('[data-testid="card-title-slot"]');
-
-    expect(element.exists()).toBe(true);
-    expect(element.text()).toBe(title);
-  });
-
-  it('should have a card body', () => {
-    const wrapper = mount(Card, {
-      propsData: { body },
-      slots:     { body: '<div>Card body</div>' }
-    });
-    const element = wrapper.find('[data-testid="card-body-slot"]');
-
-    expect(element.exists()).toBe(true);
-    expect(element.text()).toBe(body);
-  });
-
-  it('should display the default card actions', () => {
-    const wrapper = mount(Card);
-    const element = wrapper.find('[data-testid="card-actions-slot"]');
-
-    expect(element.exists()).toBe(true);
-  });
-});

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -1,31 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { RadioButton } from './index';
-import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
-
-describe('radioButton.vue', () => {
-  it('renders label slot contents', () => {
-    const wrapper = shallowMount(RadioButton, { slots: { label: 'Test Label' } });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
-  });
-
-  it('renders label prop contents', () => {
-    const wrapper = shallowMount(
-      RadioButton,
-      {
-        directives: { cleanHtmlDirective },
-        propsData:  { label: 'Test Label' }
-      });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label');
-  });
-
-  it('renders slot contents when both slot and label prop are provided', () => {
-    const wrapper = shallowMount(RadioButton, {
-      slots:     { label: 'Test Label - Slot' },
-      propsData: { label: 'Test Label - Props' },
-    });
-
-    expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');
-  });
-});