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

package/components/Resource/Detail/ResourceRow.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+import SubtleLink from '@shell/components/SubtleLink.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+import { sortBy } from 'lodash';
+import { RouteLocationRaw } from 'vue-router';
+
+export interface Count {
+  label: string;
+  count: number;
+}
+
+export interface Props {
+  label: string;
+  to?: RouteLocationRaw;
+  color?: StateColor;
+  counts?: Count[];
+}
+
+export function extractCounts(labels: string[]): Count[] {
+  const accumulator: { [k: string]: number} = {};
+
+  labels.forEach((l: string) => {
+    accumulator[l] = accumulator[l] || 0;
+    accumulator[l]++;
+  });
+
+  const counts: Count[] = Object.entries(accumulator).map(([label, count]) => ({ label, count }));
+
+  return sortBy(counts, 'label');
+}
+
+</script>
+
+<script setup lang="ts">
+const {
+  label, to, counts, color
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="resource-row">
+    <div class="left">
+      <SubtleLink
+        v-if="to"
+        :to="to"
+      >
+        {{ label }}
+      </SubtleLink>
+      <span
+        v-else
+        class="text-muted"
+      >
+        {{ label }}
+      </span>
+    </div>
+    <div class="right">
+      <div
+        v-if="!counts || counts.length == 0"
+        class="text-muted"
+      >
+        &mdash;
+      </div>
+      <div
+        v-else
+        class="counts"
+      >
+        <span
+          v-if="color"
+          class="dot"
+          :style="{backgroundColor: stateColorCssVar(color)}"
+        >
+&nbsp;
+        </span>
+        <span
+          v-for="count in counts"
+          :key="count.label"
+          class="count"
+        >
+          {{ count.count }} {{ count.label }}<span class="and">&nbsp;+&nbsp;</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.resource-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .right {
+      flex-grow: 1;
+      text-align: right;
+    }
+
+    .counts {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .count:last-of-type .and {
+      display: none;
+    }
+
+    .dot {
+      display: inline-block;
+
+      $size: 6px;
+      width: $size;
+      height: $size;
+
+      border-radius: 50%;
+      margin-right: 10px;
+    }
+}
+</style>

package/components/Resource/Detail/SpacedRow.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="spaced-row">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.spaced-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-flow: dense;
+  grid-gap: 24px;
+}
+</style>

package/components/Resource/Detail/StatusBar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { stateColorCssVar, StateColor } from '@shell/utils/style';
+
+export interface Segment {
+  color: StateColor;
+  percent: number;
+}
+
+export interface Props {
+  segments: Segment[]
+}
+
+const { segments } = defineProps<Props>();
+
+const computeStyle = (segment: Segment) => {
+  return {
+    backgroundColor: stateColorCssVar(segment.color),
+    width:           `${ segment.percent }%`
+  };
+};
+</script>
+
+<template>
+  <div class="status-bar">
+    <div
+      v-for="(segment, i) in segments"
+      :key="i"
+      class="segment"
+      :style="computeStyle(segment)"
+    >
+&nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    column-gap: 2px;
+    height: 21px;
+
+    .segment {
+        height: 4px;
+
+        &:first-of-type {
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+    }
+}
+</style>

package/components/Resource/Detail/StatusRow.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import Bubble from '@shell/components/Resource/Detail/Card/PodsCard/Bubble.vue';
+import { StateColor, stateColorCssVar } from '@shell/utils/style';
+
+export interface Props {
+        color: StateColor;
+        label: string;
+        count: number;
+        percent: number;
+}
+
+const {
+  color, label, count, percent
+} = defineProps<Props>();
+</script>
+
+<template>
+  <div class="status-row">
+    <div
+      class="indicator"
+      :style="{backgroundColor: stateColorCssVar(color)}"
+    />
+    <div class="label">
+      {{ label }}
+    </div>
+    <div class="count">
+      <Bubble>{{ count }}</Bubble>
+    </div>
+    <div class="percent text-muted">
+      {{ percent.toFixed(1) }}%
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.status-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:not(:first-of-type) {
+      margin-top: 8px;
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .indicator {
+      height: 4px;
+      border-radius: 4px;
+      width: 20px;
+      margin-right: 10px;
+    }
+
+    .percent {
+      width: 60px;
+      text-align: right;
+    }
+}
+</style>

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

@@ -0,0 +1,13 @@
+<template>
+  <h1 class="title">
+    <slot name="default" />
+  </h1>
+</template>
+
+<style lang="scss" scoped>
+  h1.title {
+    display: inline-block;
+    align-items: center;
+    line-height: 18px;
+  }
+</style>

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);
+  });
+});