@rancher/shell 3.0.7 → 3.0.8-rc.10

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

@@ -0,0 +1,333 @@
+
+import { PaginationFilterEquality, PaginationFilterField, PaginationParamFilter, PaginationParamProjectOrNamespace } from '@shell/types/store/pagination.types';
+import { NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
+import stevePaginationUtils from '../steve-pagination-utils';
+import Schema from '@shell/models/schema';
+
+/**
+ * The `NamespaceProjectFilters` class is a protected class within `steve-pagination-utils.ts`.
+ * To test its protected methods, we extend it with a test class that exposes them.
+ */
+class TestNamespaceProjectFilters {
+  public handlePrefAndSettingFilter(args: any) {
+    return stevePaginationUtils.handlePrefAndSettingFilter(args);
+  }
+
+  public handleSystemOrUserFilter(args: any) {
+    return stevePaginationUtils.handleSystemOrUserFilter(args);
+  }
+
+  public handleSelectionFilter(neu: string[], isLocalCluster: boolean) {
+    return stevePaginationUtils.handleSelectionFilter(neu, isLocalCluster);
+  }
+}
+
+describe('class: NamespaceProjectFilters', () => {
+  const testNamespaceProjectFilters = new TestNamespaceProjectFilters();
+
+  const normalNs = {
+    id: 'normal', name: 'normal', isObscure: false, isSystem: false
+  };
+  const obscureNs = {
+    id: 'obscure', name: 'obscure', isObscure: true, isSystem: false
+  };
+  const systemNs = {
+    id: 'system', name: 'system', isObscure: false, isSystem: true
+  };
+  const obscureAndSystemNs = {
+    id: 'obscure-system', name: 'obscure-system', isObscure: true, isSystem: true
+  };
+
+  const allNamespaces = [normalNs, obscureNs, systemNs, obscureAndSystemNs];
+
+  describe('method: handlePrefAndSettingFilter', () => {
+    it('should return no filters if all namespaces are shown', () => {
+      const result = testNamespaceProjectFilters.handlePrefAndSettingFilter({
+        allNamespaces,
+        showReservedRancherNamespaces: true,
+        productHidesSystemNamespaces:  false,
+      });
+
+      expect(result).toStrictEqual([]);
+    });
+
+    it('should filter obscure namespaces if showReservedRancherNamespaces is false', () => {
+      const result = testNamespaceProjectFilters.handlePrefAndSettingFilter({
+        allNamespaces,
+        showReservedRancherNamespaces: false,
+        productHidesSystemNamespaces:  false,
+      });
+
+      expect(result).toHaveLength(1);
+      expect(result).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          value: 'obscure,obscure-system', equality: ' NOTIN ', field: `metadata.namespace`
+        })]
+      }));
+    });
+
+    it('should filter system namespaces if productHidesSystemNamespaces is true', () => {
+      const result = testNamespaceProjectFilters.handlePrefAndSettingFilter({
+        allNamespaces,
+        showReservedRancherNamespaces: true,
+        productHidesSystemNamespaces:  true,
+      });
+
+      expect(result).toHaveLength(1);
+      expect(result).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          value: 'system,obscure-system', equality: ' NOTIN ', field: `metadata.namespace`
+        })]
+      }));
+    });
+
+    it('should filter both obscure and system namespaces when both settings are active', () => {
+      const result = testNamespaceProjectFilters.handlePrefAndSettingFilter({
+        allNamespaces,
+        showReservedRancherNamespaces: false,
+        productHidesSystemNamespaces:  true,
+      });
+
+      expect(result).toHaveLength(1);
+      expect(result).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          value: 'obscure,system,obscure-system', equality: ' NOTIN ', field: `metadata.namespace`
+        })]
+      }));
+    });
+  });
+
+  describe('method: handleSystemOrUserFilter', () => {
+    it('should create an OR filter for system namespaces when isAllSystem is true', () => {
+      const result = testNamespaceProjectFilters.handleSystemOrUserFilter({
+        allNamespaces,
+        isAllSystem: true,
+        isAllUser:   false,
+      });
+
+      expect(result).toHaveLength(1);
+      const filter = result[0] as PaginationParamFilter;
+
+      expect(filter.fields).toHaveLength(2);
+      expect(filter.fields).toContainEqual(expect.objectContaining({
+        value: 'system', equality: '=', field: 'metadata.namespace'
+      }));
+      expect(filter.fields).toContainEqual(expect.objectContaining({
+        value: 'obscure-system', equality: '=', field: 'metadata.namespace'
+      }));
+    });
+
+    it('should create AND filters to exclude system namespaces when isAllUser is true', () => {
+      const result = testNamespaceProjectFilters.handleSystemOrUserFilter({
+        allNamespaces,
+        isAllSystem: false,
+        isAllUser:   true,
+      });
+
+      expect(result).toHaveLength(2);
+      expect(result).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          value: 'system', equality: '!=', field: 'metadata.namespace'
+        })]
+      }));
+      expect(result).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          value: 'obscure-system', equality: '!=', field: 'metadata.namespace'
+        })]
+      }));
+    });
+  });
+
+  describe('method: handleSelectionFilter', () => {
+    const selection = ['ns-1', `${ NAMESPACE_FILTER_P_FULL_PREFIX }p-1`];
+
+    it('should create projectsOrNamespaces filter for a selection in a non-local cluster', () => {
+      const result = testNamespaceProjectFilters.handleSelectionFilter(selection, false);
+
+      expect(result.projectsOrNamespaces).toHaveLength(1);
+      const pnsFilter = result.projectsOrNamespaces[0] as PaginationParamProjectOrNamespace;
+
+      expect(pnsFilter.param).toBe('projectsornamespaces');
+      expect(pnsFilter.fields).toHaveLength(2);
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'ns-1' }));
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'p-1' }));
+      expect(result.filters).toStrictEqual([]);
+    });
+
+    it('should create projectsOrNamespaces and an exclusion filter for a selection in a local cluster', () => {
+      const result = testNamespaceProjectFilters.handleSelectionFilter(selection, true);
+
+      // projectsOrNamespaces part
+      expect(result.projectsOrNamespaces).toHaveLength(1);
+      const pnsFilter = result.projectsOrNamespaces[0] as PaginationParamProjectOrNamespace;
+
+      expect(pnsFilter.param).toBe('projectsornamespaces');
+      expect(pnsFilter.fields).toHaveLength(2);
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'ns-1' }));
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'p-1' }));
+
+      // filters part
+      expect(result.filters).toHaveLength(1);
+      const filter = result.filters[0] as PaginationParamFilter;
+
+      expect(filter.fields).toHaveLength(1);
+      expect(filter.fields).toContainEqual(expect.objectContaining({
+        field:    'metadata.namespace',
+        equality: '!=',
+        value:    'p-1',
+      }));
+    });
+
+    it('should handle selections with only namespaces in a local cluster', () => {
+      const nsSelection = ['ns-1', 'ns-2'];
+      const result = testNamespaceProjectFilters.handleSelectionFilter(nsSelection, true);
+
+      expect(result.projectsOrNamespaces).toHaveLength(1);
+      const pnsFilter = result.projectsOrNamespaces[0] as PaginationParamProjectOrNamespace;
+
+      expect(pnsFilter.fields).toHaveLength(2);
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'ns-1' }));
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'ns-2' }));
+      expect(result.filters).toStrictEqual([]);
+    });
+
+    it('should handle selections with only projects in a local cluster', () => {
+      const projectSelection = [`${ NAMESPACE_FILTER_P_FULL_PREFIX }p-1`, `${ NAMESPACE_FILTER_P_FULL_PREFIX }p-2`];
+      const result = testNamespaceProjectFilters.handleSelectionFilter(projectSelection, true);
+
+      expect(result.projectsOrNamespaces).toHaveLength(1);
+      const pnsFilter = result.projectsOrNamespaces[0] as PaginationParamProjectOrNamespace;
+
+      expect(pnsFilter.fields).toHaveLength(2);
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'p-1' }));
+      expect(pnsFilter.fields).toContainEqual(expect.objectContaining({ value: 'p-2' }));
+
+      expect(result.filters).toHaveLength(2);
+      expect(result.filters).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          field:    'metadata.namespace',
+          equality: '!=',
+          value:    'p-1'
+        })],
+      }));
+      expect(result.filters).toContainEqual(expect.objectContaining({
+        fields: [expect.objectContaining({
+          field:    'metadata.namespace',
+          equality: '!=',
+          value:    'p-2'
+        })],
+      }));
+    });
+  });
+});
+
+class TestStevePaginationUtils {
+  public convertPaginationParams(args: any) {
+    return stevePaginationUtils.convertPaginationParams(args);
+  }
+}
+
+describe('class StevePaginationUtils', () => {
+  const testStevePaginationUtils = new TestStevePaginationUtils();
+  const schema = { id: 'pod' } as unknown as Schema;
+
+  it('should return an empty string for no filters', () => {
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters: [] });
+
+    expect(result).toBe('');
+  });
+
+  it('should handle a single filter with a single field', () => {
+    const filters = [
+      new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.name', value: 'test' })] }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=metadata.name=test');
+  });
+
+  it('should handle a single filter with a single field with encoded char', () => {
+    const filters = [
+      new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.name', value: 'te/st' })] }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=metadata.name="te%2Fst"');
+  });
+
+  it('should handle a single filter with multiple fields (OR)', () => {
+    const filters = [
+      new PaginationParamFilter({
+        fields: [
+          new PaginationFilterField({ field: 'metadata.name', value: 'test1' }),
+          new PaginationFilterField({ field: 'metadata.namespace', value: 'ns1' }),
+        ],
+      }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=metadata.name=test1,metadata.namespace=ns1');
+  });
+
+  it('should handle multiple filters (AND)', () => {
+    const filters = [
+      new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.name', value: 'test1' })] }),
+      new PaginationParamFilter({ fields: [new PaginationFilterField({ field: 'metadata.namespace', value: 'ns1' })] }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=metadata.name=test1&filter=metadata.namespace=ns1');
+  });
+
+  it('should handle different equality operators', () => {
+    const filters = [
+      new PaginationParamFilter({
+        fields: [
+          new PaginationFilterField({
+            field:    'spec.containers.image',
+            value:    'nginx',
+            equality: PaginationFilterEquality.CONTAINS,
+          }),
+        ],
+      }),
+      new PaginationParamFilter({
+        fields: [
+          new PaginationFilterField({
+            field:    'metadata.name',
+            value:    'test',
+            equality: PaginationFilterEquality.NOT_EQUALS,
+          }),
+        ],
+      }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=spec.containers.image~nginx&filter=metadata.name!=test');
+  });
+
+  it('should handle IN and NOT_IN operators', () => {
+    const filters = [
+      new PaginationParamFilter({
+        fields: [
+          new PaginationFilterField({
+            field:    'metadata.name',
+            value:    'test1,test2',
+            equality: PaginationFilterEquality.IN,
+          }),
+        ],
+      }),
+      new PaginationParamFilter({
+        fields: [
+          new PaginationFilterField({
+            field:    'metadata.namespace',
+            value:    'ns1,ns2',
+            equality: PaginationFilterEquality.NOT_IN,
+          }),
+        ],
+      }),
+    ];
+    const result = testStevePaginationUtils.convertPaginationParams({ schema, filters });
+
+    expect(result).toBe('filter=metadata.name IN (test1,test2)&filter=metadata.namespace NOTIN (ns1,ns2)');
+  });
+});

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';
@@ -48,7 +50,7 @@ class NamespaceProjectFilters {
 
     // These are AND'd together
     // Not ns 1 AND ns 2
-    return allNamespaces.reduce((res, ns) => {
+    const filterNamespaces = allNamespaces.reduce((res, ns) => {
       // Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
       const hideObscure = showReservedRancherNamespaces ? false : ns.isObscure;
 
@@ -56,13 +58,23 @@ class NamespaceProjectFilters {
       const hideSystem = productHidesSystemNamespaces ? ns.isSystem : false;
 
       if (hideObscure || hideSystem) {
-        res.push(PaginationParamFilter.createSingleField({
-          field: 'metadata.namespace', value: ns.name, equals: false
-        }));
+        res.push(ns.name);
       }
 
       return res;
-    }, [] as PaginationParamFilter[]);
+    }, [] as String[]);
+
+    if (filterNamespaces.length) {
+      return [new PaginationParamFilter({
+        fields: [{
+          value:    filterNamespaces.join(','),
+          equality: PaginationFilterEquality.NOT_IN,
+          field:    'metadata.namespace',
+        }],
+      })];
+    }
+
+    return [];
   }
 
   /**
@@ -502,29 +514,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;
@@ -676,8 +695,8 @@ export const PAGINATION_SETTINGS_STORE_DEFAULTS: PaginationSettingsStores = {
       enableAll:  false,
       enableSome: {
         enabled: [
-          // { resource: CAPI.RANCHER_CLUSTER, context: ['home', 'side-bar'] },
-          // { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
+          { resource: CAPI.RANCHER_CLUSTER, context: ['side-bar'] },
+          { resource: MANAGEMENT.CLUSTER, context: ['side-bar'] },
           { resource: CATALOG.APP, context: ['branding'] },
           SECRET
         ],

package/plugins/steve/subscribe.js

@@ -888,16 +888,20 @@ const defaultActions = {
             }
           });
         }
-
         // Should any listeners be notified of this request for them to kick off their own event handling?
-        getters.listenerManager.triggerEventListener({ event: STEVE_WATCH_MODE.RESOURCE_CHANGES, params });
+        getters.listenerManager.triggerEventListener({
+          event:  STEVE_WATCH_MODE.RESOURCE_CHANGES,
+          params: {
+            ...params,
+            forceWatch: opt.forceWatch
+          }
+        });
       } else {
         have = getters['all'](resourceType).slice();
 
         if ( namespace ) {
           have = have.filter((x) => x.metadata?.namespace === namespace);
         }
-
         want = await dispatch('findAll', {
           type:           resourceType,
           watchNamespace: namespace,
@@ -1181,12 +1185,16 @@ const defaultActions = {
       });
 
       if (hasEventListeners) {
-        // If there's event listeners always kick them off
-        // - The re-watch associated with normal watches will watch from a revision from it's own cache
-        // - The revision in that cache might be ahead of the state the listeners have, so the watch won't ping something for the listeners to trigger on
-        // - so to work around this whenever we start the watches again trigger off the changes for it
-        // Improvement - we only do one event here (currently the only one supported), could expand to others
-        getters.listenerManager.triggerEventListener({ event: STEVE_WATCH_EVENT_TYPES.CHANGES, params: obj });
+        const inError = getters.inError(obj); // We don't want to force listeners to resync if the socket is in error (handled by resource.error mechanism)
+
+        if (!inError) {
+          // If there's event listeners kick them off
+          // - The re-watch associated with normal watches will watch from a revision from it's own cache
+          // - The revision in that cache might be ahead of the state the listeners have, so the watch won't ping something for the listeners to trigger on
+          // - so to work around this whenever we start the watches again trigger off the changes for it
+          // Improvement - we only do one event here (currently the only one supported), could expand to others
+          getters.listenerManager.triggerEventListener({ event: STEVE_WATCH_EVENT_TYPES.CHANGES, params: obj });
+        }
       }
     }
   },

package/plugins/subscribe-events.ts

@@ -167,7 +167,7 @@ export class SteveWatchEventListenerManager {
 
     if (eventWatcher) {
       Object.values(eventWatcher.callbacks).forEach((cb) => {
-        cb();
+        cb({ forceWatch: params.forceWatch }); // eslint-disable-line node/no-callback-literal
       });
     }
   }
@@ -176,7 +176,9 @@ export class SteveWatchEventListenerManager {
     const watch = this.getWatch({ params });
 
     watch.listeners.forEach((l) => {
-      Object.values(l.callbacks || {}).forEach((cb) => cb());
+      Object.values(l.callbacks || {}).forEach((cb) => {
+        cb({ forceWatch: params.forceWatch });// eslint-disable-line node/no-callback-literal
+      });
     });
   }
 

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

@@ -445,7 +445,7 @@ $fontColor: var(--input-label);
     -ms-transform: rotate(0deg) scale(1);
     transform: rotate(0deg) scale(1);
     opacity:1;
-    border: 1px solid var(--active, var(--primary));
+    border: 1px solid var(--checkbox-border, var(--primary));
   }
 
   // Custom Checkbox tick

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,39 +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);
-    }
+    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/RcDropdownItem.vue

@@ -36,6 +36,7 @@ const handleClick = (e: MouseEvent) => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @mousedown.prevent="() => {/*We use this to prevent clicks from triggering the @focusin below. When we scroll on a click it prevents the action from occurring on the first click.*/}"
     @focusin="scrollIntoView"
   >
     <slot name="before">

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -22,6 +22,10 @@ defineProps({
       return [];
     }
   },
+  label: {
+    type:    String,
+    default: ''
+  }
 });
 const emits = defineEmits(['click', 'select']);
 
@@ -55,7 +59,7 @@ const focusMenuItem = () => {
     <LabeledSelect
       ref="menuItemSelect"
       :value="modelValue"
-      :label="t('wm.containerLogs.range.label')"
+      :label="label"
       :options="options"
       :clearable="false"
       placement="top"