@rancher/shell 0.2.5 → 0.3.0

package/components/__tests__/SimpleBox.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import SimpleBox from '@shell/components/SimpleBox.vue';
+
+describe('component: SimpleBox.vue', () => {
+  const wrapper = mount(SimpleBox, { propsData: { title: 'Simple box title' } });
+
+  it('show title', () => {
+    const title = wrapper.find(`[data-testid="simple-box-title"]`);
+
+    expect(title.element).toBeDefined();
+  });
+
+  it('show close button', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    expect(closeButton.element).toBeDefined();
+  });
+
+  it('close emit', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+});

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]);
@@ -604,12 +605,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 +620,21 @@ 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 class="text-label">{{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.apiGroups') }}
                     <span
                       v-if="isNamespaced"
                       class="required"
                     >*</span>
-                  </label>
+                  </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 +666,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)"
-                  />
+                  >
                 </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)"
-                  />
+                  >
                 </div>
               </div>
             </template>
@@ -736,6 +737,7 @@ export default {
   ::v-deep {
     .column-headers {
       margin-right: 75px;
+      margin-bottom: 5px;
     }
 
     .box {

package/components/auth/SelectPrincipal.vue

@@ -218,3 +218,12 @@ export default {
     }
   }
 </style>
+<style lang="scss">
+  .vs__dropdown-menu {
+    width: 0%;
+    * {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</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;

package/components/form/ArrayListGrouped.vue

@@ -31,7 +31,7 @@ export default {
     },
   },
 
-  computed:   {
+  computed: {
     isView() {
       return this.mode === _VIEW;
     }

package/components/form/ArrayListSelect.vue

@@ -10,8 +10,8 @@ export default {
       required: true
     },
     options: {
-      default:   null,
-      type:      Array
+      default: null,
+      type:    Array
     },
     selectProps: {
       type:    Object,
@@ -26,7 +26,7 @@ export default {
       default: false
     }
   },
-  computed:   {
+  computed: {
     filteredOptions() {
       return this.options
         .filter(option => !this.value.includes(option.value));

package/components/form/BannerSettings.vue

@@ -81,16 +81,16 @@ export default ({
     textDecorationOptions() {
       const options = [
         {
-          style:  'fontWeight',
-          label:  this.t('banner.bannerDecoration.bannerBold')
+          style: 'fontWeight',
+          label: this.t('banner.bannerDecoration.bannerBold')
         },
         {
-          style:  'fontStyle',
-          label:  this.t('banner.bannerDecoration.bannerItalic')
+          style: 'fontStyle',
+          label: this.t('banner.bannerDecoration.bannerItalic')
         },
         {
-          style:  'textDecoration',
-          label:  this.t('banner.bannerDecoration.bannerUnderline')
+          style: 'textDecoration',
+          label: this.t('banner.bannerDecoration.bannerUnderline')
         }
       ];
 

package/components/form/ChangePassword.vue

@@ -53,7 +53,7 @@ export default {
       },
     };
   },
-  computed:   {
+  computed: {
     ...mapGetters({ t: 'i18n/t' }),
 
     isRandomGenerated: {
@@ -242,7 +242,7 @@ export default {
         type:       NORMAN.USER,
         actionName: 'setpassword',
         resource:   user,
-        body:          { newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP },
+        body:       { newPassword: this.isRandomGenerated ? this.form.genP : this.form.newP },
       });
     },
 
@@ -251,7 +251,7 @@ export default {
         await this.$store.dispatch('rancher/collectionAction', {
           type:       NORMAN.USER,
           actionName: 'changepassword',
-          body:          {
+          body:       {
             currentPassword: this.form.currentP,
             newPassword:     this.isRandomGenerated ? this.form.genP : this.form.newP
           },

package/components/form/Error.vue

@@ -12,8 +12,8 @@ export default Vue.extend<any, any, any, any>({
       type:    [String, Object, Number, Array]
     },
     rules: {
-      default:   () => [],
-      type:       Array as PropType<Rule[]>,
+      default: () => [],
+      type:    Array as PropType<Rule[]>,
     },
     asBanner: {
       default: false,

package/components/form/FileSelector.vue

@@ -47,17 +47,17 @@ export default {
 
     readAsDataUrl: {
       type:    Boolean,
-      default:    false
+      default: false
     },
 
     directory: {
       type:    Boolean,
-      default:    false
+      default: false
     },
 
     rawData: {
       type:    Boolean,
-      default:    false
+      default: false
     }
   },
 

package/components/form/Footer.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
     },
 
     disableSave: {
-      type:     Boolean,
+      type:    Boolean,
       default: false,
     }
   },

package/components/form/GithubPicker.vue

@@ -38,9 +38,9 @@ export default {
 
   data() {
     return {
-      repos:       [],
-      branches:    [],
-      files:       [],
+      repos:    [],
+      branches: [],
+      files:    [],
 
       loadingRecentRepos: true,
       loadingBranches:    true,
@@ -52,7 +52,7 @@ export default {
     };
   },
 
-  computed:   {
+  computed: {
     ...mapState({
       scopes:      state => state.github.scopes,
       recentRepos: state => state.github.repos,

package/components/form/KeyValue.vue

@@ -21,11 +21,11 @@ export default {
   },
   props: {
     value: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: null,
     },
     defaultValue: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: null,
     },
     // If the user supplies this array, then it indicates which keys should be shown as binary

package/components/form/MatchExpressions.vue

@@ -13,7 +13,7 @@ export default {
     // Array of actual match expressions
     // or k8s selector Object of {matchExpressions, matchLabels}
     value: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: () => []
     },
 

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -55,22 +55,22 @@ export default {
       customPermissions: [
         {
           label: this.t('members.clusterPermissions.createProjects'),
-          key:      'projects-create',
+          key:   'projects-create',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterBackups'),
-          key:      'backups-manage',
+          key:   'backups-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterCatalogs'),
-          key:      'clustercatalogs-manage',
+          key:   'clustercatalogs-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageClusterMembers'),
-          key:      'clusterroletemplatebindings-manage',
+          key:   'clusterroletemplatebindings-manage',
           value: false
         },
         {
@@ -80,38 +80,38 @@ export default {
         },
         {
           label: this.t('members.clusterPermissions.manageNodes'),
-          key:      'nodes-manage',
+          key:   'nodes-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.manageStorage'),
-          key:      'storage-manage',
+          key:   'storage-manage',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewAllProjects'),
-          key:      'projects-view',
+          key:   'projects-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewClusterCatalogs'),
-          key:      'clustercatalogs-view',
+          key:   'clustercatalogs-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewClusterMembers'),
-          key:      'clusterroletemplatebindings-view',
+          key:   'clusterroletemplatebindings-view',
           value: false
         },
         {
           label: this.t('members.clusterPermissions.viewNodes'),
-          key:      'nodes-view',
+          key:   'nodes-view',
           value: false
         }
       ],
       permissionGroup: 'member',
       custom:          {},
-      roleTemplates:     [],
+      roleTemplates:   [],
       principalId:     '',
       bindings:        []
     };

package/components/form/Members/MembershipEditor.vue

@@ -45,8 +45,8 @@ export default {
     },
 
     defaultBindingHandler: {
-      type:     Function,
-      default:  null,
+      type:    Function,
+      default: null,
     },
 
     modalSticky: {

package/components/form/NodeAffinity.vue

@@ -14,7 +14,7 @@ export default {
     ArrayListGrouped, MatchExpressions, LabeledSelect
   },
 
-  props:      {
+  props: {
     // value should be NodeAffinity or VolumeNodeAffinity
     value: {
       type:    Object,

package/components/form/Password.vue

@@ -20,11 +20,11 @@ export default {
     },
     name: {
       default: '',
-      type:     String
+      type:    String
     },
     autocomplete: {
-      type:      String,
-      default:   ''
+      type:    String,
+      default: ''
     },
     required: {
       default: false,

package/components/form/PodAffinity.vue

@@ -17,7 +17,7 @@ export default {
     ArrayListGrouped, MatchExpressions, LabeledSelect, RadioGroup, LabeledInput
   },
 
-  props:      {
+  props: {
     // pod template spec
     value: {
       type:    Object,

package/components/form/ProjectMemberEditor.vue

@@ -147,7 +147,7 @@ export default {
         },
       ],
       projects:      [],
-      roleTemplates:     [],
+      roleTemplates: [],
     };
   },
   computed: {