@rancher/shell 3.0.8-rc.8 → 3.0.8

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);
+    });
+  });
+});

package/directives/clean-tooltip.ts

@@ -0,0 +1,234 @@
+import { DirectiveBinding, Directive } from 'vue';
+import { destroyTooltip, createTooltip } from 'floating-vue';
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+// This is a singleton tooltip implementation that improves performance on pages with many tooltips.
+// Instead of instantiating a Vue component for every tooltip on the page, this directive attaches lightweight event listeners.
+// It then imperatively creates and destroys a single tooltip instance as needed, avoiding the high upfront memory and processing cost of many Vue components.
+let singleton: ReturnType<typeof createTooltip> | null = null;
+let currentTarget: HTMLElement | null = null;
+
+interface TooltipDelay {
+  show: number;
+  hide: number;
+}
+
+// Options are optional, to be handled by floating-vue's defaults
+interface TooltipOptions {
+  content?: string;
+  placement?: string;
+  popperClass?: string;
+  delay?: TooltipDelay;
+  triggers?: string[];
+}
+
+interface TooltipHTMLElement extends HTMLElement {
+  // Store the whole options object for the tooltip
+  __tooltipOptions__: TooltipOptions;
+}
+
+/**
+ * Shows a singleton tooltip for the given target element.
+ * If a tooltip is already active, it is hidden before showing the new one.
+ * @param {HTMLElement} target The element to which the tooltip is attached.
+ * @param {TooltipOptions} options The options for the tooltip.
+ */
+function showSingletonTooltip(target: HTMLElement, options: TooltipOptions) {
+  // If a tooltip is already active, it should be hidden before showing the new one.
+  if (singleton) {
+    destroyTooltip(currentTarget);
+    singleton = null;
+  }
+
+  const purifiedContent = options.content ? purifyContent(options.content) : '';
+
+  // Don't show the tooltip if the content is empty.
+  if (!purifiedContent) {
+    return;
+  }
+
+  const tooltipConfig = {
+    ...options,
+    content: purifiedContent,
+  };
+
+  // Create a new tooltip instance.
+  singleton = createTooltip(target, tooltipConfig, {});
+
+  singleton.show();
+  currentTarget = target;
+}
+
+/**
+ * Hides the singleton tooltip if it is currently shown for the given target element.
+ * @param {HTMLElement} target The element from which the tooltip should be hidden.
+ */
+function hideSingletonTooltip(target: HTMLElement) {
+  if (!singleton) {
+    return;
+  }
+
+  if (currentTarget === target) {
+    destroyTooltip(target);
+    singleton = null;
+    currentTarget = null;
+  }
+}
+
+/**
+ * Purifies and trims the HTML content of the tooltip to prevent XSS attacks.
+ * @param {string} rawValue The raw content string to be purified and trimmed.
+ * @returns {string} The purified and trimmed content string.
+ */
+function purifyContent(rawValue: string): string {
+  const purified = purifyHTML(rawValue);
+
+  return purified.trim();
+}
+
+/**
+ * A Vue directive that provides a clean singleton tooltip using floating-vue.
+ */
+const cleanTooltipDirective: Directive = {
+  /**
+   * Called when the directive is mounted to an element.
+   * It sets up the tooltip options and adds event listeners.
+   * @param {HTMLElement} el The element the directive is bound to.
+   * @param {object} binding The directive binding object.
+   */
+  mounted(el: TooltipHTMLElement, binding: DirectiveBinding) {
+    el.__tooltipOptions__ = getTooltipOptions(binding.value, binding.modifiers);
+
+    const triggers = el.__tooltipOptions__.triggers || ['hover'];
+
+    if (triggers.includes('hover')) {
+      el.addEventListener('mouseenter', onMouseEnter);
+      el.addEventListener('mouseleave', onMouseLeave);
+    }
+    if (triggers.includes('focus')) {
+      el.addEventListener('focus', onMouseEnter);
+      el.addEventListener('blur', onMouseLeave);
+    }
+    if (triggers.includes('click')) {
+      el.addEventListener('click', onMouseClick);
+    }
+
+    if (el.__tooltipOptions__.content) {
+      // Add a class to the element to indicate that it has a clean tooltip.
+      el.classList.add('has-clean-tooltip');
+    }
+  },
+  /**
+   * Called when the directive's binding value is updated.
+   * It updates the tooltip options and shows the tooltip if it is already active.
+   * @param {HTMLElement} el The element the directive is bound to.
+   * @param {object} binding The directive binding object.
+   */
+  updated(el: TooltipHTMLElement, binding: DirectiveBinding) {
+    el.__tooltipOptions__ = getTooltipOptions(binding.value, binding.modifiers);
+
+    // doing this here too because the tooltip content may change after mount.
+    if (el.__tooltipOptions__.content) {
+      el.classList.add('has-clean-tooltip');
+    } else {
+      el.classList.remove('has-clean-tooltip');
+    }
+
+    // If this element's tooltip is currently shown, update it
+    if (currentTarget === el) {
+      showSingletonTooltip(el, el.__tooltipOptions__);
+    }
+  },
+  /**
+   * Called when the directive is unmounted from an element.
+   * It removes the event listeners and hides the tooltip if it is active.
+   * @param {HTMLElement} el The element the directive is bound to.
+   */
+  unmounted(el: TooltipHTMLElement) {
+    el.removeEventListener('mouseenter', onMouseEnter);
+    el.removeEventListener('mouseleave', onMouseLeave);
+    el.removeEventListener('focus', onMouseEnter);
+    el.removeEventListener('blur', onMouseLeave);
+    el.removeEventListener('click', onMouseClick);
+    el.classList.remove('has-clean-tooltip');
+
+    // If this element's tooltip is currently shown, hide it
+    if (currentTarget === el) {
+      hideSingletonTooltip(el);
+    }
+  },
+};
+
+/**
+ * Event handler for mouseenter and focus events.
+ * @param {Event} e The event object.
+ */
+function onMouseEnter(e: MouseEvent | FocusEvent) {
+  const el = e.currentTarget as TooltipHTMLElement;
+
+  showSingletonTooltip(el, el.__tooltipOptions__);
+}
+
+/**
+ * Event handler for mouseleave and blur events.
+ * @param {Event} e The event object.
+ */
+function onMouseLeave(e: MouseEvent | FocusEvent) {
+  const el = e.currentTarget as TooltipHTMLElement;
+
+  hideSingletonTooltip(el);
+}
+
+/**
+ * Event handler for click events.
+ * @param {Event} e The event object.
+ */
+function onMouseClick(e: MouseEvent) {
+  const el = e.currentTarget as TooltipHTMLElement;
+
+  if (currentTarget === el) {
+    hideSingletonTooltip(el);
+  } else {
+    showSingletonTooltip(el, el.__tooltipOptions__);
+  }
+}
+
+/**
+ * Parses the tooltip options from the directive's value and modifiers.
+ * @param {string|object} value The value of the directive.
+ * @param {object} modifiers The modifiers of the directive.
+ * @returns {object} The parsed tooltip options.
+ */
+function getTooltipOptions(value: string | TooltipOptions, modifiers: Partial<Record<string, boolean>>): TooltipOptions {
+  let options: TooltipOptions;
+
+  if (typeof value === 'string') {
+    options = { content: value };
+  } else if (value && typeof value === 'object') {
+    options = { ...value };
+  } else {
+    options = {};
+  }
+
+  // Modifiers can also specify placement (e.g., v-clean-tooltip.bottom)
+  if (modifiers.top) {
+    options.placement = 'top';
+  } else if (modifiers.bottom) {
+    options.placement = 'bottom';
+  } else if (modifiers.left) {
+    options.placement = 'left';
+  } else if (modifiers.right) {
+    options.placement = 'right';
+  }
+
+  return options;
+}
+
+export default cleanTooltipDirective;
+
+// Exporting for unit testing purposes
+export {
+  onMouseEnter,
+  onMouseLeave,
+  onMouseClick
+};

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -109,7 +109,7 @@ describe.each([
     const correctDriftCheckbox = wrapper.find('[data-testid="gitRepo-correctDrift-checkbox"]');
     const tooltip = wrapper.find('[data-testid="gitRepo-correctDrift-checkbox"]');
 
-    expect(tooltip.element.classList).toContain('v-popper--has-tooltip');
+    expect(tooltip.element.classList).toContain('has-clean-tooltip');
     expect(correctDriftCheckbox.exists()).toBeTruthy();
     expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });
@@ -118,7 +118,7 @@ describe.each([
     const correctDriftCheckbox = wrapper.find('[data-testid="gitRepo-keepResources-checkbox"]');
     const tooltip = wrapper.find('[data-testid="gitRepo-keepResources-checkbox"]');
 
-    expect(tooltip.element.classList).toContain('v-popper--has-tooltip');
+    expect(tooltip.element.classList).toContain('has-clean-tooltip');
     expect(correctDriftCheckbox.exists()).toBeTruthy();
     expect(correctDriftCheckbox.attributes().value).toBeFalsy();
   });

package/edit/__tests__/fleet.cattle.io.helmop.test.ts

@@ -100,6 +100,49 @@ describe('view: fleet.cattle.io.helmop, mode: view', () => {
   });
 });
 
+describe('helmOp component lifecycle', () => {
+  it('should have registerBeforeHook method available and call updateBeforeSave', () => {
+    const helmOpOptions = {
+      metadata: {
+        name:      'test-helmop',
+        namespace: 'test-namespace',
+        labels:    {}
+      }
+    };
+
+    const wrapper = mount(HelmOpComponent, initHelmOp({ mode: _CREATE }, helmOpOptions));
+
+    // Mock registerBeforeHook to spy on calls
+    const mockRegisterBeforeHook = jest.fn();
+
+    wrapper.vm.registerBeforeHook = mockRegisterBeforeHook;
+
+    // Verify updateBeforeSave method exists
+    expect(typeof wrapper.vm.updateBeforeSave).toBe('function');
+
+    // Call the method that would be called during created lifecycle
+    wrapper.vm.registerBeforeHook(wrapper.vm.updateBeforeSave);
+
+    // Verify that registerBeforeHook was called with updateBeforeSave function
+    expect(mockRegisterBeforeHook).toHaveBeenCalledWith(wrapper.vm.updateBeforeSave);
+  });
+
+  it('should have doCreateSecrets method available for registerBeforeHook', () => {
+    const helmOpOptions = {
+      metadata: {
+        name:      'test-helmop',
+        namespace: 'test-namespace',
+        labels:    {}
+      }
+    };
+
+    const wrapper = mount(HelmOpComponent, initHelmOp({ mode: _CREATE }, helmOpOptions));
+
+    // Verify doCreateSecrets method exists
+    expect(typeof wrapper.vm.doCreateSecrets).toBe('function');
+  });
+});
+
 describe.each([
   _CREATE,
   _EDIT,
@@ -174,7 +217,7 @@ describe.each([
 
     expect(pollingCheckbox.exists()).toBe(true);
     expect(pollingCheckbox.vm.value).toBe(enabled);
-    expect(pollingCheckbox.element.classList.value.includes('v-popper--has-tooltip')).toBe(!enabled);
+    expect(pollingCheckbox.element.classList.value.includes('has-clean-tooltip')).toBe(!enabled);
     expect(pollingIntervalInput.exists()).toBe(enabled);
     expect(pollingIntervalMinimumValueWarning.exists()).toBe(minValueWarnVisible);
   });
@@ -243,7 +286,7 @@ describe.each([
 
     await fleetSecretSelector.vm.$emit('update:value', ['secret2', 'secret3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'secret2', kind: 'Secret' }, { name: 'secret3', kind: 'Secret' }]);
   });
 
   it('should update downstreamResources with new ConfigMaps when FleetConfigMapSelector emits update event', async() => {
@@ -260,6 +303,60 @@ describe.each([
 
     await fleetConfigMapSelector.vm.$emit('update:value', ['configMap2', 'configMap3']);
 
-    expect(wrapper.vm.value.spec.helm.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
+    expect(wrapper.vm.value.spec.downstreamResources).toStrictEqual([{ name: 'configMap2', kind: 'ConfigMap' }, { name: 'configMap3', kind: 'ConfigMap' }]);
   });
+
+  if (mode === _CREATE) {
+    it('should set created-by-user-id label when updateBeforeSave is called in CREATE mode', () => {
+      const mockCurrentUser = { id: 'user-123' };
+      const helmOpOptions = {
+        metadata: {
+          name:      'test-helmop',
+          namespace: 'test-namespace',
+          labels:    {}
+        }
+      };
+      const wrapper = mount(HelmOpComponent, initHelmOp({ mode, realMode: mode }, helmOpOptions));
+
+      // Ensure metadata.labels exists
+      if (!wrapper.vm.value.metadata.labels) {
+        wrapper.vm.value.metadata.labels = {};
+      }
+
+      // Mock the currentUser
+      (wrapper.vm as any).currentUser = mockCurrentUser;
+
+      // Call updateBeforeSave method
+      wrapper.vm.updateBeforeSave();
+
+      // Should set the created-by-user-id label in CREATE mode
+      expect(wrapper.vm.value.metadata.labels['fleet.cattle.io/created-by-user-id']).toBe('user-123');
+    });
+  } else {
+    it('should not set created-by-user-id label when updateBeforeSave is called in EDIT mode', () => {
+      const mockCurrentUser = { id: 'user-123' };
+      const helmOpOptions = {
+        metadata: {
+          name:      'test-helmop',
+          namespace: 'test-namespace',
+          labels:    {}
+        }
+      };
+      const wrapper = mount(HelmOpComponent, initHelmOp({ mode, realMode: mode }, helmOpOptions));
+
+      // Ensure metadata.labels exists
+      if (!wrapper.vm.value.metadata.labels) {
+        wrapper.vm.value.metadata.labels = {};
+      }
+
+      // Mock the currentUser
+      (wrapper.vm as any).currentUser = mockCurrentUser;
+
+      // Call updateBeforeSave method
+      wrapper.vm.updateBeforeSave();
+
+      // Should not set the label in EDIT mode
+      expect(wrapper.vm.value.metadata.labels['fleet.cattle.io/created-by-user-id']).toBeUndefined();
+    });
+  }
 });

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -209,6 +209,7 @@ export default {
       <Tabbed
         :side-tabs="true"
         :use-hash="useTabbedHash"
+        :default-tab="defaultTab"
       >
         <Tab
           name="target"

package/edit/configmap.vue

@@ -111,6 +111,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"