dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-logTest.2

package/components/DetailText.vue

@@ -22,7 +22,7 @@ export default {
 
     value: {
       type:    String,
-      default: null,
+      default: '',
     },
 
     maxLength: {
@@ -40,6 +40,12 @@ export default {
       default: false
     },
 
+    // Will manage it's own state around showing or hiding sensitive data
+    concealStandAlone: {
+      type:    Boolean,
+      default: false
+    },
+
     monospace: {
       type:    Boolean,
       default: true
@@ -54,7 +60,7 @@ export default {
   data() {
     const expanded = this.value.length <= this.maxLength;
 
-    return { expanded };
+    return { expanded, standAloneHide: true };
   },
 
   computed: {
@@ -127,6 +133,10 @@ export default {
     },
 
     hideSensitiveData() {
+      if (this.concealStandAlone) {
+        return this.standAloneHide;
+      }
+
       return this.$store.getters['prefs/get'](HIDE_SENSITIVE);
     },
 
@@ -134,6 +144,14 @@ export default {
       return this.conceal && this.hideSensitiveData && !this.isBinary;
     },
 
+    sensitiveIcon() {
+      return this.standAloneHide ? 'icon-show' : 'icon-hide';
+    },
+
+    sensitiveAria() {
+      return this.standAloneHide ? this.t('detailText.sensitive.show') : this.t('detailText.sensitive.hide');
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
   methods: {
@@ -169,6 +187,7 @@ export default {
       :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
       :value="jsonStr"
       :class="{'conceal': concealed}"
+      aria-live="polite"
     />
 
     <span
@@ -176,6 +195,7 @@ export default {
       v-clean-html="bodyHtml"
       data-testid="detail-top_html"
       :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+      aria-live="polite"
     />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">
@@ -185,13 +205,27 @@ export default {
       >{{ plusMore }}</a>
     </template>
 
-    <CopyToClipboard
-      v-if="copy && !isBinary"
-      :text="value"
-      class="role-tertiary"
-      action-color=""
-      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
-    />
+    <div class="action-group">
+      <button
+        v-if="conceal && concealStandAlone"
+        class="sensitive btn ready-for-action role-tertiary"
+        :aria-label="sensitiveAria"
+        @click="standAloneHide = !standAloneHide"
+      >
+        <i
+          class="icon icon-lg"
+          :class="sensitiveIcon"
+          :alt="sensitiveAria"
+        />
+      </button>
+      <CopyToClipboard
+        v-if="copy && !isBinary"
+        :text="value"
+        class="role-tertiary"
+        action-color=""
+        :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
+      />
+    </div>
   </div>
 </template>
 
@@ -205,11 +239,27 @@ export default {
   border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
 
-  > button {
+  .action-group {
     position: absolute;
     top: -1px;
     right: -1px;
-    border-radius: 0 0 0 var(--border-radius);
+    white-space-collapse:collapse;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    button{
+      border-radius: 0;
+
+      &:first-of-type {
+        border-radius: 0 0 0 var(--border-radius);
+      }
+
+      &.sensitive {
+        margin-right: -1px;
+        padding: 12px 16px;
+      }
+    }
   }
 }
 

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">
+      <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(--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,64 @@
+<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>
+<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>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  background-color: var(--body-bg);
+  border-radius: var(--border-radius-md);
+  padding: 20px;
+  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;
+  }
+}
+.config-tab {
+
+  // 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: 20px;
+
+    .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);
+    });
+  });
+});