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

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/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: ''
     },
 

package/components/nav/TopLevelMenu.vue

@@ -76,58 +76,102 @@ export default {
       return this.clusters.length > this.maxClustersToShow;
     },
 
+    /**
+     * Filter mgmt clusters by
+     * 1. Harvester type 1 (filterOnlyKubernetesClusters)
+     * 2. Harvester type 2 (filterHiddenLocalCluster)
+     * 3. There's a matching prov cluster
+     *
+     * Convert remaining clusters to special format
+     */
     clusters() {
-      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
-      let kubeClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
-      let pClusters = null;
+      if (!this.hasProvCluster) {
+        // We're filtering out mgmt clusters without prov clusters, so if the user can't see any prov clusters at all
+        // exit early
+        return [];
+      }
 
-      if (this.hasProvCluster) {
-        pClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
-        const available = pClusters.reduce((p, c) => {
-          p[c.mgmt] = true;
+      const all = this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
+      const mgmtClusters = filterHiddenLocalCluster(filterOnlyKubernetesClusters(all, this.$store), this.$store);
+      const provClusters = this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
+      const provClustersByMgmtId = provClusters.reduce((res, provCluster) => {
+        if (provCluster.mgmt?.id) {
+          res[provCluster.mgmt.id] = provCluster;
+        }
 
-          return p;
-        }, {});
+        return res;
+      }, {});
 
+      return (mgmtClusters || []).reduce((res, mgmtCluster) => {
         // Filter to only show mgmt clusters that exist for the available provisioning clusters
         // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding
         // provisioning cluster has been deleted
-        kubeClusters = kubeClusters.filter((c) => !!available[c]);
-      }
+        if (!provClustersByMgmtId[mgmtCluster.id]) {
+          return res;
+        }
 
-      return kubeClusters?.map((x) => {
-        const pCluster = pClusters?.find((c) => c.mgmt?.id === x.id);
+        const pCluster = provClustersByMgmtId[mgmtCluster.id];
+
+        res.push({
+          id:              mgmtCluster.id,
+          label:           mgmtCluster.nameDisplay,
+          ready:           mgmtCluster.isReady && !pCluster?.hasError,
+          osLogo:          mgmtCluster.providerOsLogo,
+          providerNavLogo: mgmtCluster.providerMenuLogo,
+          badge:           mgmtCluster.badge,
+          isLocal:         mgmtCluster.isLocal,
+          isHarvester:     mgmtCluster.isHarvester,
+          pinned:          mgmtCluster.pinned,
+          description:     pCluster?.description || mgmtCluster.description,
+          pin:             () => mgmtCluster.pin(),
+          unpin:           () => mgmtCluster.unpin(),
+          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
+        });
 
-        return {
-          id:              x.id,
-          label:           x.nameDisplay,
-          ready:           x.isReady && !pCluster?.hasError,
-          osLogo:          x.providerOsLogo,
-          providerNavLogo: x.providerMenuLogo,
-          badge:           x.badge,
-          isLocal:         x.isLocal,
-          isHarvester:     x.isHarvester,
-          pinned:          x.pinned,
-          description:     pCluster?.description || x.description,
-          pin:             () => x.pin(),
-          unpin:           () => x.unpin(),
-          clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: x.id } }
-        };
-      }) || [];
+        return res;
+      }, []);
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is used to show unpinned clusters OR results of search
+     */
     clustersFiltered() {
       const search = (this.clusterFilter || '').toLowerCase();
-      const out = search ? this.clusters.filter((item) => item.label?.toLowerCase().includes(search)) : this.clusters;
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const filtered = this.clusters.filter((c) => {
+        // If we're searching we don't care if pinned or not
+        if (search) {
+          if (!c.label?.toLowerCase().includes(search)) {
+            return false;
+          }
+        } else if (c.pinned) {
+          // Not searching, not pinned, don't care
+          return false;
+        }
+
+        if (!localCluster && c.id === 'local') {
+          // Local cluster is a special case, we're inserting it at top so don't include in the middle
+          localCluster = c;
+
+          return false;
+        }
 
-        sorted.splice(localIndex, 1);
+        return true;
+      });
+
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
+
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -141,25 +185,45 @@ export default {
       this.searchActive = false;
 
       if (sorted.length >= this.maxClustersToShow) {
-        const sortedPinOut = sorted.filter((item) => !item.pinned).slice(0, this.maxClustersToShow);
-
-        return sortedPinOut;
-      } else {
-        return sorted.filter((item) => !item.pinned);
+        return sorted.slice(0, this.maxClustersToShow);
       }
+
+      return sorted;
     },
 
+    /**
+     * Filter clusters by
+     * 1. Not pinned
+     * 2. Includes search term
+     *
+     * Sort remaining clusters
+     *
+     * Reduce number of clusters if too many too show
+     *
+     * Important! This is hidden if there's a filter (user searching)
+     */
     pinFiltered() {
-      const out = this.clusters.filter((item) => item.pinned);
-      const sorted = sortBy(out, ['ready:desc', 'label']);
+      let localCluster = null;
+      const filtered = this.clusters.filter((c) => {
+        if (!c.pinned) {
+          // We only care about pinned clusters
+          return false;
+        }
+
+        if (c.id === 'local') {
+          // Special case, we're going to add this at the start so filter out
+          localCluster = c;
+
+          return false;
+        }
+
+        return true;
+      });
 
-      // put local cluster on top of list always
-      // https://github.com/rancher/dashboard/issues/10975
-      if (sorted.findIndex((c) => c.id === 'local') > 0) {
-        const localCluster = sorted.find((c) => c.id === 'local');
-        const localIndex = sorted.findIndex((c) => c.id === 'local');
+      const sorted = sortBy(filtered, ['ready:desc', 'label']);
 
-        sorted.splice(localIndex, 1);
+      // put local cluster on top of list always - https://github.com/rancher/dashboard/issues/10975
+      if (localCluster) {
         sorted.unshift(localCluster);
       }
 
@@ -167,7 +231,7 @@ export default {
     },
 
     pinnedClustersHeight() {
-      const pinCount = this.clusters.filter((item) => item.pinned).length;
+      const pinCount = this.pinFiltered.length;
       const height = pinCount > 2 ? (pinCount * 43) : 90;
 
       return `min-height: ${ height }px`;