@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/fleet/FleetSummary.vue

@@ -2,57 +2,47 @@
 import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
 
-const getResourceDefaultState = (labelGetter, stateKey) => {
-  return {
-    ready: {
+const getResourcesDefaultState = (labelGetter, stateKey) => {
+  return [
+    STATES_ENUM.READY,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.MODIFIED,
+    STATES_ENUM.MISSING,
+    STATES_ENUM.ORPHANED,
+    STATES_ENUM.UNKNOWN,
+  ].reduce((acc, state) => {
+    acc[state] = {
       count:  0,
-      color:  STATES[STATES_ENUM.READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.READY }`, null, STATES[STATES_ENUM.READY].label ),
-      status: STATES_ENUM.READY
-    },
-    info: {
-      count:  0,
-      color:  STATES[STATES_ENUM.INFO].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.INFO }`, null, STATES[STATES_ENUM.INFO].label ),
-      status: STATES_ENUM.INFO
-    },
-    warning: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WARNING].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WARNING }`, null, STATES[STATES_ENUM.WARNING].label ),
-      status: STATES_ENUM.WARNING
-    },
-    notready: {
-      count:  0,
-      color:  STATES[STATES_ENUM.NOT_READY].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.NOT_READY }`, null, STATES[STATES_ENUM.NOT_READY].label ),
-      status: STATES_ENUM.NOT_READY
-    },
-    error: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERROR].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERROR }`, null, STATES[STATES_ENUM.ERROR].label ),
-      status: STATES_ENUM.ERROR
-    },
-    errapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.ERR_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.ERR_APPLIED }`, null, STATES[STATES_ENUM.ERR_APPLIED].label ),
-      status: STATES_ENUM.ERR_APPLIED,
-    },
-    waitapplied: {
-      count:  0,
-      color:  STATES[STATES_ENUM.WAIT_APPLIED].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.WAIT_APPLIED }`, null, STATES[STATES_ENUM.WAIT_APPLIED].label ),
-      status: STATES_ENUM.WAIT_APPLIED
-    },
-    unknown: {
+      color:  STATES[state].color,
+      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+      status: state
+    };
+
+    return acc;
+  }, {});
+};
+
+const getBundlesDefaultState = (labelGetter, stateKey) => {
+  return [
+    STATES_ENUM.READY,
+    STATES_ENUM.INFO,
+    STATES_ENUM.WARNING,
+    STATES_ENUM.NOT_READY,
+    STATES_ENUM.ERROR,
+    STATES_ENUM.ERR_APPLIED,
+    STATES_ENUM.WAIT_APPLIED,
+    STATES_ENUM.UNKNOWN,
+  ].reduce((acc, state) => {
+    acc[state] = {
       count:  0,
-      color:  STATES[STATES_ENUM.UNKNOWN].color,
-      label:  labelGetter(`${ stateKey }.${ STATES_ENUM.UNKNOWN }`, null, STATES[STATES_ENUM.UNKNOWN].label ),
-      status: STATES_ENUM.UNKNOWN
-    }
-  };
+      color:  STATES[state].color,
+      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
+      status: state
+    };
+
+    return acc;
+  }, {});
 };
 
 export default {
@@ -83,14 +73,18 @@ export default {
       return this.value.metadata.name;
     },
 
+    repoNamespace() {
+      return this.value.metadata.namespace;
+    },
+
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.repoName === this.repoName);
+      const resources = this.bundles.filter((item) => item.namespace === this.repoNamespace && item.repoName === this.repoName);
 
       if (!resources.length) {
         return [];
       }
 
-      const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = { ...getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
 
       resources.forEach(({ status, metadata }) => {
         if (!status) {
@@ -99,7 +93,7 @@ export default {
           return;
         }
 
-        const k = status?.summary.ready > 0 && status?.summary.desiredReady === status.summary.ready;
+        const k = status?.summary?.ready > 0 && status?.summary.desiredReady === status?.summary?.ready;
 
         if (k) {
           out.ready.count += 1;
@@ -155,19 +149,20 @@ export default {
     },
 
     resourceCounts() {
-      const resources = this.value.status.resources || [];
-      const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
-
-      resources.forEach(({ state }) => {
-        const k = state?.toLowerCase();
-
-        if (out[k]) {
-          out[k].count += 1;
-
-          return;
-        }
-        out.unknown.count += 1;
-      });
+      const out = { ...getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const resourceStatuses = this.value.allResourceStatuses;
+
+      Object.entries(resourceStatuses.states)
+        .filter(([_, count]) => count > 0)
+        .forEach(([state, count]) => {
+          const k = state?.toLowerCase();
+
+          if (out[k]) {
+            out[k].count += count;
+          } else {
+            out.unknown.count += count;
+          }
+        });
 
       return Object.values(out).map((item) => {
         item.value = item.count;

package/components/fleet/ForceDirectedTreeChart/index.vue

@@ -238,8 +238,12 @@ export default {
     },
     zoomFit() {
       const rootNode = d3.select('.root-node');
-      const paddingBuffer = 30;
 
+      if (!rootNode?.node()) {
+        return;
+      }
+
+      const paddingBuffer = 30;
       const chartDimentions = rootNode.node().getBoundingClientRect();
       const chartCoordinates = rootNode.node().getBBox();
       const parent = rootNode.node().parentElement;

package/components/fleet/__tests__/FleetSummary.test.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import GitRepo from '@shell/models/fleet.cattle.io.gitrepo';
 import FleetSummary from '@shell/components/fleet/FleetSummary.vue';
 
 const REPO_NAME = 'testrepo';
@@ -13,12 +14,12 @@ const mockedBundlesInRepo = [{
   apiVersion: 'fleet.cattle.io/v1alpha1',
   kind:       'Bundle',
   repoName:   REPO_NAME,
+  namespace:  'fleet-default',
   metadata:   {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME
     },
-
     name:      `${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
     namespace: 'fleet-default',
     state:     {
@@ -53,12 +54,12 @@ const mockedBundlesInRepo = [{
   apiVersion: 'fleet.cattle.io/v1alpha1',
   kind:       'Bundle',
   repoName:   REPO_NAME,
+  namespace:  'fleet-default',
   metadata:   {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME
     },
-
     name:      `${ REPO_NAME }-${ CLUSTER_NAME }-5678`,
     namespace: 'fleet-default',
     state:     {
@@ -94,14 +95,54 @@ const mockedBundlesOutOfRepo = [{
   apiVersion: 'fleet.cattle.io/v1alpha1',
   kind:       'Bundle',
   repoName:   REPO_NAME_VARIANT,
+  namespace:  'custom-namespace',
   metadata:   {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
     },
-
     name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-1234`,
-    namespace: 'fleet-default',
+    namespace: 'custom-namespace',
+    state:     {
+      error:         false,
+      message:       'Resource is Ready',
+      name:          'active',
+      transitioning: false
+    },
+  },
+  spec: {
+    correctDrift:        { },
+    forceSyncGeneration: 2,
+    ignore:              { },
+    namespace:           'custom-namespace-name',
+    resources:           [
+      {
+        content: 'apiVersion: v1\nkind: ConfigMap\nmetadata:\n  name: configmap-test\n  annotations:\n    {}\n#    key: string\n  labels:\n    {}\n#    key: string\ndata:\n  key1: val1\n  key2: val2\n  key3: val3',
+        name:    'test-configmap.yaml'
+      }
+    ],
+    targets: [
+      {
+        clusterName: 'nb-cluster0-28',
+        namespace:   'custom-namespace-name'
+      }
+    ]
+  }
+},
+{
+  id:         `fleet-default/${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+  type:       'fleet.cattle.io.bundle',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'Bundle',
+  repoName:   REPO_NAME,
+  namespace:  'custom-namespace',
+  metadata:   {
+    labels: {
+      'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
+      'fleet.cattle.io/repo-name': REPO_NAME
+    },
+    name:      `${ REPO_NAME }-${ CLUSTER_NAME }-1234`,
+    namespace: 'custom-namespace',
     state:     {
       error:         false,
       message:       'Resource is Ready',
@@ -134,14 +175,14 @@ const mockedBundlesOutOfRepo = [{
   apiVersion: 'fleet.cattle.io/v1alpha1',
   kind:       'Bundle',
   repoName:   REPO_NAME_VARIANT,
+  namespace:  'custom-namespace',
   metadata:   {
     labels: {
       'fleet.cattle.io/commit':    '3640888439d1b7b6a53dbeee291a533eea2632ab',
       'fleet.cattle.io/repo-name': REPO_NAME_VARIANT
     },
-
     name:      `${ REPO_NAME_VARIANT }-${ CLUSTER_NAME }-5678`,
-    namespace: 'fleet-default',
+    namespace: 'custom-namespace',
     state:     {
       error:         false,
       message:       'Resource is Ready',
@@ -175,7 +216,6 @@ const mockRepo = {
   apiVersion: 'fleet.cattle.io/v1alpha1',
   kind:       'GitRepo',
   metadata:   {
-
     name:      `${ REPO_NAME }`,
     namespace: 'fleet-default',
     state:     {
@@ -296,7 +336,7 @@ describe('component: FleetSummary', () => {
     [mockedBundlesInRepo, '2'],
   ])('displays the number of bundles associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
     const wrapper = mount(FleetSummary, {
-      props:  { bundles, value: mockRepo },
+      props:  { bundles, value: new GitRepo(mockRepo) },
       global: { mocks: { $store: mockStore } }
     });
 
@@ -311,7 +351,7 @@ describe('component: FleetSummary', () => {
 
   ])('displays the number of deployments associated with the current gitrepo', (bundles: any[], bundleCount: string) => {
     const wrapper = mount(FleetSummary, {
-      props:  { bundles, value: mockRepo },
+      props:  { bundles, value: new GitRepo(mockRepo) },
       global: { mocks: { $store: mockStore } }
     });
 

package/components/form/ArrayList.vue

@@ -48,6 +48,10 @@ export default {
       type:    Boolean,
       default: false,
     },
+    addIcon: {
+      type:    String,
+      default: '',
+    },
     addLabel: {
       type:    String,
       default: '',
@@ -367,8 +371,8 @@ export default {
           @click="add()"
         >
           <i
-            v-if="loading"
-            class="mr-5 icon icon-spinner icon-spin icon-lg"
+            class="mr-5 icon"
+            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           />
           {{ _addLabel }}
         </button>

package/components/form/ColorInput.vue

@@ -97,6 +97,7 @@ export default {
     :class="{[mode]:mode, disabled: isDisabled}"
     :data-testid="componentTestid + '-color-input'"
     :tabindex="isDisabled ? -1 : 0"
+    @keydown.space.prevent
     @keyup.enter.space.stop="handleKeyup($event)"
   >
     <label class="text-label"><t

package/components/form/KeyValue.vue

@@ -182,7 +182,7 @@ export default {
     },
     addIcon: {
       type:    String,
-      default: 'icon-plus',
+      default: '',
     },
     addAllowed: {
       type:    Boolean,
@@ -295,12 +295,6 @@ export default {
      */
     canRemove() {
       return !this.isView && this.removeAllowed;
-    },
-    /**
-     * Filter rows based on toggler, keeping to still emit all the values
-     */
-    filteredRows() {
-      return this.rows.filter((row) => !(this.isProtected(row.key) && !this.toggleFilter));
     }
   },
   created() {
@@ -618,8 +612,10 @@ export default {
               {{ _keyLabel }}
               <i
                 v-if="_protip && !isView && addAllowed"
-                v-clean-tooltip="_protip"
+                v-clean-tooltip="{content: _protip, triggers: ['hover', 'touch', 'focus'] }"
+                v-stripped-aria-label="_protip"
                 class="icon icon-info"
+                tabindex="0"
               />
             </label>
             <label
@@ -663,11 +659,14 @@ export default {
         </div>
       </template>
       <template
-        v-for="(row,i) in filteredRows"
+        v-for="(row,i) in rows"
         v-else
         :key="i"
       >
-        <div class="rowgroup">
+        <div
+          class="rowgroup"
+          :class="{'hide': isProtected(row.key) && !toggleFilter}"
+        >
           <div class="row">
             <!-- Key -->
             <div
@@ -855,8 +854,8 @@ export default {
           @click="add()"
         >
           <i
-            v-if="loading"
-            class="mr-5 icon icon-spinner icon-spin icon-lg"
+            class="mr-5 icon"
+            :class="loading ? ['icon-lg', 'icon-spinner','icon-spin']: [addIcon]"
           /> {{ _addLabel }}
         </button>
         <FileSelector

package/components/form/LabeledSelect.vue

@@ -5,6 +5,7 @@ import { get } from '@shell/utils/object';
 import { LabeledTooltip } from '@components/LabeledTooltip';
 import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
+import { generateRandomAlphaString } from '@shell/utils/string';
 import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 import { mapGetters } from 'vuex';
@@ -116,7 +117,8 @@ export default {
   data() {
     return {
       selectedVisibility: 'visible',
-      shouldOpen:         true
+      shouldOpen:         true,
+      uid:                generateRandomAlphaString(10)
     };
   },
 
@@ -154,6 +156,10 @@ export default {
   methods: {
     // resizeHandler = in mixin
     focusSearch() {
+      if (this.isView || this.disabled || this.loading) {
+        return;
+      }
+
       // we need this override as in a "closeOnSelect" type of component
       // if we don't have this override, it would open again
       if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
@@ -291,14 +297,18 @@ export default {
     ]"
     :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @keydown.enter.down="focusSearch"
+    @keydown.enter="focusSearch"
+    @keydown.down.prevent="focusSearch"
     @keydown.space.prevent="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
       :style="{ border: 'none' }"
     >
-      <label v-if="hasLabel">
+      <label
+        v-if="hasLabel"
+        :id="`labeled-select-uid-${uid}`"
+      >
         <t
           v-if="labelKey"
           :k="labelKey"
@@ -313,6 +323,7 @@ export default {
     </div>
     <v-select
       ref="select-input"
+      :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
       v-bind="filteredAttrs"
       class="inline"
       :append-to-body="appendToBody"
@@ -333,6 +344,7 @@ export default {
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
+      role="listbox"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"

package/components/form/Labels.vue

@@ -52,7 +52,12 @@ export default {
     showLabelTitle: {
       type:    Boolean,
       default: true,
-    }
+    },
+
+    addIcon: {
+      type:    String,
+      default: '',
+    },
   },
 
   data() {
@@ -103,6 +108,7 @@ export default {
               :protected-keys="value.systemLabels || []"
               :toggle-filter="toggler"
               :add-label="t('labels.addLabel')"
+              :add-icon="addIcon"
               :mode="mode"
               :read-allowed="false"
               :value-can-be-empty="true"
@@ -121,6 +127,7 @@ export default {
         key="annotations"
         :value="value.annotations"
         :add-label="t('labels.addAnnotation')"
+        :add-icon="addIcon"
         :mode="mode"
         :protected-keys="value.systemAnnotations || []"
         :toggle-filter="toggler"