Preserve URL hash when clicking 'Mark all as read' (#17348)

* Preserve URL hash when clicking 'Mark all as read'

The anchor used href="#" and did not prevent the default click event, so
clicking it navigated the browser to '#' and wiped any existing URL hash
fragment (e.g. #pod). This also broke extensions using LocationConfig's
hash field to scope injected columns/components to a specific fragment.

Fixes #16923

* Use RcButton (variant=link) for 'Mark all as read' action

Replaces the <a href="#"> with <RcButton variant="link" size="small">.
A button is semantically correct for this action and removes the default
anchor navigation that was stripping the URL hash fragment on click.
Addresses reviewer feedback on PR #17348.

* Match original anchor appearance for 'Mark all as read'

Switch the RcButton to the ghost variant and scope a small style override so
the rendered button has identical metrics to the previous <a href="#">:
inherited font-size/line-height, no padding or min-height, link color, and
the global anchor hover behavior (body-text color + underline). No visible
change from the original UI.

* Drop unused CSS overrides on 'Mark all as read'

gap only affects flex children and the slot has a single text node.
The ._hover selector is RcButton's programmatic hover class, which
nothing toggles here.

Author: codyrancher

shell/components/nav/NotificationCenter/NotificationHeader.vue

@@ -2,17 +2,19 @@
 import { useStore } from 'vuex';
 import { computed, inject, ref } from 'vue';
 import { DropdownContext, defaultContext } from '@components/RcDropdown/types';
+import RcButton from '@components/RcButton/RcButton.vue';
+import { RcButtonType } from '@components/RcButton/types';
 
 const { dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
 const store = useStore();
 const unreadCount = computed<number>(() => store.getters['notifications/unreadCount']);
-const markAllReadButton = ref<HTMLElement>();
+const markAllReadButton = ref<RcButtonType | null>(null);
 
 const markAllRead = (keyboard: boolean) => {
   store.dispatch('notifications/markAllRead');
 
-  // If we have focus, then move to the next item if activated by the keyboard
-  if (keyboard && document.activeElement === markAllReadButton?.value) {
+  // If activated via keyboard, move focus to the next dropdown item
+  if (keyboard) {
     moveFocus(true);
   }
 };
@@ -65,18 +67,19 @@ const gotFocus = (e: Event) => {
         {{ t('notificationCenter.title') }}
       </div>
       <div v-if="unreadCount !== 0">
-        <a
+        <RcButton
           ref="markAllReadButton"
-          role="button"
+          variant="ghost"
+          size="small"
           tabindex="-1"
-          href="#"
+          class="mark-all-read"
           data-testid="notifications-center-markall-read"
           @keydown.up.down.stop.prevent="handleKeydown"
           @keydown.enter.space.stop="markAllRead(true)"
           @click="markAllRead(false)"
         >
           {{ t('notificationCenter.markAllRead') }}
-        </a>
+        </RcButton>
       </div>
     </div>
     <div class="notification-border" />
@@ -104,8 +107,17 @@ const gotFocus = (e: Event) => {
         flex: 1;
       }
 
-      A {
+      .mark-all-read {
+        padding: 0;
+        min-height: auto;
+        font-size: inherit;
+        line-height: inherit;
         color: var(--link);
+
+        &:hover {
+          color: var(--body-text);
+          text-decoration: underline;
+        }
       }
     }
   }

shell/components/nav/NotificationCenter/__tests__/NotificationHeader.test.ts

@@ -0,0 +1,80 @@
+import { ref } from 'vue';
+import { mount, shallowMount } from '@vue/test-utils';
+import NotificationHeader from '@shell/components/nav/NotificationCenter/NotificationHeader.vue';
+import { defaultContext } from '@components/RcDropdown/types';
+
+const buildStore = (unreadCount = 1) => {
+  const dispatch = jest.fn();
+  const store = {
+    dispatch,
+    getters: { 'notifications/unreadCount': unreadCount },
+  };
+
+  return { store, dispatch };
+};
+
+const buildGlobal = (store: any) => ({
+  provide: {
+    store,
+    dropdownContext: { ...defaultContext, dropdownItems: ref<HTMLElement[]>([]) },
+  },
+  mocks: { $store: store },
+});
+
+jest.mock('vuex', () => ({ useStore: () => (globalThis as any).__testStore }));
+
+describe('component: NotificationHeader', () => {
+  afterEach(() => {
+    (globalThis as any).__testStore = undefined;
+  });
+
+  it('renders the mark all read action when there are unread notifications', () => {
+    const { store } = buildStore(3);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = shallowMount(NotificationHeader, { global: buildGlobal(store) });
+
+    expect(wrapper.find('[data-testid="notifications-center-markall-read"]').exists()).toBe(true);
+  });
+
+  it('hides the mark all read action when there are no unread notifications', () => {
+    const { store } = buildStore(0);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = shallowMount(NotificationHeader, { global: buildGlobal(store) });
+
+    expect(wrapper.find('[data-testid="notifications-center-markall-read"]').exists()).toBe(false);
+  });
+
+  it('dispatches notifications/markAllRead when clicked', async() => {
+    const { store, dispatch } = buildStore(2);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = mount(NotificationHeader, { global: buildGlobal(store) });
+
+    await wrapper.find('[data-testid="notifications-center-markall-read"]').trigger('click');
+
+    expect(dispatch).toHaveBeenCalledWith('notifications/markAllRead');
+  });
+
+  // Regression test for https://github.com/rancher/dashboard/issues/16923
+  // "Mark all as read" was originally an <a href="#"> which, on click, navigated
+  // to "#" and stripped any existing URL hash fragment (e.g. #pod). Rendering it
+  // as a <button> (via RcButton) removes the default navigation behavior entirely,
+  // so the URL hash is preserved and extensions scoped via LocationConfig.hash
+  // continue to match after activation.
+  it('renders mark all read as a <button> so activating it cannot strip the URL hash', () => {
+    const { store } = buildStore(2);
+
+    (globalThis as any).__testStore = store;
+
+    const wrapper = mount(NotificationHeader, { global: buildGlobal(store) });
+    const markAll = wrapper.find('[data-testid="notifications-center-markall-read"]');
+
+    expect(markAll.element.tagName).toBe('BUTTON');
+    expect(markAll.attributes('href')).toBeUndefined();
+  });
+});