@rancher/shell 0.2.5 → 0.3.1

package/components/auth/AuthBanner.vue

@@ -1,12 +1,12 @@
 
 <script>
 import { Banner } from '@components/Banner';
-import AsyncButton from '@shell/components/AsyncButton';
+import DisableAuthProviderModal from '@shell/components/DisableAuthProviderModal';
 
 export default {
   components: {
-    AsyncButton,
-    Banner
+    Banner,
+    DisableAuthProviderModal
   },
 
   props: {
@@ -32,6 +32,12 @@ export default {
       return Object.entries(this.table);
     }
   },
+
+  methods: {
+    showDisableModal() {
+      this.$refs.disableAuthProviderModal.show();
+    }
+  },
 };
 </script>
 
@@ -52,13 +58,13 @@ export default {
       >
         {{ t('action.edit') }}
       </button>
-      <AsyncButton
-        class="ml-10"
-        mode="disable"
-        size="sm"
-        action-color="bg-error"
-        @click="disable"
-      />
+      <button
+        type="button"
+        class="ml-10 btn-sm role-primary bg-error"
+        @click="showDisableModal"
+      >
+        {{ t('generic.disable') }}
+      </button>
     </Banner>
 
     <table
@@ -67,6 +73,10 @@ export default {
     >
       <slot name="rows" />
     </table>
+    <DisableAuthProviderModal
+      ref="disableAuthProviderModal"
+      @disable="disable"
+    />
   </div>
 </template>
 

package/components/auth/RoleDetailEdit.vue

@@ -4,14 +4,13 @@ import CruResource from '@shell/components/CruResource';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { RadioGroup } from '@components/Form/Radio';
 import Select from '@shell/components/form/Select';
-import { LabeledInput } from '@components/Form/LabeledInput';
 import ArrayList from '@shell/components/form/ArrayList';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { ucFirst } from '@shell/utils/string';
 import SortableTable from '@shell/components/SortableTable';
-import { _DETAIL } from '@shell/config/query-params';
+import { _CLONE, _DETAIL } from '@shell/config/query-params';
 import { SCOPED_RESOURCES } from '@shell/config/roles';
 
 import { SUBTYPE_MAPPING, VERBS } from '@shell/models/management.cattle.io.roletemplate';
@@ -52,7 +51,6 @@ export default {
   components: {
     ArrayList,
     CruResource,
-    LabeledInput,
     RadioGroup,
     Select,
     NameNsDescription,
@@ -89,6 +87,10 @@ export default {
       });
       this.templateOptions = Object.values(this.keyedTemplateOptions);
     }
+    if (this.realMode === _CLONE) {
+      this.value.displayName = '';
+      this.value.builtin = false;
+    }
   },
 
   data() {
@@ -112,7 +114,6 @@ export default {
 
   created() {
     this.$set(this.value, 'rules', this.value.rules || []);
-
     this.value.rules.forEach((rule) => {
       if (rule.verbs[0] === '*') {
         this.$set(rule, 'verbs', [...VERBS]);
@@ -379,28 +380,27 @@ export default {
       // - resourceNames
       // - resources
       // - verbs
-      const value = event.label ? event.label : event;
 
       switch (key) {
       case 'apiGroups':
 
-        if (value || (value === '')) {
-          this.$set(rule, 'apiGroups', [value]);
+        if (event || (event === '')) {
+          this.$set(rule, 'apiGroups', [event]);
         }
 
         break;
 
       case 'verbs':
 
-        if (value) {
-          this.$set(rule, 'verbs', [value]);
+        if (event) {
+          this.$set(rule, 'verbs', [event]);
         } else {
           this.$set(rule, 'verbs', []);
         }
         break;
 
       case 'resources':
-        if (event.resourceName) {
+        if (event?.resourceName) {
           // If we are updating the resources defined in a rule,
           // the event will be an object with the
           // properties apiGroupValue and resourceName.
@@ -408,7 +408,7 @@ export default {
           // Automatically fill in the API group of the
           // selected resource.
           this.$set(rule, 'apiGroups', [event.apiGroupValue]);
-        } else if (event.label) {
+        } else if (event?.label) {
           // When the user creates a new resource name in the resource
           // field instead of selecting an existing one,
           // we have to treat that differently because the incoming event
@@ -423,8 +423,8 @@ export default {
         break;
 
       case 'nonResourceURLs':
-        if (value) {
-          this.$set(rule, 'nonResourceURLs', [value]);
+        if (event) {
+          this.$set(rule, 'nonResourceURLs', [event]);
         } else {
           this.$set(rule, 'nonResourceURLs', []);
         }
@@ -446,6 +446,21 @@ export default {
       this.done();
     },
     async actuallySave(url) {
+      // Go through all of the grules and replace double quote apiGroups
+      // k8S documentation shows using empty rules as "" - we change this to empty string when used
+      this.value.rules?.forEach((rule) => {
+        if (rule.apiGroups) {
+          rule.apiGroups = rule.apiGroups.map((group) => {
+            // If the group is two double quotes ("") replace if with empty string
+            if (group.trim() === '\"\"') {
+              group = '';
+            }
+
+            return group;
+          });
+        }
+      });
+
       if ( this.isCreate ) {
         url = url || this.schema.linkFor('collection');
         await this.value.save({ url, redirectUnauthorized: false });
@@ -604,12 +619,12 @@ export default {
             <template #column-headers>
               <div class="column-headers row">
                 <div :class="ruleClass">
-                  <label class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.verbs') }}
+                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.verbs') }}
                     <span class="required">*</span>
-                  </label>
+                  </span>
                 </div>
                 <div :class="ruleClass">
-                  <label class="text-label">
+                  <span class="text-label">
                     {{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.resources') }}
                     <i
                       v-tooltip="t('rbac.roletemplate.tabs.grantResources.resourceOptionInfo')"
@@ -619,21 +634,16 @@ export default {
                       v-if="isNamespaced"
                       class="required"
                     >*</span>
-                  </label>
+                  </span>
                 </div>
                 <div :class="ruleClass">
-                  <label class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}
-                    <span
-                      v-if="isNamespaced"
-                      class="required"
-                    >*</span>
-                  </label>
+                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}</span>
                 </div>
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
                 >
-                  <label class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.nonResourceUrls') }}</label>
+                  <span class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.nonResourceUrls') }}</span>
                 </div>
               </div>
             </template>
@@ -665,23 +675,23 @@ export default {
                   />
                 </div>
                 <div :class="ruleClass">
-                  <LabeledInput
+                  <input
                     :value="getRule('apiGroups', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('apiGroups', props.row.value, $event)"
-                  />
+                    @input="setRule('apiGroups', props.row.value, $event.target.value)"
+                  >
                 </div>
                 <div
                   v-if="!isNamespaced"
                   :class="ruleClass"
                 >
-                  <LabeledInput
+                  <input
                     :value="getRule('nonResourceURLs', props.row.value)"
                     :disabled="isBuiltin"
                     :mode="mode"
-                    @input="setRule('nonResourceURLs', props.row.value, $event)"
-                  />
+                    @input="setRule('nonResourceURLs', props.row.value, $event.target.value)"
+                  >
                 </div>
               </div>
             </template>
@@ -736,6 +746,7 @@ export default {
   ::v-deep {
     .column-headers {
       margin-right: 75px;
+      margin-bottom: 5px;
     }
 
     .box {

package/components/auth/SelectPrincipal.vue

@@ -40,7 +40,7 @@ export default {
     project: {
       type:    Boolean,
       default: false
-    },
+    }
   },
 
   async fetch() {
@@ -54,10 +54,11 @@ export default {
 
   data() {
     return {
-      principals: null,
-      searchStr:  '',
-      options:    [],
-      newValue:   '',
+      principals:     null,
+      searchStr:      '',
+      options:        [],
+      newValue:       '',
+      tooltipContent: null,
     };
   },
 
@@ -94,6 +95,24 @@ export default {
   },
 
   methods: {
+    setTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      if (this.principals) {
+        const selected = this.principals.find(p => p.id === this.newValue);
+
+        this.tooltipContent = selected?.name;
+      } else {
+        this.tooltipContent = null;
+      }
+    },
+    resetTooltipContent() {
+      if (!this.retainSelection) {
+        return;
+      }
+      this.tooltipContent = null;
+    },
     add(id) {
       if (!id) {
         // Ignore attempts to select an invalid principal
@@ -156,6 +175,11 @@ export default {
   <LabeledSelect
     ref="labeled-select"
     v-model="newValue"
+    v-tooltip="{
+      content: tooltipContent,
+      placement: 'bottom',
+      classes: ['select-principal-tooltip']
+    }"
     :mode="mode"
     :label="label"
     :placeholder="placeholder"
@@ -166,6 +190,8 @@ export default {
     :class="{'retain-selection': retainSelection}"
     @input="add"
     @search="onSearch"
+    @on-open="resetTooltipContent()"
+    @on-close="setTooltipContent()"
   >
     <template v-slot:no-options="{ searching }">
       <template v-if="searching">
@@ -218,3 +244,17 @@ export default {
     }
   }
 </style>
+<style lang="scss">
+  .vs__dropdown-menu {
+    width: 0%;
+    * {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .select-principal-tooltip {
+    max-width: 580px;
+    word-wrap: break-word;
+  }
+</style>

package/components/auth/login/ldap.vue

@@ -34,6 +34,9 @@ export default {
         this.$router.replace('/');
       } catch (err) {
         this.err = err;
+
+        // emit error to parent so that it can displayed on the error Banner
+        this.$emit('error', err);
         buttonCb(false);
       }
     },

package/components/cards/ApplicationCard.vue

@@ -4,20 +4,25 @@ export default {};
 
 <template>
   <div class="application-card mt-20">
-    <div class="application-card-icon">
-      <!-- Image goes here -->
+    <div
+      class="application-card-icon"
+      data-testid="cardIcon-section"
+    >
       <slot name="cardIcon" />
     </div>
     <div class="application-card-details">
       <div class="application-card-details-top">
-        <div>
+        <div data-testid="top-left-section">
           <slot name="top-left" />
         </div>
-        <div>
+        <div data-testid="top-right-section">
           <slot name="top-right" />
         </div>
       </div>
-      <div class="application-card-details-bottom">
+      <div
+        class="application-card-details-bottom"
+        data-testid="resourcesCount-section"
+      >
         <slot name="resourcesCount" />
       </div>
     </div>

package/components/fleet/FleetBundleResources.vue

@@ -10,8 +10,8 @@ export default {
 
   props: {
     value: {
-      type:     Array,
-      default:  () => [],
+      type:    Array,
+      default: () => [],
     }
   },
 
@@ -35,12 +35,12 @@ export default {
     resourceHeaders() {
       return [
         {
-          name:          'state',
-          value:         'state',
-          label:         'State',
-          sort:          'stateSort',
-          formatter:     'BadgeStateFormatter',
-          width:         100,
+          name:      'state',
+          value:     'state',
+          label:     'State',
+          sort:      'stateSort',
+          formatter: 'BadgeStateFormatter',
+          width:     100,
         },
         {
           name:  'apiVersion',

package/components/fleet/FleetClusters.vue

@@ -37,19 +37,19 @@ export default {
         STATE,
         NAME,
         {
-          name:      'nodesReady',
-          labelKey:  'tableHeaders.nodesReady',
-          value:     'status.display.readyBundles',
-          sort:      'status.summary.ready',
-          search:    false,
+          name:     'nodesReady',
+          labelKey: 'tableHeaders.nodesReady',
+          value:    'status.display.readyBundles',
+          sort:     'status.summary.ready',
+          search:   false,
           align:    'center',
         },
         {
-          name:      'reposReady',
-          labelKey:  'tableHeaders.reposReady',
-          value:     'status.display.readyBundles',
-          sort:      'status.summary.ready',
-          search:    false,
+          name:     'reposReady',
+          labelKey: 'tableHeaders.reposReady',
+          value:    'status.display.readyBundles',
+          sort:     'status.summary.ready',
+          search:   false,
           align:    'center',
         },
         FLEET_SUMMARY,

package/components/fleet/FleetRepos.vue

@@ -76,11 +76,11 @@ export default {
           sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
         },
         {
-          name:      'clustersReady',
-          labelKey:  'tableHeaders.clustersReady',
-          value:     'status.readyClusters',
-          sort:      'status.readyClusters',
-          search:    false,
+          name:     'clustersReady',
+          labelKey: 'tableHeaders.clustersReady',
+          value:    'status.readyClusters',
+          sort:     'status.readyClusters',
+          search:   false,
         },
         FLEET_SUMMARY,
         AGE

package/components/fleet/FleetResources.vue

@@ -84,12 +84,12 @@ export default {
     resourceHeaders() {
       return [
         {
-          name:          'state',
-          value:         'state',
-          label:         'State',
-          sort:          'stateSort',
-          formatter:     'BadgeStateFormatter',
-          width:         100,
+          name:      'state',
+          value:     'state',
+          label:     'State',
+          sort:      'stateSort',
+          formatter: 'BadgeStateFormatter',
+          width:     100,
         },
         {
           name:  'cluster',

package/components/fleet/FleetSummary.vue

@@ -10,7 +10,7 @@ const getResourceDefaultState = (labelGetter, stateKey) => {
       color: STATES[STATES_ENUM.READY].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label )
     },
-    info:    {
+    info: {
       count: 0,
       color: STATES[STATES_ENUM.INFO].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label )
@@ -25,19 +25,19 @@ const getResourceDefaultState = (labelGetter, stateKey) => {
       color: STATES[STATES_ENUM.NOT_READY].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label )
     },
-    error:   {
+    error: {
       count: 0,
       color: STATES[STATES_ENUM.ERROR].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label )
 
     },
-    errapplied:   {
+    errapplied: {
       count: 0,
       color: STATES[STATES_ENUM.ERR_APPLIED].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label )
 
     },
-    waitapplied:   {
+    waitapplied: {
       count: 0,
       color: STATES[STATES_ENUM.WAIT_APPLIED].color,
       label: labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label )
@@ -62,7 +62,7 @@ export default {
       type:    Array,
       default: () => [],
     },
-    value:   {
+    value: {
       type:     Object,
       required: true,
     },

package/components/fleet/ResourcesSummary.vue

@@ -32,7 +32,7 @@ export default {
         obj[state] = {
           count: 0,
           color: state,
-          label:  this.$store.getters['i18n/withFallback'](`${ this.stateKey }.${ state }`, null, state)
+          label: this.$store.getters['i18n/withFallback'](`${ this.stateKey }.${ state }`, null, state)
         };
 
         return obj;