@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/plugins/dashboard-store/__tests__/resource-class.test.ts

@@ -403,6 +403,99 @@ describe('class: Resource', () => {
 
       expect(cards).toHaveLength(0);
     });
+
+    it('should include the resources card when relationships exist', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'uses', toType: 'svc', toId: 'a'
+            },
+            {
+              rel: 'uses', fromType: 'pod', fromId: 'b'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: {
+          'i18n/t':      (key: string) => key,
+          'cluster/all': () => []
+        },
+      });
+
+      const cards = resource.cards;
+
+      expect(cards).toHaveLength(1);
+      expect(cards[0].props.title).toBe('component.resource.detail.card.resourcesCard.title');
+    });
+  });
+
+  describe('getter: resourcesCard', () => {
+    it('should return null when there are no relationships', () => {
+      const resource = new Resource({ type: 'test' }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      expect(resource.resourcesCard).toBeNull();
+    });
+
+    it('should return rows for both referredToBy and refersTo when relationships exist in both directions', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'owner', fromType: 'rs', fromId: 'r-1'
+            },
+            {
+              rel: 'uses', toType: 'svc', toId: 's-1'
+            },
+            {
+              rel: 'uses', toType: 'svc', toId: 's-2'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      const rows = resource.resourcesCardRows;
+
+      expect(rows).toHaveLength(2);
+      expect(rows[0].label).toBe('component.resource.detail.card.resourcesCard.rows.referredToBy');
+      expect(rows[0].counts[0].count).toBe(1);
+      expect(rows[1].label).toBe('component.resource.detail.card.resourcesCard.rows.refersTo');
+      expect(rows[1].counts[0].count).toBe(2);
+    });
+
+    it('should omit a direction with no relationships', () => {
+      const resource = new Resource({
+        type:     'test',
+        metadata: {
+          relationships: [
+            {
+              rel: 'uses', toType: 'svc', toId: 's-1'
+            },
+          ]
+        }
+      }, {
+        getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+        dispatch:    jest.fn(),
+        rootGetters: { 'i18n/t': (key: string) => key },
+      });
+
+      const rows = resource.resourcesCardRows;
+
+      expect(rows).toHaveLength(1);
+      expect(rows[0].label).toBe('component.resource.detail.card.resourcesCard.rows.refersTo');
+    });
   });
 
   describe('getter: insightCardProps', () => {

package/plugins/dashboard-store/resource-class.js

@@ -12,6 +12,7 @@ import {
   AS,
   MODE
 } from '@shell/config/query-params';
+import { EVENT } from '@shell/config/types';
 import { VIEW_IN_API, DEV } from '@shell/store/prefs';
 import { addObject, addObjects, findBy, removeAt } from '@shell/utils/array';
 import CustomValidators from '@shell/utils/custom-validators';
@@ -39,8 +40,7 @@ import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { parse } from '@shell/utils/selector';
-import { EVENT } from '@shell/config/types';
-import { useResourceCardRow } from '@shell/components/Resource/Detail/Card/StateCard/composables';
+import { useResourceCardRow, useResourceCardRowFromRelationships } from '@shell/components/Resource/Detail/Card/StateCard/composables';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -507,7 +507,11 @@ export function colorForState(state, isError, isTransitioning) {
   return `text-${ color }`;
 }
 
-export function stateDisplay(state) {
+export function simpleColorForState(state, isError = false, isTransitioning = false) {
+  return colorForState(state, isError, isTransitioning).replace('text-', '') || 'disabled';
+}
+
+export function stateDisplay(state, preserveOriginal = false) {
   // @TODO use translations
   const key = (state || 'active').toLowerCase();
 
@@ -515,6 +519,11 @@ export function stateDisplay(state) {
     return REMAP_STATE[key];
   }
 
+  // Preserves the original state name returned by the
+  if ( preserveOriginal ) {
+    return ucFirst(state);
+  }
+
   return key.split(/-/).map(ucFirst).join('-');
 }
 
@@ -754,7 +763,7 @@ export default class Resource {
   }
 
   get stateSimpleColor() {
-    return this.stateColor.replace('text-', '');
+    return simpleColorForState(this.state, this.stateObj?.error, this.stateObj?.transitioning);
   }
 
   get stateBackground() {
@@ -2073,7 +2082,7 @@ export default class Resource {
 
       if ( r.selector ) {
         // A selector is a stringified version of a matchLabel (https://github.com/kubernetes/apimachinery/blob/master/pkg/labels/selector.go#L1010)
-        addObjects(out.selectors, {
+        addObject(out.selectors, {
           type:      r.toType,
           namespace: r.toNamespace,
           selector:  r.selector
@@ -2083,7 +2092,7 @@ export default class Resource {
         let namespace = r[`${ direction }Namespace`];
         let name = r[`${ direction }Id`];
 
-        if ( !namespace && name.includes('/') ) {
+        if ( !namespace && name?.includes('/') ) {
           const idx = name.indexOf('/');
 
           namespace = name.substr(0, idx);
@@ -2245,12 +2254,58 @@ export default class Resource {
     };
   }
 
+  get _resourcesCardRows() {
+    const rows = [];
+    const relationships = this.metadata?.relationships || [];
+
+    const referredToByRels = relationships.filter((r) => r.fromType && r.fromId && !r.selector);
+    const refersToRels = relationships.filter((r) => r.toType && r.toId && !r.selector && !r.fromType);
+
+    if (referredToByRels.length) {
+      rows.push(useResourceCardRowFromRelationships(
+        this.t('component.resource.detail.card.resourcesCard.rows.referredToBy'),
+        referredToByRels,
+        { hash: '#related' }
+      ));
+    }
+
+    if (refersToRels.length) {
+      rows.push(useResourceCardRowFromRelationships(
+        this.t('component.resource.detail.card.resourcesCard.rows.refersTo'),
+        refersToRels,
+        { hash: '#related' }
+      ));
+    }
+
+    return rows;
+  }
+
+  get resourcesCardRows() {
+    return this._resourcesCardRows;
+  }
+
+  get resourcesCard() {
+    const rows = this.resourcesCardRows;
+
+    if (!rows.length) {
+      return null;
+    }
+
+    return {
+      component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/Card/StateCard/index.vue'))),
+      props:     {
+        title: this.t('component.resource.detail.card.resourcesCard.title'),
+        rows
+      }
+    };
+  }
+
   get _cards() {
     // All cards are opt in, we're leaving the insights card as part of the base resource since it should proliferate to most resources
     return [];
   }
 
   get cards() {
-    return this._cards;
+    return [this.resourcesCard, ...this._cards].filter((c) => c);
   }
 }

package/plugins/steve/__tests__/actions.test.ts

@@ -0,0 +1,212 @@
+import actions from '@shell/plugins/steve/actions';
+import paginationUtils from '@shell/utils/pagination-utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
+const { fetchResourceSummary } = actions;
+
+describe('steve: actions:', () => {
+  describe('fetchResourceSummary', () => {
+    const schema = {
+      id:         'pod',
+      links:      { collection: '/v1/pods' },
+      attributes: { namespaced: true },
+    };
+
+    const baseCtx = () => ({
+      getters: {
+        normalizeType: (type: string) => type,
+        schemaFor:     (type: string) => (type === 'pod' ? schema : undefined),
+      },
+      dispatch:    jest.fn(),
+      rootGetters: {},
+    });
+
+    let warnSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+      jest.spyOn(paginationUtils, 'isSteveCacheEnabled').mockReturnValue(true);
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('should return undefined and warn when schema is not found', async() => {
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'nonexistent', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('no schema found'));
+    });
+
+    it('should return undefined and warn when VAI is not enabled', async() => {
+      jest.spyOn(paginationUtils, 'isSteveCacheEnabled').mockReturnValue(false);
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('VAI is not enabled'));
+    });
+
+    it('should return undefined and warn when summaryField is missing', async() => {
+      const ctx = baseCtx();
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: {} });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('summaryField is required'));
+    });
+
+    it('should construct the correct URL with summary and summaryonly params', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('summary=metadata.state.name');
+      expect(requestUrl).toContain('summaryonly=');
+      expect(requestUrl).not.toContain('summarynamespaced');
+    });
+
+    it('should not include summaryonly when summaryOnly is false', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', summaryOnly: false } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).not.toContain('summaryonly');
+    });
+
+    it('should include summarynamespaced param when namespaceCounts is true', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 5, summary: [{ property: 'metadata.state.name', counts: { running: { total: 5 } } }] });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespaceCounts: true } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('summarynamespaced=');
+    });
+
+    it('should append namespace to path for namespaced resources', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({ count: 2, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'cattle-system' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toMatch(/\/v1\/pods\/cattle-system\?/);
+    });
+
+    it('should not append namespace when schema is not namespaced', async() => {
+      const nonNsSchema = { ...schema, attributes: { namespaced: false } };
+      const ctx = baseCtx();
+
+      ctx.getters.schemaFor = () => nonNsSchema;
+      ctx.dispatch.mockResolvedValue({ count: 1, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', namespace: 'default' } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).not.toContain('/default');
+    });
+
+    it('should append filter params when filters are provided', async() => {
+      const ctx = baseCtx();
+      const filters = [PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: 'default' })];
+
+      jest.spyOn(stevePaginationUtils, 'convertPaginationParams').mockReturnValue('filter=metadata.namespace%3Ddefault');
+      ctx.dispatch.mockResolvedValue({ count: 3, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', filters } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('filter=');
+      expect(stevePaginationUtils.convertPaginationParams).toHaveBeenCalledWith(expect.objectContaining({ filters }));
+    });
+
+    it('should return count and summary from the response', async() => {
+      const ctx = baseCtx();
+      const apiResponse = {
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts: { running: { total: 7 }, error: { total: 3 } } }]
+      };
+
+      ctx.dispatch.mockResolvedValue(apiResponse);
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual(apiResponse);
+    });
+
+    it('should pass through object-style counts as-is', async() => {
+      const ctx = baseCtx();
+      const counts = { running: { total: 7 }, error: { total: 3 } };
+      const apiResponse = {
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts }]
+      };
+
+      ctx.dispatch.mockResolvedValue(apiResponse);
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual({
+        count:   10,
+        summary: [{ property: 'metadata.state.name', counts }]
+      });
+    });
+
+    it('should default count to 0 and summary to null when response is empty', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockResolvedValue({});
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toStrictEqual({ count: 0, summary: null });
+    });
+
+    it('should append label selector params when labelSelector is provided', async() => {
+      const ctx = baseCtx();
+      const labelSelector = {
+        matchExpressions: [{
+          key: 'app', operator: 'In', values: ['nginx']
+        }]
+      };
+
+      jest.spyOn(stevePaginationUtils, 'convertLabelSelectorPaginationParams').mockReturnValue('filter=metadata.labels[app] IN (nginx)');
+      ctx.dispatch.mockResolvedValue({ count: 2, summary: null });
+
+      await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name', labelSelector } });
+
+      const requestUrl = ctx.dispatch.mock.calls[0][1].opt.url;
+
+      expect(requestUrl).toContain('filter=');
+      expect(stevePaginationUtils.convertLabelSelectorPaginationParams).toHaveBeenCalledWith({ labelSelector });
+    });
+
+    it('should return undefined and warn when the request fails', async() => {
+      const ctx = baseCtx();
+
+      ctx.dispatch.mockRejectedValue(new Error('network error'));
+
+      const result = await fetchResourceSummary.call({}, ctx, { type: 'pod', opt: { summaryField: 'metadata.state.name' } });
+
+      expect(result).toBeUndefined();
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('summary API request failed'), expect.any(Error));
+    });
+  });
+});

package/plugins/steve/actions.js

@@ -10,6 +10,7 @@ import { NAMESPACE } from '@shell/config/types';
 import { handleKubeApiHeaderWarnings } from '@shell/plugins/steve/header-warnings';
 import { steveCleanForDownload } from '@shell/plugins/steve/resource-utils';
 import paginationUtils from '@shell/utils/pagination-utils';
+import stevePaginationUtils from '@shell/plugins/steve/steve-pagination-utils';
 
 export default {
 
@@ -221,6 +222,101 @@ export default {
     }
   },
 
+  /**
+   * Fetch aggregated state counts for a resource type via the Steve summary API.
+   * Requires VAI (ui-sql-cache) to be enabled; returns undefined otherwise.
+   *
+   * Uses `summaryonly` by default so no resource data is returned.
+   *
+   * @param {string} type - Resource type (e.g. 'pod', 'service')
+   * @param {object} [opt] - Options object
+   *   @param {string} opt.summaryField - Field to aggregate counts by.
+   *     Must be a field indexed by the VAI cache (see StevePaginationUtils.VALID_FIELDS in steve-pagination-utils.ts)
+   *   @param {string} [opt.namespace] - Namespace to scope the request to (only applies to namespaced resource types)
+   *   @param {boolean} [opt.summaryOnly=true] - Omit resource data from the response (set to false to include data)
+   *   @param {boolean} [opt.namespaceCounts] - Include per-namespace breakdowns in counts
+   *   @param {PaginationParamFilter[]} [opt.filters] - Pre-built filters from PaginationParamFilter.createSingleField()
+   *   @param {KubeLabelSelector} [opt.labelSelector] - Kube label selector to filter by (converted via convertLabelSelectorPaginationParams)
+   * @returns {Promise<{ count: number, summary: { property: string, counts: Record<string, { total: number, namespace?: Record<string, number> }> }[] | null } | undefined>}
+   *
+   * @example
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', labelSelector: { matchExpressions: podMatchExpression } }
+   * });
+   * // result.summary[0].counts => { running: { total: 3 }, error: { total: 1 } }
+   *
+   * // With namespace breakdowns:
+   * const result = await dispatch('fetchResourceSummary', {
+   *   type: 'pod',
+   *   opt:  { summaryField: 'metadata.state.name', namespaceCounts: true }
+   * });
+   * // result.summary[0].counts => { running: { total: 3, namespace: { default: 2, 'kube-system': 1 } } }
+   */
+  async fetchResourceSummary({ getters, dispatch, rootGetters }, { type, opt = {} }) {
+    type = getters.normalizeType(type);
+    const schema = getters.schemaFor(type);
+
+    if (!schema) {
+      console.warn(`fetchResourceSummary: no schema found for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!paginationUtils.isSteveCacheEnabled({ rootGetters })) {
+      console.warn(`fetchResourceSummary: VAI is not enabled, summary API unavailable for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    if (!opt.summaryField) {
+      console.warn(`fetchResourceSummary: summaryField is required and must be a string for type "${ type }"`); // eslint-disable-line no-console
+
+      return undefined;
+    }
+
+    try {
+      const url = new URL(schema.links.collection, window.location.origin);
+
+      if (schema.attributes?.namespaced && opt.namespace) {
+        url.pathname += `/${ opt.namespace }`;
+      }
+
+      url.searchParams.set('summary', opt.summaryField);
+
+      if (opt.summaryOnly !== false) {
+        url.searchParams.set('summaryonly', '');
+      }
+
+      if (opt.namespaceCounts) {
+        url.searchParams.set('summarynamespaced', '');
+      }
+
+      if (opt.filters?.length) {
+        const filterParams = new URLSearchParams(stevePaginationUtils.convertPaginationParams({ schema, filters: opt.filters }));
+
+        filterParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      if (opt.labelSelector) {
+        const labelParams = new URLSearchParams(stevePaginationUtils.convertLabelSelectorPaginationParams({ labelSelector: opt.labelSelector }));
+
+        labelParams.forEach((v, k) => url.searchParams.append(k, v));
+      }
+
+      const res = await dispatch('request', { opt: { url: url.pathname + url.search } });
+
+      return {
+        count:   res.count ?? 0,
+        summary: res.summary || null
+      };
+    } catch (e) {
+      console.warn(`fetchResourceSummary: summary API request failed for type "${ type }"`, e); // eslint-disable-line no-console
+
+      return undefined;
+    }
+  },
+
   promptRestore({ commit, state }, resources ) {
     commit('action-menu/togglePromptRestore', resources, { root: true });
   },

package/plugins/steve/steve-pagination-utils.ts

@@ -656,7 +656,7 @@ class StevePaginationUtils extends NamespaceProjectFilters {
    * A lot of the requirements and details are taken directly from
    * https://kubernetes.io/docs/concepts/overview/working-with-objects/labels/
    */
-  private convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
+  convertLabelSelectorPaginationParams({ labelSelector }: { labelSelector: KubeLabelSelector}): string {
     // Get a list of matchExpressions
     const expressions: KubeLabelSelectorExpression[] = labelSelector.matchExpressions ? [...labelSelector.matchExpressions] : [];
 

package/rancher-components/Accordion/Accordion.vue

@@ -1,8 +1,14 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
+import {
+  computed, defineComponent, nextTick, ref, useTemplateRef
+} from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default defineComponent({
+  name: 'Accordion',
+
   props: {
     title: {
       type:    String,
@@ -20,22 +26,59 @@ export default defineComponent({
     }
   },
 
+  setup(props) {
+    const store = useStore();
+    const { t } = useI18n(store);
+    const label = computed(() => props.titleKey && typeof t === 'function' ? t(props.titleKey) : props.title);
+
+    const isOpen = ref(props.openInitially);
+    const accordionSummarizedContainer = useTemplateRef<HTMLElement>('accordion-summarized-container');
+
+    const scrollTo = () => {
+      isOpen.value = true;
+      nextTick(() => {
+        accordionSummarizedContainer.value?.scrollIntoView();
+      });
+    };
+
+    const { summary } = useInSummary({
+      scrollTo,
+      label,
+      elementRef: accordionSummarizedContainer,
+    });
+
+    return {
+      summary,
+      isOpen,
+      scrollTo,
+    };
+  },
+
   data() {
-    return { isOpen: this.openInitially };
+    return {};
   },
 
-  computed: { ...mapGetters({ t: 'i18n/t' }) },
+  computed: {
+    ...mapGetters({ t: 'i18n/t' }),
+
+    displayTitle() {
+      return this.titleKey ? this.t(this.titleKey) : this.title;
+    },
+  },
 
   methods: {
     toggle() {
       this.isOpen = !this.isOpen;
-    }
-  }
+    },
+  },
 });
 </script>
 
 <template>
-  <div class="accordion-container">
+  <div
+    ref="accordion-summarized-container"
+    class="accordion-container"
+  >
     <div
       class="accordion-header"
       data-testid="accordion-header"
@@ -51,7 +94,7 @@ export default defineComponent({
           data-testid="accordion-title-slot-content"
           class="mb-0"
         >
-          {{ titleKey ? t(titleKey) : title }}
+          {{ displayTitle }}
         </h2>
       </slot>
     </div>
@@ -67,7 +110,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .accordion-container {
-  border: 1px solid var(--border)
+  border: 1px solid var(--border);
+  border-radius: var(--border-radius);
 }
 .accordion-header {
   padding: 16px 16px 16px 11px;