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

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,82 @@
+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 editComponent = { component: 'EDIT_COMPONENT' };
+    const store: any = {
+      getters: {
+        'type-map/hasCustomEdit': hasCustomEdit,
+        'type-map/importEdit':    importEdit
+      }
+    };
+
+    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 props if it has a customEdit', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => true);
+      const importEditSpy = importEdit.mockImplementation(() => editComponent);
+      const props = useDefaultConfigTabProps(resource);
+
+      expect(hasCustomEditSpy).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,50 @@
+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();
+
+  if (!store.getters['type-map/hasCustomEdit'](resource.type)) {
+    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,110 @@
+<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"
+        @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/FilterPanel.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { DefineComponent } from 'vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+
+/**
+ * Generic type for the passed components as props
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentType = DefineComponent<any, any, any>;
+
+/**
+ * A single filter option for a group (e.g., a single checkbox).
+ */
+type FilterOption = {
+  /** Value to apply when selected */
+  value?: string;
+  /** Optional custom component to render for this option (e.g., link or button) */
+  component?: ComponentType;
+  /** Props passed to the custom component */
+  componentProps?: Record<string, unknown>;
+  /** Label to show next to the checkbox, or a custom component next to the checkbox */
+  label?: string | { component: ComponentType; componentProps: Record<string, unknown>; };
+};
+
+/**
+ * A group of filter options (e.g., Repositories, Categories).
+ */
+type FilterGroup = {
+  /** Key that maps to the filters object (e.g., 'repos', 'categories') */
+  key: string;
+  /** Title for the filter group */
+  title: string;
+  /** The available options within this group */
+  options: FilterOption[];
+};
+
+/**
+ * Props accepted by the filter panel.
+ */
+const props = defineProps<{
+  /** Two-way bound filters */
+  modelValue: Record<string, string[]>;
+  /** The list of filter groups to display */
+  filters: FilterGroup[];
+}>();
+
+/**
+ * Event emitted by the component.
+ */
+const emit = defineEmits<{(e: 'update:modelValue', val: Record<string, string[]>): void;}>();
+
+/**
+ * Handles updating the selected filters for a given filter group key.
+ *
+ * @param key - The key of the filter group being updated (e.g., 'tags').
+ * @param value - The updated list of selected values (e.g. ['monitoring', 'networking']).
+ */
+const updateFilter = (key: string, value: string[]) => {
+  const newValue = { ...props.modelValue, [key]: value };
+
+  emit('update:modelValue', newValue);
+};
+
+</script>
+
+<template>
+  <div class="filter-panel">
+    <div
+      v-for="filter in filters"
+      :key="filter.key"
+      class="filter-panel-filter-group"
+      data-testid="filter-panel-filter-group"
+    >
+      <h4 class="filter-panel-filter-group-title">
+        {{ filter.title }}
+      </h4>
+      <div
+        v-for="(option, i) in filter.options"
+        :key="`${filter.key}-${i}`"
+        class="filter-panel-filter-option"
+      >
+        <template v-if="option.component">
+          <component
+            :is="option.component"
+            v-bind="option.componentProps"
+            data-testid="filter-panel-custom-component"
+          />
+        </template>
+        <template v-else-if="option.label">
+          <Checkbox
+            :key="i"
+            class="filter-panel-filter-checkbox"
+            :label="typeof option.label === 'string' ? option.label : undefined"
+            :value="modelValue[filter.key]"
+            :value-when-true="option.value"
+            data-testid="filter-panel-filter-checkbox"
+            @update:value="updateFilter(filter.key, $event)"
+          >
+            <template #label>
+              <span v-if="typeof option.label === 'string'">{{ option.label }}</span>
+              <component
+                :is="option.label.component"
+                v-else
+                v-bind="option.label.componentProps"
+              />
+            </template>
+          </Checkbox>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.filter-panel {
+  display: flex;
+  min-width: 250px;
+  height: max-content;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: var(--sortable-table-header-bg);
+
+  &-filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+
+    &-title {
+      margin-bottom: 6px;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 23px;
+    }
+  }
+
+  &-filter-option {
+    width: 100%;
+
+    .filter-panel-filter-checkbox {
+
+      .checkbox-label span {
+        max-width: 200px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        color: var(--link-text-secondary);
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>