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

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,

package/components/Window/__tests__/ContainerShell.test.ts

@@ -12,47 +12,72 @@ jest.mock('@shell/utils/crypto', () => {
   return {
     __esModule:   true,
     ...originalModule,
-    base64Decode: jest.fn().mockImplementation((str:String) => str)
+    base64Decode: jest.fn().mockImplementation((str:string) => str)
   };
 });
 
+const mockOnData = jest.fn();
+const mockLoadAddon = jest.fn();
+const mockOpen = jest.fn();
+const mockFocus = jest.fn();
+const mockWrite = jest.fn();
+const mockWriteln = jest.fn();
+const mockReset = jest.fn();
+const mockOnResize = jest.fn();
+const mockPaste = jest.fn();
+const mockDispose = jest.fn();
+const mockClear = jest.fn();
+
+jest.mock(/* webpackChunkName: "xterm" */ '@xterm/xterm', () => {
+  return {
+    Terminal: class {
+      onData = mockOnData;
+      loadAddon = mockLoadAddon;
+      open = mockOpen;
+      focus = mockFocus;
+      write = mockWrite;
+      writeln = mockWriteln;
+      reset = mockReset;
+      onResize = mockOnResize;
+      paste = mockPaste;
+      dispose = mockDispose;
+      clear = mockClear;
+    }
+  };
+});
+
+const mockFit = jest.fn();
+const mockProposeDimensions = jest.fn().mockImplementation(() => ({ rows: 1, cols: 1 }));
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-fit', () => {
+  return {
+    FitAddon: class {
+      fit = mockFit;
+      proposeDimensions = mockProposeDimensions;
+    }
+  };
+});
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-web-links', () => {
+  return { WebLinksAddon: class {} };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-search', () => {
+  return {
+    SearchAddon: class {
+ findNext = jest.fn(); findPrevious = jest.fn();
+    }
+  };
+}, { virtual: true });
+
+jest.mock(/* webpackChunkName: "@xterm" */ '@xterm/addon-webgl', () => {
+  return { WebglAddon: class {} };
+}, { virtual: true });
+
 describe('component: ContainerShell', () => {
   const action = jest.fn();
   const translate = jest.fn();
   const schemaFor = jest.fn();
-  const onData = jest.fn();
-  const loadAddon = jest.fn();
-  const open = jest.fn();
-  const focus = jest.fn();
-  const fit = jest.fn();
-  const proposeDimensions = jest.fn().mockImplementation(() => {
-    return { rows: 1 };
-  });
-  const write = jest.fn();
-  const writeln = jest.fn();
-  const reset = jest.fn();
-
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm', () => {
-    return {
-      Terminal: class {
-        onData = onData;
-        loadAddon = loadAddon;
-        open = open;
-        focus = focus;
-        write = write;
-        writeln = writeln;
-        reset = reset
-      }
-    };
-  });
-  jest.mock(/* webpackChunkName: "xterm" */ 'xterm-addon-fit', () => {
-    return {
-      FitAddon: class {
-        fit = fit
-        proposeDimensions = proposeDimensions
-      }
-    };
-  });
 
   const defaultContainerShellParams = {
     propsData: {
@@ -77,7 +102,8 @@ describe('component: ContainerShell', () => {
           dispatch: action,
           getters:  {
             'i18n/t':            translate,
-            'cluster/schemaFor': schemaFor
+            'cluster/schemaFor': schemaFor,
+            'prefs/theme':       jest.fn().mockReturnValue('dark')
           }
         }
       },
@@ -87,6 +113,7 @@ describe('component: ContainerShell', () => {
   const resetMocks = () => {
     // Clear all instances and calls to constructor and all methods:
     jest.clearAllMocks();
+    jest.restoreAllMocks();
     defaultContainerShellParams.propsData.pod.os = 'linux';
   };
 
@@ -99,7 +126,14 @@ describe('component: ContainerShell', () => {
     return wrapper;
   };
 
-  it.todo('test that we are calling the xterm terminal and fitAddon class method mocks correctly');
+  it('test that we are calling the xterm terminal and fitAddon class method mocks correctly', async() => {
+    resetMocks();
+    await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(mockLoadAddon).toHaveBeenCalledWith(expect.any(Object));
+    expect(mockOpen).toHaveBeenCalledWith(expect.any(HTMLElement));
+    expect(mockFit).toHaveBeenCalledWith();
+  });
 
   it('creates a window on the page', async() => {
     resetMocks();
@@ -110,6 +144,26 @@ describe('component: ContainerShell', () => {
     expect(windowComponent.isVisible()).toBe(true);
   });
 
+  it('does not load webgl addon on Safari browser', async() => {
+    resetMocks();
+
+    const originalUserAgent = window.navigator.userAgent;
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Safari/605.1.15',
+      configurable: true
+    });
+
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    expect(wrapper.vm.webglAddon).toBeNull();
+
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:        originalUserAgent,
+      configurable: true
+    });
+  });
+
   it('the find action for the node is called if schemaFor finds a schema for NODE', async() => {
     resetMocks();
     const testSchemaFindsSchemaParams = {
@@ -242,7 +296,23 @@ describe('component: ContainerShell', () => {
     expect(wrapper.vm.os).toBe('linux');
   });
 
-  it.todo('test that fit and flush are operating properly');
+  it('test that fit and flush are operating properly', async() => {
+    resetMocks();
+    const wrapper = await wrapperPostMounted(defaultContainerShellParams);
+
+    mockFit.mockClear();
+
+    if (typeof wrapper.vm.fit === 'function') {
+      wrapper.vm.fit();
+    }
+
+    expect(mockFit).toHaveBeenCalledWith();
+
+    if (typeof wrapper.vm.flush === 'function') {
+      wrapper.vm.flush();
+    }
+  });
+
   it.todo('test that we are properly feeding the terminal the commandOnFirstConnect prop correctly on connected');
 
   it('the socket message event sets data props correctly', async() => {

package/components/Wizard.vue

@@ -109,6 +109,11 @@ export default {
       default: null
     },
 
+    showStepHeader: {
+      type:    Boolean,
+      default: true
+    },
+
     // The set of labels to display for the finish AsyncButton
     finishMode: {
       type:    String,
@@ -119,6 +124,11 @@ export default {
     errors: {
       type:    Array,
       default: null,
+    },
+
+    beforeGoToStep: {
+      type:    Function,
+      default: null
     }
   },
 
@@ -212,7 +222,7 @@ export default {
   },
 
   methods: {
-    goToStep(number, fromNav) {
+    async goToStep(number, fromNav) {
       if (number < 1) {
         return;
       }
@@ -228,6 +238,14 @@ export default {
         return;
       }
 
+      if (this.beforeGoToStep && fromNav) {
+        try {
+          await this.beforeGoToStep(this.activeStep, selected);
+        } catch {
+          return;
+        }
+      }
+
       this.activeStep = selected;
 
       this.$emit('next', { step: selected });
@@ -289,7 +307,7 @@ export default {
     >
       <div>
         <div class="header">
-          <div class="title">
+          <div :class="['title', !showStepHeader ? 'mmb-4' : '']">
             <div
               v-if="showBanner"
               class="top choice-banner"
@@ -328,7 +346,7 @@ export default {
               </slot>
               <!-- Step number with subtext -->
               <div
-                v-if="activeStep && showSteps"
+                v-if="activeStep && showSteps && showStepHeader"
                 class="subtitle"
               >
                 <h2>{{ !!headerMode ? t(`wizard.${headerMode}`) : t(`asyncButton.${finishMode}.action`) }}: {{ t('wizard.step', {number:activeStepIndex+1}) }}</h2>
@@ -596,10 +614,10 @@ $spacer: 10px;
         flex-basis: 100%;
         border-top: 1px solid var(--border);
         position: relative;
-        top: 17px;
+        top: 23px;
 
         .cru__content & {
-          top: 13px;
+          top: 17px;
         }
       }
     }