dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-test.1

package/components/Drawer/Chrome.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+export interface Props {
+  ariaTarget: string;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<Props>();
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close', { target: props.ariaTarget }));
+
+</script>
+<template>
+  <div class="chrome">
+    <div class="header pp-4">
+      <slot name="header">
+        <div class="title">
+          <slot name="title" />
+        </div>
+        <div class="actions">
+          <button
+            class="btn role-link"
+            :aria-label="ariaLabel"
+            @click="emit('close')"
+          >
+            <i class="icon icon-close" />
+          </button>
+        </div>
+      </slot>
+    </div>
+    <div class="body pp-4">
+      <slot name="body" />
+    </div>
+    <div class="footer pp-4">
+      <slot name="footer">
+        <div class="actions">
+          <button
+            class="btn role-secondary"
+            :aria-label="ariaLabel"
+            @click="emit('close')"
+          >
+            {{ i18n.t('component.drawer.chrome.close') }}
+          </button>
+          <slot name="additional-actions" />
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.chrome {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    & >.header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      background-color: var(--body-bg);
+      border-bottom: 1px solid var(--border);
+      height: var(--header-height);
+
+      & > .title {
+        flex: 1;
+        font-size: 16px;
+      }
+
+      & > .actions {
+        button {
+          display: inline-flex;
+          $size: 24px;
+          width: $size;
+          height: $size;
+          color: var(--body-text);
+
+          justify-content: center;
+        }
+      }
+    }
+
+    .body {
+      background-color: var(--drawer-body-bg);
+      flex: 1;
+      overflow-y: scroll;
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+
+        background-color: var(--body-bg);
+        border-top: 1px solid var(--border);
+        height: 72px;
+
+        .actions > * {
+            margin-left: 16px;
+        }
+    }
+}
+</style>

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { _VIEW } from '@shell/config/query-params';
+import { useStore } from 'vuex';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+
+export interface Props {
+  resource: any;
+  component: any;
+  resourceType: string;
+}
+</script>
+<script setup lang="ts">
+const props = defineProps<Props>();
+const store = useStore();
+const i18n = useI18n(store);
+</script>
+<template>
+  <Tab
+    class="config-tab"
+    name="config-tab"
+    :label="i18n.t('component.drawer.resourceDetailDrawer.configTab.title')"
+  >
+    <div class="container">
+      <component
+        :is="props.component"
+        :value="props.resource"
+        :liveValue="props.resource"
+        :resourceType="props.resourceType"
+        :mode="_VIEW"
+        :real-mode="_VIEW"
+        :initial-value="props.resource"
+        :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        as="config"
+      />
+    </div>
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.config-tab {
+  .container {
+    background-color: var(--body-bg);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+    max-width: 100%;
+    width: 100%;
+    position: relative;
+  }
+
+  // Handle the loading indicator
+  :deep() .overlay-content-mode {
+    left: 0;
+    top: 0;
+  }
+
+  :deep() .cru-resource-footer {
+    display: none;
+  }
+}
+</style>

package/components/Drawer/ResourceDetailDrawer/YamlTab.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { useI18n } from '@shell/composables/useI18n';
+import { _VIEW } from '@shell/config/query-params';
+import { useStore } from 'vuex';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import { useTemplateRef } from 'vue';
+import ResourceYaml from '@shell/components/ResourceYaml.vue';
+
+export interface Props {
+  resource: any;
+  yaml: string;
+}
+</script>
+<script setup lang="ts">
+const props = defineProps<Props>();
+const store = useStore();
+const i18n = useI18n(store);
+const yamlComponent: any = useTemplateRef('yaml');
+</script>
+<template>
+  <Tab
+    class="yaml-tab"
+    name="yaml-tab"
+    :label="i18n.t('component.drawer.resourceDetailDrawer.yamlTab.title')"
+    @active="() => yamlComponent?.refresh()"
+  >
+    <ResourceYaml
+      ref="yaml"
+      :value="props.resource"
+      :yaml="props.yaml"
+      :mode="_VIEW"
+    />
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+.yaml-tab {
+  :deep() .codemirror-container {
+    background-color: var(--body-bg);
+    border-radius: var(--border-radius-md);
+    padding: 16px;
+
+    .CodeMirror, .CodeMirror-gutter {
+      background-color: var(--body-bg);
+    }
+  }
+}
+</style>

package/components/Drawer/ResourceDetailDrawer/__tests__/ConfigTab.test.ts

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
+import { createStore } from 'vuex';
+import { defineComponent, markRaw } from 'vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import { _VIEW } from '@shell/config/query-params';
+
+const DynamicComponent = defineComponent({
+  template: '<div>DynamicComponent</div>',
+  props:    {
+    value:         { type: Object, required: true },
+    mode:          { type: String, required: true },
+    initialValue:  { type: Object, required: true },
+    useTabbedHash: { type: Boolean, required: true }
+  }
+});
+
+describe('component: ResourceDetailDrawer/ConfigTab', () => {
+  const resource = { resource: 'RESOURCE' };
+  const global = {
+    provide: {
+      addTab: jest.fn(), removeTab: jest.fn(), sideTabs: false, store: createStore({})
+    },
+    directives: { 'clean-tooltip': jest.fn() }
+
+  };
+
+  it('should render container with config-tab class and correct label and name', async() => {
+    const wrapper = mount(ConfigTab, {
+      props: { resource, component: markRaw(DynamicComponent) },
+      global
+    });
+
+    const component = wrapper.getComponent(Tab);
+
+    expect(wrapper.classes().includes('config-tab')).toBeTruthy();
+    expect(component.props('label')).toStrictEqual('component.drawer.resourceDetailDrawer.configTab.title');
+    expect(component.props('name')).toStrictEqual('config-tab');
+  });
+
+  it('should render a dynamic component within the .container and pass the correct props', () => {
+    const wrapper = mount(ConfigTab, {
+      props: { resource, component: markRaw(DynamicComponent) },
+      global
+    });
+
+    const component = wrapper.find('.container').getComponent(DynamicComponent);
+
+    expect(component.props('value')).toStrictEqual(resource);
+    expect(component.props('mode')).toStrictEqual(_VIEW);
+    expect(component.props('initialValue')).toStrictEqual(resource);
+    expect(component.props('useTabbedHash')).toStrictEqual(false);
+  });
+});

package/components/Drawer/ResourceDetailDrawer/__tests__/YamlTab.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import YamlTab from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
+import { createStore } from 'vuex';
+
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import { _VIEW } from '@shell/config/query-params';
+import ResourceYaml from '@shell/components/ResourceYaml.vue';
+import { nextTick } from 'vue';
+
+jest.mock('@shell/components/ResourceYaml.vue', () => ({
+  template: `<div>ResourceYaml</div>`,
+  props:    {
+    value: {
+      type:     Object,
+      required: true
+    },
+    yaml: {
+      type:     String,
+      required: true
+    },
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+  methods: { refresh: jest.fn() }
+}));
+
+describe('component: ResourceDetailDrawer/ConfigTab', () => {
+  const resource = { resource: 'RESOURCE' };
+  const yaml = 'YAML';
+  const global = {
+    provide: {
+      addTab: jest.fn(), removeTab: jest.fn(), sideTabs: false, store: createStore({})
+    },
+    directives: { 'clean-tooltip': jest.fn() }
+
+  };
+
+  it('should render container with yaml-tab class and correct label and name', async() => {
+    const wrapper = mount(YamlTab, {
+      props: { resource, yaml },
+      global
+    });
+
+    const component = wrapper.getComponent(Tab);
+
+    expect(wrapper.classes().includes('yaml-tab')).toBeTruthy();
+    expect(component.props('label')).toStrictEqual('component.drawer.resourceDetailDrawer.yamlTab.title');
+    expect(component.props('name')).toStrictEqual('yaml-tab');
+  });
+
+  it('should render a ResourceYaml component and pass the correct props', () => {
+    const wrapper = mount(YamlTab, {
+      props: { resource, yaml },
+      global
+    });
+
+    const component = wrapper.getComponent(ResourceYaml);
+
+    expect(component.props('value')).toStrictEqual(resource);
+    expect(component.props('yaml')).toStrictEqual(yaml);
+    expect(component.props('mode')).toStrictEqual(_VIEW);
+  });
+
+  it('should refresh yaml editor when tab is activated, without it the editor will not resize', async() => {
+    const wrapper = mount(YamlTab, {
+      props: { resource, yaml },
+      global
+    });
+
+    const tabComponent = wrapper.getComponent(Tab);
+
+    expect(ResourceYaml.methods?.refresh).toHaveBeenCalledTimes(0);
+    tabComponent.vm.$emit('active');
+    await nextTick();
+
+    expect(ResourceYaml.methods?.refresh).toHaveBeenCalledTimes(1);
+  });
+});

package/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -0,0 +1,106 @@
+import { useDefaultConfigTabProps, useDefaultYamlTabProps, useResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import * as helpers from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+import * as vuex from 'vuex';
+import * as drawer from '@shell/composables/drawer';
+
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/helpers');
+jest.mock('vuex');
+jest.mock('@shell/composables/drawer');
+jest.mock('@shell/components/Drawer/ResourceDetailDrawer/index.vue', () => ({ name: 'ResourceDetailDrawer' } as any));
+
+describe('composables: ResourceDetailDrawer', () => {
+  const resource = { type: 'RESOURCE' };
+  const yaml = 'YAML';
+
+  describe('useDefaultYamlTabProps', () => {
+    it('should return the appropriate values based on input', async() => {
+      const getYamlSpy = jest.spyOn(helpers, 'getYaml').mockImplementation(() => Promise.resolve(yaml));
+      const props = await useDefaultYamlTabProps(resource);
+
+      expect(getYamlSpy).toHaveBeenCalledWith(resource);
+      expect(props.yaml).toStrictEqual(yaml);
+      expect(props.resource).toStrictEqual(resource);
+    });
+  });
+
+  describe('useDefaultConfigTabProps', () => {
+    const hasCustomEdit = jest.fn();
+    const importEdit = jest.fn();
+    const hasCustomDetail = jest.fn();
+    const editComponent = { component: 'EDIT_COMPONENT' };
+    const store: any = {
+      getters: {
+        'type-map/hasCustomEdit':   hasCustomEdit,
+        'type-map/importEdit':      importEdit,
+        'type-map/hasCustomDetail': hasCustomDetail,
+      }
+    };
+
+    it('should return undefined if it does not have a customEdit', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => false);
+      const props = useDefaultConfigTabProps(resource);
+
+      expect(hasCustomEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(props).toBeUndefined();
+    });
+
+    it('should return undefined if it does not have a customDetail', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => true);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => false);
+      const props = useDefaultConfigTabProps(resource);
+
+      expect(hasCustomEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
+      expect(props).toBeUndefined();
+    });
+
+    it('should return undefined if resource disableResourceDetailDrawerConfigTab is true', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => false);
+      const props = useDefaultConfigTabProps({ ...resource, disableResourceDetailDrawerConfigTab: true });
+
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
+      expect(props).toBeUndefined();
+    });
+
+    it('should return props if it has a customEdit', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => true);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => true);
+      const importEditSpy = importEdit.mockImplementation(() => editComponent);
+      const props = useDefaultConfigTabProps(resource);
+
+      expect(hasCustomEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
+      expect(importEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(props?.component).toStrictEqual(editComponent);
+      expect(props?.resource).toStrictEqual(resource);
+    });
+  });
+
+  describe('useResourceDetailDrawer', () => {
+    it('should create a wrapper that passes that appropriate properties to the drawer methods', () => {
+      const openSpy = jest.fn();
+      const closeSpy = jest.fn();
+      const selector = '.selector';
+      const useDrawerSpy = jest.spyOn(drawer, 'useDrawer').mockImplementation(() => ({ open: openSpy, close: closeSpy }));
+      const resourceDetailDrawer = useResourceDetailDrawer();
+
+      resourceDetailDrawer.openResourceDetailDrawer(resource, selector);
+
+      expect(useDrawerSpy).toHaveBeenCalledTimes(1);
+      expect(openSpy).toHaveBeenCalledWith({ name: 'ResourceDetailDrawer' }, selector, {
+        resource,
+        onClose:            closeSpy,
+        width:              '73%',
+        // We want this to be full viewport height top to bottom
+        height:             '100vh',
+        top:                '0',
+        'z-index':          101, // We want this to be above the main side menu
+        closeOnRouteChange: ['name', 'params', 'query']
+      });
+    });
+  });
+});

package/components/Drawer/ResourceDetailDrawer/__tests__/helpers.test.ts

@@ -0,0 +1,42 @@
+import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+
+describe('helpers: ResourceDetailDrawer', () => {
+  describe('getYaml', () => {
+    const resource = {
+      hasLink:          jest.fn(),
+      followLink:       jest.fn(),
+      cleanForDownload: jest.fn()
+    };
+
+    const yaml = 'YAML';
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should skip following a link if it does not have a view link', async() => {
+      resource.hasLink.mockImplementation(() => false);
+      resource.cleanForDownload.mockImplementation(() => yaml);
+
+      const response = await getYaml(resource);
+
+      expect(resource.hasLink).toHaveBeenCalledWith('view');
+      expect(resource.followLink).toHaveBeenCalledTimes(0);
+      expect(resource.cleanForDownload).toHaveBeenCalledWith(undefined);
+      expect(response).toStrictEqual(yaml);
+    });
+
+    it('should follow link if it has a view link', async() => {
+      resource.hasLink.mockImplementation(() => true);
+      resource.followLink.mockImplementation(() => Promise.resolve({ data: yaml }));
+      resource.cleanForDownload.mockImplementation(() => yaml);
+
+      const response = await getYaml(resource);
+
+      expect(resource.hasLink).toHaveBeenCalledWith('view');
+      expect(resource.followLink).toHaveBeenCalledWith('view', { headers: { accept: 'application/yaml' } });
+      expect(resource.cleanForDownload).toHaveBeenCalledWith(yaml);
+      expect(response).toStrictEqual(yaml);
+    });
+  });
+});

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -0,0 +1,53 @@
+import ResourceDetailDrawer from '@shell/components/Drawer/ResourceDetailDrawer/index.vue';
+import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
+import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
+import { useStore } from 'vuex';
+import { useDrawer } from '@shell/composables/drawer';
+import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+
+export function useResourceDetailDrawer() {
+  const { open, close } = useDrawer();
+
+  const openResourceDetailDrawer = (resource: any, returnFocusSelector: string) => {
+    open(ResourceDetailDrawer,
+      returnFocusSelector,
+      {
+        resource,
+        onClose:            close,
+        width:              '73%',
+        // We want this to be full viewport height top to bottom
+        height:             '100vh',
+        top:                '0',
+        'z-index':          101, // We want this to be above the main side menu
+        closeOnRouteChange: ['name', 'params', 'query'] // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
+      });
+  };
+
+  return { openResourceDetailDrawer };
+}
+
+export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
+  const yaml = await getYaml(resource);
+
+  return {
+    resource,
+    yaml
+  };
+}
+
+export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
+  const store = useStore();
+
+  // You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't
+  // a detail page because we default to showing the existing edit page if the detail page doesn't exist. Showing them again
+  // wouldn't be worth while.
+  if (!store.getters['type-map/hasCustomEdit'](resource.type) || !store.getters['type-map/hasCustomDetail'](resource.type) || resource.disableResourceDetailDrawerConfigTab) {
+    return;
+  }
+
+  return {
+    resource,
+    component:    store.getters['type-map/importEdit'](resource.type),
+    resourceType: resource.type
+  };
+}

package/components/Drawer/ResourceDetailDrawer/helpers.ts

@@ -0,0 +1,10 @@
+export async function getYaml(resource: any): Promise<string> {
+  let yaml;
+  const opt = { headers: { accept: 'application/yaml' } };
+
+  if (resource.hasLink('view')) {
+    yaml = (await resource.followLink('view', opt)).data;
+  }
+
+  return resource.cleanForDownload(yaml);
+}