@rancher/shell 0.3.9 → 0.3.11

package/components/ResourceDetail/Masthead.vue

@@ -434,7 +434,7 @@ export default {
               class="masthead-istio"
             >
               <i
-                v-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
+                v-clean-tooltip="t('projectNamespaces.isIstioInjectionEnabled')"
                 class="icon icon-sm icon-istio"
               />
             </span>

package/components/ResourceList/Masthead.vue

@@ -65,11 +65,6 @@ export default {
       default: false
     },
 
-    loadNamespace: {
-      type:    String,
-      default: null
-    },
-
     showIncrementalLoadingIndicator: {
       type:    Boolean,
       default: false
@@ -183,7 +178,6 @@ export default {
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
         :indeterminate="loadIndeterminate"
-        :namespace="loadNamespace"
       />
     </div>
     <div class="actions-container">

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -17,10 +17,6 @@ export default {
       type:    Boolean,
       default: false,
     },
-    namespace: {
-      type:    String,
-      default: undefined
-    },
   },
 
   data() {
@@ -44,10 +40,6 @@ export default {
     // Have we loaded all resources for the types that are needed
     haveAll() {
       return this.resources.reduce((acc, r) => {
-        if (this.namespace) {
-          return acc && this.$store.getters[`${ this.inStore }/haveAllNamespace`](r, this.namespace);
-        }
-
         return acc && this.$store.getters[`${ this.inStore }/haveAll`](r);
       }, true);
     },
@@ -58,7 +50,7 @@ export default {
 
       return this.resources.reduce((acc, r) => {
         const resourceCounts = clusterCounts?.[0]?.counts?.[r];
-        const resourceCount = this.namespace ? resourceCounts?.namespaces?.[this.namespace]?.count : resourceCounts?.summary?.count;
+        const resourceCount = resourceCounts?.summary?.count;
         const count = resourceCount || 0;
 
         return acc + count;

package/components/ResourceList/index.vue

@@ -8,6 +8,7 @@ import IconMessage from '@shell/components/IconMessage.vue';
 import { ResourceListComponentName } from './resource-list.config';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
+import { sameContents } from '@shell/utils/array';
 
 export default {
   name: ResourceListComponentName,
@@ -146,7 +147,11 @@ export default {
      *
      * This covers case 1
      */
-    namespaceFilter(neu) {
+    namespaceFilter(neu, old) {
+      if (sameContents(neu, old)) {
+        return;
+      }
+
       if (neu && !this.hasFetch) {
         this.$fetchType(this.resource);
       }
@@ -176,10 +181,7 @@ export default {
     icon="icon-filter_alt"
   >
     <template #message>
-      <span
-        v-clean-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
-        class="filter"
-      />
+      {{ t('resourceList.nsFiltering') }}
     </template>
   </IconMessage>
   <div v-else>
@@ -191,7 +193,6 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
-      :load-namespace="namespaceFilter"
     >
       <template slot="extraActions">
         <slot name="extraActions" />

package/components/ResourceTable.vue

@@ -176,7 +176,12 @@ export default {
       return acc;
     }, {});
 
-    return { listGroups, listGroupMapped };
+    // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
+    const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
+
+    return {
+      listGroups, listGroupMapped, inStore
+    };
   },
 
   computed: {
@@ -244,8 +249,13 @@ export default {
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
 
-      // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources) || this.ignoreFilter) {
+      // Do we need to filter by namespace like things?
+      if (
+        !this.isNamespaced || // Resource type isn't namespaced
+        this.ignoreFilter || // Component owner strictly states no filtering
+        (isAll && !this.currentProduct?.hideSystemResources) || // Need all
+        (this.inStore ? this.$store.getters[`${ this.inStore }/haveNamespace`](this.schema.id)?.length : false)// Store reports type has namespace filter, so rows already contain the correctly filtered resources
+      ) {
         return this.rows || [];
       }
 

package/components/SortableTable/THead.vue

@@ -217,6 +217,7 @@ export default {
         <Checkbox
           v-model="isAll"
           class="check"
+          data-testid="sortable-table_check_select_all"
           :indeterminate="isIndeterminate"
           :disabled="noRows || noResults"
         />
@@ -240,12 +241,12 @@ export default {
         >
           <span
             v-if="col.sort"
-            v-tooltip="tooltip(col)"
+            v-clean-tooltip="tooltip(col)"
           >
             <span v-clean-html="labelFor(col)" />
             <i
               v-show="hasAdvancedFiltering && !col.isFilter"
-              v-tooltip="t('sortableTable.tableHeader.noFilter')"
+              v-clean-tooltip="t('sortableTable.tableHeader.noFilter')"
               class="icon icon-info not-filter-icon"
             />
             <span class="icon-stack">
@@ -262,7 +263,7 @@ export default {
           </span>
           <span
             v-else
-            v-tooltip="tooltip(col)"
+            v-clean-tooltip="tooltip(col)"
           >{{ labelFor(col) }}</span>
         </div>
       </th>

package/components/SortableTable/index.vue

@@ -924,7 +924,7 @@ export default {
                 v-for="act in availableActions"
                 :id="act.action"
                 :key="act.action"
-                v-tooltip="actionTooltip"
+                v-clean-tooltip="actionTooltip"
                 type="button"
                 class="btn role-primary"
                 :class="{[bulkActionClass]:true}"
@@ -963,7 +963,7 @@ export default {
                       v-for="act in hiddenActions"
                       :key="act.action"
                       v-close-popover
-                      v-tooltip="{
+                      v-clean-tooltip="{
                         content: actionTooltip,
                         placement: 'right'
                       }"
@@ -1021,7 +1021,7 @@ export default {
           <slot name="header-right" />
           <AsyncButton
             v-if="isTooManyItemsToAutoUpdate"
-            v-tooltip="t('performance.manualRefresh.buttonTooltip')"
+            v-clean-tooltip="t('performance.manualRefresh.buttonTooltip')"
             class="manual-refresh"
             mode="refresh"
             :current-phase="currentPhase"

package/components/Tabbed/Tab.vue

@@ -102,7 +102,7 @@ export default {
         {{ labelDisplay }}
         <i
           v-if="tooltip"
-          v-tooltip="tooltip"
+          v-clean-tooltip="tooltip"
           class="icon icon-info icon-lg"
         />
       </h2>

package/components/Tabbed/index.vue

@@ -255,7 +255,7 @@ export default {
           >{{ tab.badge }}</span>
           <i
             v-if="hasIcon(tab)"
-            v-tooltip="t('validation.tab')"
+            v-clean-tooltip="t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
         </a>

package/components/Wizard.vue

@@ -468,8 +468,7 @@ $spacer: 10px;
   flex-direction: column;
   flex: 1;
   padding: 0;
-  height: 100%;
-  position: relative;
+  height: 0;
   justify-content: flex-start;
 }
 
@@ -641,13 +640,15 @@ $spacer: 10px;
   height: 0;
   overflow-y: auto;
   padding: 20px 2px 2px 2px; // Handle borders flush against edge
-
   display: flex;
   flex-direction: column;
 
   &__step {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     flex: 1;
-    overflow: auto;
   }
 }
 
@@ -656,7 +657,6 @@ $spacer: 10px;
     // Overrides outlet padding
     margin-left: -$space-m;
     margin-right: -$space-m;
-    margin-bottom: -$space-m;
     padding: $space-s $space-m;
 
     display: flex;
@@ -664,7 +664,10 @@ $spacer: 10px;
     padding-top: $spacer;
 
     border-top: var(--header-border-size) solid var(--header-border);
-
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: var(--body-bg);
     .controls-steps {
 
       .btn {

package/components/__tests__/NamespaceFilter.test.ts

@@ -10,6 +10,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
+        mocks:      { $fetchState: { pending: false } },
         directives: { shortkey: () => jest.fn() }
       });
       const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
@@ -25,7 +26,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
@@ -44,6 +48,7 @@ describe('component: NamespaceFilter', () => {
             kind:  'special',
           }]),
         },
+        mocks:      { $fetchState: { pending: false } },
         directives: { shortkey: () => jest.fn() }
       });
 
@@ -61,7 +66,10 @@ describe('component: NamespaceFilter', () => {
           value:    () => [{ label: text }],
         },
         directives: { shortkey: () => jest.fn() },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks:      {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -97,7 +105,8 @@ describe('component: NamespaceFilter', () => {
               'prefs/get':         () => preferences,
               namespaceFilterMode: () => undefined,
             },
-          }
+          },
+          $fetchState: { pending: false }
         },
         directives: { shortkey: () => jest.fn() }
       });
@@ -116,7 +125,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -135,7 +147,10 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -153,7 +168,10 @@ describe('component: NamespaceFilter', () => {
           options: () => [],
           value:   () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        mocks: {
+          $store:      { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } },
+          $fetchState: { pending: false }
+        },
         directives: { shortkey: () => jest.fn() }
       });
 
@@ -194,7 +212,8 @@ describe('component: NamespaceFilter', () => {
           $store: {
             getters:  { 'i18n/t': () => text, namespaceFilterMode: () => undefined },
             dispatch: action
-          }
+          },
+          $fetchState: { pending: false }
         },
         directives: { shortkey: () => jest.fn() }
       });

package/components/auth/RoleDetailEdit.vue

@@ -627,7 +627,7 @@ export default {
                   <span class="text-label">
                     {{ t('rbac.roletemplate.tabs.grantResources.tableHeaders.resources') }}
                     <i
-                      v-tooltip="t('rbac.roletemplate.tabs.grantResources.resourceOptionInfo')"
+                      v-clean-tooltip="t('rbac.roletemplate.tabs.grantResources.resourceOptionInfo')"
                       class="icon icon-info"
                     />
                     <span

package/components/auth/SelectPrincipal.vue

@@ -175,7 +175,7 @@ export default {
   <LabeledSelect
     ref="labeled-select"
     v-model="newValue"
-    v-tooltip="{
+    v-clean-tooltip="{
       content: tooltipContent,
       placement: 'bottom',
       classes: ['select-principal-tooltip']

package/components/fleet/FleetRepos.vue

@@ -146,7 +146,7 @@ export default {
           {{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}
           <i
             v-if="!row.clusterInfo.total"
-            v-tooltip.bottom="parseTargetMode(row)"
+            v-clean-tooltip.bottom="parseTargetMode(row)"
             class="icon icon-warning"
           />
         </span>

package/components/form/ArrayList.vue

@@ -206,7 +206,7 @@ export default {
           {{ title }}
           <i
             v-if="showProtip"
-            v-tooltip="protip"
+            v-clean-tooltip="protip"
             class="icon icon-info"
           />
         </h3>

package/components/form/ChangePassword.vue

@@ -342,6 +342,7 @@ export default {
         <Password
           v-if="isChange"
           v-model="passwordCurrent"
+          data-testid="account__current_password"
           class="mt-10"
           :required="true"
           :label="t('changePassword.currentPassword.label')"
@@ -368,6 +369,7 @@ export default {
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
               v-model="passwordNew"
+              data-testid="account__new_password"
               class="mt-10"
               :label="t('changePassword.userGen.newPassword.label')"
               :required="userGeneratedPasswordsRequired"
@@ -377,6 +379,7 @@ export default {
           <div :class="{'col': isCreateEdit, 'span-4': isCreateEdit}">
             <Password
               v-model="passwordConfirm"
+              data-testid="account__confirm_password"
               class="mt-10"
               :label="t('changePassword.userGen.confirmPassword.label')"
               :required="userGeneratedPasswordsRequired"

package/components/form/KeyValue.vue

@@ -555,7 +555,7 @@ export default {
           {{ title }}
           <i
             v-if="titleProtip"
-            v-tooltip="titleProtip"
+            v-clean-tooltip="titleProtip"
             class="icon icon-info"
           />
         </h3>
@@ -570,7 +570,7 @@ export default {
           {{ keyLabel }}
           <i
             v-if="protip && !isView && addAllowed"
-            v-tooltip="protip"
+            v-clean-tooltip="protip"
             class="icon icon-info"
           />
         </label>
@@ -660,6 +660,7 @@ export default {
             <CodeMirror
               v-else-if="valueMarkdownMultiline"
               ref="cm"
+              data-testid="code-mirror-multiline-field"
               :class="{['focus']: codeMirrorFocus[i]}"
               :value="row[valueName]"
               :as-text-area="true"

package/components/form/Labels.vue

@@ -42,7 +42,17 @@ export default {
     annotationTitleTooltip: {
       type:    String,
       default: '',
-    }
+    },
+
+    showAnnotations: {
+      type:    Boolean,
+      default: true,
+    },
+
+    showLabelTitle: {
+      type:    Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -69,7 +79,7 @@ export default {
     <div :class="defaultSectionClass">
       <div class="labels">
         <div class="labels__header">
-          <h3>
+          <h3 v-if="showLabelTitle">
             <t k="labels.labels.title" />
           </h3>
           <ToggleSwitch
@@ -83,22 +93,32 @@ export default {
           <t k="labels.labels.description" />
         </p>
         <div :class="columnsClass">
-          <KeyValue
-            key="labels"
-            :value="value.labels"
-            :protected-keys="value.systemLabels || []"
-            :toggle-filter="toggler"
-            :add-label="t('labels.addLabel')"
-            :mode="mode"
-            :read-allowed="false"
-            :value-can-be-empty="true"
-            @input="value.setLabels($event)"
-          />
+          <slot
+            name="labels"
+            :toggler="toggler"
+          >
+            <template>
+              <KeyValue
+                key="labels"
+                :value="value.labels"
+                :protected-keys="value.systemLabels || []"
+                :toggle-filter="toggler"
+                :add-label="t('labels.addLabel')"
+                :mode="mode"
+                :read-allowed="false"
+                :value-can-be-empty="true"
+                @input="value.setLabels($event)"
+              />
+            </template>
+          </slot>
         </div>
       </div>
     </div>
     <div class="spacer" />
-    <div :class="sectionClass">
+    <div
+      v-if="showAnnotations"
+      :class="sectionClass"
+    >
       <KeyValue
         key="annotations"
         :value="value.annotations"

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -278,7 +278,7 @@ export default {
             />
             <i
               v-if="permission.locked"
-              v-tooltip="permission.tooltip"
+              v-clean-tooltip="permission.tooltip"
               class="icon icon-lock icon-fw"
             />
           </div>

package/components/form/NameNsDescription.vue

@@ -390,7 +390,7 @@ export default {
         @click="cancelCreateNamespace"
       >
         <i
-          v-tooltip="t('generic.cancel')"
+          v-clean-tooltip="t('generic.cancel')"
           class="icon icon-close align-value"
         />
       </button>

package/components/form/PlusMinus.vue

@@ -50,7 +50,7 @@ export default {
       class="label"
     >{{ label }} </span>
     <button
-      v-tooltip="minusTooltip"
+      v-clean-tooltip="minusTooltip"
       :disabled="disabled || !canMinus"
       type="button"
       class="btn btn-sm role-secondary"
@@ -62,7 +62,7 @@ export default {
       {{ value }}
     </div>
     <button
-      v-tooltip="plusTooltip"
+      v-clean-tooltip="plusTooltip"
       :disabled="disabled || !canPlus"
       type="button"
       class="btn btn-sm role-secondary"

package/components/form/Probe.vue

@@ -149,7 +149,7 @@ export default {
         {{ label }}
         <i
           v-if="description"
-          v-tooltip="description"
+          v-clean-tooltip="description"
           class="icon icon-info"
         />
       </h3>

package/components/form/ProjectMemberEditor.vue

@@ -7,6 +7,7 @@ import { Card } from '@components/Card';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
+import DOMPurify from 'dompurify';
 
 export default {
   components: {
@@ -160,9 +161,9 @@ export default {
 
     options() {
       const customRoles = this.customRoles.map(role => ({
-        label:       role.nameDisplay,
-        description: role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('projectMembers.projectPermissions.noDescription'),
-        value:       role.id
+        label:       this.purifyOption(role.nameDisplay),
+        description: this.purifyOption(role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('projectMembers.projectPermissions.noDescription')),
+        value:       this.purifyOption(role.id),
       }));
 
       return [
@@ -245,6 +246,9 @@ export default {
       }
 
       return [permissionGroup];
+    },
+    purifyOption(option) {
+      return DOMPurify.sanitize(option, { ALLOWED_TAGS: ['span'] });
     }
   }
 };
@@ -301,7 +305,7 @@ export default {
             />
             <i
               v-if="permission.locked"
-              v-tooltip="permission.tooltip"
+              v-clean-tooltip="permission.tooltip"
               class="icon icon-lock icon-fw"
             />
           </div>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -182,7 +182,7 @@ export default {
     />
     <div class="resource-availability mr-10">
       <PercentageBar
-        v-tooltip="tooltip"
+        v-clean-tooltip="tooltip"
         class="percentage-bar"
         :value="percentageUsed"
         :slices="slices"

package/components/form/ServicePorts.vue

@@ -137,7 +137,7 @@ export default {
         <span class="port">
           <t k="servicePorts.rules.listening.label" />
           <i
-            v-tooltip="t('servicesPage.listeningPorts')"
+            v-clean-tooltip="t('servicesPage.listeningPorts')"
             class="icon icon-info flex"
           />
           <span class="text-error">*</span>
@@ -151,7 +151,7 @@ export default {
         <span class="target-port">
           <t k="servicePorts.rules.target.label" />
           <i
-            v-tooltip="t('servicesPage.targetPorts')"
+            v-clean-tooltip="t('servicesPage.targetPorts')"
             class="icon icon-info flex"
           />
           <span class="text-error">*</span>