feedback; allow label passthrough

Author: mantis-toboggan-md

pkg/rancher-components/src/components/Accordion/Accordion.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import {
+  computed, defineComponent, getCurrentInstance, nextTick, ref
+} from 'vue';
 import { mapGetters } from 'vuex';
 import { useInSummary } from '@shell/components/TableOfContents/composables';
 
@@ -23,14 +25,35 @@ export default defineComponent({
     }
   },
 
-  setup() {
-    const { summary } = useInSummary();
+  setup(props) {
+    const instance = getCurrentInstance();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const t = (instance?.proxy as any)?.$store?.getters?.['i18n/t'] as ((key: string) => string) | undefined;
+    const label = computed(() => props.titleKey && typeof t === 'function' ? t(props.titleKey) : props.title);
 
-    return { summary };
+    const isOpen = ref(props.openInitially);
+
+    const scrollTo = () => {
+      isOpen.value = true;
+
+      nextTick(() => {
+        const el = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;
+
+        el?.scrollIntoView(true);
+      });
+    };
+
+    const { summary } = useInSummary({ scrollTo, label });
+
+    return {
+      summary,
+      isOpen,
+      scrollTo,
+    };
   },
 
   data() {
-    return { isOpen: this.openInitially };
+    return {};
   },
 
   computed: {
@@ -45,16 +68,6 @@ export default defineComponent({
     toggle() {
       this.isOpen = !this.isOpen;
     },
-
-    scrollTo() {
-      this.isOpen = true;
-
-      this.$nextTick(() => {
-        const el = this.$el as HTMLElement;
-
-        el.scrollIntoView(true);
-      });
-    }
   },
 });
 </script>

pkg/rancher-components/src/components/RcSection/RcSection.vue

@@ -59,15 +59,15 @@ provide(RC_SECTION_BG_KEY, resolvedBackground);
 
 const expanded = defineModel<boolean>('expanded', { default: true });
 
-// Register this section in form summary/table-of-contents context (if provided)
-const { summary } = useInSummary();
-
 // Expose summary, name, and a display label on the component public instance so
 // TOC discovery can access component
 const displayTitle = computed(() => props.title);
 
 const name = 'RcSection';
 
+// Register this section in form summary/table-of-contents context (if provided)
+const { summary } = useInSummary({ label: displayTitle });
+
 defineExpose({
   summary, displayTitle, name
 });

shell/components/CruResource.vue

@@ -320,29 +320,29 @@ export default {
     stringify,
 
     computeTocContainerHeight() {
-      const root = this.$el;
+      // const root = this.$el;
 
-      if (!root) {
-        this.tocContainerHeight = 0;
+      // if (!root) {
+      //   this.tocContainerHeight = 0;
 
-        return 0;
-      }
+      //   return 0;
+      // }
 
-      const tocEl = root.querySelector('.cru__toc');
-      const footerEl = root.querySelector('.cru__footer');
+      // const tocEl = root.querySelector('.cru__toc');
+      // const footerEl = root.querySelector('.cru__footer');
 
-      if (!tocEl || !footerEl) {
-        this.tocContainerHeight = 0;
+      // if (!tocEl || !footerEl) {
+      //   this.tocContainerHeight = 0;
 
-        return 0;
-      }
+      //   return 0;
+      // }
 
-      const tocTop = tocEl.getBoundingClientRect().top;
-      const footerTop = footerEl.getBoundingClientRect().top;
-      const gapLgValue = getComputedStyle(root).getPropertyValue('--gap-lg').trim();
-      const gapLg = Number.parseFloat(gapLgValue) || 0;
+      // const tocTop = tocEl.getBoundingClientRect().top;
+      // const footerTop = footerEl.getBoundingClientRect().top;
+      // const gapLgValue = getComputedStyle(root).getPropertyValue('--gap-lg').trim();
+      // const gapLg = Number.parseFloat(gapLgValue) || 0;
 
-      this.tocContainerHeight = Math.max(0, Math.round((footerTop - tocTop) - gapLg));
+      // this.tocContainerHeight = Math.max(0, Math.round((footerTop - tocTop) - gapLg));
     },
 
     confirmCancel(isCancelNotBack = true) {

shell/components/Tabbed/Tab.vue

@@ -1,6 +1,7 @@
 <script>
 import { useTabCountWatcher } from '@shell/components/form/ResourceTabs/composable';
 import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { computed, getCurrentInstance, inject } from 'vue';
 
 export default {
   name: 'Tab',
@@ -67,8 +68,19 @@ export default {
   },
 
   setup(props) {
+    const select = inject('select');
+    const instance = getCurrentInstance();
+    const t = instance?.proxy?.$store?.getters?.['i18n/t'];
+    const label = computed(() => {
+      if (props.labelKey && typeof t === 'function') {
+        return t(props.labelKey);
+      }
+
+      return props.label ?? props.name;
+    });
     const { count, isCountVisible } = useTabCountWatcher();
-    const { summary } = useInSummary();
+    // when a Tab is scrolled to, call its Tabbed's 'select' method to ensure the Tab is active
+    const { summary } = useInSummary({ scrollTo: () => select(props.name), label });
 
     return {
       inferredCount: count, isInferredCountVisible: isCountVisible, summary
@@ -127,12 +139,6 @@ export default {
     }
   },
 
-  methods: {
-    scrollTo() {
-      this.select(this.name);
-    }
-  },
-
   watch: {
     active(neu) {
       if (neu) {

shell/components/Tabbed/index.vue

@@ -7,7 +7,7 @@ import findIndex from 'lodash/findIndex';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import Tab from '@shell/components/Tabbed/Tab';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import { useIsInResourceDetailPage } from '@shell/composables/resourceDetail';
 import { useIsInResourceCreatePage, useIsInResourceEditPage } from '@shell/composables/cruResource';
@@ -170,12 +170,12 @@ export default {
     },
   },
 
-  setup() {
+  setup(props) {
     const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
     const isInResourceDetailPage = ref(useIsInResourceDetailPage());
     const isInResourceEditPage = ref(useIsInResourceEditPage());
     const isInResourceCreatePage = ref(useIsInResourceCreatePage());
-    const { summary } = useInSummary();
+    const { summary } = useInSummary({ label: computed(() => props.title ?? '') });
 
     return {
       isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage, summary

shell/components/TableOfContents/composables.ts

@@ -239,8 +239,16 @@ export function useFormSummary() {
  * When the component is mounted (including after v-if re-reveals it), it re-registers
  * into the correct scoped context. Components using inFormSummary will register themselves
  *  with the nearest ancestor containing useFormSummary
+ *
+ * @param options.scrollTo - Optional scroll handler. When provided, the ToC system calls
+ *   this function instead of the default `element.scrollIntoView` behaviour when the user
+ *   navigates to this component via the Table of Contents. Use this to perform any
+ *   additional work before scrolling (e.g. expanding an accordion, revealing a tab).
+ * @param options.label - Optional label for this component's ToC entry. Accepts a plain
+ *   string or a `ComputedRef<string>`. When provided it takes precedence over the
+ *   automatic label derived from `displayTitle`, `title`, `labelKey`, etc.
  */
-export function useInSummary() {
+export function useInSummary(options?: { scrollTo?: () => void; label?: ComputedRef<string> | string }) {
   const {
     registerComponent = () => {},
     unRegisterComponent = () => {},
@@ -251,13 +259,14 @@ export function useInSummary() {
   const t = instance?.proxy?.$store?.getters?.['i18n/t'] as ((key: string) => string) | undefined;
   const component = ref<SummaryComponent | null>(null);
 
-  // can be overwritten by a component method also named "scrollTo"
-  const scrollTo = () => {
+  // Use the caller-supplied scrollTo if provided; otherwise fall back to a plain scrollIntoView.
+  const scrollTo = options?.scrollTo ?? (() => {
     const el = instance?.proxy?.$el as ElementWithSummaryID | null | undefined;
 
     (el as HTMLElement | undefined)?.scrollIntoView(true);
-  };
+  });
 
+  // options.label will take precedence if defined
   const getComponentLabel = () => {
     const currentComponent = component.value;
 
@@ -287,7 +296,13 @@ export function useInSummary() {
   const summaryID = randomStr();
   const summary: SummaryInfo = { id: summaryID, scrollTo };
 
-  summary.label = computed(getComponentLabel);
+  if (options?.label !== undefined) {
+    // Caller supplied an explicit label — wrap a plain string in a computed so the
+    // type is always ComputedRef<string>, and skip the component-field heuristics.
+    summary.label = typeof options.label === 'string' ? computed(() => options.label as string) : options.label;
+  } else {
+    summary.label = computed(getComponentLabel);
+  }
 
   watch(summary.label, (label) => {
     const updated = updateComponentLabel(summaryID, label);