@rancher/shell 3.0.2-rc.5 → 3.0.2-rc.6

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"