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

package/components/SubtleLink.vue

@@ -1,25 +1,50 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { RouterLink, RouteLocationRaw } from 'vue-router';
 
 export interface Props {
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
+  href?: string;
+  target?: string;
+  openInNewTabLabel?: string;
 }
 
-const { to } = defineProps<Props>();
+const props = defineProps<Props>();
+
+const isExternal = computed(() => !!props.href);
 </script>
 
 <template>
-  <RouterLink
+  <component
+    :is="isExternal ? 'a' : RouterLink"
     class="subtle-link"
-    :to="to"
+    v-bind="isExternal
+      ? { href, target, rel: target === '_blank' ? 'noopener noreferrer nofollow' : undefined }
+      : { to }"
   >
-    <slot name="default" />
-  </RouterLink>
+    <span
+      v-if="openInNewTabLabel"
+      class="sr-only"
+    >{{ openInNewTabLabel }}</span>
+    <slot name="default" /><span v-if="openInNewTabLabel">&nbsp;</span><i
+      v-if="openInNewTabLabel"
+      class="link-icon icon icon-external-link"
+    />
+  </component>
 </template>
 
 <style lang="scss" scoped>
 .subtle-link {
     text-decoration: underline;
     color: var(--body-text);
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+}
+
+.link-icon {
+  display: inline;
 }
 </style>

package/components/Tabbed/Tab.vue

@@ -1,8 +1,14 @@
 <script>
 import { useTabCountWatcher } from '@shell/components/form/ResourceTabs/composable';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
+import { computed, inject, useTemplateRef } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
-  inject: ['addTab', 'removeTab', 'sideTabs'],
+  name: 'Tab',
+
+  inject: ['addTab', 'removeTab', 'sideTabs', 'select'],
 
   emits: ['active'],
 
@@ -64,9 +70,28 @@ export default {
   },
 
   setup(props) {
-    const { count, isCountVisible } = useTabCountWatcher();
+    const select = inject('select');
+    const store = useStore();
+    const { t } = useI18n(store);
+    const label = computed(() => {
+      if (props.labelKey && typeof t === 'function') {
+        return t(props.labelKey);
+      }
 
-    return { inferredCount: count, isInferredCountVisible: isCountVisible };
+      return props.label ?? props.name;
+    });
+    const { count, isCountVisible } = useTabCountWatcher();
+    const summarizedContainerRef = useTemplateRef('tab-summarized-container');
+    // 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,
+      elementRef: summarizedContainerRef,
+    });
+
+    return {
+      inferredCount: count, isInferredCountVisible: isCountVisible, summary
+    };
   },
 
   data() {
@@ -143,6 +168,7 @@ export default {
   <section
     v-show="active"
     :id="name"
+    ref="tab-summarized-container"
     :aria-hidden="!active"
     role="tabpanel"
     :aria-labelledby="`tab-${name}`"

package/components/Tabbed/index.vue

@@ -7,10 +7,11 @@ 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, useTemplateRef } from 'vue';
 import { useIsInResourceDetailDrawer } from '@shell/components/Drawer/ResourceDetailDrawer/composables';
 import { useIsInResourceDetailPage } from '@shell/composables/resourceDetail';
 import { useIsInResourceCreatePage, useIsInResourceEditPage } from '@shell/composables/cruResource';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
 
 export default {
   name: 'Tabbed',
@@ -94,6 +95,17 @@ export default {
     removeBorders: {
       type:    Boolean,
       default: false,
+    },
+
+    /**
+     * title is NOT displayed within the Tabbed component itself
+     * this prop is used to determine a label to use for the set of tabs in the table of contents component
+     * if a title is not provided a random string will be used
+     * components using the table of contents may exclude tabbed and only show tab components, too
+     */
+    title: {
+      type:    String,
+      default: null,
     }
   },
 
@@ -101,6 +113,8 @@ export default {
     const tabs = this.tabs;
 
     return {
+      select: this.select,
+
       sideTabs: this.sideTabs,
 
       addTab(tab) {
@@ -156,14 +170,20 @@ export default {
     },
   },
 
-  setup() {
+  setup(props) {
     const isInResourceDetailDrawer = ref(useIsInResourceDetailDrawer());
     const isInResourceDetailPage = ref(useIsInResourceDetailPage());
     const isInResourceEditPage = ref(useIsInResourceEditPage());
     const isInResourceCreatePage = ref(useIsInResourceCreatePage());
+    const tabbedSummarizedContainer = useTemplateRef('tabbed-summarized-container');
+    const { summary } = useInSummary({
+      label:      computed(() => props.title ?? ''),
+      scrollTo:   () => tabbedSummarizedContainer.value?.scrollIntoView(true),
+      elementRef: tabbedSummarizedContainer,
+    });
 
     return {
-      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage
+      isInResourceDetailDrawer, isInResourceDetailPage, isInResourceEditPage, isInResourceCreatePage, summary
     };
   },
 
@@ -311,6 +331,7 @@ export default {
 
 <template>
   <div
+    ref="tabbed-summarized-container"
     class="tabbed-container"
     :class="{
       'side-tabs': !!sideTabs,
@@ -435,6 +456,7 @@ export default {
         <component
           :is="tab.component"
           :resource="resource"
+          @select="select(tab.name)"
         />
       </Tab>
     </div>

package/components/TableOfContents/TableOfContents.vue

@@ -0,0 +1,109 @@
+<script setup>
+const props = defineProps({
+  accordions: {
+    type:     Array,
+    required: true,
+  }
+});
+
+const handleScrollTo = (entry, event) => {
+  entry?.scrollTo?.();
+  event?.currentTarget?.blur?.();
+};
+</script>
+
+<template>
+  <div class="toc-root">
+    <div class="toc-container">
+      <h4>
+        {{ t('cruResource.tableOfContents.jumpTo') }}
+      </h4>
+      <ul>
+        <li
+          v-for="(acc, i) in props.accordions"
+          :key="i"
+          :data-testid="`toc-list-item-${i}`"
+        >
+          <button
+            v-if="acc.scrollTo"
+            type="button"
+            class="btn role-link accordion-link"
+            @click="handleScrollTo(acc, $event)"
+          >
+            {{ acc.label }}
+          </button>
+          <span v-else>{{ acc.label }}</span>
+          <template v-if="acc?.children?.length">
+            <ul data-testid="toc-list">
+              <li
+                v-for="(childAcc, j) in acc.children"
+                :key="j"
+                :data-testid="`toc-list-item-${i}-${j}`"
+              >
+                <button
+                  v-if="childAcc.scrollTo"
+                  type="button"
+                  class="btn role-link accordion-link"
+                  @click="handleScrollTo(childAcc, $event)"
+                >
+                  {{ childAcc.label }}
+                </button>
+                <span v-else>{{ childAcc.label }}</span>
+              </li>
+            </ul>
+          </template>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li:not(:last-child) {
+    margin-bottom: var(--gap);
+  }
+
+  h4 {
+    margin-bottom: 12px;
+    margin-top: 0px
+  }
+
+  li ul {
+    padding-left: var(--gap-md);
+    & li {
+      margin-top: var(--gap);
+      margin-bottom: 0px;
+    }
+  }
+
+  .toc-container {
+    padding: var(--gap-md);
+    border-radius: var(--border-radius);
+    background-color: var(--subtle-overlay-bg);
+  }
+
+  .accordion-link {
+    padding: 0px;
+    min-height: 0px;
+    line-height: 1.3em;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    text-align: left;
+    display: block;
+    width: 100%;
+  }
+
+  li > span {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    display: block;
+  }
+</style>

package/components/TableOfContents/composables.ts

@@ -0,0 +1,258 @@
+import debounce from 'lodash/debounce';
+import { randomStr } from '@shell/utils/string';
+import {
+  computed, inject, onMounted, onUnmounted, provide, ref, watch
+} from 'vue';
+import type {
+  ComputedRef,
+  Ref,
+  VNode
+} from 'vue';
+
+type SummaryInfo = {
+  id: string;
+  label?: ComputedRef<string> | string;
+  scrollTo?: () => void;
+};
+
+type SummaryComponent = {
+  summary: SummaryInfo;
+  summaryID: string;
+  $options?: { name?: string };
+  $?: { type?: { name?: string } };
+};
+
+type SummaryEntry = {
+  node: VNode;
+  children: SummaryEntry[];
+  label?: string | ComputedRef<string>;
+  scrollTo?: () => void;
+  component?: SummaryComponent;
+};
+
+type RegisterComponent = (component?: SummaryComponent | null) => void;
+
+type FormSummaryContext = {
+  registerComponent: RegisterComponent;
+  unRegisterComponent: RegisterComponent;
+  refreshComponents: () => void;
+  updateComponentLabel: (summaryID: string, label: string) => boolean;
+};
+
+type ElementWithVNodeChildren = {
+  children?: ArrayLike<Element>;
+};
+
+type ElementWithSummaryID = HTMLElement & {
+  summaryID?: string;
+};
+
+// Unique key used by provide/inject so each form subtree gets its own
+// summary registration context
+const FORM_SUMMARY_KEY = Symbol('formSummary');
+
+/**
+ * useFormSummary will determine the relative position of all descendant components
+ * that are using the useInSummary composable. It is used to build summaries of elaborate form components
+ * that may have interactable elements deeply nested in child components. The list of located components
+ * returned by locateComponentsByNamePattern includes access to the component instance and a scrollTo method.
+ */
+export function useFormSummary(rootComponentRef: Readonly<Ref<HTMLElement | null>>) {
+  const registeredComponents = ref<Record<string, SummaryComponent>>({});
+  const locatedComponents = ref<SummaryEntry[]>([]);
+  const buildTree = (
+    components: SummaryEntry[] = [],
+    node?: any,
+    found = new Set<string>()
+  ) => {
+    let nextInput = components;
+
+    const summaryID = node?.el ? (node?.el as ElementWithSummaryID | null | undefined)?.summaryID || '' : node?.summaryID || '';
+    const component = registeredComponents.value[summaryID];
+    const summary = component?.summary;
+
+    if (component && summary && registeredComponents.value[summary.id] && !found.has(summary.id)) {
+      found.add(summary.id);
+
+      const out: SummaryEntry = {
+        node:     node as VNode,
+        children: [],
+        ...summary,
+        scrollTo: component ? () => scrollToComponent(component) : undefined
+      };
+
+      out.component = component;
+
+      components.push(out);
+      nextInput = out.children;
+    }
+
+    if (!node) {
+      return;
+    }
+
+    const children = node.el ? Array.from((node.el as ElementWithVNodeChildren | null | undefined)?.children ?? []) : Array.from(node.children ?? []);
+
+    children.forEach((child: any) => {
+      buildTree(nextInput, child, found);
+    });
+
+    return components;
+  };
+
+  const locateRegisteredComponents = () => {
+    if (rootComponentRef?.value) {
+      locatedComponents.value = buildTree([], rootComponentRef.value) || [];
+    } else {
+      locatedComponents.value = [];
+    }
+  };
+
+  // when forms initially this is called synchonously by every component using the summary composable
+  // debounce without a delay reduces that to one call on initial page load
+  const debouncedLocateRegisteredComponents = debounce(locateRegisteredComponents);
+
+  // onMounted fires on the calling component (CruResource) after its template refs are
+  // populated and after all children have run their own onMounted hooks. This guarantees
+  // rootComponentRef is available and all child registrations have arrived.
+  onMounted(() => {
+    debouncedLocateRegisteredComponents();
+  });
+
+  const findParent = (component: SummaryComponent) => {
+    const walk = (entries: SummaryEntry[] = [], parent: SummaryEntry | null = null): SummaryEntry | null => {
+      for (const entry of entries) {
+        if (entry?.component?.summary?.id === component?.summary?.id) {
+          return parent;
+        }
+
+        if (entry?.children?.length) {
+          const found = walk(entry.children, entry);
+
+          if (found) {
+            return found;
+          }
+        }
+      }
+
+      return null;
+    };
+
+    return walk(locatedComponents.value);
+  };
+
+  const updateComponentLabel = (summaryID: string, label: string) => {
+    const walk = (entries: SummaryEntry[] = []): boolean => {
+      for (const entry of entries) {
+        if (entry?.component?.summary?.id === summaryID) {
+          entry.label = label;
+
+          return true;
+        }
+
+        if (entry?.children?.length && walk(entry.children)) {
+          return true;
+        }
+      }
+
+      return false;
+    };
+
+    return walk(locatedComponents.value);
+  };
+
+  const scrollToComponent = (component: SummaryComponent) => {
+    const parent = findParent(component);
+
+    if (parent?.component) {
+      scrollToComponent(parent.component);
+    }
+    if (component?.summary?.scrollTo) {
+      component.summary.scrollTo();
+    }
+  };
+
+  const registerComponent: RegisterComponent = (component) => {
+    if (!component || !component.summary?.id) {
+      return;
+    }
+    registeredComponents.value[component.summary?.id] = component;
+    debouncedLocateRegisteredComponents();
+  };
+
+  const unRegisterComponent: RegisterComponent = (component) => {
+    if (!component || !component.summary?.id) {
+      return;
+    }
+
+    delete registeredComponents.value[component.summary?.id];
+    debouncedLocateRegisteredComponents();
+  };
+
+  // Provide the register/unregister functions to all descendants
+  provide<FormSummaryContext>(FORM_SUMMARY_KEY, {
+    registerComponent,
+    unRegisterComponent,
+    refreshComponents: debouncedLocateRegisteredComponents,
+    updateComponentLabel,
+  });
+
+  return { locatedComponents };
+}
+
+/**
+ * Hook to register a component in the summary system.
+ * Injects register/unregister from the nearest ancestor that called 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 - Scroll handler. The ToC system calls this function 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 - Label for this component's ToC entry. Accepts a plain string or
+ *   a `ComputedRef<string>`.
+ * @param options.elementRef - A template ref pointing to the component's root element.
+ *   Used by the ToC system to locate this component during DOM tree traversal.
+ */
+export function useInSummary(options: { scrollTo: () => void; label: ComputedRef<string> | string; elementRef: Readonly<Ref<HTMLElement | null>> }) {
+  const {
+    registerComponent = () => {},
+    unRegisterComponent = () => {},
+    refreshComponents = () => {},
+    updateComponentLabel = () => false
+  } = inject<FormSummaryContext>(FORM_SUMMARY_KEY) || {};
+
+  const { scrollTo, label, elementRef } = options;
+
+  const summaryID = randomStr();
+  const summary: SummaryInfo = { id: summaryID, scrollTo };
+
+  // Wrap a plain string in a computed so the type is always ComputedRef<string>.
+  summary.label = typeof label === 'string' ? computed(() => label) : label;
+
+  watch(summary.label, (label) => {
+    const updated = updateComponentLabel(summaryID, label);
+
+    if (!updated) {
+      refreshComponents();
+    }
+  });
+
+  onMounted(() => {
+    if (elementRef.value) {
+      (elementRef.value as ElementWithSummaryID).summaryID = summaryID;
+    }
+
+    registerComponent({ summary, summaryID } as SummaryComponent);
+  });
+
+  onUnmounted(() => {
+    // Unregister by summary ID — only the ID is needed for deletion
+    const stub = { summary } as SummaryComponent;
+
+    unRegisterComponent(stub);
+  });
+
+  return { summary };
+}

package/components/Window/ContainerShell.vue

@@ -80,7 +80,6 @@ export default {
       fitAddon:          null,
       searchAddon:       null,
       webglAddon:        null,
-      canvasAddon:       null,
       isOpen:            false,
       isOpening:         false,
       backlog:           [],
@@ -168,7 +167,7 @@ export default {
     try {
       const schema = this.$store.getters[`cluster/schemaFor`](NODE);
 
-      if (schema) {
+      if (schema && nodeId) {
         await this.$store.dispatch('cluster/find', { type: NODE, id: nodeId });
       }
     } catch {}
@@ -215,14 +214,13 @@ export default {
 
     async setupTerminal() {
       const docStyle = getComputedStyle(document.querySelector('body'));
-      const xterm = await import(/* webpackChunkName: "xterm" */ 'xterm');
+      const xterm = await import(/* webpackChunkName: "xterm" */ '@xterm/xterm');
 
       const addons = await allHash({
-        fit:      import(/* webpackChunkName: "xterm" */ 'xterm-addon-fit'),
-        webgl:    import(/* webpackChunkName: "xterm" */ 'xterm-addon-webgl'),
-        weblinks: import(/* webpackChunkName: "xterm" */ 'xterm-addon-web-links'),
-        search:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-search'),
-        canvas:   import(/* webpackChunkName: "xterm" */ 'xterm-addon-canvas')
+        fit:      import(/* webpackChunkName: "xterm" */ '@xterm/addon-fit'),
+        webgl:    import(/* webpackChunkName: "xterm" */ '@xterm/addon-webgl'),
+        weblinks: import(/* webpackChunkName: "xterm" */ '@xterm/addon-web-links'),
+        search:   import(/* webpackChunkName: "xterm" */ '@xterm/addon-search'),
       });
 
       const terminal = new xterm.Terminal({
@@ -242,9 +240,21 @@ export default {
       terminal.loadAddon(new addons.weblinks.WebLinksAddon());
       terminal.open(this.$refs.xterm);
 
+      // if user is using Safari with webGPU disabled, webglAddon will silently fail
+      // and we do not have a way to detect that.
+      // To avoid it, default to DOM rendering for Safari browsers
       try {
-        this.webglAddon = new addons.webgl.WebglAddon();
-        terminal.loadAddon(this.webglAddon);
+        const ua = window.navigator.userAgent.toLowerCase();
+        const isSafari = ua.includes('safari') &&
+           !ua.includes('crios') && // Chrome iOS
+           !ua.includes('fxios') && // Firefox iOS
+           !ua.includes('edgios') && // Edge iOS
+           !ua.includes('opr'); // Opera
+
+        if (!isSafari) {
+          this.webglAddon = new addons.webgl.WebglAddon();
+          terminal.loadAddon(this.webglAddon);
+        }
       } catch (e) {
         // Some browsers (Safari) don't support the webgl renderer, so don't use it.
         this.webglAddon = null;
@@ -288,7 +298,7 @@ export default {
       }
 
       const url = addParams(
-        `${ this.pod.links.view.replace(/^http/, 'ws') }/exec`,
+        `${ this.pod.links?.view.replace(/^http/, 'ws') }/exec`,
         {
           container: this.container,
           stdout:    1,