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

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="top">
+    <slot name="default" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .top {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+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() => {
+    const wrapper = mount(Title);
+
+    expect(wrapper.find('.title').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Title, { slots: { default: content } });
+
+    expect(wrapper.find('.title').element.innerHTML).toStrictEqual(content);
+  });
+});

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

@@ -0,0 +1,17 @@
+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() => {
+    const wrapper = mount(Top);
+
+    expect(wrapper.find('.top').exists()).toBeTruthy();
+  });
+
+  it('should render default slot', async() => {
+    const content = 'CONTENT';
+    const wrapper = mount(Top, { slots: { default: content } });
+
+    expect(wrapper.find('.top').element.innerHTML).toStrictEqual(content);
+  });
+});

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

@@ -0,0 +1,142 @@
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import TitleBar from '@shell/components/Resource/Detail/TitleBar/index.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { createStore } from 'vuex';
+
+jest.mock(`@shell/assets/images/icons/document.svg`, () => `@shell/assets/images/icons/document.svg`);
+
+describe('component: TitleBar/index', () => {
+  const resourceTypeLabel = 'RESOURCE_TYPE_LABEL';
+  const resourceTo = 'RESOURCE_TO';
+  const resourceName = 'RESOURCE_NAME';
+  const store = createStore({});
+
+  it('shoulder render container with class title-bar', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.title-bar').exists()).toBeTruthy();
+  });
+
+  it('should render type label as a link when resourceTo is provided', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceTo, resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const link = wrapper.find('.top .title .resource-link').findComponent(RouterLinkStub);
+
+    expect(link.props('to')).toStrictEqual(resourceTo);
+    expect(link.element.innerHTML.trim()).toStrictEqual(`${ resourceTypeLabel }:`);
+  });
+
+  it('should render type label as text when resourceTo is not provided', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const span = wrapper.find('.top > .title > .resource-text');
+
+    expect(span.element.innerHTML.trim()).toStrictEqual(`${ resourceTypeLabel }:`);
+  });
+
+  it('should render resourceName', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    const span = wrapper.find('.top > .title > .resource-name');
+
+    expect(span.element.innerHTML).toStrictEqual(resourceName);
+  });
+
+  it('should hide the ShowConfiguration button if onShowConfiguration is not defined', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.top > .actions > .show-configuration').exists()).toBeFalsy();
+  });
+
+  it('should pass appropriate props to RcButton if onShowConfiguration is defined and emits show-configuration', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceName, onShowConfiguration: () => {}
+      },
+      global: { stubs: { 'router-link': RouterLinkStub, RcButton: true }, provide: { store } }
+    });
+
+    const button = wrapper.find('.top > .actions > .show-configuration');
+    const buttonComponent = button.getComponent<any>('rc-button-stub');
+
+    expect(buttonComponent.props('primary')).toStrictEqual(true);
+    button.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('show-configuration');
+  });
+
+  it('should hide ActionMenu if actionMenuResource is not defined', async() => {
+    const wrapper = mount(TitleBar, {
+      props:  { resourceTypeLabel, resourceName },
+      global: { stubs: { 'router-link': RouterLinkStub, ActionMenu }, provide: { store } }
+    });
+
+    expect(wrapper.find('.top > .actions > [data-testid="masthead-action-menu"]').exists()).toBeFalsy();
+  });
+
+  it('should pass appropriate props to ActionMenu if actionMenuResource', async() => {
+    const actionMenuResource = { resource: 'test' };
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel, resourceName, actionMenuResource
+      },
+      global: {
+        stubs:   { 'router-link': RouterLinkStub, ActionMenu: true },
+        provide: { store }
+      }
+    });
+
+    const actions = wrapper.find('.top > .actions');
+    const actionMenuComponent = actions.getComponent<any>('action-menu-stub');
+
+    expect(actionMenuComponent.props('buttonRole')).toStrictEqual('multiAction');
+    expect(actionMenuComponent.props('resource')).toStrictEqual(actionMenuResource);
+  });
+
+  it('should hide the description element if description is not passed', async() => {
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.bottom.description').exists()).toBeFalsy();
+  });
+
+  it('should show the description element if description is passed', async() => {
+    const description = 'DESCRIPTION';
+    const wrapper = mount(TitleBar, {
+      props: {
+        resourceTypeLabel,
+        resourceName,
+        description
+      },
+      global: { stubs: { 'router-link': RouterLinkStub }, provide: { store } }
+    });
+
+    expect(wrapper.find('.bottom.description').exists()).toBeTruthy();
+    expect(wrapper.find('.bottom.description').element.innerHTML).toStrictEqual(description);
+  });
+});

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

@@ -0,0 +1,31 @@
+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 useDefaultTitleBarData = (resource: any): Ref<TitleBarProps> => {
+  const route = useRoute();
+  const store = useStore();
+
+  const resourceValue = toValue(resource);
+
+  return computed(() => ({
+    resourceTypeLabel: store.getters['type-map/labelFor']({ id: resourceValue.type }),
+    resourceTo:        {
+      name:   'c-cluster-product-resource',
+      params: {
+        product:   'explorer',
+        cluster:   route.params.cluster,
+        namespace: resourceValue.namespace,
+        resource:  resourceValue.type
+      }
+    },
+    resourceName:       resourceValue.nameDisplay,
+    actionMenuResource: resourceValue,
+    badge:              {
+      color: resourceValue.stateBackground,
+      label: resourceValue.stateDisplay
+    },
+    onShowConfiguration: () => resourceValue.goToEdit()
+  }));
+};

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+import BadgeState from '@pkg/rancher-components/src/components/BadgeState/BadgeState.vue';
+import { RouteLocationRaw } 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';
+
+export interface Badge {
+  color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
+  label: string;
+}
+
+export interface TitleBarProps {
+  resourceTypeLabel: string;
+  resourceName: string;
+
+  resourceTo?: RouteLocationRaw;
+  description?: string;
+  badge?: Badge;
+
+  // This should be replaced with a list of menu items we want to render.
+  // I don't have the time right now to swap this out though.
+  actionMenuResource?: any;
+
+  onShowConfiguration?: () => void;
+}
+
+const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
+</script>
+
+<script setup lang="ts">
+const {
+  resourceTypeLabel, resourceTo, resourceName, description, badge, onShowConfiguration
+} = defineProps<TitleBarProps>();
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const emit = defineEmits(['show-configuration']);
+</script>
+
+<template>
+  <div class="title-bar">
+    <Top>
+      <Title>
+        <router-link
+          v-if="resourceTo"
+          :to="resourceTo"
+          class="resource-link"
+        >
+          {{ resourceTypeLabel }}:
+        </router-link>
+        <span
+          v-else
+          class="resource-text"
+        >
+          {{ resourceTypeLabel }}:
+        </span>
+        <span class="resource-name">
+          {{ resourceName }}
+        </span>
+        <BadgeState
+          v-if="badge"
+          :color="badge.color"
+          :label="badge.label"
+        />
+      </Title>
+      <div class="actions">
+        <RcButton
+          v-if="onShowConfiguration"
+          class="show-configuration"
+          :primary="true"
+          :aria-label="i18n.t('component.resource.detail.titleBar.ariaLabel.showConfiguration', { resource: resourceName })"
+          @click="emit('show-configuration')"
+        >
+          <img
+            :src="showConfigurationIcon"
+            class="mmr-3"
+          >
+          {{ 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"
+        />
+      </div>
+    </Top>
+    <div
+      v-if="description"
+      class="bottom description"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title-bar {
+  &:deep() .badge-state {
+    font-size: 16px;
+    margin-left: 4px;
+    top: -4px;
+    position: relative;
+  }
+
+  &:deep() button[data-testid="masthead-action-menu"] {
+    border-radius: 4px;
+    width: 35px;
+    height: 40px;
+    margin-left: 16px;
+
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="resource-detail-page-top">
+    <div
+      v-if="$slots['header']"
+      class="header"
+    >
+      <slot name="header" />
+    </div>
+    <div
+      v-if="$slots['system-messages']"
+      class="system-messages"
+    >
+      <slot name="system-messages" />
+    </div>
+    <div
+      v-if="$slots['metadata']"
+      class="metadata"
+    >
+      <slot name="metadata" />
+    </div>
+    <div
+      v-if="$slots['extension-content']"
+      class="extension-content"
+    >
+      <slot name="extension-content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/Resource/Detail/__tests__/Page.test.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils';
+import Page from '@shell/components/Resource/Detail/Page.vue';
+
+describe('component: ResourceDetailPage', () => {
+  it('should render container with resource-detail-class and hide the slots not used', async() => {
+    const wrapper = mount(Page);
+
+    expect(wrapper.find('.resource-detail-page').exists()).toBeTruthy();
+
+    expect(wrapper.find('.top-area').exists()).toBeFalsy();
+    expect(wrapper.find('.middle-area').exists()).toBeFalsy();
+    expect(wrapper.find('.bottom-area').exists()).toBeFalsy();
+  });
+
+  it('should render each of the slots with appropriate content', async() => {
+    const topArea = 'TOP_AREA';
+    const middleArea = 'MIDDLE_AREA';
+    const bottomArea = 'BOTTOM_AREA';
+
+    const wrapper = mount(Page, {
+      slots: {
+        'top-area':    topArea,
+        'middle-area': middleArea,
+        'bottom-area': bottomArea
+      }
+    });
+
+    expect(wrapper.find('.top-area').element.innerHTML.trim()).toStrictEqual(topArea);
+    expect(wrapper.find('.middle-area').element.innerHTML.trim()).toStrictEqual(middleArea);
+    expect(wrapper.find('.bottom-area').element.innerHTML.trim()).toStrictEqual(bottomArea);
+  });
+});

package/components/ResourceDetail/Masthead.vue

@@ -545,7 +545,6 @@ export default {
               {{ value.createdBy.displayName }}
             </span>
           </span>
-          <span v-if="value.showPodRestarts">{{ t("resourceDetail.masthead.restartCount") }}:<span class="live-data"> {{ value.restartCount }}</span></span>
         </div>
       </div>
       <slot name="right">

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

@@ -0,0 +1,114 @@
+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 flushPromises from 'flush-promises';
+
+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
+  })
+}));
+
+describe('component: ResourceDetail/index', () => {
+  const resourceName = 'configmap';
+
+  it('should render legacy component with default props if LEGACY=false is not present', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _VIEW;
+
+    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();
+  });
+
+  it('should render legacy component with default props if LEGACY=false is present but resourceName has not been added to our mapping', async() => {
+    mockParams.resource = 'notMapped';
+    mockQuery[MODE] = _VIEW;
+
+    const wrapper = mount(ResourceDetail, {});
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.exists()).toBeTruthy();
+  });
+
+  it('should render legacy component with default props if LEGACY=false is present but mode is not VIEW', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _EDIT;
+
+    const wrapper = mount(ResourceDetail, {});
+    const legacyComponent = wrapper.findComponent<any>({ name: 'Legacy' });
+
+    expect(legacyComponent.exists()).toBeTruthy();
+  });
+
+  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 LEGACY=false is present', async() => {
+    mockParams.resource = resourceName;
+    mockQuery[MODE] = _VIEW;
+    mockQuery[LEGACY] = 'false';
+
+    const wrapper = mount(ResourceDetail);
+
+    await flushPromises();
+    const configmapComponent = wrapper.findComponent<any>({ name: 'configmap' });
+
+    expect(configmapComponent.exists()).toBeTruthy();
+  });
+});