dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.10

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="title">
+    <slot name="default" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .title {
+    display: inline-block;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    font-size: 14px;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+<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;
+    height: 50px;
+    margin-bottom: 20px;
+  }
+</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('should 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('should 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__/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

@@ -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('should 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/composables.ts

@@ -0,0 +1,46 @@
+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);
+    const onShowConfiguration = resourceValue.disableResourceDetailDrawer ? undefined : (returnFocusSelector: string) => openResourceDetailDrawer(resourceValue, returnFocusSelector);
+
+    return {
+      resource:           resourceValue,
+      resourceTypeLabel,
+      resourceTo,
+      resourceName,
+      actionMenuResource: resourceValue,
+      badge:              {
+        color: resourceValue.stateBackground,
+        label: resourceValue.stateDisplay
+      },
+      description:     resourceValue.description,
+      showViewOptions: hasGraph,
+      onShowConfiguration
+    };
+  });
+};

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

@@ -0,0 +1,289 @@
+<script lang="ts">
+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 '@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';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel.vue';
+import breadcrumb from '@shell/components/breadcrumb/index.vue'
+import { useDefaultConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+
+export interface Badge {
+  color: 'bg-success' | 'bg-error' | 'bg-warning' | 'bg-info';
+  label: string;
+}
+
+export interface TitleBarProps {
+  resource: any;
+  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;
+
+  // 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;
+  value?: any;
+  parentRouteOverride?: string;
+}
+
+const showConfigurationIcon = require(`@shell/assets/images/icons/document.svg`);
+</script>
+
+<script setup lang="ts">
+const {
+  parentRouteOverride, value, resource, 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 configTabProps = useDefaultConfigTabProps(resource);
+
+console.log(configTabProps, ' configTabProps---------------------------------1');
+
+
+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,
+    }
+  ];
+});
+
+const Svg = require('~shell/assets/images/API.svg')
+
+const parent = computed(() =>{
+  const displayName = value?.parentNameOverride || store.getters['type-map/labelFor'](schema);
+  const product = store.getters['currentProduct'].name;
+
+  const defaultLocation = {
+    name:   'c-cluster-product-resource',
+    params: {
+      resource: resource,
+      product,
+    }
+  };
+
+  const location = value?.parentLocationOverride || defaultLocation;
+
+  if (parentRouteOverride) {
+    location.name = parentRouteOverride;
+  }
+
+  const out = {
+    location
+  };
+
+  return out;
+})
+
+const menuIcon = computed(() => {
+  const product = store.getters['productId'];
+
+  const resources = parent?.location?.params?.resource || ''
+
+  return store.getters['type-map/groupsForVirTypes'](product, resources);
+})
+
+
+watch(
+  () => currentView.value,
+  () => {
+    router.push({ query: { [AS]: currentView.value } });
+  }
+);
+</script>
+
+<template>
+  <div class="title-bar">
+    <breadcrumb :resource="resource"/>
+    <Top>
+      <Title class="title">
+        <span v-if="menuIcon && parentRouteOverride === 'account' && resource=== 'token'" class="detailIcon-span">
+          <img
+            v-if="parentRouteOverride === 'account' && resource=== 'token'"
+            :src="Svg"
+            style="margin-top: 4px; margin-left: 5px;"
+          >
+          <i
+            v-else
+            :class="'icon-'+ menuIcon + ' detailIcon'"
+          />
+        </span>
+        <div class="resourceTypeLabelCls">
+          {{ resourceTypeLabel }}名称:
+        </div>
+        <span class="resource-name masthead-resource-title">
+          {{ resourceName }}
+        </span>
+        <BadgeState
+          v-if="badge"
+          class="badge-state"
+          :color="badge.color"
+          :label="badge.label"
+        />
+        <span
+          class="valid"
+        >|</span>
+        <TabTitle :show-child="false">
+          返回
+        </TabTitle>
+        <router-link
+          v-if="resourceTo"
+          :to="resourceTo"
+          class="resource-link"
+        >
+          返回
+        </router-link>
+        <span
+          v-else
+          class="resource-text"
+        >
+          返回
+        </span>
+        <div
+          v-if="description"
+          style="font-size: 12px;margin-left: 16px;"
+          class="bottom description text-deemphasized"
+        >
+          ( {{ description }} )
+        </div>
+      </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', showConfigurationReturnFocusSelector)"
+        >
+          <img
+            :src="showConfigurationIcon"
+            class="mmr-3"
+            aria-hidden="true"
+          >
+          {{ i18n.t('component.resource.detail.titleBar.showConfiguration') }}
+        </RcButton>
+        <ActionMenu
+          v-if="actionMenuResource"
+          :showIcon="true"
+          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>
+    <ExtensionPanel
+      :resource="resource"
+      :type="ExtensionPoint.PANEL"
+      :location="PanelLocation.DETAILS_MASTHEAD"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.detailIcon-span{
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  position: relative;
+  background: var(--primary);
+  margin-right: 10px;
+}
+.resourceTypeLabelCls {
+  font-weight: 700;
+}
+.valid{
+  color: #d7d7d7;
+  margin: 0px 10px;
+}
+.title-bar {
+  min-width: 740px;
+
+  .badge-state {
+    font-size: 16px;
+    margin-left: 5px;
+    position: relative;
+  }
+
+  .show-configuration {
+    margin-left: 16px;
+  }
+
+  &:deep() button[data-testid="masthead-action-menu"] {
+    border-radius: 2px;
+    width: 32px;
+    height: 32px;
+    margin-left: 10px;
+
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    a{
+      color: #fff;
+    }
+  }
+
+  .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/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);
+  });
+});