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

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

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -0,0 +1,111 @@
+<script lang="ts">
+import Drawer from '@shell/components/Drawer/Chrome.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import YamlTab, { Props as YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
+import { useDefaultConfigTabProps, useDefaultYamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
+import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
+import { computed, ref } from 'vue';
+import RcButton from '@components/RcButton/RcButton.vue';
+import StateDot from '@shell/components/StateDot/index.vue';
+
+export interface Props {
+  resource: any;
+
+  onClose?: () => void;
+}
+</script>
+<script setup lang="ts">
+const props = defineProps<Props>();
+const emit = defineEmits(['close']);
+const store = useStore();
+const i18n = useI18n(store);
+
+const yamlTabProps = ref<YamlProps | null>(null);
+const configTabProps = useDefaultConfigTabProps(props.resource);
+
+useDefaultYamlTabProps(props.resource).then((props) => {
+  yamlTabProps.value = props;
+});
+
+const title = computed(() => {
+  const resourceType = store.getters['type-map/labelFor']({ id: props.resource.type });
+  const resourceName = props.resource.nameDisplay;
+
+  return i18n.t('component.drawer.resourceDetailDrawer.title', { resourceType, resourceName });
+});
+
+const activeTab = ref<string>(configTabProps ? 'config-tab' : 'yaml-tab');
+
+const action = computed(() => {
+  const isConfig = activeTab.value === 'config-tab';
+  const ariaLabel = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const label = isConfig ? i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editConfig') : i18n.t('component.drawer.resourceDetailDrawer.ariaLabel.editYaml');
+  const action = isConfig ? () => props.resource.goToEdit() : () => props.resource.goToEditYaml();
+
+  return {
+    ariaLabel,
+    label,
+    action
+  };
+});
+</script>
+<template>
+  <Drawer
+    class="resource-detail-drawer"
+    :ariaTarget="title"
+    @close="emit('close')"
+  >
+    <template #title>
+      <StateDot
+        :color="resource.stateSimpleColor"
+        class="mmr-3"
+      />
+      {{ title }}
+    </template>
+    <template #body>
+      <Tabbed
+        class="tabbed"
+        :useHash="false"
+        :showExtensionTabs="false"
+        @changed="({selectedName}) => {activeTab = selectedName;}"
+      >
+        <ConfigTab
+          v-if="configTabProps"
+          v-bind="configTabProps"
+        />
+        <YamlTab
+          v-if="yamlTabProps"
+          v-bind="yamlTabProps"
+        />
+      </Tabbed>
+    </template>
+    <template #additional-actions>
+      <RcButton
+        :primary="true"
+        :aria-label="action.ariaLabel"
+        @click="action.action"
+      >
+        {{ action.label }}
+      </RcButton>
+    </template>
+  </Drawer>
+</template>
+
+<style lang="scss" scoped>
+.resource-detail-drawer {
+  :deep() .tabbed {
+    & > .tabs {
+      border: none;
+    }
+
+    & > .tab-container {
+      border: none;
+      border-top: 1px solid var(--border);
+      padding: 0;
+      padding-top: 24px;
+    }
+  }
+}
+</style>

package/components/GrowlManager.vue

@@ -25,10 +25,18 @@ export default {
   },
 
   methods: {
-    close(growl) {
+    remove(growl) {
       this.$store.dispatch('growl/remove', growl.id);
     },
 
+    close(growl) {
+      this.$store.dispatch('growl/close', growl.id);
+
+      // If a user closes a growl, we won't get the mouse leave event, so we won't start the auto removal
+      // again, leaving to stuck growls that should timeout
+      this.startAutoRemove();
+    },
+
     closeAll() {
       this.$store.dispatch('growl/clear');
     },
@@ -36,13 +44,18 @@ export default {
     closeExpired() {
       const now = new Date().getTime();
 
+      // Check that we should still be running the auto-close interval timer
+      if (!this.shouldRun) {
+        this.stopAutoRemove();
+      }
+
       for ( const growl of this.stack ) {
         if ( !growl.timeout ) {
           continue;
         }
 
         if ( growl.started + growl.timeout < now ) {
-          this.close(growl);
+          this.remove(growl);
         }
       }
     },
@@ -124,18 +137,6 @@ export default {
         </div>
       </div>
     </div>
-    <div
-      v-if="stack.length > 1"
-      class="text-right mr-10 mt-10"
-    >
-      <button
-        type="button"
-        class="btn btn-sm role-primary"
-        @click="closeAll()"
-      >
-        {{ t('growl.clearAll') }}
-      </button>
-    </div>
   </div>
 </template>
 
@@ -143,7 +144,7 @@ export default {
   .growl-container {
     z-index: 1000;
     position: absolute;
-    top: 0;
+    top: var(--header-height);
     right: 0;
     width: 100%;
 

package/components/IconOrSvg.vue

@@ -44,6 +44,10 @@ export default {
       type:    String,
       default: () => undefined,
     },
+    imgAlt: {
+      type:    String,
+      default: () => undefined,
+    },
     color: {
       type:    String,
       default: () => 'primary',
@@ -143,6 +147,7 @@ export default {
     :src="src"
     class="svg-icon"
     :class="className"
+    :alt="imgAlt"
   >
   <i
     v-else-if="icon"

package/components/KeyValueView.vue

@@ -225,7 +225,7 @@ export default {
 .key-value {
   width: 100%;
 
-  .kv-container{
+  .kv-container {
     display: grid;
     align-items: center;
     grid-template-columns: auto 1fr;

package/components/Loading.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
   .overlay {
     align-items: center;
-    background-color: var(--overlay-bg);
+    background-color: var(--subtle-overlay-bg);
     display: flex;
     justify-content: center;
     position: absolute;

package/components/LocaleSelector.vue

@@ -71,7 +71,12 @@ export default {
 <template>
   <div>
     <div v-if="mode === 'login'">
-      <rc-dropdown v-if="showLocale">
+      <rc-dropdown
+        v-if="showLocale"
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
+      >
         <rc-dropdown-trigger
           data-testid="locale-selector"
           link
@@ -105,6 +110,9 @@ export default {
     </div>
     <div v-else>
       <Select
+        :aria-label="$attrs['aria-label'] || undefined"
+        :aria-labelledby="$attrs['aria-labelledby'] || undefined"
+        :aria-describedby="$attrs['aria-describedby'] || undefined"
         :value="selectedOption"
         :options="localesOptions"
         :is-lang-select="true"