@rancher/shell 0.3.5 → 0.3.6

package/components/SortableTable/selection.js

@@ -1,7 +1,7 @@
-import $ from 'jquery';
 import { isMore, isRange, suppressContextMenu, isAlternate } from '@shell/utils/platform';
 import { get } from '@shell/utils/object';
 import { filterBy } from '@shell/utils/array';
+import { getParent } from '@shell/utils/dom';
 
 export const ALL = 'all';
 export const SOME = 'some';
@@ -9,23 +9,23 @@ export const NONE = 'none';
 
 export default {
   mounted() {
-    const $table = $('> TABLE', this.$el);
+    const table = this.$el.querySelector('TABLE');
 
     this._onRowClickBound = this.onRowClick.bind(this);
     this._onRowMousedownBound = this.onRowMousedown.bind(this);
     this._onRowContextBound = this.onRowContext.bind(this);
 
-    $table.on('click', '> TBODY > TR', this._onRowClickBound);
-    $table.on('mousedown', '> TBODY > TR', this._onRowMousedownBound);
-    $table.on('contextmenu', '> TBODY > TR', this._onRowContextBound);
+    table.addEventListener('click', this._onRowClickBound);
+    table.addEventListener('mousedown', this._onRowMousedownBound);
+    table.addEventListener('contextmenu', this._onRowContextBound);
   },
 
   beforeDestroy() {
-    const $table = $('> TABLE', this.$el);
+    const table = this.$el.querySelector('TABLE');
 
-    $table.off('click', '> TBODY > TR', this._onRowClickBound);
-    $table.off('mousedown', '> TBODY > TR', this._onRowMousedownBound);
-    $table.off('contextmenu', '> TBODY > TR', this._onRowContextBound);
+    table.removeEventListener('click', this._onRowClickBound);
+    table.removeEventListener('mousedown', this._onRowMousedownBound);
+    table.removeEventListener('contextmenu', this._onRowContextBound);
   },
 
   computed: {
@@ -156,31 +156,31 @@ export default {
     },
 
     onRowMouseEnter(e) {
-      const tr = $(e.target).closest('TR');
+      const tr = e.target.closest('TR');
 
-      if (tr.hasClass('sub-row')) {
-        const trMainRow = tr.prev('TR');
+      if (tr.classList.contains('sub-row')) {
+        const trMainRow = tr.previousElementSibling;
 
-        trMainRow.toggleClass('sub-row-hovered', true);
+        trMainRow.classList.add('sub-row-hovered');
       }
     },
 
     onRowMouseLeave(e) {
-      const tr = $(e.target).closest('TR');
+      const tr = e.target.closest('TR');
 
-      if (tr.hasClass('sub-row')) {
-        const trMainRow = tr.prev('TR');
+      if (tr.classList.contains('sub-row')) {
+        const trMainRow = tr.previousElementSibling;
 
-        trMainRow.toggleClass('sub-row-hovered', false);
+        trMainRow.classList.remove('sub-row-hovered');
       }
     },
 
     nodeForEvent(e) {
       const tagName = e.target.tagName;
-      const tgt = $(e.target);
-      const actionElement = tgt.closest('.actions')[0];
+      const tgt = e.target;
+      const actionElement = tgt.closest('.actions');
 
-      if ( tgt.hasClass('select-all-check') ) {
+      if ( tgt.classList.contains('select-all-check') ) {
         return;
       }
 
@@ -188,31 +188,31 @@ export default {
         if (
           tagName === 'A' ||
           tagName === 'BUTTON' ||
-          tgt.parents('.btn').length
+          getParent(tgt, '.btn')
         ) {
           return;
         }
       }
 
-      const tgtRow = $(e.currentTarget);
+      const tgtRow = e.target.closest('TR');
 
       return this.nodeForRow(tgtRow);
     },
 
     nodeForRow(tgtRow) {
-      if ( tgtRow?.hasClass('separator-row') ) {
+      if ( tgtRow?.classList.contains('separator-row') ) {
         return;
       }
 
-      while ( tgtRow && tgtRow.length && !tgtRow.hasClass('main-row') ) {
-        tgtRow = tgtRow.prev();
+      while ( tgtRow && !tgtRow.classList.contains('main-row') ) {
+        tgtRow = tgtRow.previousElementSibling;
       }
 
-      if ( !tgtRow || !tgtRow.length ) {
+      if ( !tgtRow ) {
         return;
       }
 
-      const nodeId = tgtRow.data('node-id');
+      const nodeId = tgtRow.dataset.nodeId;
 
       if ( !nodeId ) {
         return;
@@ -225,15 +225,15 @@ export default {
 
     async onRowClick(e) {
       const node = this.nodeForEvent(e);
-      const td = $(e.target).closest('TD');
-      const skipSelect = td.hasClass('skip-select');
+      const td = e.target.closest('TD');
+      const skipSelect = td?.classList.contains('skip-select');
 
       if (skipSelect) {
         return;
       }
       const selection = this.selectedRows;
-      const isCheckbox = this.isSelectionCheckbox(e.target) || td.hasClass('row-check');
-      const isExpand = td.hasClass('row-expand');
+      const isCheckbox = this.isSelectionCheckbox(e.target) || td?.classList.contains('row-check');
+      const isExpand = td?.classList.contains('row-expand');
       const content = this.pagedRows;
 
       this.$emit('rowClick', e);
@@ -248,28 +248,30 @@ export default {
         return;
       }
 
-      const actionElement = $(e.target).closest('.actions')[0];
+      const actionElement = e.target.closest('.actions');
 
       if ( actionElement ) {
         let resources = [node];
 
         if ( this.mangleActionResources ) {
-          const i = $('i', actionElement);
+          const i = actionElement.querySelector('i');
 
-          i.removeClass('icon-actions');
-          i.addClass(['icon-spinner', 'icon-spin']);
+          i.classList.remove('icon-actions');
+          i.classList.add('icon-spinner');
+          i.classList.add('icon-spin');
 
           try {
             resources = await this.mangleActionResources(resources);
           } finally {
-            i.removeClass(['icon-spinner', 'icon-spin']);
-            i.addClass('icon-actions');
+            i.classList.remove('icon-spinner');
+            i.classList.remove('icon-spin');
+            i.classList.add('icon-actions');
           }
         }
 
         this.$store.commit(`action-menu/show`, {
           resources,
-          event: e.originalEvent || e, // Handle jQuery event and raw event
+          event: e,
           elem:  actionElement
         });
 
@@ -332,7 +334,7 @@ export default {
 
       this.$store.commit(`action-menu/show`, {
         resources,
-        event: e.originalEvent,
+        event: e,
       });
     },
 
@@ -356,7 +358,7 @@ export default {
     isSelectionCheckbox(element) {
       return element.tagName === 'INPUT' &&
         element.type === 'checkbox' &&
-        ($(element).closest('.selection-checkbox').length > 0);
+        element.closest('.selection-checkbox') !== null;
     },
 
     nodesBetween(a, b) {
@@ -445,7 +447,9 @@ export default {
         }
       });
 
-      this.selectedRows.push(...toAdd);
+      if ( toAdd ) {
+        this.selectedRows.push(...toAdd);
+      }
 
       // Uncheck and check the checkboxes of nodes that have been added/removed
       if (toRemove.length) {
@@ -474,20 +478,24 @@ export default {
 
       if ( id ) {
         // Note: This is looking for the checkbox control for the row
-        const input = $(`div[data-checkbox-ctrl][data-node-id="${ id }"]`);
+        const input = this.$el.querySelector(`div[data-checkbox-ctrl][data-node-id="${ id }"]`);
 
-        if ( input && input.length && !input[0].disabled ) {
-          const label = $(input[0]).find('label');
+        if ( input && !input.disabled ) {
+          const label = input.querySelector('label');
 
           if (label) {
-            label.prop('value', on);
+            label.value = on;
           }
           let tr = input.closest('tr');
           let first = true;
 
-          while ( tr && (first || tr.hasClass('sub-row') ) ) {
-            tr.toggleClass('row-selected', on);
-            tr = tr.next();
+          while ( tr && (first || tr.classList.contains('sub-row') ) ) {
+            if (on) {
+              tr.classList.add('row-selected');
+            } else {
+              tr.classList.remove('row-selected');
+            }
+            tr = tr.nextElementSibling;
             first = false;
           }
         }
@@ -497,9 +505,9 @@ export default {
     select(nodes) {
       nodes.forEach((node) => {
         const id = get(node, this.keyField);
-        const input = $(`label[data-node-id="${ id }"]`);
+        const input = this.$el.querySelector(`label[data-node-id="${ id }"]`);
 
-        input.trigger('click');
+        input.dispatchEvent(new Event('click'));
       });
     },
 

package/components/Wizard.vue

@@ -468,6 +468,9 @@ $spacer: 10px;
   flex-direction: column;
   flex: 1;
   padding: 0;
+  height: 100%;
+  position: relative;
+  justify-content: flex-start;
 }
 
 .header {
@@ -643,9 +646,8 @@ $spacer: 10px;
   flex-direction: column;
 
   &__step {
-    display: flex;
-    flex-direction: column;
     flex: 1;
+    overflow: auto;
   }
 }
 

package/components/auth/RoleDetailEdit.vue

@@ -648,7 +648,7 @@ export default {
               </div>
             </template>
             <template #columns="props">
-              <div class="columns row">
+              <div class="columns row mr-20">
                 <div :class="ruleClass">
                   <Select
                     :value="props.row.value.verbs"
@@ -713,7 +713,7 @@ export default {
             :mode="mode"
           >
             <template #columns="props">
-              <div class="columns row">
+              <div class="columns row mr-20">
                 <div class="col span-12">
                   <Select
                     v-model="props.row.value"

package/components/form/HookOption.vue

@@ -202,16 +202,17 @@ export default {
             :mode="mode"
           />
         </template>
-
-        <button
-          v-if="!isView"
-          type="button"
-          class="btn role-link"
-          :disabled="mode==='view'"
-          @click.stop="removeHeader(index)"
-        >
-          <t k="generic.remove" />
-        </button>
+        <div class="remove">
+          <button
+            v-if="!isView"
+            type="button"
+            class="btn role-link ml0"
+            :disabled="mode==='view'"
+            @click.stop="removeHeader(index)"
+          >
+            <t k="generic.remove" />
+          </button>
+        </div>
       </div>
 
       <div>
@@ -244,5 +245,8 @@ export default {
   .labeled-select {
     min-height: $input-height;
   }
+  .remove BUTTON {
+    padding: 0px;
+  }
 }
 </style>

package/components/form/Labels.vue

@@ -58,38 +58,43 @@ export default {
       return `${ this.displaySideBySide ? 'col span-6' : 'row' } ${ this.defaultSectionClass }`.trim();
     },
 
+    columnsClass() {
+      return `${ this.displaySideBySide ? 'col span-6' : 'row' }`.trim();
+    }
   }
 };
 </script>
 <template>
   <div :class="containerClass">
-    <div class="labels">
-      <div class="labels__header">
-        <h3>
-          <t k="labels.labels.title" />
-        </h3>
-        <ToggleSwitch
-          v-if="value.hasSystemLabels"
-          v-model="toggler"
-          name="label-system-toggle"
-          :on-label="t('labels.labels.show')"
-        />
-      </div>
-      <p class="mt-10 mb-10">
-        <t k="labels.labels.description" />
-      </p>
-      <div :class="sectionClass">
-        <KeyValue
-          key="labels"
-          :value="value.labels"
-          :protected-keys="value.systemLabels || []"
-          :toggle-filter="toggler"
-          :add-label="t('labels.addLabel')"
-          :mode="mode"
-          :read-allowed="false"
-          :value-can-be-empty="true"
-          @input="value.setLabels($event)"
-        />
+    <div :class="defaultSectionClass">
+      <div class="labels">
+        <div class="labels__header">
+          <h3>
+            <t k="labels.labels.title" />
+          </h3>
+          <ToggleSwitch
+            v-if="value.hasSystemLabels"
+            v-model="toggler"
+            name="label-system-toggle"
+            :on-label="t('labels.labels.show')"
+          />
+        </div>
+        <p class="mt-10 mb-10">
+          <t k="labels.labels.description" />
+        </p>
+        <div :class="columnsClass">
+          <KeyValue
+            key="labels"
+            :value="value.labels"
+            :protected-keys="value.systemLabels || []"
+            :toggle-filter="toggler"
+            :add-label="t('labels.addLabel')"
+            :mode="mode"
+            :read-allowed="false"
+            :value-can-be-empty="true"
+            @input="value.setLabels($event)"
+          />
+        </div>
       </div>
     </div>
     <div class="spacer" />

package/components/form/MatchExpressions.vue

@@ -334,14 +334,14 @@ export default {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     margin: 5px 0;
-    grid-gap: 10px;
+    grid-gap: $column-gutter;
 
     & > LABEL {
       margin: 0;
     }
 
     &:not(.view){
-      grid-template-columns: 1fr 1fr 1fr 100px;
+      grid-template-columns: repeat(3, 1fr) 50px;
     }
   }
 </style>

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -175,7 +175,20 @@ export default {
         opt:  { url: `/v3/principals/${ principalId }` }
       }, { root: true });
     },
+    customPermissionsUpdate() {
+      return this.customPermissions.reduce((acc, customPermissionsItem) => {
+        const lockedExist = this.roleTemplates.find(roleTemplateItem => roleTemplateItem.displayName === customPermissionsItem.label);
+
+        if (lockedExist.locked) {
+          customPermissionsItem['locked'] = true;
+          customPermissionsItem['tooltip'] = this.t('members.clusterPermissions.custom.lockedRole');
+        }
+
+        return [...acc, customPermissionsItem];
+      }, []);
+    }
   },
+
   watch: {
     roleTemplateIds() {
       this.updateBindings();
@@ -208,7 +221,7 @@ export default {
         this.$emit('input', bindings);
       }
     }
-  }
+  },
 };
 </script>
 <template>
@@ -253,13 +266,22 @@ export default {
           class="custom-permissions ml-20 mt-10"
           :class="{'two-column': useTwoColumnsForCustom}"
         >
-          <Checkbox
-            v-for="permission in customPermissions"
+          <div
+            v-for="permission in customPermissionsUpdate"
             :key="permission.key"
-            v-model="permission.value"
-            class="mb-5"
-            :label="permission.label"
-          />
+          >
+            <Checkbox
+              v-model="permission.value"
+              :disabled="permission.locked"
+              class="mb-5"
+              :label="permission.label"
+            />
+            <i
+              v-if="permission.locked"
+              v-tooltip="permission.tooltip"
+              class="icon icon-lock icon-fw"
+            />
+          </div>
         </div>
       </template>
     </Card>
@@ -282,5 +304,8 @@ label.radio {
   &.two-column {
     grid-template-columns: 1fr 1fr;
   }
+  ::v-deep .checkbox-label {
+    margin-right: 0;
+  }
 }
 </style>

package/components/form/NameNsDescription.vue

@@ -330,7 +330,7 @@ export default {
       }
 
       if (this.namespaced) {
-        this.$emit('isNamespaceNew', !val || (this.namespaces && !this.namespaces.find(n => n.value === val)));
+        this.$emit('isNamespaceNew', !val || (this.options && !this.options.find(n => n.value === val)));
       }
 
       if (this.namespaceKey) {

package/components/form/ProjectMemberEditor.vue

@@ -188,6 +188,18 @@ export default {
           value:       'custom'
         }
       ];
+    },
+    customPermissionsUpdate() {
+      return this.customPermissions.reduce((acc, customPermissionsItem) => {
+        const lockedExist = this.roleTemplates.find(roleTemplateItem => roleTemplateItem.displayName === customPermissionsItem.label);
+
+        if (lockedExist.locked) {
+          customPermissionsItem['locked'] = true;
+          customPermissionsItem['tooltip'] = this.t('members.clusterPermissions.custom.lockedRole');
+        }
+
+        return [...acc, customPermissionsItem];
+      }, []);
     }
   },
   watch: {
@@ -244,19 +256,19 @@ export default {
   <div v-else>
     <div class="row mt-10">
       <div class="col span-12">
-        <SelectPrincipal
-          project
-          class="mb-20"
-          :mode="mode"
-          :retain-selection="true"
-          @add="onAdd"
+        <SelectPrincipal
+          project
+          class="mb-20"
+          :mode="mode"
+          :retain-selection="true"
+          @add="onAdd"
         />
       </div>
     </div>
-    <Card
-      class="m-0"
-      :show-highlight-border="false"
-      :show-actions="false"
+    <Card
+      class="m-0"
+      :show-highlight-border="false"
+      :show-actions="false"
     >
       <template v-slot:title>
         <div class="type-title">
@@ -272,18 +284,27 @@ export default {
           :options="options"
           name="permission-group"
         />
-        <div
-          v-if="value.permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
+        <div
+          v-if="value.permissionGroup === 'custom'"
+          class="custom-permissions ml-20 mt-10"
+          :class="{'two-column': useTwoColumnsForCustom}"
         >
-          <Checkbox
-            v-for="permission in customPermissions"
-            :key="permission.key"
-            v-model="permission.value"
-            class="mb-5"
-            :label="permission.label"
-          />
+          <div
+            v-for="permission in customPermissionsUpdate"
+            :key="permission.key"
+          >
+            <Checkbox
+              v-model="permission.value"
+              :disabled="permission.locked"
+              class="mb-5"
+              :label="permission.label"
+            />
+            <i
+              v-if="permission.locked"
+              v-tooltip="permission.tooltip"
+              class="icon icon-lock icon-fw"
+            />
+          </div>
         </div>
       </template>
     </Card>
@@ -306,5 +327,9 @@ label.radio {
   &.two-column {
     grid-template-columns: 1fr 1fr;
   }
+
+  ::v-deep .checkbox-label {
+    margin-right: 0;
+  }
 }
 </style>

package/components/form/Tolerations.vue

@@ -198,7 +198,7 @@ export default {
           suffix="Seconds"
         />
       </div>
-      <div class="col">
+      <div class="col remove">
         <button
           v-if="!isView"
           type="button"
@@ -244,4 +244,7 @@ export default {
   color: var(--input-label);
   margin-bottom: 10px;
 }
+.remove BUTTON {
+  padding: 0px;
+}
 </style>

package/components/form/ValueFromResource.vue

@@ -359,15 +359,16 @@ export default {
         />
       </div>
     </template>
-
-    <button
-      v-if="!isView"
-      type="button"
-      class="btn btn-sm role-link"
-      @click.stop="$emit('remove')"
-    >
-      {{ t('generic.remove') }}
-    </button>
+    <div class="remove">
+      <button
+        v-if="!isView"
+        type="button"
+        class="btn role-link"
+        @click.stop="$emit('remove')"
+      >
+        {{ t('generic.remove') }}
+      </button>
+    </div>
   </div>
 </template>
 
@@ -382,6 +383,10 @@ export default {
   .single-value {
     grid-column: span 2;
   }
+
+  .remove BUTTON {
+    padding: 0px;
+  }
 }
 
 </style>

package/components/form/WorkloadPorts.vue

@@ -276,7 +276,7 @@ export default {
         'show-ipam': showIpam,
       }"
     >
-      <div class="service-type col">
+      <div class="service-type">
         <LabeledSelect
           v-model="row._serviceType"
           :mode="mode"
@@ -444,7 +444,7 @@ $checkbox: 75;
 }
 .ports-headers, .ports-row{
   display: grid;
-  grid-template-columns: 20% 32% 145px 90px .5fr .5fr;
+  grid-template-columns: 28% 28% 15% 10% 75px 0.5fr;
   grid-column-gap: $column-gutter;
   margin-bottom: 10px;
   align-items: center;