@rancher/shell 0.3.4 → 0.3.6

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

@@ -35,6 +35,18 @@ export default {
       default: false,
     },
 
+    // whether or not to show add rule button at bottom
+    showAddButton: {
+      type:    Boolean,
+      default: true
+    },
+
+    // whether or not to show remove rule button right side of the rule
+    showRemoveButton: {
+      type:    Boolean,
+      default: true
+    },
+
     // whether or not to show remove button in upper right
     showRemove: {
       type:    Boolean,
@@ -257,7 +269,10 @@ export default {
           @input="update"
         >
       </div>
-      <div class="remove-container">
+      <div
+        v-if="showRemoveButton"
+        class="remove-container"
+      >
         <button
           v-if="!isView"
           type="button"
@@ -272,7 +287,7 @@ export default {
       </div>
     </div>
     <div
-      v-if="!isView"
+      v-if="!isView && showAddButton"
       class="mt-20"
     >
       <button
@@ -319,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

@@ -20,7 +20,7 @@ export function normalizeName(str) {
 }
 
 export default {
-  name:       'NameNsDescripiton',
+  name:       'NameNsDescription',
   components: {
     LabeledInput,
     LabeledSelect
@@ -169,7 +169,7 @@ export default {
     if (this.nameKey) {
       name = get(v, this.nameKey);
     } else {
-      name = metadata.name;
+      name = metadata?.name;
     }
 
     if (this.namespaced) {
@@ -209,7 +209,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['currentProduct', 'currentCluster']),
+    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -220,36 +220,18 @@ export default {
       return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
     },
 
-    namespaces() {
-      const currentStore = this.$store.getters['currentStore'](this.namespaceType);
-      const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
-
-      const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
-        // By default, include the namespace in the dropdown.
-        let out = true;
-
-        if (this.currentProduct?.hideSystemResources) {
-          // Filter out the namespace
-          // if it is a system namespace or if it is managed by
-          // Fleet.
-          out = !namespace.isSystem && !namespace.isFleetManaged;
-        }
-
-        if (this.mode === _CREATE) {
-          out = out && !!namespace.links.update;
-        }
-
-        return out;
-      }));
-
-      const withLabels = filtered.map(this.namespaceMapper || ((obj) => {
-        return {
+    /**
+     * Map namespaces from the store to options, adding divider and create button
+     */
+    options() {
+      const options = Object.keys(this.isCreate ? this.allowedNamespaces() : this.namespaces())
+        .map(namespace => ({ nameDisplay: namespace, id: namespace }))
+        .map(this.namespaceMapper || (obj => ({
           label: obj.nameDisplay,
           value: obj.id,
-        };
-      }));
+        })));
 
-      const sortedByLabel = sortBy(withLabels, 'label');
+      const sortedByLabel = sortBy(options, 'label');
 
       if (this.forceNamespace) {
         sortedByLabel.unshift({
@@ -258,29 +240,33 @@ export default {
         });
       }
 
-      const out = [];
-
-      if (this.canCreateNamespace) {
-        out.push({
-          label: this.t('namespace.createNamespace'),
-          value: '',
-          kind:  'highlighted'
-        });
-      }
-      out.push({
+      const createButton = {
+        label: this.t('namespace.createNamespace'),
+        value: '',
+        kind:  'highlighted'
+      };
+      const divider = {
         label:    'divider',
         disabled: true,
         kind:     'divider'
-      },
-      ...sortedByLabel);
+      };
 
-      return out;
+      const createOverhead = this.canCreateNamespace ? [createButton, divider] : [];
+
+      return [
+        ...createOverhead,
+        ...sortedByLabel
+      ];
     },
 
     isView() {
       return this.mode === _VIEW;
     },
 
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+
     colSpan() {
       if (!this.horizontal) {
         return `span-8`;
@@ -296,7 +282,7 @@ export default {
 
     canCreateNamespace() {
       // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
-      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster.canUpdate;
+      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster?.canUpdate;
     }
   },
 
@@ -344,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) {
@@ -418,7 +404,7 @@ export default {
         v-show="!createNamespace"
         v-model="namespace"
         :clearable="true"
-        :options="namespaces"
+        :options="options"
         :disabled="namespaceReallyDisabled"
         :searchable="true"
         :mode="mode"

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/ResourceSelector.vue

@@ -124,7 +124,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
-          <span v-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
+          <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>
       </div>
     </div>

package/components/form/SecretSelector.vue

@@ -55,6 +55,10 @@ export default {
     mode: {
       type:    String,
       default: _EDIT
+    },
+    inStore: {
+      type:    String,
+      default: 'cluster',
     }
   },
 
@@ -86,7 +90,7 @@ export default {
       }
     },
     secrets() {
-      const allSecrets = this.$store.getters['cluster/all'](SECRET);
+      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
       return allSecrets
         .filter(secret => this.types.includes(secret._type) && secret.namespace === this.namespace);

package/components/form/ServiceNameSelect.vue

@@ -154,8 +154,8 @@ export default {
     <template v-if="serviceNameNew">
       <div class="row span-6">
         <Banner
+          v-clean-html="t('workload.serviceAccountName.createMessage', { name: serviceName }) "
           color="info"
-          v-html="t('workload.serviceAccountName.createMessage', { name: serviceName }) "
         />
       </div>
     </template>

package/components/form/SimpleSecretSelector.vue

@@ -107,18 +107,18 @@ export default {
   },
 
   methods: {
-    updateSecretName(value) {
-      if (value === this.none) {
+    updateSecretName(e) {
+      if (e.value === this.none) {
         // The key should appear blank if the secret name is cleared
         this.key = '';
       }
-      if (value) {
-        this.$emit('updateSecretName', value);
+      if (e.value) {
+        this.$emit('updateSecretName', e.value);
       }
     },
-    updateSecretKey(value) {
-      if (value) {
-        this.$emit('updateSecretKey', value);
+    updateSecretKey(e) {
+      if (e.value) {
+        this.$emit('updateSecretKey', e.value);
       }
     }
   }
@@ -135,7 +135,7 @@ export default {
         :options="secretNames"
         :label="secretNameLabel"
         :mode="mode"
-        @selecting="updateSecretName(name)"
+        @selecting="updateSecretName"
       />
       <LabeledSelect
         v-model="key"
@@ -144,7 +144,7 @@ export default {
         :options="keys"
         :label="keyNameLabel"
         :mode="mode"
-        @selecting="updateSecretKey(key)"
+        @selecting="updateSecretKey"
       />
     </div>
   </div>

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;