@rancher/shell 3.0.0-rc.7 → 3.0.0-rc.9

package/assets/styles/global/_tooltip.scss

@@ -15,10 +15,7 @@
   }
 
   .v-popper__arrow-container {
-    width: 0;
-    height: 0;
     border: 0 solid transparent;
-    position: absolute;
     z-index: 1;
 
     .v-popper__arrow-inner {
@@ -30,9 +27,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-bottom-width: 0;
         border-top-color: var(--tooltip-bg);
-        left: -$triangle-inner-size;
       }
     }
   }
@@ -42,9 +37,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-top-width: 0;
         border-bottom-color: var(--tooltip-bg);
-        left: -$triangle-inner-size;
         background: transparent;
       }
     }
@@ -55,8 +48,6 @@
 
       .v-popper__arrow-outer {
         border-right-color: var(--tooltip-bg);
-        top: -$triangle-inner-size;
-        border-left-width: 0;
       }
     }
   }
@@ -65,9 +56,7 @@
     .v-popper__arrow-container {
 
       .v-popper__arrow-outer {
-        border-right-width: 0;
         border-left-color: var(--tooltip-bg);
-        top: -$triangle-inner-size;
       }
     }
   }
@@ -173,4 +162,4 @@
 //icon tooltip
 .icon-info.v-popper--has-tooltip {
   font-size: 14px;
-}
+}

package/assets/translations/en-us.yaml

@@ -1822,6 +1822,13 @@ cluster:
         other { {pool_name}: The provided values for {fields} were not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
       }
   rkeTemplateUpgrade: Template revision {name} available for upgrade
+  cloudCredentials:
+    renew: Renew Cloud Credentials
+    expired: Cloud Credential expired, please Renew Cloud Credentials
+    expiring: Cloud Credential will expire on { expires }, please Renew Cloud Credentials
+    banners:
+      expiring: "{count} {count, plural, =1 { Cluster has a Cloud Credential that expires soon} other { Clusters have Cloud Credentials that expire soon}}, please Renew Cloud {count, plural, =1 { Credential} other { Credentials}}"
+      expired: "{count} {count, plural, =1 { Cluster has a Cloud Credential that has expired} other { Clusters have Cloud Credentials that have expired}}, please Renew Cloud {count, plural, =1 { Credential} other { Credentials}}"
 
   architecture:
     label:
@@ -5655,7 +5662,6 @@ tableHeaders:
   createdAt: Created At
   customVerbs: Custom Verbs
   description: Description
-  expires: Expires
   cpu: CPU
   currentReplicas: Current Replicas
   date: Date
@@ -5672,6 +5678,7 @@ tableHeaders:
   distinguisherMethod: Distinguisher Method
   effect: Effect
   endpoints: Endpoints
+  expires: Expires
   firstSeen: First Seen
   fleetBundleType: Type
   flow: Flow
@@ -7751,6 +7758,11 @@ volumeClaimTemplate:
 manager:
   cloudCredentials:
     label: Cloud Credentials
+    renew: Renew
+    expired: Expired
+    banners:
+      expiring: "{count} Cloud {count, plural, =1 { Credential expires soon} other { Credentials expire soon}}, please Renew"
+      expired: "{count} Cloud {count, plural, =1 { Credential has expired} other { Credentials have expired}}, please Renew"
   drivers:
     label: Drivers
   rkeTemplates:

package/components/CodeMirror.vue

@@ -292,11 +292,24 @@ export default {
     }
   }
 
-  .code-mirror .codemirror-container {
-    z-index: 0;
-    font-size: inherit !important;
+  .code-mirror {
+    position: relative;
+
+    .codemirror-container {
+      z-index: 0;
+      font-size: inherit !important;
+
+      //rm no longer extant selector
+      .CodeMirror {
+        height: initial;
+        background: none
+      }
+
+      .CodeMirror-gutters {
+        background: inherit;
+      }
+    }
 
-    // Keyboard mapping overlap
     .keymap.overlay {
       position: absolute;
       display: flex;
@@ -352,16 +365,6 @@ export default {
         }
       }
     }
-
-    //rm no longer extant selector
-    .CodeMirror {
-      height: initial;
-      background: none
-    }
-
-    .CodeMirror-gutters {
-      background: inherit;
-    }
-
   }
+
 </style>

package/components/PromptRemove.vue

@@ -105,8 +105,8 @@ export default {
         return null;
       }
 
-      if (this.toRemove[0].doneLocationRemove) {
-        return this.toRemove[0].doneLocationRemove;
+      if (this.toRemove[0].doneOverride) {
+        return this.toRemove[0].doneOverride;
       }
 
       const currentRoute = this.toRemove[0].currentRoute();

package/components/Questions/index.vue

@@ -45,9 +45,9 @@ export function componentForQuestion(q) {
 
   if ( knownTypes[type] ) {
     return type;
-  } else if ( type.startsWith('array[') ) { // This only really works for array[string|multiline], but close enough for now.
+  } else if ( type.startsWith('array') ) { // This only really works for array[string|multiline], but close enough for now.
     return ArrayType;
-  } else if ( type.startsWith('map[') ) { // Same, only works with map[string|multiline]
+  } else if ( type.startsWith('map') ) { // Same, only works with map[string|multiline]
     return MapType;
   } else if ( type.startsWith('reference[') ) { // Same, only works with map[string|multiline]
     return ReferenceType;

package/components/ResourceDetail/Masthead.vue

@@ -521,6 +521,7 @@ export default {
             <button
               v-if="isView"
               ref="actions"
+              data-testid="mathead-action-menu"
               aria-haspopup="true"
               type="button"
               class="btn role-multi-action actions"

package/components/ResourceDetail/index.vue

@@ -318,9 +318,12 @@ export default {
   },
 
   watch: {
-    '$route.query'(inNeu, inOld) {
-      const neu = clone(inNeu);
-      const old = clone(inOld);
+    '$route'(current, prev) {
+      if (current.name !== prev.name) {
+        return;
+      }
+      const neu = clone(current.query);
+      const old = clone(prev.query);
 
       delete neu[PREVIEW];
       delete old[PREVIEW];
@@ -332,10 +335,6 @@ export default {
 
       const queryDiff = Object.keys(diff(neu, old));
 
-      if (Object.keys(neu).length <= 0) {
-        return;
-      }
-
       if (queryDiff.includes(MODE) || queryDiff.includes(AS)) {
         this.$fetch();
       }

package/components/auth/RoleDetailEdit.vue

@@ -127,12 +127,6 @@ export default {
 
   created() {
     this.value['rules'] = this.value.rules || [];
-    this.value.rules.forEach((rule) => {
-      if (rule.verbs[0] === '*') {
-        rule['verbs'] = [...VERBS];
-      }
-    });
-
     const query = { ...this.$route.query };
     const { roleContext } = query;
 
@@ -701,6 +695,7 @@ export default {
             <template #columns="props">
               <div class="columns row mr-20">
                 <div :class="ruleClass">
+                  <!-- Select verbs -->
                   <Select
                     :value="props.row.value.verbs"
                     class="lg"

package/components/auth/__tests__/RoleDetailEdit.test.ts

@@ -2,22 +2,20 @@ import { mount } from '@vue/test-utils';
 import RoleDetailEdit from '@shell/components/auth/RoleDetailEdit.vue';
 import { SUBTYPE_MAPPING } from '@shell/models/management.cattle.io.roletemplate';
 
-const role = {
-  apiVersion:            'management.cattle.io/v3',
-  kind:                  'GlobalRole',
-  metadata:              { name: 'global-role-with-inherited' },
-  inheritedClusterRoles: ['cluster-admin'],
-  rules:
-[{
-  verbs:     ['get', 'list'],
-  resources: ['pods'],
-  apiGroups: ['']
-}],
-  subtype: SUBTYPE_MAPPING.GLOBAL.id
-};
-
 describe('component: RoleDetailEdit', () => {
   it('does not have validation errors when the role has no displayName', () => {
+    const role = {
+      apiVersion:            'management.cattle.io/v3',
+      kind:                  'GlobalRole',
+      metadata:              { name: 'global-role-with-inherited' },
+      inheritedClusterRoles: ['cluster-admin'],
+      rules:                 [{
+        verbs:     ['get', 'list'],
+        resources: ['pods'],
+        apiGroups: ['']
+      }],
+      subtype: SUBTYPE_MAPPING.GLOBAL.id
+    };
     const wrapper = mount(RoleDetailEdit, {
       props: { value: role },
 
@@ -28,14 +26,16 @@ describe('component: RoleDetailEdit', () => {
           $store:      {
             dispatch: jest.fn(),
             getters:  {
-              currentStore: () => 'store', 'i18n/t': jest.fn(), 'store/schemaFor': jest.fn(), 'store/customisation/': jest.fn()
+              currentStore:           () => 'store',
+              'i18n/t':               jest.fn(),
+              'store/schemaFor':      jest.fn(),
+              'store/customisation/': jest.fn()
             }
           }
         },
 
         stubs: {
           CruResource: { template: '<div><slot></slot></div>' },
-          // NameNsDescription: true,
           Tab:         { template: '<div><slot></slot></div>' },
         },
       },
@@ -43,4 +43,41 @@ describe('component: RoleDetailEdit', () => {
 
     expect((wrapper.vm as any).fvFormIsValid).toBe(true);
   });
+
+  it.each([
+    [['*']],
+    [['create', 'delete', 'get', 'list', 'patch', 'update', 'watch']],
+  ])('should display the verbs %p', (verbs: string[]) => {
+    const wrapper = mount(RoleDetailEdit, {
+      props: {
+        value: {
+          rules:   [{ verbs }],
+          subtype: 'GLOBAL'
+        },
+      },
+
+      global: {
+        mocks: {
+          $fetchState: { pending: false },
+          $route:      { name: 'anything' },
+          $store:      {
+            dispatch: jest.fn(),
+            getters:  {
+              currentStore:           () => 'store',
+              'i18n/t':               jest.fn(),
+              'store/schemaFor':      jest.fn(),
+              'store/customisation/': jest.fn()
+            }
+          }
+        },
+
+        stubs: {
+          CruResource: { template: '<div><slot></slot></div>' },
+          Tab:         { template: '<div><slot></slot></div>' },
+        },
+      },
+    });
+
+    expect(wrapper.vm.value.rules[0].verbs).toStrictEqual(verbs);
+  });
 });

package/components/form/ArrayList.vue

@@ -138,10 +138,14 @@ export default {
     }
   },
   watch: {
-    value() {
-      this.lastUpdateWasFromValue = true;
-      this.rows = (this.value || []).map((v) => ({ value: v }));
+    value: {
+      deep: true,
+      handler() {
+        this.lastUpdateWasFromValue = true;
+        this.rows = (this.value || []).map((v) => ({ value: v }));
+      }
     },
+
     rows: {
       deep: true,
       handler(newValue, oldValue) {

package/components/form/ColorInput.vue

@@ -40,6 +40,11 @@ export default {
     componentTestid: {
       type:    String,
       default: 'color-input'
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -56,6 +61,12 @@ export default {
      */
     inputValue() {
       return this.value ? this.value : this.defaultValue;
+    },
+
+    isDisabled() {
+      const disabled = this.disabled;
+
+      return this.mode !== this.editMode || disabled;
     }
   },
 
@@ -69,7 +80,7 @@ export default {
 <template>
   <div
     class="color-input"
-    :class="{[mode]:mode, disabled: mode !== editMode}"
+    :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
   >
     <label class="text-label"><t
@@ -89,7 +100,7 @@ export default {
         <input
           ref="input"
           type="color"
-          :disabled="mode !== editMode"
+          :disabled="isDisabled"
           :value="inputValue"
           @input="$emit('update:value', $event.target.value)"
         >

package/components/form/__tests__/ColorInput.test.ts

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import ColorInput from '@shell/components/form/ColorInput.vue';
+
+describe('colorInput.vue', () => {
+  it('disables the input when disabled prop is true', () => {
+    const wrapper = shallowMount(
+      ColorInput,
+      { props: { disabled: true } }
+    );
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).toContain('disabled');
+  });
+
+  it('defaults to enabled when no disabled prop is passed', () => {
+    const wrapper = shallowMount(ColorInput);
+
+    const colorWrapper = wrapper.find('.color-input');
+    const colorInput = wrapper.find('input');
+
+    expect(colorWrapper.classes()).not.toContain('disabled');
+    expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
+  });
+});

package/components/formatter/CloudCredExpired.vue

@@ -0,0 +1,69 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     [Number, String],
+      required: true
+    },
+
+    row: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
+    verbose: {
+      type:    Boolean,
+      default: false,
+    }
+
+  },
+
+  computed: {
+    outputString() {
+      return this.verbose ? this.verboseOutputString : this.row.expiresString;
+    },
+
+    verboseOutputString() {
+      const expireData = this.row?.expireData;
+
+      if (expireData?.expired) {
+        return this.t('cluster.cloudCredentials.expired');
+      } else if (expireData?.expiring) {
+        return this.t('cluster.cloudCredentials.expiring', { expires: this.row.expiresString });
+      }
+
+      return null;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="outputString"
+    class="cloud-cred-expired"
+    :class="{ 'text-error': row.expireData.expired, 'text-warning': row.expireData.expiring}"
+  >
+    <div class="token-icon mr-5">
+      <i
+        class="icon"
+        :class="{'icon-error': row.expireData.expired, 'icon-warning': row.expireData.expiring}"
+      />
+    </div>
+    {{ outputString }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.cloud-cred-expired {
+  display: flex;
+  align-items: center;
+  .token-icon {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/components/formatter/Date.vue

@@ -11,7 +11,7 @@ export default {
     },
 
     value: {
-      type:    [String, Date],
+      type:    [String, Date, Number],
       default: ''
     },