@rancher/shell 3.0.8-rc.9 → 3.0.8

package/dialog/MoveNamespaceDialog.vue

@@ -6,6 +6,8 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { MANAGEMENT } from '@shell/config/types';
 import { PROJECT } from '@shell/config/labels-annotations';
 
+const NONE_VALUE = ' ';
+
 export default {
   emits: ['close'],
 
@@ -48,8 +50,12 @@ export default {
       return this.toMove.filter((namespace) => !!namespace.project).map((namespace) => namespace.project.shortId);
     },
 
+    isAllInProject() {
+      return this.toMove.every((namespace) => !!namespace.project);
+    },
+
     projectOptions() {
-      return this.projects.reduce((inCluster, project) => {
+      const options = this.projects.reduce((inCluster, project) => {
         if (!this.excludedProjects.includes(project.shortId) && project.spec?.clusterName === this.currentCluster.id) {
           inCluster.push({
             value: project.shortId,
@@ -59,6 +65,16 @@ export default {
 
         return inCluster;
       }, []);
+
+      // To be consistent with listed projects we should only provide the option if it applies too all of the namespaces
+      if (this.isAllInProject) {
+        options.unshift({
+          value: NONE_VALUE,
+          label: this.t('moveModal.noProject')
+        });
+      }
+
+      return options;
     }
   },
 
@@ -69,10 +85,10 @@ export default {
 
     async move(finish) {
       const cluster = this.$store.getters['currentCluster'];
-      const clusterWithProjectId = `${ cluster.id }:${ this.targetProject }`;
+      const clusterWithProjectId = this.targetProject && this.targetProject !== NONE_VALUE ? `${ cluster.id }:${ this.targetProject }` : null;
 
       const promises = this.toMove.map((namespace) => {
-        namespace.setLabel(PROJECT, this.targetProject);
+        namespace.setLabel(PROJECT, this.targetProject && this.targetProject !== NONE_VALUE ? this.targetProject : null);
         namespace.setAnnotation(PROJECT, clusterWithProjectId);
 
         return namespace.save();
@@ -128,7 +144,7 @@ export default {
       <AsyncButton
         :action-label="t('moveModal.moveButtonLabel')"
         class="btn bg-primary ml-10"
-        :disabled="!targetProject"
+        :disabled="targetProject === null"
         @click="move"
       />
     </template>

package/dialog/SearchDialog.vue

@@ -106,6 +106,7 @@ export default {
           :group="g"
           :can-collapse="false"
           :fixed-open="true"
+          :highlight-route="false"
           @close="$emit('close')"
         >
           <template #accordion>

package/dialog/__tests__/MoveNamespaceDialog.test.ts

@@ -0,0 +1,249 @@
+import { shallowMount, VueWrapper } from '@vue/test-utils';
+import MoveNamespaceDialog from '@shell/dialog/MoveNamespaceDialog.vue';
+
+const t = (key: string): string => key;
+const NONE_VALUE = ' ';
+
+describe('component: MoveNamespaceDialog', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mockProjects = [
+    {
+      shortId:     'p-abc123',
+      nameDisplay: 'Project A',
+      spec:        { clusterName: 'local' }
+    },
+    {
+      shortId:     'p-def456',
+      nameDisplay: 'Project B',
+      spec:        { clusterName: 'local' }
+    },
+    {
+      shortId:     'p-other',
+      nameDisplay: 'Other Cluster Project',
+      spec:        { clusterName: 'other-cluster' }
+    }
+  ];
+
+  const createMockNamespace = (projectId: string | null = null) => {
+    const namespace: any = {
+      nameDisplay:   'test-namespace',
+      projectId,
+      project:       projectId ? { shortId: projectId } : null,
+      setLabel:      jest.fn(),
+      setAnnotation: jest.fn(),
+      save:          jest.fn().mockResolvedValue({}),
+    };
+
+    return namespace;
+  };
+
+  const mountComponent = (propsData = {}, options = {}) => {
+    const store = {
+      dispatch: jest.fn().mockResolvedValue(mockProjects),
+      getters:  { currentCluster: { id: 'local' } }
+    };
+
+    const defaultProps = {
+      resources:                 [createMockNamespace('p-abc123')],
+      movingCb:                  jest.fn(),
+      registerBackgroundClosing: jest.fn(),
+    };
+
+    return shallowMount(MoveNamespaceDialog, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+      global: {
+        mocks: {
+          $store: store,
+          t,
+        },
+      },
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  describe('projectOptions', () => {
+    it('should include "None" option as first item', async() => {
+      wrapper = mountComponent();
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+
+      expect(options[0]).toStrictEqual({
+        value: NONE_VALUE,
+        label: 'moveModal.noProject'
+      });
+    });
+
+    it('should include projects from current cluster', async() => {
+      // Use a namespace not in any project so no projects get excluded
+      const namespace = createMockNamespace(null);
+
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+      const projectLabels = options.map((o: any) => o.label);
+
+      expect(projectLabels).toContain('Project A');
+      expect(projectLabels).toContain('Project B');
+    });
+
+    it('should exclude projects from other clusters', async() => {
+      wrapper = mountComponent();
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+      const projectLabels = options.map((o: any) => o.label);
+
+      expect(projectLabels).not.toContain('Other Cluster Project');
+    });
+
+    it('should exclude current project of namespaces being moved', async() => {
+      const namespace = createMockNamespace('p-abc123');
+
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+      const projectValues = options.map((o: any) => o.value);
+
+      expect(projectValues).not.toContain('p-abc123');
+      expect(projectValues).toContain('p-def456');
+    });
+
+    it('should NOT include "None" option when some namespaces are not in a project', async() => {
+      const namespaceInProject = createMockNamespace('p-abc123');
+      const namespaceNotInProject = createMockNamespace(null);
+
+      wrapper = mountComponent({ resources: [namespaceInProject, namespaceNotInProject] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+      const optionValues = options.map((o: any) => o.value);
+
+      expect(optionValues).not.toContain(NONE_VALUE);
+    });
+
+    it('should NOT include "None" option when no namespaces are in a project', async() => {
+      const namespace = createMockNamespace(null);
+
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      const options = wrapper.vm.projectOptions;
+      const optionValues = options.map((o: any) => o.value);
+
+      expect(optionValues).not.toContain(NONE_VALUE);
+    });
+  });
+
+  describe('targetProject default value', () => {
+    it('should default to empty string (None option)', () => {
+      wrapper = mountComponent();
+
+      expect(wrapper.vm.targetProject).toBeNull();
+    });
+  });
+
+  describe('move button disabled state', () => {
+    it('should be enabled when targetProject is NONE_VALUE (None)', () => {
+      wrapper = mountComponent();
+      wrapper.vm.targetProject = NONE_VALUE;
+
+      // The button should be enabled when targetProject !== null
+      expect(wrapper.vm.targetProject === null).toBe(false);
+    });
+
+    it('should be enabled when targetProject is a project id', () => {
+      wrapper = mountComponent();
+      wrapper.vm.targetProject = 'p-def456';
+
+      expect(wrapper.vm.targetProject === null).toBe(false);
+    });
+  });
+
+  describe('move method', () => {
+    it('should clear labels and annotations when targetProject is NONE_VALUE (None)', async() => {
+      const namespace = createMockNamespace('p-abc123');
+
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      wrapper.vm.targetProject = NONE_VALUE;
+
+      const finish = jest.fn();
+
+      await wrapper.vm.move(finish);
+
+      expect(namespace.setLabel).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace.setAnnotation).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace.save).toHaveBeenCalledWith();
+      expect(finish).toHaveBeenCalledWith(true);
+    });
+
+    it('should set labels and annotations when moving to a project', async() => {
+      const namespace = createMockNamespace('p-abc123');
+
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      wrapper.vm.targetProject = 'p-def456';
+
+      const finish = jest.fn();
+
+      await wrapper.vm.move(finish);
+
+      expect(namespace.setLabel).toHaveBeenCalledWith('field.cattle.io/projectId', 'p-def456');
+      expect(namespace.setAnnotation).toHaveBeenCalledWith('field.cattle.io/projectId', 'local:p-def456');
+      expect(namespace.save).toHaveBeenCalledWith();
+      expect(finish).toHaveBeenCalledWith(true);
+    });
+
+    it('should handle multiple namespaces', async() => {
+      const namespace1 = createMockNamespace('p-abc123');
+      const namespace2 = createMockNamespace('p-abc123');
+
+      wrapper = mountComponent({ resources: [namespace1, namespace2] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      wrapper.vm.targetProject = NONE_VALUE;
+
+      const finish = jest.fn();
+
+      await wrapper.vm.move(finish);
+
+      expect(namespace1.setLabel).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace1.setAnnotation).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace2.setLabel).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace2.setAnnotation).toHaveBeenCalledWith('field.cattle.io/projectId', null);
+      expect(namespace1.save).toHaveBeenCalledWith();
+      expect(namespace2.save).toHaveBeenCalledWith();
+    });
+
+    it('should call finish with false when save fails', async() => {
+      const namespace = createMockNamespace('p-abc123');
+
+      jest.spyOn(namespace, 'save').mockImplementation().mockRejectedValue(new Error('Save failed'));
+      wrapper = mountComponent({ resources: [namespace] });
+      await wrapper.vm.$options.fetch.call(wrapper.vm);
+
+      wrapper.vm.targetProject = NONE_VALUE;
+
+      const finish = jest.fn();
+
+      await wrapper.vm.move(finish);
+
+      expect(finish).toHaveBeenCalledWith(false);
+    });
+  });
+});

package/directives/__tests__/clean-tooltip.test.ts

@@ -0,0 +1,298 @@
+const mockCreateTooltip = jest.fn();
+const mockDestroyTooltip = jest.fn();
+const mockPurifyHTML = jest.fn((content) => (content || '').trim());
+
+jest.mock('floating-vue', () => ({
+  createTooltip:  mockCreateTooltip,
+  destroyTooltip: mockDestroyTooltip,
+}));
+
+jest.mock('@shell/plugins/clean-html', () => ({ purifyHTML: mockPurifyHTML }));
+
+// A simple mock for the tooltip instance returned by createTooltip
+const mockTooltipInstance = { show: jest.fn() };
+
+describe('clean-tooltip.ts', () => {
+  let el: any;
+  let cleanTooltipDirective: any;
+  let onMouseEnter: (e: MouseEvent | FocusEvent) => void;
+  let onMouseLeave: (e: MouseEvent | FocusEvent) => void;
+  let onMouseClick: (e: MouseEvent) => void;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.isolateModules(() => {
+      const module = require('../clean-tooltip');
+
+      cleanTooltipDirective = module.default;
+      onMouseEnter = module.onMouseEnter;
+      onMouseLeave = module.onMouseLeave;
+      onMouseClick = module.onMouseClick;
+    });
+
+    mockCreateTooltip.mockReturnValue(mockTooltipInstance);
+
+    el = document.createElement('div');
+    document.body.appendChild(el);
+  });
+
+  afterEach(() => {
+    if (document.body.contains(el)) {
+      document.body.removeChild(el);
+    }
+  });
+
+  describe('directive: cleanTooltipDirective', () => {
+    describe('mounted', () => {
+      it('should add event listeners and set initial properties for string value', () => {
+        const addEventListenerSpy = jest.spyOn(el, 'addEventListener');
+        const binding = {
+          value:     'Test Tooltip',
+          modifiers: {},
+        };
+
+        cleanTooltipDirective.mounted(el, binding);
+
+        expect(el.classList.contains('has-clean-tooltip')).toBe(true);
+        expect(el.__tooltipOptions__).toStrictEqual({ content: 'Test Tooltip' });
+
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', onMouseEnter);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseleave', onMouseLeave);
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('focus', onMouseEnter);
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('blur', onMouseLeave);
+      });
+
+      it('should parse object value and modifiers correctly', () => {
+        const binding = {
+          value: {
+            content:     'Object Tooltip',
+            placement:   'bottom',
+            popperClass: 'custom-class',
+            delay:       { show: 500, hide: 200 },
+          },
+          modifiers: { right: true },
+        };
+
+        cleanTooltipDirective.mounted(el, binding);
+
+        expect(el.__tooltipOptions__).toStrictEqual({
+          content:     'Object Tooltip',
+          placement:   'right', // Modifier should override
+          popperClass: 'custom-class',
+          delay:       { show: 500, hide: 200 },
+        });
+      });
+
+      it('should not add has-clean-tooltip class if content is empty', () => {
+        const binding = { value: '', modifiers: {} };
+
+        cleanTooltipDirective.mounted(el, binding);
+        expect(el.classList.contains('has-clean-tooltip')).toBe(false);
+      });
+    });
+
+    describe('updated', () => {
+      it('should update the stored tooltip options', () => {
+        const initialBinding = { value: 'Initial', modifiers: {} };
+
+        cleanTooltipDirective.mounted(el, initialBinding);
+
+        const updatedBinding = { value: 'Updated', modifiers: { bottom: true } };
+
+        cleanTooltipDirective.updated(el, updatedBinding);
+
+        expect(el.__tooltipOptions__).toStrictEqual({ content: 'Updated', placement: 'bottom' });
+      });
+
+      it('should re-show the tooltip if it is currently active on the element', () => {
+        const binding = { value: { content: 'Test' }, modifiers: {} };
+
+        cleanTooltipDirective.mounted(el, binding);
+
+        const mouseEnterEvent = new MouseEvent('mouseenter');
+
+        Object.defineProperty(mouseEnterEvent, 'currentTarget', { value: el });
+        onMouseEnter(mouseEnterEvent);
+
+        expect(mockCreateTooltip).toHaveBeenCalledTimes(1);
+        expect(mockTooltipInstance.show).toHaveBeenCalledTimes(1);
+
+        const updatedBinding = { value: { content: 'Updated Content' }, modifiers: {} };
+
+        cleanTooltipDirective.updated(el, updatedBinding);
+
+        expect(mockDestroyTooltip).toHaveBeenCalledTimes(1);
+        expect(mockCreateTooltip).toHaveBeenCalledTimes(2);
+        expect(mockTooltipInstance.show).toHaveBeenCalledTimes(2);
+        expect(mockCreateTooltip).toHaveBeenCalledWith(el, expect.objectContaining({ content: 'Updated Content' }), {});
+      });
+    });
+
+    describe('unmounted', () => {
+      it('should remove event listeners and class', () => {
+        const removeEventListenerSpy = jest.spyOn(el, 'removeEventListener');
+        const binding = { value: 'Test', modifiers: {} };
+
+        cleanTooltipDirective.mounted(el, binding);
+        el.classList.add('has-clean-tooltip');
+
+        cleanTooltipDirective.unmounted(el, binding);
+
+        expect(el.classList.contains('has-clean-tooltip')).toBe(false);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('mouseenter', onMouseEnter);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('mouseleave', onMouseLeave);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('focus', onMouseEnter);
+        expect(removeEventListenerSpy).toHaveBeenCalledWith('blur', onMouseLeave);
+      });
+
+      it('should hide the tooltip if it is active on the element', () => {
+        const binding = { value: { content: 'Test' }, modifiers: {} };
+
+        cleanTooltipDirective.mounted(el, binding);
+
+        const mouseEnterEvent = new MouseEvent('mouseenter');
+
+        Object.defineProperty(mouseEnterEvent, 'currentTarget', { value: el });
+        onMouseEnter(mouseEnterEvent);
+
+        expect(mockCreateTooltip).toHaveBeenCalledTimes(1);
+
+        cleanTooltipDirective.unmounted(el, binding);
+
+        expect(mockDestroyTooltip).toHaveBeenCalledTimes(1);
+        expect(mockDestroyTooltip).toHaveBeenCalledWith(el);
+      });
+    });
+  });
+
+  describe('event handlers', () => {
+    beforeEach(() => {
+      el.__tooltipOptions__ = {
+        content: 'Handler Test',
+        delay:   { show: 1, hide: 1 },
+      };
+    });
+
+    it('onMouseEnter should show the tooltip', () => {
+      const event = new MouseEvent('mouseenter');
+
+      Object.defineProperty(event, 'currentTarget', { value: el });
+      onMouseEnter(event);
+
+      expect(mockCreateTooltip).toHaveBeenCalledTimes(1);
+      expect(mockCreateTooltip).toHaveBeenCalledWith(el, {
+        content: 'Handler Test',
+        delay:   { show: 1, hide: 1 },
+      }, {});
+      expect(mockTooltipInstance.show).toHaveBeenCalledTimes(1);
+    });
+
+    it('onMouseLeave should hide the tooltip', () => {
+      const enterEvent = new MouseEvent('mouseenter');
+
+      Object.defineProperty(enterEvent, 'currentTarget', { value: el });
+      onMouseEnter(enterEvent);
+
+      const leaveEvent = new MouseEvent('mouseleave');
+
+      Object.defineProperty(leaveEvent, 'currentTarget', { value: el });
+      onMouseLeave(leaveEvent);
+
+      expect(mockDestroyTooltip).toHaveBeenCalledTimes(1);
+      expect(mockDestroyTooltip).toHaveBeenCalledWith(el);
+    });
+
+    it('onMouseClick should toggle the tooltip', () => {
+      const event = new MouseEvent('click');
+
+      el.__tooltipOptions__.triggers = ['click'];
+      Object.defineProperty(event, 'currentTarget', { value: el });
+
+      // First click shows tooltip
+      onMouseClick(event);
+      expect(mockCreateTooltip).toHaveBeenCalledTimes(1);
+      expect(mockTooltipInstance.show).toHaveBeenCalledTimes(1);
+
+      // To simulate it's open, we need to set the internal currentTarget.
+      // We can do this by calling onMouseEnter.
+      const enterEvent = new MouseEvent('mouseenter');
+
+      Object.defineProperty(enterEvent, 'currentTarget', { value: el });
+      onMouseEnter(enterEvent);
+
+      // onMouseEnter destroys the previous tooltip and creates a new one.
+      expect(mockDestroyTooltip).toHaveBeenCalledTimes(1);
+      expect(mockCreateTooltip).toHaveBeenCalledTimes(2);
+
+      // Now that the tooltip for `el` is considered active, a click should hide it.
+      onMouseClick(event);
+
+      expect(mockDestroyTooltip).toHaveBeenCalledTimes(2);
+      expect(mockDestroyTooltip).toHaveBeenLastCalledWith(el);
+    });
+  });
+
+  describe('content', () => {
+    it('should not show tooltip for empty content', () => {
+      const binding = { value: '  ', modifiers: {} };
+
+      cleanTooltipDirective.mounted(el, binding);
+
+      const enterEvent = new MouseEvent('mouseenter');
+
+      Object.defineProperty(enterEvent, 'currentTarget', { value: el });
+      onMouseEnter(enterEvent);
+
+      expect(mockCreateTooltip).not.toHaveBeenCalled();
+    });
+
+    it('should purify string content', () => {
+      const binding = { value: '<h1>Hello</h1>', modifiers: {} };
+
+      cleanTooltipDirective.mounted(el, binding);
+
+      const enterEvent = new MouseEvent('mouseenter');
+
+      Object.defineProperty(enterEvent, 'currentTarget', { value: el });
+      onMouseEnter(enterEvent);
+
+      expect(mockPurifyHTML).toHaveBeenCalledWith('<h1>Hello</h1>');
+      expect(mockCreateTooltip).toHaveBeenCalledWith(el, expect.objectContaining({ content: '<h1>Hello</h1>' }), {});
+    });
+
+    it('should purify content within an object value', () => {
+      const binding = { value: { content: '<p>World</p>' }, modifiers: {} };
+
+      cleanTooltipDirective.mounted(el, binding);
+
+      const enterEvent = new MouseEvent('mouseenter');
+
+      Object.defineProperty(enterEvent, 'currentTarget', { value: el });
+      onMouseEnter(enterEvent);
+
+      expect(mockPurifyHTML).toHaveBeenCalledWith('<p>World</p>');
+      expect(mockCreateTooltip).toHaveBeenCalledWith(el, expect.objectContaining({ content: '<p>World</p>' }), {});
+    });
+  });
+
+  describe('triggers', () => {
+    it('should only add click listeners if triggers: [\'click\'] is provided', () => {
+      const addEventListenerSpy = jest.spyOn(el, 'addEventListener');
+      const binding = {
+        value: {
+          content:  'Click Tooltip',
+          triggers: ['click'],
+        },
+        modifiers: {},
+      };
+
+      cleanTooltipDirective.mounted(el, binding);
+
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith('mouseenter', onMouseEnter);
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith('mouseleave', onMouseLeave);
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith('focus', onMouseEnter);
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith('blur', onMouseLeave);
+      expect(addEventListenerSpy).toHaveBeenCalledWith('click', onMouseClick);
+    });
+  });
+});