@rancher/shell 3.0.5-rc.8 → 3.0.5

package/components/Resource/Detail/Preview/Preview.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import CopyToClipboard from '@shell/components/Resource/Detail/CopyToClipboard.vue';
+import Content from '@shell/components/Resource/Detail/Preview/Content.vue';
+import { useBasicSetupFocusTrap } from '@shell/composables/focusTrap';
+import { computed, onMounted, ref } from 'vue';
+
+export interface Props {
+  title: string;
+  value: string;
+  anchorElement: HTMLElement | null;
+}
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'close', keyboardExit: boolean): void}>();
+const boundingRect = computed(() => props.anchorElement?.getBoundingClientRect());
+const top = computed(() => `${ (boundingRect.value?.top || 0) - 28 }px`);
+const right = computed(() => `${ (document.documentElement.clientWidth - (boundingRect.value?.left || 0)) + 16 }px`);
+const containerRef = ref<HTMLElement | null>(null);
+const escapePressed = ref(false);
+const isMouseInteraction = ref(false);
+
+const onFocusOut = (e: FocusEvent) => {
+  // Refocus the container if the user clicks a child element (copy to clipboard)
+  if (!escapePressed.value && containerRef.value?.contains(e.relatedTarget as Node)) {
+    if (isMouseInteraction.value) {
+      containerRef.value.focus();
+    }
+  } else {
+    emit('close', escapePressed.value);
+  }
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    escapePressed.value = true;
+    containerRef.value?.blur();
+  }
+};
+
+onMounted(() => {
+  containerRef.value?.focus();
+});
+
+useBasicSetupFocusTrap('#focus-trap-preview-container-element');
+
+</script>
+<template>
+  <Teleport to="#preview">
+    <div
+      id="focus-trap-preview-container-element"
+      ref="containerRef"
+      class="preview"
+      tabindex="-1"
+      @keydown="onKeydown"
+      @focusout="onFocusOut"
+      @mousedown="isMouseInteraction=true"
+      @mouseup="isMouseInteraction=false"
+    >
+      <div class="title">
+        {{ props.title }}
+      </div>
+      <Content
+        class="content"
+        :value="props.value"
+      />
+      <CopyToClipboard
+        class="copy-to-clipboard"
+        :value="props.value"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.preview-mouse-catcher {
+  cursor: default;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 120;
+}
+.preview {
+  cursor: default;
+  position: fixed;
+  right: v-bind(right);
+  top: v-bind(top);
+  z-index: 121;
+  display: flex;
+  flex-direction: column;
+  min-width: 420px;
+  max-width: 550px;
+  max-height: 550px;
+
+  padding: 16px;
+
+  background-color: var(--body-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius-md);
+
+  &:focus {
+    outline: none;
+  }
+
+  .title {
+    margin-bottom: 16px;
+
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+  }
+
+  .content {
+    flex: 1;
+
+    overflow: scroll;
+  }
+
+  .copy-to-clipboard {
+      position: absolute;
+      right: -8px;
+      top: -8px;
+  }
+}
+</style>

package/components/Resource/Detail/Preview/__tests__/Content.spec.ts

@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import Content from '@shell/components/Resource/Detail/Preview/Content.vue';
+import CodeMirror from '@shell/components/CodeMirror.vue';
+
+describe('component: Resource Detail Preview Content', () => {
+  const toTextDirective = (el: any, binding: any) => {
+    el.textContent = binding.value;
+  };
+  const global = {
+    directives: {
+      cleanHtml: toTextDirective,
+      t:         toTextDirective
+    },
+    stubs: { CodeMirror: true }
+  };
+
+  it('should display an empty message when value is empty', () => {
+    const wrapper = shallowMount(Content, {
+      props: { value: '' },
+      global
+    });
+
+    const span = wrapper.find('span');
+
+    expect(span.exists()).toBe(true);
+    expect(span.text()).toBe('detailText.empty');
+  });
+
+  it('should display a CodeMirror component for a valid JSON string', () => {
+    const jsonValue = '{"key":"value"}';
+    const wrapper = shallowMount(Content, {
+      props: { value: jsonValue },
+      global
+    });
+
+    const codeMirror = wrapper.findComponent(CodeMirror);
+
+    expect(codeMirror.exists()).toBe(true);
+
+    const expectedFormattedJson = JSON.stringify(JSON.parse(jsonValue), null, 2);
+
+    expect(codeMirror.props('value')).toBe(expectedFormattedJson);
+  });
+
+  it('should display a plain text message for a non-JSON string', () => {
+    const textValue = 'line 1';
+    const wrapper = shallowMount(Content, {
+      props: { value: textValue },
+      global
+    });
+
+    const span = wrapper.find('[data-testid="detail-top_html"]');
+
+    expect(span.exists()).toBe(true);
+    expect(span.text()).toBe('line 1');
+    expect(span.classes()).toContain('monospace');
+  });
+
+  it('should display a plain text message for a string that looks like JSON but is invalid', () => {
+    const invalidJson = '{';
+    const wrapper = shallowMount(Content, {
+      props: { value: invalidJson },
+      global
+    });
+
+    const span = wrapper.find('[data-testid="detail-top_html"]');
+
+    expect(span.exists()).toBe(true);
+    expect(span.text()).toBe('{');
+  });
+});

package/components/Resource/Detail/Preview/__tests__/Preview.spec.ts

@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils';
+import Preview from '@shell/components/Resource/Detail/Preview/Preview.vue';
+import { useBasicSetupFocusTrap } from '@shell/composables/focusTrap';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+jest.mock('@shell/composables/focusTrap', () => ({ useBasicSetupFocusTrap: jest.fn() }));
+
+const teleportTarget = document.createElement('div');
+
+teleportTarget.id = 'preview';
+document.body.appendChild(teleportTarget);
+
+describe('component: Resource Detail Preview', () => {
+  const global = {
+    stubs: {
+      Teleport:        true,
+      Content:         true,
+      CopyToClipboard: true,
+    },
+  };
+  const anchorElement = document.createElement('div');
+
+  // Mock getBoundingClientRect
+  anchorElement.getBoundingClientRect = () => ({
+    x:      100,
+    y:      100,
+    width:  50,
+    height: 20,
+    top:    100,
+    left:   100,
+    right:  150,
+    bottom: 120,
+    toJSON: () => ({}),
+  });
+
+  it('should render title and pass value to children', () => {
+    const wrapper = mount(Preview, {
+      props: {
+        title: 'My Test Title',
+        value: 'My test value',
+        anchorElement,
+      },
+      global
+    });
+
+    // Test title
+    const titleDiv = wrapper.find('.title');
+
+    expect(titleDiv.exists()).toBe(true);
+    expect(titleDiv.text()).toBe('My Test Title');
+
+    // Test props passed to Content
+    const content = wrapper.findComponent({ name: 'Content' });
+
+    expect(content.exists()).toBe(true);
+    expect(content.props('value')).toBe('My test value');
+
+    // Test props passed to CopyToClipboard
+    const copy = wrapper.findComponent({ name: 'CopyToClipboard' });
+
+    expect(copy.exists()).toBe(true);
+    expect(copy.props('value')).toBe('My test value');
+  });
+
+  it('should emit close on focusout', async() => {
+    const wrapper = mount(Preview, {
+      props: {
+        title: 'Test',
+        value: 'Value',
+        anchorElement,
+      },
+      global
+    });
+
+    const previewDiv = wrapper.find('.preview');
+
+    await previewDiv.trigger('focusout');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(wrapper.emitted('close')?.[0]).toStrictEqual([false]);
+  });
+
+  it('should emit close with true on Escape keydown', async() => {
+    const wrapper = mount(Preview, {
+      props: {
+        title: 'Test',
+        value: 'Value',
+        anchorElement,
+      },
+      global
+    });
+
+    const previewDiv = wrapper.find('.preview');
+
+    // Spy on blur to see if it's called
+    const blurSpy = jest.spyOn(previewDiv.element, 'blur');
+
+    await previewDiv.trigger('keydown.Escape');
+
+    expect(blurSpy).toHaveBeenCalledWith();
+
+    // Manually trigger focusout as jsdom doesn't do it automatically on blur()
+    await previewDiv.trigger('focusout');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(wrapper.emitted('close')?.[0]).toStrictEqual([true]);
+  });
+
+  it('should call focus trap composable', () => {
+    mount(Preview, {
+      props: {
+        title: 'Test',
+        value: 'Value',
+        anchorElement,
+      },
+      global
+    });
+
+    expect(useBasicSetupFocusTrap).toHaveBeenCalledWith('#focus-trap-preview-container-element');
+  });
+});

package/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue

@@ -0,0 +1,141 @@
+<script lang="ts">
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import { useStore } from 'vuex';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useI18n } from '@shell/composables/useI18n';
+
+export interface Props {
+  resource: any;
+}
+</script>
+
+<script setup lang="ts">
+const emit = defineEmits(['action-invoked']);
+const props = defineProps<Props>();
+const store = useStore();
+const i18n = useI18n(store);
+
+const getGlanceItemValueId = (glanceItem: any): string => `value-${ glanceItem.label }:${ glanceItem.content }`.toLowerCase().replaceAll(' ', '');
+</script>
+
+<template>
+  <Card
+    class="resource-popover-card"
+    :title="resource.nameDisplay"
+  >
+    <template #heading-action>
+      <ActionMenu
+        :resource="props.resource"
+        :button-aria-label="i18n.t('component.resource.detail.glance.ariaLabel.actionMenu', { resource: props.resource.nameDisplay })"
+        data-testid="resource-popover-action-menu"
+        @action-invoked="emit('action-invoked')"
+      />
+    </template>
+
+    <div>
+      <div
+        v-for="(glanceItem, i) in props.resource.glance"
+        :key="glanceItem.label"
+        class="row"
+      >
+        <label
+          class="label text-deemphasized"
+          :for="getGlanceItemValueId(glanceItem)"
+        >
+          {{ glanceItem.label }}
+        </label>
+        <div
+          :id="getGlanceItemValueId(glanceItem)"
+          class="value"
+        >
+          <component
+            :is="glanceItem.formatter"
+            v-if="glanceItem.formatter"
+            v-bind="glanceItem.formatterOpts"
+            :id="i === 0 ? 'first-glance-item' : undefined"
+            :value="glanceItem.content"
+          />
+          <span
+            v-else
+            :id="i === 0 ? 'first-glance-item' : undefined"
+          >
+            {{ glanceItem.content }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.resource-popover-card {
+  width: 288px;
+
+  .dropdown-item {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    border: none;
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  &:deep() {
+    .badge-state {
+      height: 20px;
+      font-size: 12px;
+    }
+
+    .heading {
+      height: 24px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+
+    .v-popper, .btn.role-link {
+      height: 24px;
+      min-height: initial;
+      padding: 0;
+    }
+
+    .v-popper {
+      padding: 0;
+    }
+
+    .btn.role-link {
+      color: #141419;
+      padding: 0 12px;
+      i {
+        display: inline-flex;
+        justify-content: center;
+        font-size: 12px;
+        width: 2.5px;
+      }
+
+      &:hover {
+        background-color: transparent
+      }
+    }
+  }
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    line-height: 21px;
+
+    &:not(:first-of-type) {
+      margin-top: 4px;
+    }
+
+    .label {
+      width: 50%;
+    }
+  }
+}
+</style>

package/components/Resource/Detail/ResourcePopover/__tests__/ResourcePopoverCard.test.ts

@@ -0,0 +1,136 @@
+import { mount, VueWrapper } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ResourcePopoverCard from '@shell/components/Resource/Detail/ResourcePopover/ResourcePopoverCard.vue';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+
+const mockI18n = { t: (key: string) => key };
+
+jest.mock('@shell/composables/useI18n', () => ({ useI18n: () => mockI18n }));
+
+describe('component: ResourcePopoverCard.vue', () => {
+  let wrapper: VueWrapper<any>;
+
+  const mockResource = {
+    nameDisplay: 'My Test Resource',
+    glance:      [
+      {
+        label:   'Status',
+        content: 'Active',
+      },
+      {
+        label:         'Type',
+        content:       'SomeType',
+        formatter:     'SomeFormatterComponent',
+        formatterOpts: { opt1: 'value1' }
+      },
+      {
+        label:   'Created',
+        content: '2023-01-01',
+      }
+    ],
+  };
+
+  const store = createStore({ getters: { 'i18n/t': () => (key: string) => key } });
+
+  const SomeFormatterComponent = {
+    name:     'SomeFormatterComponent',
+    props:    ['value', 'opt1', 'id'],
+    template: '<div :id="id">Formatted: {{ value }} with {{ opt1 }}</div>',
+  };
+
+  function createWrapper(resource: any) {
+    return mount(ResourcePopoverCard, {
+      props:  { resource },
+      global: {
+        plugins:    [store],
+        stubs:      { ActionMenu: true },
+        components: { SomeFormatterComponent }
+      },
+    });
+  }
+
+  beforeEach(() => {
+    wrapper = createWrapper(mockResource);
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('should render the Card with the correct title', () => {
+    const card = wrapper.findComponent(Card);
+
+    expect(card.exists()).toBe(true);
+    expect(card.props('title')).toBe(mockResource.nameDisplay);
+  });
+
+  it('should render the ActionMenu with the correct resource prop', () => {
+    const actionMenu = wrapper.findComponent(ActionMenu);
+
+    expect(actionMenu.exists()).toBe(true);
+    expect(actionMenu.props('resource')).toStrictEqual(mockResource);
+  });
+
+  it('should emit "action-invoked" when ActionMenu emits it', async() => {
+    const actionMenu = wrapper.findComponent(ActionMenu);
+
+    await actionMenu.vm.$emit('action-invoked');
+
+    expect(wrapper.emitted('action-invoked')).toHaveLength(1);
+  });
+
+  it('should render a row for each item in resource.glance', () => {
+    const rows = wrapper.findAll('.row');
+
+    expect(rows).toHaveLength(mockResource.glance.length);
+  });
+
+  it('should render the correct label and value for each glance item', () => {
+    const rows = wrapper.findAll('.row');
+
+    rows.forEach((row, i) => {
+      const glanceItem = mockResource.glance[i];
+      const label = row.find('label');
+      const value = row.find('.value');
+
+      expect(label.text()).toBe(glanceItem.label);
+      if (glanceItem.formatter) {
+        return;
+      }
+
+      expect(value.text()).toBe(glanceItem.content);
+    });
+  });
+
+  it('should render a dynamic component when a formatter is provided', () => {
+    const formatterComponent = wrapper.findComponent(SomeFormatterComponent);
+
+    expect(formatterComponent.exists()).toBe(true);
+    expect(formatterComponent.props('value')).toBe(mockResource.glance[1].content);
+    expect(formatterComponent.props('opt1')).toBe(mockResource.glance[1].formatterOpts.opt1);
+  });
+
+  it('should generate a unique ID for label `for` and value `id` attributes', () => {
+    const firstGlanceItem = mockResource.glance[0];
+    const expectedId = `value-${ firstGlanceItem.label }:${ firstGlanceItem.content }`.toLowerCase().replaceAll(' ', '');
+
+    const label = wrapper.find('label');
+    const value = wrapper.find('.value');
+
+    expect(label.attributes('for')).toBe(expectedId);
+    expect(value.attributes('id')).toBe(expectedId);
+  });
+
+  it('should add a specific ID to the first glance item value', () => {
+    const firstValueSpan = wrapper.find('#first-glance-item');
+
+    expect(firstValueSpan.exists()).toBe(true);
+    // This will be the span inside the first .value div
+    expect(firstValueSpan.text()).toBe(mockResource.glance[0].content);
+
+    const secondValue = wrapper.findAll('.value')[1];
+
+    expect(secondValue.find('#first-glance-item').exists()).toBe(false);
+  });
+});