@rancher/shell 0.3.14 → 0.3.16

package/components/ResourceTable.vue

@@ -225,7 +225,7 @@ export default {
 
       // If only one namespace is selected, hide the namespace column
       if ( !showNamespace ) {
-        const idx = headers.findIndex(header => header.name === NAMESPACE.name);
+        const idx = headers.findIndex((header) => header.name === NAMESPACE.name);
 
         if ( idx >= 0 ) {
           headers.splice(idx, 1);
@@ -236,7 +236,7 @@ export default {
       const custom = this.listGroupMapped[this.group];
 
       if (custom?.hideColumn) {
-        const idx = headers.findIndex(header => header.name === custom.hideColumn);
+        const idx = headers.findIndex((header) => header.name === custom.hideColumn);
 
         if ( idx >= 0 ) {
           headers.splice(idx, 1);
@@ -291,7 +291,7 @@ export default {
     group: {
       get() {
         // Check group is valid
-        const exists = this.groupOptions.find(g => g.value === this._group);
+        const exists = this.groupOptions.find((g) => g.value === this._group);
 
         if (!exists) {
           return DEFAULT_GROUP;

package/components/ResourceYaml.vue

@@ -166,7 +166,7 @@ export default {
       try {
         const parsed = jsyaml.load(this.currentYaml);
         const annotations = Object.keys(parsed?.metadata?.annotations || {});
-        const regexes = ANNOTATIONS_TO_FOLD.map(x => ensureRegex(x));
+        const regexes = ANNOTATIONS_TO_FOLD.map((x) => ensureRegex(x));
 
         let foldAnnotations = false;
 

package/components/RoleBindings.vue

@@ -179,7 +179,7 @@ export default {
     },
 
     existingBindings() {
-      const roles = this.roles.map(x => x.name);
+      const roles = this.roles.map((x) => x.name);
 
       const out = this.allBindings.filter((binding) => {
         if ( binding.roleRef.kind !== this.roleScope || !binding.roleRef?.name) {
@@ -197,7 +197,7 @@ export default {
     },
 
     unremovedRows() {
-      return this.rows.filter(x => x.remove !== true);
+      return this.rows.filter((x) => x.remove !== true);
     },
   },
 

package/components/SimpleBox.vue

@@ -31,6 +31,7 @@ export default {
   <div
     v-if="shown"
     class="simple-box"
+    data-testid="simple-box-container"
     v-on="$listeners"
   >
     <div

package/components/SingleClusterInfo.vue

@@ -37,7 +37,7 @@ export default {
     },
 
     accessibleResources() {
-      return RESOURCES.filter(resource => this.$store.getters['cluster/schemaFor'](resource));
+      return RESOURCES.filter((resource) => this.$store.getters['cluster/schemaFor'](resource));
     },
 
     totalCountGaugeInput() {

package/components/SortableTable/actions.js

@@ -38,11 +38,11 @@ export default {
 
   computed: {
     availableActions() {
-      return this.bulkActionsForSelection.filter(act => !act.external);
+      return this.bulkActionsForSelection.filter((act) => !act.external);
     },
 
     keyedAvailableActions() {
-      return this.availableActions.map(aa => aa.action);
+      return this.availableActions.map((aa) => aa.action);
     },
 
     selectedRowsText() {
@@ -139,7 +139,7 @@ export default {
             // Collate the actions in an array and hide in the normal row
             const id = ba.attributes.getNamedItem('id').value;
 
-            this.hiddenActions.push(this.availableActions.find(aa => aa.action === id));
+            this.hiddenActions.push(this.availableActions.find((aa) => aa.action === id));
             ba.style.display = 'none';
           }
         }

package/components/SortableTable/advanced-filtering.js

@@ -83,7 +83,7 @@ export default {
 
   computed: {
     advFilterSelectOptions() {
-      return this.columnOptions.filter(c => c.isFilter && !c.preventFiltering);
+      return this.columnOptions.filter((c) => c.isFilter && !c.preventFiltering);
     },
 
     advGroupOptions() {
@@ -102,7 +102,7 @@ export default {
 
       this.columnOptions.forEach((advCol) => {
         if (advCol.isTableOption) {
-          const index = allCols.findIndex(col => col.name === advCol.name);
+          const index = allCols.findIndex((col) => col.name === advCol.name);
 
           if (index !== -1) {
             allCols[index].isColVisible = advCol.isColVisible;
@@ -122,7 +122,7 @@ export default {
       const headerProps = [];
 
       // Filter out any columns that are too heavy to show for large page sizes
-      const filteredHeaders = this.headers.slice().filter(c => (!c.maxPageSize || (c.maxPageSize && c.maxPageSize >= this.perPage)));
+      const filteredHeaders = this.headers.slice().filter((c) => (!c.maxPageSize || (c.maxPageSize && c.maxPageSize >= this.perPage)));
 
       // add table cols from config (headers)
       filteredHeaders.forEach((prop) => {
@@ -152,7 +152,7 @@ export default {
 
         // maintain current visibility of cols if they exist already
         if (this.columnOptions?.length) {
-          const opt = this.columnOptions.find(colOpt => colOpt.name === name && colOpt.label === label);
+          const opt = this.columnOptions.find((colOpt) => colOpt.name === name && colOpt.label === label);
 
           if (opt) {
             isColVisible = opt.isColVisible;
@@ -188,14 +188,14 @@ export default {
 
               // maintain current visibility of cols if they exist already
               if (this.columnOptions?.length) {
-                const opt = this.columnOptions.find(colOpt => colOpt.name === label && colOpt.label === label);
+                const opt = this.columnOptions.find((colOpt) => colOpt.name === label && colOpt.label === label);
 
                 if (opt) {
                   res.isColVisible = opt.isColVisible;
                 }
               }
 
-              if (!rowLabels.filter(row => row.label === label).length) {
+              if (!rowLabels.filter((row) => row.label === label).length) {
                 rowLabels.push(res);
               }
             });
@@ -262,7 +262,7 @@ export default {
 
     // cols visibility
     changeColVisibility(colData) {
-      const index = this.columnOptions.findIndex(col => col.label === colData.label);
+      const index = this.columnOptions.findIndex((col) => col.label === colData.label);
 
       if (index !== -1) {
         this.columnOptions[index].isColVisible = colData.value;

package/components/SortableTable/filtering.js

@@ -186,7 +186,7 @@ function columnsToSearchField(columns) {
     }
   });
 
-  return out.filter(x => !!x);
+  return out.filter((x) => !!x);
 }
 
 const ipLike = /^[0-9a-f\.:]+$/i;

package/components/SortableTable/index.vue

@@ -487,10 +487,10 @@ export default {
 
     columns() {
       // Filter out any columns that are too heavy to show for large page sizes
-      const out = this.headers.slice().filter(c => !c.maxPageSize || (c.maxPageSize && c.maxPageSize >= this.perPage));
+      const out = this.headers.slice().filter((c) => !c.maxPageSize || (c.maxPageSize && c.maxPageSize >= this.perPage));
 
       if ( this.groupBy ) {
-        const entry = out.find(x => x.name === this.groupBy);
+        const entry = out.find((x) => x.name === this.groupBy);
 
         if ( entry ) {
           removeObject(out, entry);
@@ -498,10 +498,10 @@ export default {
       }
 
       // If all columns have a width, try to remove it from a column that can be variable (name)
-      const missingWidth = out.find(x => !x.width);
+      const missingWidth = out.find((x) => !x.width);
 
       if ( !missingWidth ) {
-        const variable = out.find(x => x.canBeVariable);
+        const variable = out.find((x) => x.canBeVariable);
 
         if ( variable ) {
           const neu = clone(variable);
@@ -547,13 +547,13 @@ export default {
 
     // Do we have any live columns?
     hasLiveColumns() {
-      const liveColumns = this.columns.find(c => c.formatter?.startsWith('Live') || c.liveUpdates);
+      const liveColumns = this.columns.find((c) => c.formatter?.startsWith('Live') || c.liveUpdates);
 
       return !!liveColumns;
     },
 
     hasDelayedColumns() {
-      const delaeydColumns = this.columns.find(c => c.delayLoading);
+      const delaeydColumns = this.columns.find((c) => c.delayLoading);
 
       return !!delaeydColumns;
     },
@@ -683,7 +683,7 @@ export default {
         return;
       }
 
-      const delayedColumns = this.$refs.column.filter(c => c.startDelayedLoading && !c.__delayedLoading);
+      const delayedColumns = this.$refs.column.filter((c) => c.startDelayedLoading && !c.__delayedLoading);
       // We add 100 pixels here - so we will render the delayed columns for a few extra rows below what is visible
       // This way if you scroll slowly, you won't see the columns being loaded
       const clientHeight = (window.innerHeight || document.documentElement.clientHeight) + 100;
@@ -718,7 +718,7 @@ export default {
       }
 
       const clientHeight = window.innerHeight || document.documentElement.clientHeight;
-      const liveColumns = this.$refs.column.filter(c => !!c.liveUpdate);
+      const liveColumns = this.$refs.column.filter((c) => !!c.liveUpdate);
       const now = day();
       let next = Number.MAX_SAFE_INTEGER;
 
@@ -805,7 +805,7 @@ export default {
         return false;
       }
 
-      const matchingResourceAction = resource.availableActions.find(a => a.action === this.actionOfInterest.action);
+      const matchingResourceAction = resource.availableActions.find((a) => a.action === this.actionOfInterest.action);
 
       return matchingResourceAction?.enabled;
     },
@@ -903,7 +903,10 @@ export default {
 </script>
 
 <template>
-  <div ref="container">
+  <div
+    ref="container"
+    data-testid="cluster-list-container"
+  >
     <div
       :class="{'titled': $slots.title && $slots.title.length}"
       class="sortable-table-header"
@@ -1001,6 +1004,7 @@ export default {
         <div
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || ($slots['header-right'] && $slots['header-right'].length)"
           class="search row"
+          data-testid="search-box-filter-row"
         >
           <ul
             v-if="hasAdvancedFiltering"

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>