@rancher/shell 3.0.8-rc.8 → 3.0.8

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

@@ -1,5 +1,7 @@
 import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
-import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespace, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import {
+  PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespace, PaginationParamFilter, PaginationFilterEquality
+} 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 ModelNamespace from '@shell/models/namespace';
 import { uniq } from '@shell/utils/array';
@@ -35,18 +37,33 @@ interface Namespace extends ModelNamespace {
   }
 }
 
+interface NamespaceProjectFilterResult {
+  /**
+   * True if the ns should be filtered IN. False if filtered OUT.
+   */
+  [nsName: string]: boolean;
+}
+
+/**
+ * Helper class, contains namespace / project filter specific functions
+ */
 class NamespaceProjectFilters {
   /**
    * User needs all resources.... except if there's some settings which should remove resources in specific circumstances
    */
   protected handlePrefAndSettingFilter(args: {
     allNamespaces: Namespace[],
+    /**
+     * Reserved / Obscure namespaces are ones used to support clusters and users. By default these are hidden
+     */
     showReservedRancherNamespaces: boolean,
+    /**
+     * Has product config disabled system projects and namespaces
+     */
     productHidesSystemNamespaces: boolean,
-  }): PaginationParamFilter[] {
+  }): NamespaceProjectFilterResult {
     const { allNamespaces, showReservedRancherNamespaces, productHidesSystemNamespaces } = args;
 
-    // These are AND'd together
     // Not ns 1 AND ns 2
     return allNamespaces.reduce((res, ns) => {
       // Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
@@ -56,13 +73,11 @@ class NamespaceProjectFilters {
       const hideSystem = productHidesSystemNamespaces ? ns.isSystem : false;
 
       if (hideObscure || hideSystem) {
-        res.push(PaginationParamFilter.createSingleField({
-          field: 'metadata.namespace', value: ns.name, equals: false
-        }));
+        res[ns.name] = false;
       }
 
       return res;
-    }, [] as PaginationParamFilter[]);
+    }, {} as NamespaceProjectFilterResult);
   }
 
   /**
@@ -76,31 +91,88 @@ class NamespaceProjectFilters {
     allNamespaces: Namespace[],
     isAllSystem: boolean,
     isAllUser: boolean,
-  }) {
-    const { allNamespaces, isAllSystem } = args;
+  }): NamespaceProjectFilterResult {
+    const { allNamespaces, isAllSystem, isAllUser } = args;
     const allSystem = allNamespaces.filter((ns) => ns.isSystem);
 
-    // > Neither of these use projectsOrNamespaces to avoid scenarios where the local cluster provides a namespace which has
-    // > a matching project... which could lead to results in the user project resource being included in the system filter
-    if (isAllSystem) {
-      // return resources in system ns 1 OR in system ns 2 ...
-      // &filter=metadata.namespace=system ns 1,metadata.namespace=system ns 2
-      return [PaginationParamFilter.createMultipleFields(
-        allSystem.map(
-          (ns) => new PaginationFilterField({ field: 'metadata.namespace', value: ns.name })
-        )
-      )];
-    } else { // if isAllUser
-      // return resources not in system ns 1 AND not in system ns 2 ...
-      // &filter=metadata.namespace!=system ns 1&filter=metadata.namespace!=system ns 2
-      return allSystem.map((ns) => PaginationParamFilter.createSingleField({
-        field: 'metadata.namespace', value: ns.name, equals: false
+    return allSystem.reduce((res, ns) => {
+      if (isAllSystem) {
+        // We want to filter IN system namespaces
+        res[ns.name] = true;
+      }
+
+      if (isAllUser) {
+        // We want to filter OUT system namespaces
+        res[ns.name] = false;
+      }
+
+      return res;
+    }, {} as NamespaceProjectFilterResult);
+  }
+
+  /**
+   * Combine result `b` into `a` and return result
+   */
+  protected combineNsProjectFilterResults(a: NamespaceProjectFilterResult, b: NamespaceProjectFilterResult): NamespaceProjectFilterResult {
+    // Start with `a`
+    const res = { ...a };
+
+    // Merge entries from `b` into `a` if they don't exist in `a`. This maintains a hierarchy
+    // 1. if something has been excluded in `a` ignore requests to include given `b`
+    // 2. if something has been included in `a` ignore requests to exclude given `b`
+    Object.entries(b).forEach(([ns, include]) => {
+      if (res[ns] === undefined) {
+        res[ns] = include;
+      }
+    });
+
+    return res;
+  }
+
+  /**
+   * Convert @NamespaceProjectFilterResult into @PaginationParamFilter
+   */
+  protected createFiltersFromNamespaceProjectFilterResult(filterResult: NamespaceProjectFilterResult): PaginationParamFilter[] {
+    const inList: string[] = [];
+    const outList: string[] = [];
+
+    Object.entries(filterResult).forEach(([ns, include]) => {
+      if (include) {
+        inList.push(ns);
+      } else {
+        outList.push(ns);
+      }
+    });
+
+    const res: PaginationParamFilter[] = [];
+
+    // There's no point having both IN and OUT lists together, so prefer the IN list
+    if (inList.length) {
+      res.push(new PaginationParamFilter({
+        fields: [{
+          value:    inList.join(','),
+          equality: PaginationFilterEquality.IN,
+          field:    'metadata.namespace',
+        }],
+      }));
+    } else if (outList.length) {
+      res.push(new PaginationParamFilter({
+        fields: [{
+          value:    outList.join(','),
+          equality: PaginationFilterEquality.NOT_IN,
+          field:    'metadata.namespace',
+        }],
       }));
     }
+
+    return res;
   }
 
   /**
    * User needs resources in a set of projects or namespaces
+   *
+   * Mainly deals with the projectornamespaces filter, also ensures namespace in local cluster matching target project's aren't included
+   *
    */
   protected handleSelectionFilter(neu: string[], isLocalCluster: boolean) {
     // User has one or more projects or namespaces. We can pass this straight through to projectsornamespaces
@@ -112,12 +184,12 @@ class NamespaceProjectFilters {
     ];
 
     if (isLocalCluster) {
-      // > As per `handleSystemOrUserFilter` above, we need to be careful of the local cluster where there's namespaces related to projects with the same id
-      // > In this case
+      // We need to be careful of the local cluster where there's namespaces related to projects with the same id
+      // In this case
       // - We're including resources in the project and it's related namespace (via projectsornamespaces)
       // - We're also then excluding resources in the related namespace (via below `filter`)
 
-      // Exclude resources NOT in projects namespace 1 AND not in projects namespace 2
+      // Exclude resources NOT in project's backing namespace 1 AND not in project's backing namespace 2
       // &filter=metadata.namespace!=pn1&filter=metadata.namespace!=pn2
       return {
         projectsOrNamespaces,
@@ -340,24 +412,29 @@ class StevePaginationUtils extends NamespaceProjectFilters {
     let projectsOrNamespaces: PaginationParamProjectOrNamespace[] = [];
     // used to return resources in / not in namespaces
     // &filter=metadata.namespace=abc
-    let filters: PaginationParamFilter[] = [];
+    const filters: PaginationParamFilter[] = [];
+    let nsProjectFilterResults = {};
 
     if (!showReservedRancherNamespaces || productHidesSystemNamespaces) {
-      // We need to hide reserved namespaces ('c-', 'user-', etc) OR system namespaces
-      filters = this.handlePrefAndSettingFilter({
+      // We need to hide reserved namespaces ('c-', 'user-', etc) OR system namespaces (given product may hide them)
+      nsProjectFilterResults = this.combineNsProjectFilterResults(nsProjectFilterResults, this.handlePrefAndSettingFilter({
         allNamespaces, showReservedRancherNamespaces, productHidesSystemNamespaces
-      });
+      }));
     }
 
     const isAllSystem = selection[0] === NAMESPACE_FILTER_ALL_SYSTEM;
     const isAllUser = selection[0] === NAMESPACE_FILTER_ALL_USER;
 
     if (selection.length === 1 && (isAllSystem || isAllUser)) {
-      // Filter by resources either in or not in system namespaces
-      filters.push(...this.handleSystemOrUserFilter({
+      // Filter by resources either in or not in system namespaces (given user selection)
+      nsProjectFilterResults = this.combineNsProjectFilterResults(nsProjectFilterResults, this.handleSystemOrUserFilter({
         allNamespaces, isAllSystem, isAllUser
       }));
+
+      filters.push(...this.createFiltersFromNamespaceProjectFilterResult(nsProjectFilterResults));
     } else {
+      filters.push(...this.createFiltersFromNamespaceProjectFilterResult(nsProjectFilterResults));
+
       // User has one or more projects or namespaces
       const res = this.handleSelectionFilter(selection, isLocalCluster);
 
@@ -502,29 +579,36 @@ class StevePaginationUtils extends NamespaceProjectFilters {
               // Check if the API supports filtering by this field
               this.validateField(validateFields, schema, field.field);
 
-              // we're just checking that the field exists, so there's no value
+              // we're just checking that the field exists, so there's no equality or value
               if (field.exists) {
                 return field.field;
               }
-              const encodedValue = encodeURIComponent(field.value || '');
 
-              // = exact match (equals + exact)
-              // ~ partial match (equals + !exact)
-              // != not exact match (!equals + exact)
-              // !~ not partial match (!equals + !exact)
-              const operator = `${ field.equals ? '' : '!' }${ field.exact ? '=' : '~' }`;
+              // If field was created by PaginationFilterField ctor equality will be set. If field created by json (legacy) it might not
+              const equality = field.equality || PaginationFilterField.safeEquality(field);
+
+              if (!equality) {
+                throw new Error(`A pagination filter must contain an equality. ${ JSON.stringify(field) }`);
+              }
+
               let safeValue;
 
-              if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value || '')) {
-                // Does not contain any protected characters, send as is
-                safeValue = encodedValue;
+              if ([PaginationFilterEquality.IN, PaginationFilterEquality.NOT_IN].includes(equality)) {
+                safeValue = `(${ field.value })`;
               } else {
-                // Contains protected characters, wrap in quotes to ensure backend doesn't fail
-                // - replace reserver `"`/`%22` with empty string - see https://github.com/rancher/dashboard/issues/14549 for improvement
-                safeValue = `"${ encodedValue.replaceAll('%22', '') }"`;
+                const encodedValue = encodeURIComponent(field.value || '');
+
+                if (StevePaginationUtils.VALID_FIELD_VALUE_REGEX.test(field.value || '')) {
+                  // Does not contain any protected characters, send as is
+                  safeValue = encodedValue;
+                } else {
+                  // Contains protected characters, wrap in quotes to ensure backend doesn't fail
+                  // - replace reserver `"`/`%22` with empty string - see https://github.com/rancher/dashboard/issues/14549 for improvement
+                  safeValue = `"${ encodedValue.replaceAll('%22', '') }"`;
+                }
               }
 
-              return `${ this.convertArrayPath(field.field) }${ operator }${ safeValue }`;
+              return `${ this.convertArrayPath(field.field) }${ equality }${ safeValue }`;
             }
 
             return field.value;

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

@@ -269,7 +269,7 @@ export default defineComponent({
     class="checkbox-outer-container"
     data-checkbox-ctrl
     :class="{
-      'v-popper--has-tooltip': hasTooltip,
+      'has-clean-tooltip': hasTooltip,
     }"
   >
     <label

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

@@ -355,7 +355,7 @@ export default defineComponent({
       disabled: isDisabled,
       [status]: status,
       suffix: hasSuffix,
-      'v-popper--has-tooltip': hasTooltip,
+      'has-clean-tooltip': hasTooltip,
       'compact-input': isCompact,
       hideArrows,
       [className]: true

package/rancher-components/Pill/RcStatusBadge/RcStatusBadge.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { RcStatusBadgeProps } from './types';
+import { useStatusColors } from '@components/utils/status';
 
 const props = defineProps<RcStatusBadgeProps>();
+
+const { backgroundColor, borderColor, textColor } = useStatusColors(props, 'outlined');
 </script>
 
 <template>
@@ -27,47 +30,8 @@ const props = defineProps<RcStatusBadgeProps>();
     font-size: 12px;
     line-height: 19px;
 
-    &.info {
-        background-color: var(--rc-info-secondary);
-        border-color: var(--rc-info-secondary);
-        color: var(--rc-info);
-    }
-
-    &.success {
-        background-color: var(--rc-success-secondary);
-        border-color: var(--rc-success-secondary);
-        color: var(--rc-success);
-    }
-
-    &.warning {
-        background-color: var(--rc-warning);
-        border-color: var(--rc-warning);
-        color: var(--rc-warning-secondary);
-    }
-
-    &.error {
-        background-color: var(--rc-error);
-        border-color: var(--rc-error);
-        color: var(--rc-error-secondary);
-    }
-
-    &.unknown {
-        background-color: var(--rc-unknown);
-        border-color: var(--rc-unknown);
-        color: var(--rc-unknown-secondary);
-    }
-
-    &.none {
-        border-color: var(--rc-none);
-        color: var(--rc-none-secondary);
-    }
-
-    &.prime {
-        background-color: var(--rc-success-secondary);
-        border-color: var(--rc-success-secondary);
-        color: var(--rc-success);
-        font-size: 10px;
-        line-height: 15px;
-    }
+    background-color: v-bind(backgroundColor);
+    border-color: v-bind(borderColor);
+    color: v-bind(textColor);
 }
 </style>

package/rancher-components/Pill/RcStatusBadge/index.ts

@@ -1,2 +1 @@
 export { default } from './RcStatusBadge.vue';
-export type { Status } from '../types';

package/rancher-components/Pill/RcStatusBadge/types.ts

@@ -1,4 +1,4 @@
-import { Status } from '@components/Pill/types';
+import { Status } from '@components/utils/status';
 
 export interface RcStatusBadgeProps {
   status: Status;

package/rancher-components/Pill/RcStatusIndicator/RcStatusIndicator.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { RcStatusIndicatorProps } from './types';
+import { useStatusColors } from '@components/utils/status';
 
 const props = defineProps<RcStatusIndicatorProps>();
+
+const { backgroundColor, borderColor } = useStatusColors(props, 'solid');
 </script>
 
 <template>
@@ -42,34 +45,8 @@ const props = defineProps<RcStatusIndicatorProps>();
             border-radius: 2px;
         }
 
-        &.info {
-            background-color: var(--rc-info);
-            border-color: var(--rc-info);
-        }
-
-        &.success {
-            background-color: var(--rc-success);
-            border-color: var(--rc-success);
-        }
-
-        &.warning {
-            background-color: var(--rc-warning);
-            border-color: var(--rc-warning);
-        }
-
-        &.error {
-            background-color: var(--rc-error);
-            border-color: var(--rc-error);
-        }
-
-        &.unknown {
-            background-color: var(--rc-unknown);
-            border-color: var(--rc-unknown);
-        }
-
-        &.none {
-            border-color: var(--rc-none);
-        }
+        background-color: v-bind(backgroundColor);
+        border-color: v-bind(borderColor);
     }
 }
 </style>

package/rancher-components/Pill/RcStatusIndicator/types.ts

@@ -1,4 +1,5 @@
-import { Status } from '../types';
+import { Status } from '@components/utils/status';
+
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
 
 export interface RcStatusIndicatorProps {

package/rancher-components/Pill/types.ts

@@ -1,3 +1,2 @@
 export type Shape = 'disc' | 'horizontal-bar' | 'vertical-bar';
-export type Status = 'info' | 'success' | 'warning' | 'error' | 'unknown' | 'none';
 export type Type = 'active' | 'inactive';

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -1,9 +1,7 @@
-import { ref, provide, nextTick, defineEmits } from 'vue';
+import { ref, provide, nextTick, EmitFn } from 'vue';
 import { useDropdownCollection } from './useDropdownCollection';
 import { RcButtonType } from '@components/RcButton';
 
-const rcDropdownEmits = defineEmits(['update:open']);
-
 /**
  * Composable that provides the context for a dropdown menu. Includes methods
  * and state for managing the dropdown's visibility, focus, and keyboard
@@ -13,7 +11,7 @@ const rcDropdownEmits = defineEmits(['update:open']);
  * @returns Dropdown context methods and state. Used for programmatic
  * interactions and setting focus.
  */
-export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
+export const useDropdownContext = (emit: EmitFn<['update:open']>) => {
   const {
     dropdownItems,
     firstDropdownItem,

package/rancher-components/RcIcon/RcIcon.test.ts

@@ -0,0 +1,51 @@
+import { shallowMount } from '@vue/test-utils';
+import RcIcon from './RcIcon.vue';
+
+describe('rcIcon.vue', () => {
+  it('renders with the correct type class and size classes', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.classes()).toContain('icon-search');
+    expect(wrapper.classes()).toContain('medium');
+  });
+
+  it('sets aria-hidden to true by default', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size: 'medium',
+        type: 'search',
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+
+  it('sets aria-hidden to false when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: false,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('false');
+  });
+
+  it('sets aria-hidden to true when explicitly provided', () => {
+    const wrapper = shallowMount(RcIcon, {
+      props: {
+        size:       'medium',
+        type:       'search',
+        ariaHidden: true,
+      },
+    });
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true');
+  });
+});

package/rancher-components/RcIcon/RcIcon.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { RcIconProps, RcIconType, RcIconSize } from '@components/RcIcon/types';
+import { computed } from 'vue';
+import { useStatusColors } from '@components/utils/status';
+const props = withDefaults(defineProps<RcIconProps>(), { size: 'small', ariaHidden: true });
+const fontSize = computed(() => {
+  return RcIconSize[props.size];
+});
+
+const iconClass = computed(() => {
+  return RcIconType[props.type];
+});
+
+const status = computed(() => {
+  if (props.status && props.status !== 'inherit') {
+    return props.status;
+  }
+
+  return 'none';
+});
+
+const { textColor } = useStatusColors({ status: status.value }, 'outlined');
+
+const color = computed(() => {
+  if (props.status === 'inherit') {
+    return 'inherit';
+  }
+
+  return textColor.value;
+});
+</script>
+
+<template>
+  <i
+    class="rc-icon"
+    :class="{[props.size]: true, [iconClass]: true}"
+    :aria-hidden="props.ariaHidden"
+  />
+</template>
+
+<style lang="scss" scoped>
+.rc-icon {
+  font-size: v-bind(fontSize);
+  color: v-bind(color);
+}
+</style>

package/rancher-components/RcIcon/index.ts

@@ -0,0 +1 @@
+export { default as RcIcon } from './RcIcon.vue';