@rancher/shell 3.0.8-rc.9 → 3.0.8

package/apis/shell/__tests__/system.test.ts

@@ -0,0 +1,129 @@
+// system.test.ts
+
+import {
+  describe, it, expect, jest, beforeEach
+} from '@jest/globals';
+import { SystemApiImpl } from '../system';
+import { Store } from 'vuex';
+
+// --- Mock the external modules ---
+
+// 1. Import the functions we need to mock
+import { getVersionData, getKubeVersionData, isRancherPrime } from '@shell/config/version';
+import { isDevBuild, isPrerelease } from '@shell/utils/version';
+
+// 2. Tell Jest to mock the entire module
+// We provide a factory function () => ({ ... }) to define the mock implementation.
+jest.mock('@shell/config/version', () => ({
+  getVersionData:     jest.fn(),
+  getKubeVersionData: jest.fn(),
+  isRancherPrime:     jest.fn(),
+}));
+
+jest.mock('@shell/utils/version', () => ({
+  isDevBuild:   jest.fn(),
+  isPrerelease: jest.fn(),
+}));
+
+// 3. Cast the imported functions to Jest Mocks for type-safety
+const mockGetVersionData = getVersionData as jest.Mock;
+const mockGetKubeVersionData = getKubeVersionData as jest.Mock;
+const mockIsRancherPrime = isRancherPrime as jest.Mock;
+const mockIsDevBuild = isDevBuild as jest.Mock;
+const mockIsPrerelease = isPrerelease as jest.Mock;
+
+// --- End of Mocking Setup ---
+
+describe('systemApiImpl', () => {
+  let mockStore: Store<any>;
+  let systemApi: SystemApiImpl;
+  let mockGetter: jest.Mock;
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    mockGetVersionData.mockClear();
+    mockGetKubeVersionData.mockClear();
+    mockIsRancherPrime.mockClear();
+    mockIsDevBuild.mockClear();
+    mockIsPrerelease.mockClear();
+
+    // Arrange: Mock the store
+    mockGetter = jest.fn() as any;
+    mockStore = {
+      getters: { 'management/byId': mockGetter },
+      $config: { dashboardVersion: 'v2.9-test' }
+    } as any;
+
+    // Arrange: Instantiate the class
+    systemApi = new SystemApiImpl(mockStore);
+  });
+
+  // --- Tests for Store-based Getters ---
+
+  it('should get uiVersion from store.$config', () => {
+    expect(systemApi.uiVersion).toBe('v2.9-test');
+  });
+  // --- Tests for Mocked Module Getters ---
+
+  it('should get rancherVersion and gitCommit from getVersionData', () => {
+    // Arrange: Define the return value for this test
+    mockGetVersionData.mockReturnValue({ Version: 'v2.8.0', GitCommit: 'abc1234' });
+
+    // Act & Assert
+    expect(systemApi.rancherVersion).toBe('v2.8.0');
+    expect(systemApi.gitCommit).toBe('abc1234');
+    expect(mockGetVersionData).toHaveBeenCalledTimes(2); // Called for both getters
+  });
+
+  it('should get kubernetesVersion and buildPlatform from getKubeVersionData', () => {
+    // Arrange
+    mockGetKubeVersionData.mockReturnValue({ gitVersion: 'v1.25.0', platform: 'linux/amd64' });
+
+    // Act & Assert
+    expect(systemApi.kubernetesVersion).toBe('v1.25.0');
+  });
+
+  it('should handle undefined kubeData gracefully', () => {
+    // Arrange: Simulate getKubeVersionData returning nothing
+    mockGetKubeVersionData.mockReturnValue(undefined);
+
+    // Act & Assert (The code's `|| {}` handles this)
+    expect(systemApi.kubernetesVersion).toBeUndefined();
+  });
+
+  it('should get isRancherPrime from isRancherPrime', () => {
+    // Arrange
+    mockIsRancherPrime.mockReturnValue(true);
+
+    // Act & Assert
+    expect(systemApi.isRancherPrime).toBe(true);
+    expect(mockIsRancherPrime).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call isDevBuild with the correct rancherVersion', () => {
+    // Arrange
+    mockGetVersionData.mockReturnValue({ Version: 'v2.8.0-dev', GitCommit: '...' });
+    mockIsDevBuild.mockReturnValue(true); // The logic we are testing
+
+    // Act
+    const result = systemApi.isDevBuild;
+
+    // Assert
+    expect(result).toBe(true);
+    // This is the key check: verify it passed its OWN version to the util
+    expect(mockIsDevBuild).toHaveBeenCalledWith('v2.8.0-dev');
+  });
+
+  it('should call isPrereleaseVersion with the correct rancherVersion', () => {
+    // Arrange
+    mockGetVersionData.mockReturnValue({ Version: 'v2.8.0-rc1', GitCommit: '...' });
+    mockIsPrerelease.mockReturnValue(true);
+
+    // Act
+    const result = systemApi.isPrereleaseVersion;
+
+    // Assert
+    expect(result).toBe(true);
+    expect(mockIsPrerelease).toHaveBeenCalledWith('v2.8.0-rc1');
+  });
+});

package/apis/shell/index.ts

@@ -0,0 +1,38 @@
+import { Store } from 'vuex';
+import {
+  ModalApi, ShellApi, SlideInApi, NotificationApi, SystemApi
+} from '@shell/apis/intf/shell';
+import { ModalApiImpl } from './modal';
+import { SlideInApiImpl } from './slide-in';
+import { NotificationApiImpl } from './notifications';
+import { SystemApiImpl } from './system';
+
+export class ShellApiImpl implements ShellApi {
+  private modalApi: ModalApi;
+  private slideInApi: SlideInApi;
+  private notificationApi: NotificationApi;
+  private systemApi: SystemApi;
+
+  constructor(store: Store<any>) {
+    this.modalApi = new ModalApiImpl(store);
+    this.slideInApi = new SlideInApiImpl(store);
+    this.notificationApi = new NotificationApiImpl(store);
+    this.systemApi = new SystemApiImpl(store);
+  }
+
+  get modal(): ModalApi {
+    return this.modalApi;
+  }
+
+  get slideIn(): SlideInApi {
+    return this.slideInApi;
+  }
+
+  get notification(): NotificationApi {
+    return this.notificationApi;
+  }
+
+  get system(): SystemApi {
+    return this.systemApi;
+  }
+}

package/apis/shell/modal.ts

@@ -0,0 +1,41 @@
+import { Component } from 'vue';
+import { ModalApi, ModalConfig } from '@shell/apis/intf/shell';
+import { Store } from 'vuex';
+
+export class ModalApiImpl implements ModalApi {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  /**
+   * Opens a modal by committing to the Vuex store.
+   *
+   * Example:
+   * ```ts
+   * import MyCustomModal from '@/components/MyCustomModal.vue';
+   *
+   * this.$shell.modal.open(MyCustomModal, {
+   *   props: { title: 'Hello Modal' }
+   * });
+   * ```
+   *
+   * @param component
+   * The Vue component to be displayed inside the modal.
+   * This can be any SFC (Single-File Component) imported and passed in as a `Component`.
+   *
+   * @param config Configuration object for opening a modal.
+   *
+   */
+  public open(component: Component, config?: ModalConfig): void {
+    this.store.commit('modal/openModal', {
+      component,
+      componentProps:      config?.props || {},
+      resources:           config?.resources || [],
+      modalWidth:          config?.width || '600px',
+      closeOnClickOutside: config?.closeOnClickOutside ?? true,
+      // modalSticky:         config.modalSticky ?? false // Not implemented yet
+    });
+  }
+}

package/apis/shell/notifications.ts

@@ -0,0 +1,65 @@
+import { Store } from 'vuex';
+import { NotificationApi } from '@shell/apis/intf/shell';
+import { NotificationLevel, NotificationConfig } from '@shell/types/notifications';
+
+export class NotificationApiImpl implements NotificationApi {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  /**
+   * Sends a notification to the Rancher UI Notification Center
+   *
+   * Example:
+   * ```ts
+   * import { NotificationLevel } from '@shell/types/notifications';
+   *
+   * this.$shell.notification.send(NotificationLevel.Success, 'Some notification title', 'Hello world! Success!', {})
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param level The `level` specifies the importance of the notification and determines the icon that is shown in the notification
+   * @param title The notification title
+   * @param message The notification message to be displayed
+   * @param config Notifications configuration object
+   *
+   * * @returns notification ID
+   *
+   */
+  public async send(level: NotificationLevel, title: string, message?:string, config?: NotificationConfig): Promise<string> {
+    const notification = {
+      level,
+      title,
+      message,
+      ...config
+    };
+
+    return await this.store.dispatch('notifications/add', notification, { root: true });
+  }
+
+  /**
+   * Update notification progress (Only valid for notifications of type `Task`)
+   *
+   * Example:
+   * ```ts
+   * this.$shell.notification.updateProgress('some-notification-id', 80)
+   * ```
+   *
+   * For usage with the Composition API check usage guide [here](../../shell-api#using-composition-api-in-vue).
+   *
+   * @param notificationId Unique ID for the notification
+   * @param progress Progress (0-100) for notifications of type `Task`
+   *
+   */
+  public updateProgress(notificationId: string, progress: number): void {
+    const notification = {
+      id: notificationId,
+      progress
+    };
+
+    this.store.dispatch('notifications/update', notification, { root: true });
+  }
+}

package/apis/shell/slide-in.ts

@@ -0,0 +1,33 @@
+import { Component } from 'vue';
+import { SlideInApi, SlideInConfig } from '@shell/apis/intf/shell';
+import { Store } from 'vuex';
+
+export class SlideInApiImpl implements SlideInApi {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  /**
+   * Opens a slide in panel in Rancher UI
+   *
+   * Example:
+   * ```ts
+   * import MyCustomSlideIn from '@/components/MyCustomSlideIn.vue';
+   *
+   * this.$shell.slideIn.open(MyCustomSlideIn, {
+   *   title: 'Hello from SlideIn panel!'
+   * });
+   * ```
+   *
+   * @param component - A Vue component (imported SFC, functional component, etc.) to be rendered in the panel.
+   * @param config - Slide-In configuration object
+   */
+  public open(component: Component, config?: SlideInConfig): void {
+    this.store.commit('slideInPanel/open', {
+      component,
+      componentProps: { ...config || {} }
+    });
+  }
+}

package/apis/shell/system.ts

@@ -0,0 +1,65 @@
+import { SystemApi } from '@shell/apis/intf/shell';
+import { Store } from 'vuex';
+import { isDevBuild, isPrerelease } from '@shell/utils/version';
+import { getVersionData, getKubeVersionData, isRancherPrime } from '@shell/config/version';
+
+export class SystemApiImpl implements SystemApi {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  /**
+   * Rancher version
+   */
+  get rancherVersion(): string {
+    return getVersionData().Version;
+  }
+
+  /**
+   * Rancher UI version
+   */
+  get uiVersion(): string {
+    const storeTyped = this.store as any;
+
+    return storeTyped.$config.dashboardVersion;
+  }
+
+  /**
+   * If Rancher system running is Prime
+   */
+  get isRancherPrime(): boolean {
+    return isRancherPrime();
+  }
+
+  /**
+   * Git Commit for Rancher system running
+   */
+  get gitCommit(): string {
+    return getVersionData().GitCommit;
+  }
+
+  /**
+   * Rancher Kubernetes version
+   */
+  get kubernetesVersion(): string {
+    const kubeData = getKubeVersionData() as any || {};
+
+    return kubeData.gitVersion;
+  }
+
+  /**
+   * If Rancher system is a Dev build
+   */
+  get isDevBuild(): boolean {
+    return isDevBuild(this.rancherVersion);
+  }
+
+  /**
+   * If Rancher system is a Pre-Release build/version
+   */
+  get isPrereleaseVersion(): boolean {
+    return isPrerelease(this.rancherVersion);
+  }
+}

package/apis/vue-shim.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+import { ShellApi, ExtensionManagerApi } from '@shell/apis';
+
+export {};
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $shell: ShellApi,
+    $extension: ExtensionManagerApi,
+  }
+}

package/assets/styles/global/_tooltip.scss

@@ -162,7 +162,12 @@
 }
 
 //icon tooltip
-.icon-info.v-popper--has-tooltip {
+.icon-info.has-clean-tooltip {
   font-size: 14px;
 }
 
+// making sure hovering on the tooltip's arrow part does not cause flickering
+.v-popper__arrow-container {
+  pointer-events: none;
+}
+

package/assets/translations/en-us.yaml

@@ -1731,6 +1731,7 @@ cluster:
         addVolume: Add Volume
         addVMImage: Add VM Image
         storageClass: Storage Class
+      reservedMemory: Reserved Memory
       sshUser: SSH User
       userData:
         label: User Data Template
@@ -1776,6 +1777,8 @@ cluster:
         placeholder: e.g. 2
       memory:
         placeholder: e.g. 4
+      reservedMemory:
+        placeholder: e.g. 256
       disk:
         placeholder: e.g. 4
       namespace:
@@ -1805,6 +1808,7 @@ cluster:
     current: (current)
     experimental: (experimental)
     deprecated: (deprecated)
+    manual: (manually upgraded)
     deprecatedPatches: Show deprecated Kubernetes patch versions
     deprecatedPatchWarning: We recommend using the latest patch version for each minor Kubernetes version. Deprecated patch versions can be useful for migration purposes.
   legacyWarning: The legacy feature flag is enabled and not all legacy features are supported in Kubernetes 1.21+.
@@ -4617,6 +4621,7 @@ moveModal:
   description: 'You are moving the following namespaces:'
   moveButtonLabel: Move
   targetProject: Target Project
+  noProject: None (remove from any project)
 
 nameNsDescription:
   name:

package/components/ActionMenuShell.vue

@@ -8,6 +8,8 @@ import { RcDropdownMenu } from '@components/RcDropdown';
 import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
 import { DropdownOption } from '@components/RcDropdown/types';
 
+defineOptions({ inheritAttrs: false });
+
 const store = useStore();
 
 type RcDropdownMenuComponentProps = {
@@ -16,7 +18,7 @@ type RcDropdownMenuComponentProps = {
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
-  resource: Object;
+  resource?: Object;
   customActions?: DropdownOption[];
 }
 

package/components/CruResource.vue

@@ -9,9 +9,10 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
+import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
 
 import {
-  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE
+  _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE, _CREATE
 } from '@shell/config/query-params';
 
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
@@ -168,6 +169,12 @@ export default {
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
 
+    if (this.mode === _CREATE) {
+      useResourceCreatePageProvider();
+    } else if (this.mode === _EDIT) {
+      useResourceEditPageProvider();
+    }
+
     return {
       isCancelModal:   false,
       showAsForm:      this.$route.query[AS] !== _YAML,

package/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -1,4 +1,5 @@
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { provide, inject } from 'vue';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider, useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import * as helpers from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import * as vuex from 'vuex';
 
@@ -6,6 +7,11 @@ jest.mock('@shell/components/Drawer/ResourceDetailDrawer/helpers');
 jest.mock('vuex');
 jest.mock('@shell/composables/drawer');
 jest.mock('@shell/components/Drawer/ResourceDetailDrawer/index.vue', () => ({ name: 'ResourceDetailDrawer' } as any));
+jest.mock('vue', () => ({
+  ...jest.requireActual('vue'),
+  provide: jest.fn(),
+  inject:  jest.fn()
+}));
 
 describe('composables: ResourceDetailDrawer', () => {
   const resource = { type: 'RESOURCE' };
@@ -78,4 +84,47 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(props?.resource).toStrictEqual(resource);
     });
   });
+
+  describe('useResourceDetailDrawerProvider', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call provide with the correct key and value', () => {
+      useResourceDetailDrawerProvider();
+
+      expect(provide).toHaveBeenCalledWith('isInResourceDetailDrawerKey', true);
+    });
+  });
+
+  describe('useIsInResourceDetailDrawer', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should call inject with the correct key and default value', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(inject).toHaveBeenCalledWith('isInResourceDetailDrawerKey', false);
+      expect(result).toBe(false);
+    });
+
+    it('should return true when inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(true);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when not inside a ResourceDetailDrawer', () => {
+      (inject as jest.Mock).mockReturnValue(false);
+
+      const result = useIsInResourceDetailDrawer();
+
+      expect(result).toBe(false);
+    });
+  });
 });

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,6 +1,7 @@
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
 import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
+import { inject, provide } from 'vue';
 
 export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
@@ -27,3 +28,21 @@ export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined
     resourceType: resource.type
   };
 }
+
+const IS_IN_RESOURCE_DETAIL_DRAWER_KEY = 'isInResourceDetailDrawerKey';
+
+/**
+ * Used to add a provide method which will indicate to all ancestors that they're inside the ResourceDetailDrawer. This is useful because we show
+ * config page components both independently and within the ResourceDetailDrawer and we sometimes want to distinguish between the two use cases.
+*/
+export function useResourceDetailDrawerProvider() {
+  provide(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, true);
+}
+
+/**
+ * A composable used to determine if the current component was instantiated as an ancestor of a ResourceDetailDrawer.
+ * @returns true if the component is an ancestor of ResourceDetailDrawer, otherwise false
+ */
+export function useIsInResourceDetailDrawer() {
+  return inject(IS_IN_RESOURCE_DETAIL_DRAWER_KEY, false);
+}

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -4,7 +4,7 @@ import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import Tabbed from '@shell/components/Tabbed/index.vue';
 import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawerProvider } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
@@ -54,6 +54,8 @@ const canEdit = computed(() => {
   return isConfig.value ? props.resource.canEdit : props.resource.canEditYaml;
 });
 
+useResourceDetailDrawerProvider();
+
 </script>
 <template>
   <Drawer

package/components/LocaleSelector.vue

@@ -45,11 +45,11 @@ export default {
     },
 
     showLocale() {
-      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
+      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.showNone;
     },
 
     showNone() {
-      return !!process.env.dev && this.dev;
+      return !!process.env.dev;
     },
   },
 

package/components/ModalManager.vue

@@ -5,6 +5,7 @@ import { useStore } from 'vuex';
 import AppModal from '@shell/components/AppModal.vue';
 
 const store = useStore();
+const componentRendered = ref(false);
 
 const isOpen = computed(() => store.getters['modal/isOpen']);
 const component = computed(() => store.getters['modal/component']);
@@ -23,12 +24,20 @@ function close() {
     backgroundClosing.value();
   }
 
+  componentRendered.value = false;
   store.commit('modal/closeModal');
 }
 
 function registerBackgroundClosing(fn: Function) {
   backgroundClosing.value = fn;
 }
+
+function onSlotComponentMounted() {
+  // variable for the watcher based focus-trap
+  // so that we know when the component is rendered
+  // works in tandem with trigger-focus-trap="true"
+  componentRendered.value = true;
+}
 </script>
 
 <template>
@@ -39,7 +48,7 @@ function registerBackgroundClosing(fn: Function) {
       :width="modalWidth"
       :style="{ '--prompt-modal-width': modalWidth }"
       :trigger-focus-trap="true"
-      tabindex="0"
+      :focus-trap-watcher-based-variable="componentRendered"
       @close="close"
     >
       <component
@@ -48,6 +57,7 @@ function registerBackgroundClosing(fn: Function) {
         data-testid="modal-manager-component"
         :resources="resources"
         :register-background-closing="registerBackgroundClosing"
+        @vue:mounted="onSlotComponentMounted"
         @close="close"
       />
     </app-modal>

package/components/Questions/__tests__/Yaml.test.ts

@@ -118,7 +118,7 @@ describe('the yaml Component', () => {
 
     expect(inputFields).toHaveLength(1);
 
-    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .v-popper--has-tooltip');
+    const labelFields = wrapper.findAll('[data-testid="yaml-row-var_name"] .has-clean-tooltip');
 
     expect(labelFields).toHaveLength(1);
   });

package/components/RelatedResources.vue

@@ -102,6 +102,11 @@ export default {
           }
         };
 
+        // Having an undefined param can yield a console warning like [Vue Router warn]: Discarded invalid param(s) "namespace" when navigating
+        if (!detailLocation.params.namespace) {
+          delete detailLocation.params.namespace;
+        }
+
         out.push({
           type,
           id:       r[`${ this.direction }Id`],