@rancher/shell 3.0.2-rc.5 → 3.0.2

package/plugins/steve/steve-pagination-utils.ts

@@ -1,7 +1,7 @@
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
 import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespace, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
-import Namespace from '@shell/models/namespace';
+import ModelNamespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
 import {
   CAPI,
@@ -12,10 +12,21 @@ import {
   SERVICE,
   INGRESS,
   WORKLOAD_TYPES,
-  HPA
+  HPA,
+  SECRET
 } from '@shell/config/types';
-import { CAPI as CAPI_LABELS, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
+import { CAPI as CAPI_LAB_AND_ANO, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { Schema } from '@shell/plugins/steve/schema';
+import { PaginationSettingsStore } from '@shell/types/resources/settings';
+
+/**
+ * This is a workaround for a ts build issue found in check-plugins-build.
+ *
+ * The build would error on <ns>.name, it somehow doesn't know about the steve model's properties (they are included in typegen)
+ */
+interface Namespace extends ModelNamespace {
+  name: string;
+}
 
 class NamespaceProjectFilters {
   /**
@@ -141,8 +152,8 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'spec.internal' },
       { field: 'spec.displayName' },
       { field: `status.provider` },
-      { field: `metadata.labels."${ CAPI_LABELS.PROVIDER }"` },
-
+      { field: `metadata.labels["${ CAPI_LAB_AND_ANO.PROVIDER }]` },
+      { field: `status.connected` },
     ],
     [CONFIG_MAP]: [
       { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
@@ -171,9 +182,10 @@ class StevePaginationUtils extends NamespaceProjectFilters {
       { field: 'status.releaseName' },
     ],
     [CAPI.RANCHER_CLUSTER]: [
-      { field: `metadata.labels."${ CAPI_LABELS.PROVIDER }"` },
+      { field: `metadata.labels[${ CAPI_LAB_AND_ANO.PROVIDER }]` },
       { field: `status.provider` },
       { field: 'status.clusterName' },
+      { field: `metadata.annotations[${ CAPI_LAB_AND_ANO.HUMAN_NAME }]` }
     ],
     [SERVICE]: [
       { field: 'spec.type' },
@@ -433,9 +445,14 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               this.validateField(validateFields, schema, field.field);
 
               const value = encodeURIComponent(field.value);
-              const exactPartial = field.exact ? `'${ value }'` : value;
 
-              return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ exactPartial }`;
+              // = exact match (equals + exact)
+              // ~ partial match (equals + !exact)
+              // != not exact match (!equals + exact)
+              // !~ not partial match (!equals + !exact)
+              const operator = `${ field.equals ? '' : '!' }${ field.exact ? '=' : '~' }`;
+
+              return `${ this.convertArrayPath(field.field) }${ operator }${ value }`;
             }
 
             return field.value;
@@ -460,4 +477,37 @@ class StevePaginationUtils extends NamespaceProjectFilters {
   }
 }
 
+export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStore = {
+  cluster: {
+    resources: {
+      enableAll:  false,
+      enableSome: {
+        // if a resource list is shown by a custom resource list component or has specific list headers then it's not generically shown
+        // and must be included here.
+        enabled: [
+          NODE, EVENT,
+          WORKLOAD_TYPES.CRON_JOB, WORKLOAD_TYPES.DAEMON_SET, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.STATEFUL_SET, POD,
+          CATALOG.APP, CATALOG.CLUSTER_REPO, CATALOG.OPERATION,
+          HPA, INGRESS, SERVICE,
+          PV, CONFIG_MAP, STORAGE_CLASS, PVC, SECRET,
+          WORKLOAD_TYPES.REPLICA_SET, WORKLOAD_TYPES.REPLICATION_CONTROLLER
+        ],
+        generic: true,
+      }
+    }
+  },
+  management: {
+    resources: {
+      enableAll:  false,
+      enableSome: {
+        enabled: [
+          { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
+          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+        ],
+        generic: false,
+      }
+    }
+  }
+};
+
 export default new StevePaginationUtils();

package/promptRemove/management.cattle.io.fleetworkspace.vue

@@ -0,0 +1,98 @@
+<script>
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { Banner } from '@components/Banner';
+import { mapGetters, mapState } from 'vuex';
+import { getVendor } from '@shell/config/private-label';
+
+export default {
+  name: 'PromptRemoveFleetWorkspacesDialog',
+
+  emits: ['errors'],
+
+  components: { Banner },
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    names: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    type: {
+      type:     String,
+      required: true
+    },
+
+    close: {
+      type:     Function,
+      required: true
+    },
+  },
+
+  data() {
+    return {
+      vendor: getVendor(),
+      errors: []
+    };
+  },
+
+  computed: {
+    ...mapState('action-menu', ['toRemove']),
+    ...mapGetters({ t: 'i18n/t' }),
+  },
+
+  methods: {
+    resourceNames,
+    async remove(buttonDone) {
+      try {
+        await Promise.all(this.value.map((resource) => resource.remove()));
+
+        this.close(buttonDone);
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone(false);
+      }
+    }
+
+  }
+};
+</script>
+
+<template>
+  <div class="mt-10">
+    <div class="mb-10">
+      {{ t('promptRemove.attemptingToRemove', { type }) }} <span
+        v-clean-html="resourceNames(names, t)"
+        class="description"
+      />
+    </div>
+    <Banner
+      color="warning"
+      class="warning"
+    >
+      <span v-clean-html="t('fleet.workspaces.remove.warning', {}, true)" />
+    </Banner>
+    <Banner
+      v-for="(error, i) in errors"
+      :key="i"
+      class=""
+      color="error"
+      :label="error"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .description {
+    font-weight: 600;
+  }
+</style>

package/promptRemove/management.cattle.io.globalrole.vue

@@ -21,7 +21,7 @@ export default {
 
 <template>
   <div>
-    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, plusMore, t)" />
+    {{ t('promptRemove.attemptingToRemove', { type }) }} <span v-clean-html="resourceNames(names, t)" />
     <div
       v-if="info"
       class="text info mb-10 mt-20"

package/promptRemove/management.cattle.io.project.vue

@@ -58,12 +58,6 @@ export default {
       return [];
     },
 
-    plusMore() {
-      const remaining = this.filteredNamespaces.length > 5 ? this.filteredNamespaces.length - 5 : 0;
-
-      return this.t('promptRemove.andOthers', { count: remaining });
-    },
-
     displayName() {
       return this.currentProject?.spec?.displayName;
     },
@@ -100,7 +94,7 @@ export default {
         <template v-if="!canSeeProjectlessNamespaces">
           <span class="delete-warning"> {{ t('promptRemove.willDeleteAssociatedNamespaces') }}</span> <br>
           <div
-            v-clean-html="resourceNames(names, plusMore, t)"
+            v-clean-html="resourceNames(names, t)"
             class="mt-10"
           />
         </template>
@@ -114,7 +108,7 @@ export default {
           :label="t('promptRemove.deleteAssociatedNamespaces')"
         />
         <div class="mt-10 ml-20">
-          <span v-clean-html="resourceNames(names, plusMore, t)" />
+          <span v-clean-html="resourceNames(names, t)" />
         </div>
       </div>
     </div>

package/promptRemove/management.cattle.io.roletemplate.vue

@@ -22,7 +22,7 @@ export default {
 <template>
   <div>
     {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-      v-clean-html="resourceNames(names, plusMore, t)"
+      v-clean-html="resourceNames(names, t)"
     />
     <div
       v-if="info"

package/promptRemove/mixin/roleDeletionCheck.js

@@ -17,13 +17,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
 
     names() {
-      return this.toRemove.map((obj) => obj.nameDisplay).slice(0, 5);
-    },
-
-    plusMore() {
-      const remaining = this.toRemove.length - this.names.length;
-
-      return this.t('promptRemove.andOthers', { count: remaining });
+      return this.toRemove.map((obj) => obj.nameDisplay);
     },
   },
   watch: {

package/promptRemove/pod.vue

@@ -1,4 +1,5 @@
 <script>
+import { resourceNames } from '@shell/utils/string';
 import { Banner } from '@components/Banner';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
 import { mapGetters, mapState } from 'vuex';
@@ -55,31 +56,10 @@ export default {
   computed: {
     ...mapState('action-menu', ['toRemove']),
     ...mapGetters({ t: 'i18n/t' }),
-
-    plusMore() {
-      const count = this.names.length - this.names.length;
-
-      return this.t('promptRemove.andOthers', { count });
-    },
-
-    podNames() {
-      return this.names.reduce((res, name, i) => {
-        if (i >= 5) {
-          return res;
-        }
-        res += `<b>${ name }</b>`;
-        if (i === this.names.length - 1) {
-          res += this.plusMore;
-        } else {
-          res += i === this.toRemove.length - 2 ? ' and ' : ', ';
-        }
-
-        return res;
-      }, '');
-    },
   },
 
   methods: {
+    resourceNames,
     async remove(confirm) {
       let goTo;
 
@@ -118,8 +98,8 @@ export default {
   <div class="mt-10">
     <div class="mb-30">
       {{ t('promptRemove.attemptingToRemove', { type }) }} <span
-        v-clean-html="podNames"
-        class="machine-name"
+        v-clean-html="resourceNames(names, t)"
+        class="body"
       />
     </div>
     <div class="mb-30">
@@ -143,11 +123,10 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+  .body {
+    font-weight: 600;
+  }
   .actions {
     text-align: right;
   }
-
-  .machine-name {
-    font-weight: 600;
-  }
 </style>

package/rancher-components/Card/Card.vue

@@ -59,7 +59,15 @@ export default defineComponent({
   },
   setup(props) {
     if (props.triggerFocusTrap) {
-      useBasicSetupFocusTrap('#focus-trap-card-container-element');
+      useBasicSetupFocusTrap('#focus-trap-card-container-element', {
+        // needs to be false because of import YAML modal from header
+        // where the YAML editor itself is a focus trap
+        // and we can't have it superseed the "escape key" to blur that UI element
+        // In this case the focus trap moves the focus out of the modal
+        // correctly once it closes because of the "onBeforeUnmount" trigger
+        escapeDeactivates: false,
+        allowOutsideClick: true,
+      });
     }
   }
 });

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -3,6 +3,7 @@ import { PropType, defineComponent } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 export default defineComponent({
   name: 'Checkbox',
@@ -37,7 +38,7 @@ export default defineComponent({
      */
     id: {
       type:    String,
-      default: String(Math.random() * 1000)
+      default: generateRandomAlphaString(12)
     },
 
     /**
@@ -113,7 +114,16 @@ export default defineComponent({
     primary: {
       type:    Boolean,
       default: false
-    }
+    },
+
+    /**
+     * Use this for usage of checkboxes that don't present a label.
+     * Used for cases such as table checkboxes (group or row)
+     */
+    alternateLabel: {
+      type:    String,
+      default: undefined
+    },
   },
 
   emits: ['update:value'],
@@ -143,6 +153,18 @@ export default defineComponent({
     hasTooltip(): boolean {
       return !!this.tooltip || !!this.tooltipKey;
     },
+
+    replacementLabel(): string | undefined {
+      if (!this.label && !this.labelKey && this.alternateLabel) {
+        return this.alternateLabel;
+      }
+
+      return undefined;
+    },
+
+    idForLabel():string {
+      return `${ this.id }-label`;
+    }
   },
 
   methods: {
@@ -228,17 +250,16 @@ export default defineComponent({
     <label
       class="checkbox-container"
       :class="{ 'disabled': isDisabled}"
-      :for="id"
       @keydown.enter.prevent="clicked($event)"
       @keydown.space.prevent="clicked($event)"
       @click="clicked($event)"
     >
       <input
+        :id="id"
         :checked="isChecked"
         :value="valueWhenTrue"
         type="checkbox"
         tabindex="-1"
-        :name="id"
         @click.stop.prevent
         @keyup.enter.stop.prevent
       >
@@ -246,8 +267,9 @@ export default defineComponent({
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
         :tabindex="isDisabled ? -1 : 0"
-        :aria-label="label"
+        :aria-label="replacementLabel"
         :aria-checked="!!value"
+        :aria-labelledby="labelKey || label ? idForLabel : undefined"
         role="checkbox"
       />
       <span
@@ -258,19 +280,25 @@ export default defineComponent({
         <slot name="label">
           <t
             v-if="labelKey"
+            :id="idForLabel"
             :k="labelKey"
             :raw="true"
           />
-          <template v-else-if="label">{{ label }}</template>
+          <span
+            v-else-if="label"
+            :id="idForLabel"
+          >{{ label }}</span>
           <i
             v-if="tooltipKey"
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
+            v-stripped-aria-label="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
             :tabindex="isDisabled ? -1 : 0"
           />
           <i
             v-else-if="tooltip"
             v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
+            v-stripped-aria-label="tooltip"
             class="checkbox-info icon icon-info icon-lg"
             :tabindex="isDisabled ? -1 : 0"
           />
@@ -289,6 +317,9 @@ export default defineComponent({
         {{ description }}
       </template>
     </div>
+    <div class="checkbox-outer-container-extra">
+      <slot name="extra" />
+    </div>
   </div>
 </template>
 
@@ -305,6 +336,11 @@ $fontColor: var(--input-label);
     margin-top: 5px;
     opacity: 0.8;
   }
+  &-extra {
+    font-size: 14px;
+    margin-left: 19px;
+    margin-top: 5px;
+  }
 }
 
 // NOTE: SortableTable depends on the names of this class, do not arbitrarily change.

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -2,7 +2,7 @@
 import { defineComponent, inject } from 'vue';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow.vue';
 import LabeledTooltip from '@components/LabeledTooltip/LabeledTooltip.vue';
-import { escapeHtml } from '@shell/utils/string';
+import { escapeHtml, generateRandomAlphaString } from '@shell/utils/string';
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { debounce } from 'lodash';
@@ -105,6 +105,15 @@ export default defineComponent({
     class: {
       type:    String,
       default: ''
+    },
+
+    /**
+     * Optionally use this to comply with a11y IF there's no label
+     * associated with the input
+     */
+    ariaLabel: {
+      type:    String,
+      default: ''
     }
   },
 
@@ -139,6 +148,7 @@ export default defineComponent({
     return {
       updated:          false,
       validationErrors: '',
+      inputId:          `input-${ generateRandomAlphaString(12) }`
     };
   },
 
@@ -240,6 +250,14 @@ export default defineComponent({
     }
   },
 
+  mounted() {
+    const id = this.$attrs?.id as string | undefined;
+
+    if (id) {
+      this.inputId = id;
+    }
+  },
+
   created() {
     /**
      * Determines if the Labeled Input @input event should be debounced.
@@ -330,7 +348,10 @@ export default defineComponent({
     }"
   >
     <slot name="label">
-      <label v-if="hasLabel">
+      <label
+        v-if="hasLabel"
+        :for="inputId"
+      >
         <t
           v-if="labelKey"
           :k="labelKey"
@@ -349,8 +370,10 @@ export default defineComponent({
     <slot name="field">
       <TextAreaAutoGrow
         v-if="type === 'multiline' || type === 'multiline-password'"
+        :id="inputId"
         ref="value"
         v-bind="$attrs"
+        v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
         :value="value || ''"
@@ -363,7 +386,9 @@ export default defineComponent({
       />
       <input
         v-else
+        :id="inputId"
         ref="value"
+        v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
         role="textbox"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
@@ -383,12 +408,14 @@ export default defineComponent({
     </slot>
 
     <slot name="suffix" />
+    <!-- informational tooltip about field -->
     <LabeledTooltip
-      v-if="hasTooltip && !focused"
+      v-if="hasTooltip"
       :hover="hoverTooltip"
       :value="tooltipValue"
       :status="status"
     />
+    <!-- validation tooltip -->
     <LabeledTooltip
       v-if="!!validationMessage"
       :hover="hoverTooltip"

package/rancher-components/Form/Radio/RadioButton.vue

@@ -68,6 +68,14 @@ export default defineComponent({
     description: {
       type:    String,
       default: null
+    },
+
+    /**
+     * Prevent focus when using radio in the context of a Radio group
+     */
+    preventFocusOnRadioGroups: {
+      type:    Boolean,
+      default: false
     }
   },
 
@@ -111,7 +119,7 @@ export default defineComponent({
   watch: {
     value(neu) {
       this.isChecked = this.val === neu;
-      if (this.isChecked) {
+      if (this.isChecked && !this.preventFocusOnRadioGroups) {
         (this.$refs.custom as HTMLElement).focus();
       }
     }
@@ -136,7 +144,11 @@ export default defineComponent({
 
 <template>
   <label
-    :class="{'disabled': isDisabled, 'radio-container': true}"
+    :class="{
+      'disabled': isDisabled,
+      'radio-container': true,
+      'radio-button-checked': isChecked
+    }"
     @keydown.enter="clicked($event)"
     @keydown.space="clicked($event)"
     @click.stop="clicked($event)"
@@ -146,6 +158,7 @@ export default defineComponent({
       :disabled="isDisabled"
       :name="name"
       :value="''+val"
+      :data-testid="label"
       :checked="isChecked"
       type="radio"
       :tabindex="-1"
@@ -154,7 +167,7 @@ export default defineComponent({
     <span
       ref="custom"
       :class="[ isDisabled ? 'text-muted' : '', 'radio-custom']"
-      :tabindex="isDisabled ? -1 : 0"
+      :tabindex="isDisabled || preventFocusOnRadioGroups ? -1 : 0"
       :aria-label="label"
       :aria-checked="isChecked"
       role="radio"
@@ -220,9 +233,11 @@ $fontColor: var(--input-label);
   display: inline-flex;
   align-items: flex-start;
   margin: 0;
+  left: -4px;
   user-select: none;
   border-radius: var(--border-radius);
   padding-bottom: 5px;
+  padding-left: 4px;
 
   &,
   .radio-label,