@rancher/shell 0.3.14 → 0.3.15

package/components/SortableTable/selection.js

@@ -99,7 +99,7 @@ export default {
         const actionEnabledForSomeSelected = this.selectedRows.some((node) => {
           const availableActions = node.availableActions || [];
 
-          return availableActions.some(action => action.action === bulkAction.action && action.enabled);
+          return availableActions.some((action) => action.action === bulkAction.action && action.enabled);
         });
 
         bulkAction.enabled = this.selectedRows.length > 0 && actionEnabledForSomeSelected;
@@ -218,7 +218,7 @@ export default {
         return;
       }
 
-      const node = this.pagedRows.find( x => get(x, this.keyField) === nodeId );
+      const node = this.pagedRows.find( (x) => get(x, this.keyField) === nodeId );
 
       return node;
     },
@@ -401,7 +401,7 @@ export default {
       }
 
       // check if there is already duplicate content selected (selectedRows) on the list to toggle...
-      toToggle = toToggle.filter(item => !this.selectedRows.includes(item));
+      toToggle = toToggle.filter((item) => !this.selectedRows.includes(item));
 
       return toToggle;
     },
@@ -440,7 +440,7 @@ export default {
 
     update(toAdd, toRemove) {
       toRemove.forEach((row) => {
-        const index = this.selectedRows.findIndex(r => r === row);
+        const index = this.selectedRows.findIndex((r) => r === row);
 
         if (index !== -1) {
           this.selectedRows.splice(index, 1);
@@ -516,7 +516,7 @@ export default {
 
       // Go through the table selection and filter out those actions that can't run the chosen action
       const executableSelection = this.selectedRows.filter((row) => {
-        const matchingResourceAction = row.availableActions.find(a => a.action === action.action);
+        const matchingResourceAction = row.availableActions.find((a) => a.action === action.action);
 
         return matchingResourceAction?.enabled;
       });

package/components/SortableTable/sorting.js

@@ -7,7 +7,7 @@ export default {
       let fromGroup = ( this.groupBy ? this.groupSort || this.groupBy : null) || [];
       let fromColumn = [];
 
-      const column = (this.columns || this.headers).find(x => x && x.name && x.name.toLowerCase() === this.sortBy.toLowerCase());
+      const column = (this.columns || this.headers).find((x) => x && x.name && x.name.toLowerCase() === this.sortBy.toLowerCase());
 
       if ( this.sortBy && column && column.sort ) {
         fromColumn = column.sort;
@@ -58,8 +58,8 @@ export default {
 
     // Try to find a reasonable default sort
     if ( !this._defaultSortBy ) {
-      const markedColumn = this.headers.find(x => !!x.defaultSort);
-      const nameColumn = this.headers.find( x => x.name === 'name');
+      const markedColumn = this.headers.find((x) => !!x.defaultSort);
+      const nameColumn = this.headers.find( (x) => x.name === 'name');
 
       if ( markedColumn ) {
         this._defaultSortBy = markedColumn.name;
@@ -68,7 +68,7 @@ export default {
         this._defaultSortBy = nameColumn.name;
       } else {
         // The first column that isn't state
-        const first = this.headers.filter( x => x.name !== 'state' )[0];
+        const first = this.headers.filter( (x) => x.name !== 'state' )[0];
 
         if ( first ) {
           this._defaultSortBy = first.name;
@@ -80,7 +80,7 @@ export default {
     }
 
     // If the sort column doesn't exist or isn't specified, use default
-    if ( !sortBy || !this.headers.find(x => x.name === sortBy ) ) {
+    if ( !sortBy || !this.headers.find((x) => x.name === sortBy ) ) {
       sortBy = this._defaultSortBy;
     }
 

package/components/Tabbed/index.vue

@@ -94,17 +94,17 @@ export default {
         defaultTab,
         useHash
       } = this;
-      const activeTab = tabs.find(t => t.active);
+      const activeTab = tabs.find((t) => t.active);
 
       const hash = useHash ? this.$route.hash : undefined;
       const windowHash = useHash ? hash.slice(1) : undefined;
-      const windowHashTabMatch = tabs.find(t => t.name === windowHash && !t.active);
+      const windowHashTabMatch = tabs.find((t) => t.name === windowHash && !t.active);
       const firstTab = head(tabs) || null;
 
       if (isEmpty(activeTab)) {
         if (useHash && !isEmpty(windowHashTabMatch)) {
           this.select(windowHashTabMatch.name);
-        } else if (!isEmpty(defaultTab) && !isEmpty(tabs.find(t => t.name === defaultTab))) {
+        } else if (!isEmpty(defaultTab) && !isEmpty(tabs.find((t) => t.name === defaultTab))) {
           this.select(defaultTab);
         } else if (firstTab?.name) {
           this.select(firstTab.name);
@@ -144,7 +144,7 @@ export default {
     },
 
     find(name) {
-      return this.sortedTabs.find(x => x.name === name );
+      return this.sortedTabs.find((x) => x.name === name );
     },
 
     select(name/* , event */) {
@@ -184,7 +184,7 @@ export default {
 
     selectNext(direction) {
       const { sortedTabs } = this;
-      const currentIdx = sortedTabs.findIndex(x => x.active);
+      const currentIdx = sortedTabs.findIndex((x) => x.active);
       const nextIdx = getCyclicalIdx(currentIdx, direction, sortedTabs.length);
       const nextName = sortedTabs[nextIdx].name;
 
@@ -208,13 +208,13 @@ export default {
     },
 
     tabAddClicked() {
-      const activeTabIndex = findIndex(this.tabs, tab => tab.active);
+      const activeTabIndex = findIndex(this.tabs, (tab) => tab.active);
 
       this.$emit('addTab', activeTabIndex);
     },
 
     tabRemoveClicked() {
-      const activeTabIndex = findIndex(this.tabs, tab => tab.active);
+      const activeTabIndex = findIndex(this.tabs, (tab) => tab.active);
 
       this.$emit('removeTab', activeTabIndex);
     },

package/components/TableSparkLine.vue

@@ -61,7 +61,7 @@ export default {
 
       const path = d3.line()
         .x((d, i) => vm.scaleX(i))
-        .y(d => vm.scaleY(d));
+        .y((d) => vm.scaleY(d));
 
       return path(this.dataSet);
     }

package/components/Wizard.vue

@@ -117,11 +117,11 @@ export default {
 
   computed: {
     errorStrings() {
-      return ( this.errors || [] ).map(x => stringify(x));
+      return ( this.errors || [] ).map((x) => stringify(x));
     },
 
     activeStepIndex() {
-      return this.visibleSteps.findIndex(s => s.name === this.activeStep.name);
+      return this.visibleSteps.findIndex((s) => s.name === this.activeStep.name);
     },
 
     showPrevious() {
@@ -153,7 +153,7 @@ export default {
     },
 
     readySteps() {
-      return this.visibleSteps.filter(step => step.ready);
+      return this.visibleSteps.filter((step) => step.ready);
     },
 
     showSteps() {
@@ -161,11 +161,11 @@ export default {
     },
 
     stepsLoaded() {
-      return !this.steps.some(step => step.loading === true);
+      return !this.steps.some((step) => step.loading === true);
     },
 
     visibleSteps() {
-      return this.steps.filter(step => !step.hidden);
+      return this.steps.filter((step) => !step.hidden);
     },
 
     nextButtonStyle() {
@@ -234,7 +234,7 @@ export default {
         return false;
       }
 
-      const idx = this.visibleSteps.findIndex(s => s.name === step.name);
+      const idx = this.visibleSteps.findIndex((s) => s.name === step.name);
 
       if (idx === 0 && !this.editFirstStep) {
         return false;
@@ -478,6 +478,7 @@ $spacer: 10px;
   display: flex;
   align-content: space-between;
   align-items: center;
+  margin-bottom: 2*$spacer;
 
   border-bottom: var(--header-border-size) solid var(--header-border);
 
@@ -525,20 +526,12 @@ $spacer: 10px;
           align-items: center;
           width: 40px;
           overflow: visible;
-          padding-top: 15px;
+          padding-top: 7px;
 
-          .cru__content & {
-            padding-top: 0;
-
-          }
           & > span {
-            padding-bottom: 5px;
+            padding-bottom: 3px;
             margin-bottom: 5px;
             white-space: nowrap;
-
-            .cru__content & {
-              padding-bottom: 3px;
-            }
           }
         }
 
@@ -565,7 +558,7 @@ $spacer: 10px;
         flex-basis: 100%;
         border-top: 1px solid var(--border);
         position: relative;
-        top: 28px;
+        top: 17px;
 
         .cru__content & {
           top: 13px;
@@ -595,6 +588,7 @@ $spacer: 10px;
         display: flex;
         align-items: center;
         justify-content: space-evenly;
+        position: relative;
 
         & > .subtitle {
           margin-right: 20px;
@@ -677,10 +671,4 @@ $spacer: 10px;
     }
   }
 
-.wizard {
-  .header {
-    margin-bottom: 2*$spacer;
-  }
-}
-
 </style>

package/components/__tests__/Collapse.spec.ts

@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils';
 import Collapse from '@shell/components/Collapse.vue';
+import { mount } from '@vue/test-utils';
 
 describe('component: Collapse.vue', () => {
   describe('closed', () => {

package/components/__tests__/CruResource.test.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import CruResource from '@shell/components/CruResource.vue';
 import { _EDIT, _YAML } from '@shell/config/query-params';
 import { cleanHtmlDirective } from '@shell/plugins/clean-html-directive';
+import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 
 describe('component: CruResource', () => {
   it('should hide Cancel button', () => {
@@ -66,4 +67,77 @@ describe('component: CruResource', () => {
     expect(node.text()).toContain(errors[0]);
     expect(node.text()).toContain(errors[1]);
   });
+
+  it('should prevent default events on keypress Enter', async() => {
+    const event = { preventDefault: jest.fn() };
+    const wrapper = mount(CruResource, {
+      propsData: {
+        canYaml:            true,
+        mode:               _EDIT,
+        resource:           {},
+        preventEnterSubmit: true
+      },
+      slots: { default: TextAreaAutoGrow },
+      stubs: { TextAreaAutoGrow },
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+        $route:  { query: { AS: _YAML } },
+        $router: { applyQuery: jest.fn() },
+      }
+    });
+
+    const textAreaField = wrapper.find('[data-testid="text-area-auto-grow"]');
+
+    await textAreaField.trigger('focus');
+    await textAreaField.trigger('keydown.enter', event);
+
+    expect(event.preventDefault).toHaveBeenCalledWith();
+  });
+
+  it('should not prevent default events on keypress Enter', async() => {
+    const event = { preventDefault: jest.fn() };
+    const wrapper = mount(CruResource, {
+      directives: { cleanHtmlDirective },
+      propsData:  {
+        canYaml:            false,
+        mode:               _EDIT,
+        resource:           {},
+        preventEnterSubmit: false
+      },
+      components: {
+        ResourceYaml:        { template: '<div></div> ' },
+        ResourceCancelModal: { template: '<div></div> ' },
+      },
+      slots: { default: TextAreaAutoGrow },
+      stubs: { TextAreaAutoGrow },
+      mocks: {
+        $store: {
+          getters: {
+            currentStore:              () => 'current_store',
+            'current_store/schemaFor': jest.fn(),
+            'current_store/all':       jest.fn(),
+            'i18n/t':                  jest.fn(),
+            'i18n/exists':             jest.fn(),
+          }
+        },
+        $route:  { query: { AS: _YAML } },
+        $router: { applyQuery: jest.fn() },
+      }
+    });
+
+    const textAreaField = wrapper.find('[data-testid="text-area-auto-grow"]');
+
+    await textAreaField.trigger('focus');
+    await textAreaField.trigger('keydown.enter', event);
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
 });

package/components/__tests__/SimpleBox.spec.ts

@@ -1,5 +1,5 @@
-import { mount } from '@vue/test-utils';
 import SimpleBox from '@shell/components/SimpleBox.vue';
+import { mount } from '@vue/test-utils';
 
 describe('component: SimpleBox.vue', () => {
   const wrapper = mount(SimpleBox, { propsData: { title: 'Simple box title' } });

package/components/auth/RoleDetailEdit.vue

@@ -319,7 +319,7 @@ export default {
       return this.createRules(this.value);
     },
     ruleHeaders() {
-      const verbHeaders = VERBS.map(verb => ({
+      const verbHeaders = VERBS.map((verb) => ({
         name:      verb,
         key:       ucFirst(verb),
         value:     this.verbKey(verb),
@@ -485,7 +485,7 @@ export default {
           const key = this.verbKey(verb);
 
           tableRule[key] = rule.verbs[0] === '*' || rule.verbs.includes(verb);
-          tableRule.hasCustomVerbs = rule.verbs.some(verb => !VERBS.includes(verb));
+          tableRule.hasCustomVerbs = rule.verbs.some((verb) => !VERBS.includes(verb));
         });
 
         return tableRule;
@@ -497,7 +497,7 @@ export default {
       }
 
       parent.roleTemplateNames
-        .map(rtn => this.$store.getters[`management/byId`](MANAGEMENT.ROLE_TEMPLATE, rtn))
+        .map((rtn) => this.$store.getters[`management/byId`](MANAGEMENT.ROLE_TEMPLATE, rtn))
         .forEach((rt) => {
           // Add Self
           res.push({
@@ -659,6 +659,7 @@ export default {
                     :options="verbOptions"
                     :multiple="true"
                     :mode="mode"
+                    :data-testid="`grant-resources-verbs${props.i}`"
                     @input="updateSelectValue(props.row.value, 'verbs', $event)"
                   />
                 </div>
@@ -670,6 +671,7 @@ export default {
                     :searchable="true"
                     :taggable="true"
                     :mode="mode"
+                    :data-testid="`grant-resources-resources${props.i}`"
                     @input="setRule('resources', props.row.value, $event)"
                     @createdListItem="setRule('resources', props.row.value, $event)"
                   />
@@ -679,6 +681,7 @@ export default {
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
+                    :data-testid="`grant-resources-api-groups${props.i}`"
                     @input="setRule('apiGroups', props.row.value, $event.target.value)"
                   >
                 </div>
@@ -690,6 +693,7 @@ export default {
                     :value="getRule('nonResourceURLs', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
+                    :data-testid="`grant-resources-non-resource-urls${props.i}`"
                     @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
                   >
                 </div>

package/components/auth/SelectPrincipal.vue

@@ -76,7 +76,7 @@ export default {
         return true;
       })
         .sort((a, b) => a.name.localeCompare(b.name))
-        .map(x => x.id);
+        .map((x) => x.id);
 
       return out;
     },
@@ -100,7 +100,7 @@ export default {
         return;
       }
       if (this.principals) {
-        const selected = this.principals.find(p => p.id === this.newValue);
+        const selected = this.principals.find((p) => p.id === this.newValue);
 
         this.tooltipContent = selected?.name;
       } else {
@@ -159,7 +159,7 @@ export default {
 
         if ( this.searchStr === str ) {
           // If not, they've already typed something else
-          this.options = res.map(x => x.id);
+          this.options = res.map((x) => x.id);
         }
       } catch (e) {
         this.options = [];

package/components/fleet/FleetResources.vue

@@ -32,7 +32,7 @@ export default {
 
         for ( const c of clusters ) {
           let state = r.state;
-          const perEntry = r.perClusterState?.find(x => x.clusterId === c.id );
+          const perEntry = r.perClusterState?.find((x) => x.clusterId === c.id );
           const tooMany = r.perClusterState?.length >= 10 || false;
 
           if ( perEntry ) {

package/components/fleet/FleetStatus.vue

@@ -50,8 +50,8 @@ export default {
   computed: {
     meta() {
       return {
-        total:      this.values.map(x => x.value).reduce((a, b) => a + b),
-        readyCount: this.values.filter(x => x.label === 'Success' || x.label === 'Ready').map(x => x.value).reduce((a, b) => a + b)
+        total:      this.values.map((x) => x.value).reduce((a, b) => a + b),
+        readyCount: this.values.filter((x) => x.label === 'Success' || x.label === 'Ready').map((x) => x.value).reduce((a, b) => a + b)
       };
     },
 
@@ -83,7 +83,7 @@ export default {
       if ( !this.max ) {
         max = 100;
         if ( out.length ) {
-          max = out.map(x => x.value).reduce((a, b) => a + b);
+          max = out.map((x) => x.value).reduce((a, b) => a + b);
         }
       }
 
@@ -112,7 +112,7 @@ export default {
         return obj;
       });
 
-      return [...out].filter(obj => obj.percent);
+      return [...out].filter((obj) => obj.percent);
     },
   },
 

package/components/fleet/FleetSummary.vue

@@ -80,7 +80,7 @@ export default {
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter(item => item.metadata.name.startsWith(`${ this.repoName }-`));
+      const resources = this.bundles.filter((item) => item.metadata.name.startsWith(`${ this.repoName }-`));
 
       if (!resources.length) {
         return [];

package/components/fleet/ForceDirectedTreeChart/chartIcons.js

@@ -1,6 +1,6 @@
 // This is to mitigate an issue where the SVG icons being imported from the project weren't being rendered on Firefox
 // To know more about this technique, check this doc: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
-export const getChartIcon = type => `<defs>
+export const getChartIcon = (type) => `<defs>
 <!-- GIT REPO ICON -->
 <svg id="git" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96" xml:space="preserve"><path class="st0" d="M92.138 43.888 52.018 3.77a5.918 5.918 0 0 0-8.369 0l-8.33 8.332L45.887 22.67a7.025 7.025 0 0 1 7.23 1.684 7.031 7.031 0 0 1 1.67 7.275l10.185 10.185a7.03 7.03 0 0 1 7.275 1.67 7.04 7.04 0 0 1 0 9.958 7.042 7.042 0 0 1-11.492-7.658l-9.5-9.499v24.997a7.09 7.09 0 0 1 1.861 1.331 7.042 7.042 0 1 1-7.65-1.537V35.849a7.04 7.04 0 0 1-3.822-9.234l-10.418-10.42-27.51 27.508a5.921 5.921 0 0 0 0 8.371l40.121 40.118a5.919 5.919 0 0 0 8.37 0l39.93-39.932a5.92 5.92 0 0 0 0-8.37z"/></svg>
 <!-- GENERIC BUNDLE ICON -->

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -57,7 +57,7 @@ export default {
           let hasStatusChange = false;
 
           flattenedData.forEach((item) => {
-            const index = this.allNodesData.findIndex(nodeData => item.matchingId === nodeData.data.matchingId);
+            const index = this.allNodesData.findIndex((nodeData) => item.matchingId === nodeData.data.matchingId);
 
             // apply status change to each node
             if (index > -1 && this.allNodesData[index].data.state !== item.state) {

package/components/form/ArrayList.vue

@@ -82,7 +82,7 @@ export default {
       default:   () => [],
       type:      Array,
       // we only want functions in the rules array
-      validator: rules => rules.every(rule => ['function'].includes(typeof rule))
+      validator: (rules) => rules.every((rule) => ['function'].includes(typeof rule))
     }
   },
   data() {
@@ -124,7 +124,7 @@ export default {
   watch: {
     value() {
       this.lastUpdateWasFromValue = true;
-      this.rows = (this.value || []).map(v => ({ value: v }));
+      this.rows = (this.value || []).map((v) => ({ value: v }));
     },
     rows: {
       deep: true,
@@ -186,9 +186,17 @@ export default {
       }
       event.preventDefault();
       const text = event.clipboardData.getData('text/plain');
-      const split = text.split('\n').map(value => ({ value }));
+      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();
 
       this.rows.splice(index, 1, ...split);
+
       this.update();
     }
   },

package/components/form/ArrayListSelect.vue

@@ -29,7 +29,7 @@ export default {
   computed: {
     filteredOptions() {
       return this.options
-        .filter(option => !this.value.includes(option.value));
+        .filter((option) => !this.value.includes(option.value));
     },
 
     addAllowed() {
@@ -43,7 +43,7 @@ export default {
       this.$emit(value);
     },
     calculateOptions(value) {
-      const valueOption = this.options.find(o => o.value === value);
+      const valueOption = this.options.find((o) => o.value === value);
 
       if (valueOption) {
         return [valueOption, ...this.filteredOptions];

package/components/form/FileSelector.vue

@@ -58,6 +58,11 @@ export default {
     rawData: {
       type:    Boolean,
       default: false
+    },
+
+    accept: {
+      type:    String,
+      default: '*'
     }
   },
 
@@ -151,6 +156,7 @@ export default {
       class="hide"
       :multiple="multiple"
       :webkitdirectory="directory"
+      :accept="accept"
       @change="fileChange"
     >
   </button>