@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.6

package/components/Resource/Detail/ResourceTabs/SecretDataTab/composeables.ts

@@ -0,0 +1,52 @@
+import { computed, ComputedRef } from 'vue';
+import { Props } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue';
+import { SECRET_TYPES } from '@shell/config/secret';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import {
+  useBasic, useSsh, useTls, useSecretInfo, useDockerRegistry, useServiceAccount, useDockerBasic
+} from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/auth-types';
+
+export const useSecretDataTabDefaultProps = (resource: any): ComputedRef<Props> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const secretInfo = useSecretInfo(resource);
+
+  return computed(() => {
+    switch (secretInfo.value.secretType) {
+    case SECRET_TYPES.DOCKER_JSON:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: {
+          registry:  useDockerRegistry(resource).value,
+          basicAuth: useDockerBasic(resource).value
+        }
+      };
+    case SECRET_TYPES.TLS:
+      return {
+        tabLabel:   i18n.t('secret.certificate.certificate'),
+        secretData: { certificate: useTls(resource).value }
+      };
+    case SECRET_TYPES.SERVICE_ACCT:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { serviceAccount: useServiceAccount(resource).value }
+      };
+    case SECRET_TYPES.SSH:
+      return {
+        tabLabel:   i18n.t('secret.ssh.keys'),
+        secretData: { ssh: useSsh(resource).value }
+      };
+    case SECRET_TYPES.BASIC:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basicAuth: useBasic(resource).value }
+      };
+    default:
+      return {
+        tabLabel:   i18n.t('secret.data'),
+        secretData: { basic: useBasic(resource).value }
+      };
+    }
+  });
+};

package/components/Resource/Detail/ResourceTabs/SecretDataTab/index.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Basic, { Props as BasicProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Basic.vue';
+import Ssh, { Props as SshProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Ssh.vue';
+import ServiceAccountToken, { Props as ServiceAccountTokenProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/ServiceAccountToken.vue';
+import Certificate, { Props as CertificateProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Certificate.vue';
+import BasicAuth, { Props as BasicAuthProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/BasicAuth.vue';
+import Registry, { Props as RegistryProps } from '@shell/components/Resource/Detail/ResourceTabs/SecretDataTab/Registry.vue';
+
+export interface SecretData {
+  basic?: BasicProps;
+  basicAuth?: BasicAuthProps;
+  ssh?: SshProps;
+  serviceAccount?: ServiceAccountTokenProps;
+  certificate?: CertificateProps;
+  registry?: RegistryProps;
+}
+
+export interface Props {
+  tabLabel: string;
+  secretData: SecretData;
+
+  weight?: number;
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<Props>();
+</script>
+
+<template>
+  <Tab
+    class="secret-data-tab"
+    name="data"
+    :label="props.tabLabel"
+    :weight="props.weight"
+  >
+    <Registry
+      v-if="props.secretData.registry"
+      v-bind="props.secretData.registry"
+    />
+    <BasicAuth
+      v-if="props.secretData.basicAuth"
+      v-bind="props.secretData.basicAuth"
+    />
+    <Certificate
+      v-else-if="props.secretData.certificate"
+      v-bind="props.secretData.certificate"
+    />
+    <ServiceAccountToken
+      v-if="props.secretData.serviceAccount"
+      v-bind="props.secretData.serviceAccount"
+    />
+    <Ssh
+      v-if="props.secretData.ssh"
+      v-bind="props.secretData.ssh"
+    />
+    <Basic
+      v-if="props.secretData.basic"
+      v-bind="props.secretData.basic"
+    />
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.secret-data-tab {
+  :deep() .entry:not(:first-of-type) {
+    margin-top: 16px;
+  }
+}
+</style>

package/components/Resource/Detail/TitleBar/Title.vue

@@ -8,6 +8,7 @@
   h1.title {
     display: inline-block;
     align-items: center;
-    line-height: 18px;
+    display: flex;
+    flex-direction: row;
   }
 </style>

package/components/Resource/Detail/TitleBar/__tests__/Title.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Title from '@shell/components/Resource/Detail/TitleBar/Title.vue';
 
 describe('component: TitleBar/Title', () => {
-  it('shoulder render container with class title', async() => {
+  it('should render container with class title', async() => {
     const wrapper = mount(Title);
 
     expect(wrapper.find('.title').exists()).toBeTruthy();

package/components/Resource/Detail/TitleBar/__tests__/Top.test.ts

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import Top from '@shell/components/Resource/Detail/TitleBar/Top.vue';
 
 describe('component: TitleBar/Top', () => {
-  it('shoulder render container with class top', async() => {
+  it('should render container with class top', async() => {
     const wrapper = mount(Top);
 
     expect(wrapper.find('.top').exists()).toBeTruthy();

package/components/Resource/Detail/TitleBar/__tests__/composables.test.ts

@@ -0,0 +1,63 @@
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const mockStore = {
+  getters: {
+    'type-map/labelFor': jest.fn(),
+    'type-map/hasGraph': jest.fn(),
+    currentStore:        jest.fn(),
+    'cluster/schemaFor': jest.fn()
+  }
+};
+const mockRoute = { params: { cluster: 'CLUSTER' } };
+const mockDrawer = { openResourceDetailDrawer: jest.fn() };
+
+jest.mock('vuex', () => ({ useStore: () => mockStore }));
+jest.mock('vue-router', () => ({ useRoute: () => mockRoute }));
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/composables', () => ({ useResourceDetailDrawer: () => mockDrawer }));
+
+describe('composables: TitleBar', () => {
+  const resource = {
+    nameDisplay:     'RESOURCE_NAME',
+    namespace:       'RESOURCE_NAMESPACE',
+    type:            'RESOURCE_TYPE',
+    stateBackground: 'RESOURCE_STATE_BACKGROUND',
+    stateDisplay:    'RESOURCE_STATE_DISPLAY',
+    description:     'RESOURCE_DESCRIPTION',
+  };
+  const labelFor = 'LABEL_FOR';
+  const schema = { type: 'SCHEMA' };
+  const hasGraph = true;
+
+  it('should return the appropriate values based on input', async() => {
+    const route = useRoute();
+
+    mockStore.getters['currentStore'].mockImplementation(() => 'cluster');
+    mockStore.getters['cluster/schemaFor'].mockImplementation(() => schema);
+    mockStore.getters['type-map/labelFor'].mockImplementation(() => labelFor);
+    mockStore.getters['type-map/hasGraph'].mockImplementation(() => hasGraph);
+
+    const props = useDefaultTitleBarProps(resource, ref(undefined));
+
+    expect(props.value.resourceTypeLabel).toStrictEqual(labelFor);
+    expect(mockStore.getters['type-map/labelFor']).toHaveBeenLastCalledWith(schema);
+    expect(mockStore.getters['type-map/hasGraph']).toHaveBeenLastCalledWith(resource.type);
+    expect(mockStore.getters['currentStore']).toHaveBeenLastCalledWith(resource.type);
+    expect(mockStore.getters['cluster/schemaFor']).toHaveBeenLastCalledWith(resource.type);
+    expect(props.value.resourceTo?.params.product).toStrictEqual('explorer');
+    expect(props.value.resourceTo?.params.cluster).toStrictEqual(route.params.cluster);
+    expect(props.value.resourceTo?.params.namespace).toStrictEqual(resource.namespace);
+    expect(props.value.resourceTo?.params.resource).toStrictEqual(resource.type);
+    expect(props.value.resourceName).toStrictEqual(resource.nameDisplay);
+
+    expect(props.value.actionMenuResource).toStrictEqual(resource);
+    expect(props.value.badge?.color).toStrictEqual(resource.stateBackground);
+    expect(props.value.badge?.label).toStrictEqual(resource.stateDisplay);
+    expect(props.value.description).toStrictEqual(resource.description);
+    expect(props.value.showViewOptions).toStrictEqual(hasGraph);
+
+    props.value.onShowConfiguration?.('callback');
+    expect(mockDrawer.openResourceDetailDrawer).toHaveBeenCalledTimes(1);
+  });
+});

package/components/Resource/Detail/TitleBar/__tests__/index.test.ts

@@ -11,7 +11,7 @@ describe('component: TitleBar/index', () => {
   const resourceName = 'RESOURCE_NAME';
   const store = createStore({});
 
-  it('shoulder render container with class title-bar', async() => {
+  it('should render container with class title-bar', async() => {
     const wrapper = mount(TitleBar, {
       props: {
         resourceTypeLabel,

package/components/Resource/Detail/TitleBar/composables.ts

@@ -0,0 +1,44 @@
+import { useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import { TitleBarProps } from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { computed, Ref, toValue } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useDefaultTitleBarProps = (resource: any, resourceSubtype?: Ref<string | undefined>): Ref<TitleBarProps> => {
+  const route = useRoute();
+  const store = useStore();
+  const { openResourceDetailDrawer } = useResourceDetailDrawer();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const resourceSubtypeValue = toValue(resourceSubtype);
+    const currentStore = store.getters['currentStore'](resourceValue.type);
+    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
+      }
+    };
+    const hasGraph = !!store.getters['type-map/hasGraph'](resourceValue.type);
+
+    return {
+      resourceTypeLabel,
+      resourceTo,
+      resourceName,
+      actionMenuResource: resourceValue,
+      badge:              {
+        color: resourceValue.stateBackground,
+        label: resourceValue.stateDisplay
+      },
+      description:         resourceValue.description,
+      showViewOptions:     hasGraph,
+      onShowConfiguration: (returnFocusSelector: string) => openResourceDetailDrawer(resourceValue, returnFocusSelector)
+    };
+  });
+};

package/components/Resource/Detail/TitleBar/index.vue

@@ -1,12 +1,16 @@
 <script lang="ts">
-import BadgeState from '@pkg/rancher-components/src/components/BadgeState/BadgeState.vue';
-import { RouteLocationRaw } from 'vue-router';
+import BadgeState from '@components/BadgeState/BadgeState.vue';
+import { RouteLocationRaw, useRouter } from 'vue-router';
 import Title from '@shell/components/Resource/Detail/TitleBar/Title.vue';
 import Top from '@shell/components/Resource/Detail/TitleBar/Top.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useStore } from 'vuex';
 import { useI18n } from '@shell/composables/useI18n';
-import RcButton from '~/pkg/rancher-components/src/components/RcButton/RcButton.vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import TabTitle from '@shell/components/TabTitle';
+import { computed, ref, watch } from 'vue';
+import { _CONFIG, _GRAPH, AS } from '@shell/config/query-params';
+import ButtonGroup from '@shell/components/ButtonGroup';
 
 export interface Badge {
   color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
@@ -25,7 +29,10 @@ export interface TitleBarProps {
   // I don't have the time right now to swap this out though.
   actionMenuResource?: any;
 
-  onShowConfiguration?: () => void;
+  // Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet.
+  showViewOptions?: boolean;
+
+  onShowConfiguration?: (returnFocusSelector: string) => void;
 }
 
 const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
@@ -33,19 +40,50 @@ const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`)
 
 <script setup lang="ts">
 const {
-  resourceTypeLabel, resourceTo, resourceName, description, badge, onShowConfiguration
+  resourceTypeLabel, resourceTo, resourceName, description, badge, showViewOptions, onShowConfiguration,
 } = defineProps<TitleBarProps>();
 
 const store = useStore();
 const i18n = useI18n(store);
+const router = useRouter();
 
 const emit = defineEmits(['show-configuration']);
+const showConfigurationDataTestId = 'show-configuration-cta';
+const showConfigurationReturnFocusSelector = computed(() => `[data-testid="${ showConfigurationDataTestId }"]`);
+
+const currentView = ref(router?.currentRoute?.value?.query?.as || _CONFIG);
+const viewOptions = computed(() => {
+  if (!showViewOptions) {
+    return;
+  }
+
+  return [
+    {
+      labelKey: 'resourceDetail.masthead.config',
+      value:    _CONFIG,
+    },
+    {
+      labelKey: 'resourceDetail.masthead.graph',
+      value:    _GRAPH,
+    }
+  ];
+});
+
+watch(
+  () => currentView.value,
+  () => {
+    router.push({ query: { [AS]: currentView.value } });
+  }
+);
 </script>
 
 <template>
   <div class="title-bar">
     <Top>
-      <Title>
+      <Title class="title">
+        <TabTitle :show-child="false">
+          {{ resourceTypeLabel }}
+        </TabTitle>
         <router-link
           v-if="resourceTo"
           :to="resourceTo"
@@ -59,35 +97,44 @@ const emit = defineEmits(['show-configuration']);
         >
           {{ resourceTypeLabel }}:
         </span>
-        <span class="resource-name">
+        <span class="resource-name masthead-resource-title">
           {{ resourceName }}
         </span>
         <BadgeState
           v-if="badge"
+          class="badge-state"
           :color="badge.color"
           :label="badge.label"
         />
       </Title>
       <div class="actions">
+        <!-- Please don't expand this pattern, this was a quick fix to resolve a conflict between the new masthead and fleet. -->
+        <ButtonGroup
+          v-if="viewOptions"
+          v-model:value="currentView"
+          :options="viewOptions"
+        />
         <RcButton
           v-if="onShowConfiguration"
+          :data-testid="showConfigurationDataTestId"
           class="show-configuration"
           :primary="true"
           :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
-          @click="emit('show-configuration')"
+          @click="() => emit('show-configuration', showConfigurationReturnFocusSelector)"
         >
           <img
             :src="showConfigurationIcon"
             class="mmr-3"
+            aria-hidden="true"
           >
           {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
         </RcButton>
         <ActionMenu
           v-if="actionMenuResource"
-          class="title-bar-action-menu"
           button-role="multiAction"
           :resource="actionMenuResource"
           data-testid="masthead-action-menu"
+          :button-aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.actionMenu', { resource: resourceName })"
         />
       </div>
     </Top>
@@ -102,13 +149,18 @@ const emit = defineEmits(['show-configuration']);
 
 <style lang="scss" scoped>
 .title-bar {
-  &:deep() .badge-state {
+  min-width: 740px;
+
+  .badge-state {
     font-size: 16px;
     margin-left: 4px;
-    top: -4px;
     position: relative;
   }
 
+  .show-configuration {
+    margin-left: 16px;
+  }
+
   &:deep() button[data-testid="masthead-action-menu"] {
     border-radius: 4px;
     width: 35px;
@@ -120,5 +172,25 @@ const emit = defineEmits(['show-configuration']);
     justify-content: center;
     align-items: center;
   }
+
+  .description {
+    max-width: 60%;
+  }
+
+  // This prevents the title from overlapping with the actions
+  .title {
+    max-width: calc(100% - 260px);
+  }
+
+  // We want the resource name to be what collaspes wh
+  .resource-name {
+    display: inline-block;
+    flex: 1;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: clip;
+    text-overflow: ellipsis;
+    margin-left: 4px;
+  }
 }
 </style>

package/components/Resource/Detail/composables.ts

@@ -0,0 +1,45 @@
+import { computed, Ref, toValue } from 'vue';
+import { useStore } from 'vuex';
+import { Props as BannerProps } from '@components/Banner/Banner.vue';
+import { useI18n } from '@shell/composables/useI18n';
+
+export const useResourceDetailBannerProps = (resource: any): Ref<BannerProps | undefined> => {
+  const store = useStore();
+  const i18n = useI18n(store);
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    const options = store.getters[`type-map/optionsFor`](resourceValue.type);
+
+    if (options.hideBanner) {
+      return;
+    }
+
+    if (resourceValue?.stateObj?.error) {
+      const defaultErrorMessage = i18n.t('resourceDetail.masthead.defaultBannerMessage.error', undefined, true);
+
+      return {
+        color: 'error',
+        label: resourceValue.stateObj.message || defaultErrorMessage
+      };
+    }
+
+    if (resourceValue?.spec?.paused) {
+      return {
+        color: 'info',
+        label: i18n.t('asyncButton.pause.description')
+      };
+    }
+
+    if (resourceValue?.stateObj?.transitioning) {
+      const defaultTransitioningMessage = i18n.t('resourceDetail.masthead.defaultBannerMessage.transitioning', undefined, true);
+
+      return {
+        color: 'info',
+        label: resourceValue.stateObj.message || defaultTransitioningMessage
+      };
+    }
+
+    return undefined;
+  });
+};

package/components/ResourceDetail/Masthead/__tests__/index.test.ts

@@ -0,0 +1,70 @@
+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', () => ({
+  name:     'Latest',
+  template: `<div>Latest</div>`,
+  props:    ['value', 'resourceSubtype']
+}));
+jest.mock('@shell/components/ResourceDetail/Masthead/legacy.vue', () => ({
+  name:     'Legacy',
+  template: `<div>Legacy</div>`
+}));
+
+describe('component: Masthead/index', () => {
+  const useIsNewDetailPageEnabledSpy = jest.spyOn(PageEnabled, 'useIsNewDetailPageEnabled');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render Latest if useIsNewDetailPageEnabled is true and mode is _VIEW', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+    const props = {
+      value:           { type: 'VALUE' },
+      mode:            _VIEW,
+      resourceSubtype: 'SUBTYPE'
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Latest' });
+
+    expect(component.props('value')).toStrictEqual(props.value);
+    expect(component.props('resourceSubtype')).toStrictEqual(props.resourceSubtype);
+  });
+
+  it('should render Legacy if useIsNewDetailPageEnabled is false and mode is _VIEW', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+    const props = {
+      value:           { type: 'VALUE' },
+      mode:            _VIEW,
+      resourceSubtype: 'SUBTYPE'
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Legacy' });
+
+    expect(component).toBeDefined();
+  });
+
+  it('should render Legacy if useIsNewDetailPageEnabled is true and mode is not _VIEW', () => {
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+    const props = {
+      value:           { type: 'VALUE' },
+      mode:            'ANYTHING',
+      resourceSubtype: 'SUBTYPE'
+    };
+
+    const wrapper = mount(Index, { props });
+
+    const component = wrapper.getComponent({ name: 'Legacy' });
+
+    expect(component).toBeDefined();
+  });
+});

package/components/ResourceDetail/{__tests__/Masthead.test.ts → Masthead/__tests__/legacy.test.ts}

@@ -1,6 +1,6 @@
 import { mount, RouterLinkStub } from '@vue/test-utils';
 import { _VIEW } from '@shell/config/query-params';
-import Masthead from '@shell/components/ResourceDetail/Masthead.vue';
+import Legacy from '@shell/components/ResourceDetail/Masthead/legacy.vue';
 import { createStore } from 'vuex';
 
 const mockedStore = () => {
@@ -30,7 +30,7 @@ const requiredSetup = () => {
   };
 };
 
-describe('component: Masthead', () => {
+describe('component: Masthead/legacy', () => {
   it.each([
     ['hidden', '', false, { displayName: 'admin', location: { id: 'resource-id' } }, false, false],
     ['plain-text', 'admin', true, { displayName: 'admin', location: null }, false, true],
@@ -43,7 +43,7 @@ describe('component: Masthead', () => {
     showLink,
     showPlainText,
   ) => {
-    const wrapper = mount(Masthead, {
+    const wrapper = mount(Legacy, {
       props: {
         mode:  _VIEW,
         value: {

package/components/ResourceDetail/Masthead/index.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { _VIEW, _YAML } from '@shell/config/query-params';
+import Latest from '@shell/components/ResourceDetail/Masthead/latest.vue';
+import Legacy from '@shell/components/ResourceDetail/Masthead/legacy.vue';
+import { useIsNewDetailPageEnabled } from '@shell/composables/useIsNewDetailPageEnabled';
+import { computed } from 'vue';
+
+export interface Props {
+  value?: Object;
+  mode?: string;
+  realMode?: string;
+  as?: string;
+  hasGraph?: boolean;
+  hasDetail?: boolean;
+  hasEdit?: boolean;
+  storeOverride?: string;
+  resource?: string;
+  resourceSubtype?: string;
+  parentRouteOverride?: string;
+  canViewYaml?: boolean;
+}
+
+</script>
+<script lang="ts" setup>
+
+const props = withDefaults(defineProps<Props>(), {
+  value:               () => ({}),
+  mode:                'create',
+  realMode:            'create',
+  as:                  _YAML,
+  hasGraph:            false,
+  hasDetail:           false,
+  hasEdit:             false,
+  storeOverride:       undefined,
+  resource:            undefined,
+  resourceSubtype:     undefined,
+  parentRouteOverride: undefined,
+  canViewYaml:         false
+});
+
+const isNewDetailPageEnabled = useIsNewDetailPageEnabled();
+const isView = computed(() => props.mode === _VIEW);
+const showLatestMasthead = computed(() => isNewDetailPageEnabled.value && isView.value );
+</script>
+
+<template>
+  <Latest
+    v-if="showLatestMasthead"
+    :value="props.value"
+    :resourceSubtype="props.resourceSubtype"
+  />
+  <Legacy
+    v-else
+    v-bind="props"
+  >
+    <slot name="default" />
+  </Legacy>
+</template>
+
+<style lang="scss" scoped>
+.new.state-banner {
+  margin: 0;
+  margin-top: 16px;
+}
+</style>