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

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/__tests__/index.test.ts

@@ -0,0 +1,135 @@
+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 = {};
+
+jest.mock('@shell/components/ResourceDetail/legacy.vue', () => ({
+  template: '<div class="legacy">Legacy</div>',
+  name:     'Legacy',
+  props:    ['flexContent', 'componentTestId', 'storeOverride', 'resourceOverride', 'parentRouteOverride', 'errorsMap']
+}));
+
+jest.mock('@shell/components/Loading.vue', () => ({
+  template: '<div class="loading">Loading</div>',
+  name:     'Loading'
+}));
+
+jest.mock('@shell/pages/explorer/resource/detail/configmap.vue', () => ({
+  template: '<div class="configmap">configmap</div>',
+  name:     'configmap',
+}));
+
+jest.mock('vue-router', () => ({
+  useRoute: () => ({
+    query:  mockQuery,
+    params: mockParams
+  })
+}));
+
+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 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' });
+
+    expect(legacyComponent.props('flexContent')).toStrictEqual(false);
+    expect(legacyComponent.props('componentTestId')).toStrictEqual('resource-details');
+    expect(legacyComponent.props('storeOverride')).toBeUndefined();
+    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 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 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() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _VIEW;
+
+    const flexContent = true;
+    const componentTestId = 'componentTestId';
+    const storeOverride = 'storeOverride';
+    const resourceOverride = 'resourceOverride';
+    const parentRouteOverride = 'parentRouteOverride';
+    const errorsMap = { error: 'test' };
+
+    const wrapper = mount(ResourceDetail, {
+      props: {
+        flexContent,
+        componentTestId,
+        storeOverride,
+        resourceOverride,
+        parentRouteOverride,
+        errorsMap,
+      }
+    });
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.props('flexContent')).toStrictEqual(flexContent);
+    expect(legacyComponent.props('componentTestId')).toStrictEqual(componentTestId);
+    expect(legacyComponent.props('storeOverride')).toStrictEqual(storeOverride);
+    expect(legacyComponent.props('resourceOverride')).toStrictEqual(resourceOverride);
+    expect(legacyComponent.props('parentRouteOverride')).toStrictEqual(parentRouteOverride);
+    expect(legacyComponent.props('errorsMap')).toStrictEqual(errorsMap);
+  });
+
+  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);
+  });
+});