Merge pull request #14607 from codyrancher/harvester-masthead

codyrancher · web-flow · commit 3806ccfecfb3 · 2025-06-30T00:53:01.000-07:00
Resolve new masthead issues in regards to harvester
diff --git a/shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue b/shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue
@@ -7,6 +7,7 @@ import Tab from '@shell/components/Tabbed/Tab.vue';
 export interface Props {
   resource: any;
   component: any;
+  resourceType: string;
 }
 </script>
 <script setup lang="ts">
@@ -25,6 +26,7 @@ const i18n = useI18n(store);
         :is="props.component"
         :value="props.resource"
         :liveValue="props.resource"
+        :resourceType="props.resourceType"
         :mode="_VIEW"
         :real-mode="_VIEW"
         :initial-value="props.resource"
diff --git a/shell/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts b/shell/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts
@@ -69,12 +69,13 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(useDrawerSpy).toHaveBeenCalledTimes(1);
       expect(openSpy).toHaveBeenCalledWith({ name: 'ResourceDetailDrawer' }, selector, {
         resource,
-        onClose:   closeSpy,
-        width:     '73%',
+        onClose:            closeSpy,
+        width:              '73%',
         // We want this to be full viewport height top to bottom
-        height:    '100vh',
-        top:       '0',
-        'z-index': 101, // We want this to be above the main side menu
+        height:             '100vh',
+        top:                '0',
+        'z-index':          101, // We want this to be above the main side menu
+        closeOnRouteChange: ['name', 'params', 'query']
       });
     });
   });
diff --git a/shell/components/Drawer/ResourceDetailDrawer/composables.ts b/shell/components/Drawer/ResourceDetailDrawer/composables.ts
@@ -13,12 +13,13 @@ export function useResourceDetailDrawer() {
       returnFocusSelector,
       {
         resource,
-        onClose:   close,
-        width:     '73%',
+        onClose:            close,
+        width:              '73%',
         // We want this to be full viewport height top to bottom
-        height:    '100vh',
-        top:       '0',
-        'z-index': 101 // We want this to be above the main side menu
+        height:             '100vh',
+        top:                '0',
+        'z-index':          101, // We want this to be above the main side menu
+        closeOnRouteChange: ['name', 'params', 'query'] // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
       });
   };
 
@@ -43,6 +44,7 @@ export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefi
 
   return {
     resource,
-    component: store.getters['type-map/importEdit'](resource.type)
+    component:    store.getters['type-map/importEdit'](resource.type),
+    resourceType: resource.type
   };
 }
diff --git a/shell/components/Resource/Detail/TitleBar/composables.ts b/shell/components/Resource/Detail/TitleBar/composables.ts
@@ -16,18 +16,19 @@ export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<str
     const schema = store.getters[`${ currentStore }/schemaFor`](resourceValue.type);
     const resourceTypeLabel = resourceValue.parentNameOverride || store.getters['type-map/labelFor'](schema);
     const resourceName = resourceSubtypeValue ? `${ resourceSubtypeValue } - ${ resourceValue.nameDisplay }` : resourceValue.nameDisplay;
+    const resourceTo = resourceValue.listLocation || {
+      name:   'c-cluster-product-resource',
+      params: {
+        product:   'explorer',
+        cluster:   route?.params.cluster,
+        namespace: resourceValue.namespace,
+        resource:  resourceValue.type
+      }
+    };
 
     return {
       resourceTypeLabel,
-      resourceTo: {
-        name:   'c-cluster-product-resource',
-        params: {
-          product:   'explorer',
-          cluster:   route.params.cluster,
-          namespace: resourceValue.namespace,
-          resource:  resourceValue.type
-        }
-      },
+      resourceTo,
       resourceName,
       actionMenuResource: resourceValue,
       badge:              {
diff --git a/shell/components/ResourceDetail/Masthead/__tests__/index.test.ts b/shell/components/ResourceDetail/Masthead/__tests__/index.test.ts
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 import { _VIEW } from '@shell/config/query-params';
 import Index from '@shell/components/ResourceDetail/Masthead/index.vue';
 import * as PageEnabled from '@shell/composables/useIsNewDetailPageEnabled';
+import { computed } from 'vue';
 
 jest.mock('@shell/composables/useIsNewDetailPageEnabled');
 jest.mock('@shell/components/ResourceDetail/Masthead/latest.vue', () => ({
@@ -22,7 +23,7 @@ describe('component: Masthead/index', () => {
   });
 
   it('should render Latest if useIsNewDetailPageEnabled is true and mode is _VIEW', () => {
-    useIsNewDetailPageEnabledSpy.mockReturnValue(true);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
     const props = {
       value:           { type: 'VALUE' },
       mode:            _VIEW,
@@ -38,7 +39,7 @@ describe('component: Masthead/index', () => {
   });
 
   it('should render Legacy if useIsNewDetailPageEnabled is false and mode is _VIEW', () => {
-    useIsNewDetailPageEnabledSpy.mockReturnValue(false);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
     const props = {
       value:           { type: 'VALUE' },
       mode:            _VIEW,
@@ -53,7 +54,7 @@ describe('component: Masthead/index', () => {
   });
 
   it('should render Legacy if useIsNewDetailPageEnabled is true and mode is not _VIEW', () => {
-    useIsNewDetailPageEnabledSpy.mockReturnValue(true);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
     const props = {
       value:           { type: 'VALUE' },
       mode:            'ANYTHING',
diff --git a/shell/components/ResourceDetail/Masthead/index.vue b/shell/components/ResourceDetail/Masthead/index.vue
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isNewDetailPageEnabled = useIsNewDetailPageEnabled();
 const isView = computed(() => props.mode === _VIEW);
-const showLatestMasthead = computed(() => isNewDetailPageEnabled && isView.value );
+const showLatestMasthead = computed(() => isNewDetailPageEnabled.value && isView.value );
 </script>
 
 <template>
diff --git a/shell/components/ResourceDetail/__tests__/index.test.ts b/shell/components/ResourceDetail/__tests__/index.test.ts
@@ -3,6 +3,7 @@ import ResourceDetail from '@shell/components/ResourceDetail/index.vue';
 import { _EDIT, _VIEW, LEGACY, MODE } from '@shell/config/query-params';
 import * as pageEnabled from '@shell/composables/useIsNewDetailPageEnabled';
 import flushPromises from 'flush-promises';
+import { computed } from 'vue';
 
 const mockQuery: any = {};
 const mockParams: any = {};
@@ -44,7 +45,7 @@ describe('component: ResourceDetail/index', () => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _VIEW;
 
-    useIsNewDetailPageEnabledSpy.mockReturnValue(false);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
 
     const wrapper = mount(ResourceDetail, { });
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
@@ -62,7 +63,7 @@ describe('component: ResourceDetail/index', () => {
     mockParams.resource = 'notMapped';
     mockQuery[MODE] = _VIEW;
 
-    useIsNewDetailPageEnabledSpy.mockReturnValue(false);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
 
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
@@ -75,7 +76,7 @@ describe('component: ResourceDetail/index', () => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _EDIT;
 
-    useIsNewDetailPageEnabledSpy.mockReturnValue(false);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
 
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
@@ -121,7 +122,7 @@ describe('component: ResourceDetail/index', () => {
     mockQuery[MODE] = _VIEW;
     mockQuery[LEGACY] = 'false';
 
-    useIsNewDetailPageEnabledSpy.mockReturnValue(true);
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
 
     const wrapper = mount(ResourceDetail);
 
diff --git a/shell/components/ResourceDetail/index.vue b/shell/components/ResourceDetail/index.vue
@@ -66,7 +66,7 @@ const isView = computed(() => route?.params?.id && (!mode.value || mode.value ==
 // We're defaulting to legacy being on, we'll switch this once we want to enable the new detail page by default
 const iseNewDetailPageEnabled = useIsNewDetailPageEnabled();
 const page = computed(() => currentResourceName.value ? resourceToPage[currentResourceName.value] : undefined);
-const useLatest = computed(() => !!(iseNewDetailPageEnabled && isView.value && page.value));
+const useLatest = computed(() => !!(iseNewDetailPageEnabled.value && isView.value && page.value));
 </script>
 
 <template>
diff --git a/shell/components/SlideInPanelManager.vue b/shell/components/SlideInPanelManager.vue
@@ -5,6 +5,8 @@ import {
   DEFAULT_FOCUS_TRAP_OPTS,
   useWatcherBasedSetupFocusTrapWithDestroyIncluded
 } from '@shell/composables/focusTrap';
+import { isEqual } from 'lodash';
+import { useRouter } from 'vue-router';
 
 const HEADER_HEIGHT = 55;
 
@@ -38,6 +40,16 @@ const panelZIndex = computed(() => `${ (isOpen?.value ? 1 : 2) * (currentProps?.
 
 const showHeader = computed(() => currentProps?.value?.showHeader ?? true);
 const panelTitle = showHeader.value ? computed(() => currentProps?.value?.title || 'Details') : null;
+const closeOnRouteChange = computed(() => {
+  const propsCloseOnRouteChange = currentProps?.value.closeOnRouteChange;
+
+  if (!propsCloseOnRouteChange) {
+    return ['name', 'params', 'hash', 'query'];
+  }
+
+  return propsCloseOnRouteChange;
+});
+const router = useRouter();
 
 watch(
   /**
@@ -81,9 +93,25 @@ watch(
 );
 
 watch(
-  () => (store as any).$router?.currentRoute,
-  () => {
-    if (isOpen?.value && currentProps?.value.closeOnRouteChange !== false) {
+  () => router?.currentRoute?.value,
+  (newValue, oldValue) => {
+    if (!isOpen?.value) {
+      return;
+    }
+
+    if (closeOnRouteChange.value.includes('name') && !isEqual(newValue?.name, oldValue?.name)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('params') && !isEqual(newValue?.params, oldValue?.params)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('hash') && !isEqual(newValue?.hash, oldValue?.hash)) {
+      closePanel();
+    }
+
+    if (closeOnRouteChange.value.includes('query') && !isEqual(newValue?.query, oldValue?.query)) {
       closePanel();
     }
   },
diff --git a/shell/composables/useIsNewDetailPageEnabled.ts b/shell/composables/useIsNewDetailPageEnabled.ts
@@ -1,14 +1,17 @@
 import { useRoute } from 'vue-router';
 import { LEGACY } from '@shell/config/query-params';
+import { computed } from 'vue';
 
 const enabledByDefault = true;
 
 export const useIsNewDetailPageEnabled = () => {
   const route = useRoute();
 
-  if (enabledByDefault) {
-    return route.query[LEGACY] !== 'true';
-  }
+  return computed(() => {
+    if (enabledByDefault) {
+      return route?.query?.[LEGACY] !== 'true';
+    }
 
-  return route.query[LEGACY] === 'false';
+    return route?.query?.[LEGACY] === 'false';
+  });
 };
