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

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,41 +97,50 @@ 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>
     <div
       v-if="description"
-      class="bottom description"
+      class="bottom description text-deemphasized"
     >
       {{ description }}
     </div>
@@ -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;
+    margin-left: 12px;
     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>

package/components/ResourceDetail/Masthead/latest.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { Banner } from '@components/Banner';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import { useDefaultTitleBarProps } from '@shell/components/Resource/Detail/TitleBar/composables';
+import Metadata from '@shell/components/Resource/Detail/Metadata/index.vue';
+import { useDefaultMetadataForLegacyPagesProps } from '@shell/components/Resource/Detail/Metadata/composables';
+import { useResourceDetailBannerProps } from '@shell/components/Resource/Detail/composables';
+import { computed } from 'vue';
+
+export interface Props {
+  value?: Object;
+  resourceSubtype?: string;
+}
+
+</script>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<Props>(), { value: () => ({}), resourceSubtype: undefined });
+
+const resourceSubtype = computed(() => props.resourceSubtype);
+const titleBarProps = useDefaultTitleBarProps(props.value, resourceSubtype);
+const metadataProps = useDefaultMetadataForLegacyPagesProps(props.value);
+const bannerProps = useResourceDetailBannerProps(props.value);
+</script>
+
+<template>
+  <TitleBar v-bind="titleBarProps" />
+  <Banner
+    v-if="bannerProps"
+    class="new state-banner"
+    v-bind="bannerProps"
+  />
+  <Metadata
+    v-bind="metadataProps"
+    class="mmt-4"
+  />
+</template>
+
+<style lang="scss" scoped>
+.new.state-banner {
+  margin: 0;
+  margin-top: 16px;
+}
+</style>

package/components/ResourceDetail/{Masthead.vue → Masthead/legacy.vue}

@@ -645,10 +645,10 @@ export default {
 
     h1 {
       margin: 0 0 0 -5px;
-      overflow-x: hidden;
       display: flex;
       flex-direction: row;
       align-items: center;
+      overflow: hidden;
 
       .masthead-resource-title {
         text-overflow: ellipsis;

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

@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils';
-
 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 = {};
@@ -30,13 +31,22 @@ jest.mock('vue-router', () => ({
   })
 }));
 
+jest.mock('@shell/composables/useIsNewDetailPageEnabled');
+
 describe('component: ResourceDetail/index', () => {
   const resourceName = 'configmap';
+  const useIsNewDetailPageEnabledSpy = jest.spyOn(pageEnabled, 'useIsNewDetailPageEnabled');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-  it('should render legacy component with default props if LEGACY=false is not present', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false', async() => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _VIEW;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, { });
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
@@ -46,26 +56,33 @@ describe('component: ResourceDetail/index', () => {
     expect(legacyComponent.props('resourceOverride')).toBeUndefined();
     expect(legacyComponent.props('parentRouteOverride')).toBeUndefined();
     expect(legacyComponent.props('errorsMap')).toBeUndefined();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should render legacy component with default props if LEGACY=false is present but resourceName has not been added to our mapping', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but resourceName has not been added to our mapping', async() => {
     mockParams.resource = 'notMapped';
     mockQuery[MODE] = _VIEW;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
     expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('should render legacy component with default props if LEGACY=false is present but mode is not VIEW', async() => {
+  it('should render legacy component with default props if useIsNewDetailPageEnabledSpy is false but mode is not VIEW', async() => {
     mockParams.resource = resourceName;
     mockQuery[MODE] = _EDIT;
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => false));
+
     const wrapper = mount(ResourceDetail, {});
     const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
 
     expect(legacyComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should render legacy component while forwarding props', async() => {
@@ -99,16 +116,20 @@ describe('component: ResourceDetail/index', () => {
     expect(legacyComponent.props('errorsMap')).toStrictEqual(errorsMap);
   });
 
-  it('should render new component if LEGACY=false is present', async() => {
+  it('should render new component if useIsNewDetailPageEnabledSpy is true', async() => {
     mockParams.resource = resourceName;
+    mockParams.id = 'ID';
     mockQuery[MODE] = _VIEW;
     mockQuery[LEGACY] = 'false';
 
+    useIsNewDetailPageEnabledSpy.mockReturnValue(computed(() => true));
+
     const wrapper = mount(ResourceDetail);
 
     await flushPromises();
     const configmapComponent = wrapper.findComponent<any>({ name: 'configmap' });
 
     expect(configmapComponent.exists()).toBeTruthy();
+    expect(useIsNewDetailPageEnabledSpy).toHaveBeenCalledTimes(1);
   });
 });

package/components/ResourceDetail/index.vue

@@ -2,9 +2,11 @@
 import { useRoute } from 'vue-router';
 import { computed, defineAsyncComponent } from 'vue';
 
-import { MODE, _VIEW, LEGACY } from '@shell/config/query-params';
+import { MODE, _VIEW } from '@shell/config/query-params';
 import Legacy from '@shell/components/ResourceDetail/legacy.vue';
 import Loading from '@shell/components/Loading.vue';
+import { useIsNewDetailPageEnabled } from '@shell/composables/useIsNewDetailPageEnabled';
+import { VIRTUAL_TYPES } from '@shell/config/types';
 
 export interface Props {
   flexContent?: boolean;
@@ -22,19 +24,21 @@ export interface Props {
 // I could also dynamically check for and import these pages but I wanted this to be easier
 // to be explicit and easier to search for.
 const resourceToPage: any = {
-  // 'apps.daemonset':    defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.daemonset.vue')),
-  // 'apps.deployment':   defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.deployment.vue')),
-  // 'apps.statefulset':  defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.statefulset.vue')),
-  // 'batch.cronjob':     defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.cronjob.vue')),
-  // 'batch.job':         defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.job.vue')),
-  // 'cluster-dashboard': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/cluster-dashboard.vue')),
-  configmap: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/configmap.vue')),
+  // 'apps.daemonset':   defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.daemonset.vue')),
+  // 'apps.deployment':  defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.deployment.vue')),
+  // 'apps.statefulset': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.statefulset.vue')),
+  // 'batch.cronjob':    defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.cronjob.vue')),
+  // 'batch.job':        defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.job.vue')),
+  configmap:                       defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/configmap.vue')),
   // namespace:           defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/namespace.vue')),
   // node:                defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/node.vue')),
   // pod:                 defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/pod.vue')),
-  // secret:              defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/secret.vue')),
+  secret:                          defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/secret.vue')),
+  [VIRTUAL_TYPES.PROJECT_SECRETS]: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/projectsecret.vue')),
 };
 
+defineOptions({ inheritAttrs: false });
+
 const route = useRoute();
 const props = withDefaults(defineProps<Props>(), {
   flexContent:         false,
@@ -45,14 +49,26 @@ const props = withDefaults(defineProps<Props>(), {
   errorsMap:           undefined
 });
 
-const currentResourceName = computed<string>(() => route.params.resource as string);
-const mode = computed(() => route.query[MODE]);
-const isView = computed(() => !mode.value || mode.value === _VIEW);
-// We're defaulting to legacy being on, we'll switch this once we want to enable the new detail page by default
-const isLegacy = computed(() => route.query[LEGACY] !== 'false');
-const page = computed(() => resourceToPage[currentResourceName.value]);
+const currentResourceName = computed(() => {
+  const resource = props.resourceOverride || route?.params?.resource;
+
+  if (!resource) {
+    return;
+  }
 
-const useLatest = computed(() => !!(!isLegacy.value && isView.value && page.value));
+  if (typeof resource === 'string') {
+    return resource;
+  }
+
+  // This should never occur, just satisfying the types
+  return resource[0];
+});
+const mode = computed(() => route?.query?.[MODE]);
+const isView = computed(() => route?.params?.id && (!mode.value || mode.value === _VIEW));
+// 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.value && isView.value && page.value));
 </script>
 
 <template>
@@ -66,6 +82,6 @@ const useLatest = computed(() => !!(!isLegacy.value && isView.value && page.valu
   </Suspense>
   <Legacy
     v-else
-    v-bind="props"
+    v-bind="{...$attrs, ...props}"
   />
 </template>

package/components/ResourceDetail/legacy.vue

@@ -379,6 +379,16 @@ export default {
     closeError(index) {
       this.errors = this.errors.filter((_, i) => i !== index);
     },
+    onYamlError(err) {
+      this.errors = [];
+      const errors = Array.isArray(err) ? err : [err];
+
+      errors.forEach((e) => {
+        if (this.errors.indexOf(e) === -1) {
+          this.errors.push(e);
+        }
+      });
+    },
     /**
      * Initializes the resource components based on the provided user and
      * resource override.
@@ -483,8 +493,9 @@ export default {
       :offer-preview="offerPreview"
       :done-route="doneRoute"
       :done-override="value ? value.doneOverride : null"
+      :show-errors="false"
       @update:value="$emit('input', $event)"
-      @error="e=>errors.push(e)"
+      @error="onYamlError"
     />
 
     <component
@@ -542,4 +553,10 @@ export default {
   flex-direction: column;
   flex-grow: 1;
 }
+.cru__errors {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--header-bg);
+}
 </style>