16118 table of contents

cypress/e2e/po/components/fixed-banner.po.ts

@@ -16,4 +16,8 @@ export default class FixedBannerPo extends ComponentPo {
   color() {
     return this.self().find('.banner').first().should('have.css', 'color');
   }
+
+  close() {
+    return this.self().find('[data-testid="banner-close"]').first().click();
+  }
 }

cypress/e2e/tests/pages/manager/cluster-manager.spec.ts

@@ -452,6 +452,35 @@ describe('Cluster Manager', { testIsolation: 'off', tags: ['@manager', '@adminUs
         clusterList.list().providerSubType(importGenericName).should('contain.text', 'K3s');
       });
 
+      it('creation page should include a table of contents containing an entry for each Accordion on the page', () => {
+        cy.intercept('GET', `${ USERS_BASE_URL }?*`).as('getUsers');
+
+        clusterList.goTo();
+        clusterList.checkIsCurrentPage();
+        clusterList.importCluster();
+
+        importClusterPage.waitForPage('mode=import');
+        importClusterPage.selectGeneric(0);
+        importClusterPage.waitForPage('mode=import&type=import&rkeType=rke2');
+        cy.wait('@getUsers');
+        // verify that the table of contents is shown and contains the same number of entries as there are accordions on the page
+        cy.get('[data-testid="accordion-header"]')
+          .its('length')
+          .then((accordionHeaderCount) => {
+            cy.get('[data-testid^="toc-list-item-"]')
+              .should('have.length', accordionHeaderCount);
+          });
+
+        // verify that clicking an accordion label in the table of contents scrolls the page to the associated accordion and opens it
+        cy.get('[data-testid="toc-list-item-3"] button').click();
+
+        cy.window().its('scrollY').should('be.greaterThan', 0);
+
+        cy.get('[data-testid="registries-accordion"]')
+          .find('[data-testid="accordion-body"]')
+          .should('be.visible');
+      });
+
       it('can edit imported cluster and see changes afterwards', () => {
         cy.getClusterIdByName(importGenericName).then((clusterId) => {
           const editImportedClusterPage = new ClusterManagerEditImportedPagePo(undefined, 'fleet-default', clusterId);
@@ -853,7 +882,6 @@ describe('Cluster Manager as standard user', { testIsolation: 'off', tags: ['@ma
     });
   });
 });
-
 describe('Visual Testing', { tags: ['@percy', '@manager', '@adminUser'] }, () => {
   before(() => {
     cy.login();

cypress/e2e/tests/pages/users-and-auth/users.spec.ts

@@ -533,7 +533,7 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
       cy.login();
     });
 
-    it('User creation should complete after admin user fails to create for Standard user with Manage Users Role', () => {
+    it('User creation should throw an error if creating a user with a higher permission set, the error should be removable, and creation should succeed once permissions are appropriately lowered', () => {
       // create standard user
       usersPo.goTo();
       usersPo.waitForPage();
@@ -579,6 +579,10 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
       banner.checkExists();
       banner.text().should('eq', 'You cannot assign Global Permissions that are higher than your own. Please verify the permissions you are attempting to assign.');
 
+      // close the error banner before updating the Global Permissions
+      banner.close();
+      banner.checkNotExists();
+
       // update the Global Permissions
       userCreate.selectCheckbox('User-Base').set();
       userCreate.saveAndWaitForRequests('POST', '/v3/globalrolebindings');

pkg/eks/components/CruEKS.vue

@@ -662,6 +662,7 @@ export default defineComponent({
     :done-route="doneRoute"
     :errors="fvUnreportedValidationErrors"
     :validation-passed="fvFormIsValid"
+    :show-toc="hasCredential"
     @error="e=>errors=e"
     @finish="save"
     @cancel="done"
@@ -724,6 +725,7 @@ export default defineComponent({
       <template v-else>
         <div><h3>{{ t('eks.nodeGroups.title') }}</h3></div>
         <Tabbed
+          :title="t('eks.nodeGroups.title')"
           class="mb-20"
           :side-tabs="true"
           :show-tabs-add-remove="mode !== VIEW"

pkg/imported/components/CruImported.vue

@@ -33,6 +33,7 @@ import { IMPORTED_CLUSTER_VERSION_MANAGEMENT } from '@shell/config/labels-annota
 import cloneDeep from 'lodash/cloneDeep';
 import { VERSION_MANAGEMENT_DEFAULT } from '@pkg/imported/util/shared.ts';
 import SchedulingCustomization from '@shell/components/form/SchedulingCustomization';
+import { randomStr } from '@shell/utils/string';
 
 const HARVESTER_HIDE_KEY = 'cm-harvester-import';
 const defaultCluster = {
@@ -142,6 +143,7 @@ export default defineComponent({
       }
       ],
       AGENT_CONFIGURATION_TYPES,
+      testAccs: [] // TODO nb remove
     };
   },
 
@@ -264,6 +266,8 @@ export default defineComponent({
   },
 
   methods: {
+    // TODO nb remove
+    randomStr,
 
     onMembershipUpdate(update) {
       this.membershipUpdate = update;
@@ -423,6 +427,7 @@ export default defineComponent({
     :done-route="doneRoute"
     :errors="fvUnreportedValidationErrors"
     :validation-passed="fvFormIsValid"
+    :show-toc="true"
     @error="e=>errors=e"
     @finish="save"
   >
@@ -550,6 +555,26 @@ export default defineComponent({
           @scheduling-customization-changed="setSchedulingCustomization"
         />
       </Accordion>
+      <!-- //TODO nb remove -->
+      <button
+        class="btn role-primary"
+        @click="testAccs.push({})"
+      >
+        add accordion
+      </button><button
+        class="btn role-secondary ml-5"
+        @click="testAccs.pop()"
+      >
+        remove accordion
+      </button>
+      <Accordion
+        v-for="(acc, i) in testAccs"
+        :key="i"
+        class="mb-20 accordion"
+        :title="i.toString()"
+      >
+        {{ i }}
+      </Accordion>
       <Accordion
         class="mb-20 accordion"
         title-key="imported.accordions.labels"
@@ -615,6 +640,15 @@ export default defineComponent({
         title-key="imported.accordions.advanced"
         :open-initially="false"
       >
+        <!-- //TODO nb remove -->
+        <Accordion
+          v-if="!isRKE1"
+          class="mb-20 accordion"
+          title="test accordion has a pretty long title to test long titles"
+          :open-initially="false"
+        >
+          test
+        </Accordion>
         <h3>
           {{ t('imported.agentEnv.header') }}
         </h3>
@@ -634,9 +668,3 @@ export default defineComponent({
     </div>
   </CruResource>
 </template>
-
-<style lang="scss" scoped>
-    .accordion {
-        border-radius: 16px;
-    }
-</style>

pkg/rancher-components/src/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;

pkg/rancher-components/src/components/Form/Radio/RadioGroup.vue

@@ -12,6 +12,7 @@ interface Option {
 }
 
 export default defineComponent({
+  name:       'RadioGroup',
   components: { RadioButton },
   props:      {
     /**

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

@@ -33,9 +33,12 @@
  *   <p>Section content here</p>
  * </RcSection>
  */
-import { computed, inject, provide, type Ref } from 'vue';
+import {
+  computed, inject, provide, useTemplateRef, type Ref
+} from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import RcIcon from '@components/RcIcon/RcIcon.vue';
+import { useInSummary } from '@shell/components/TableOfContents/composables';
 import type { RcSectionProps, SectionBackground } from './types';
 
 const RC_SECTION_BG_KEY = 'rc-section-background';
@@ -58,6 +61,24 @@ provide(RC_SECTION_BG_KEY, resolvedBackground);
 
 const expanded = defineModel<boolean>('expanded', { default: true });
 
+// 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 sectionRef = useTemplateRef<HTMLElement>('rc-section-summarized-container');
+const { summary } = useInSummary({
+  label:      displayTitle,
+  scrollTo:   () => sectionRef.value?.scrollIntoView(true),
+  elementRef: sectionRef,
+});
+
+defineExpose({
+  summary, displayTitle, name
+});
+
 const hasHeader = computed(() => {
   return props.mode === 'with-header';
 });
@@ -84,7 +105,10 @@ function toggle() {
 </script>
 
 <template>
-  <div :class="sectionClass">
+  <div
+    ref="rc-section-summarized-container"
+    :class="sectionClass"
+  >
     <div
       v-if="hasHeader"
       class="section-header"

shell/assets/styles/global/_layout.scss

@@ -3,6 +3,10 @@
   grid-area: main;
   overflow: auto;
 
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
+  }
+
   .outlet {
     display: flex;
     flex-direction: column;

shell/assets/translations/en-us.yaml

@@ -2841,6 +2841,8 @@ cruResource:
   reviewYaml: "Keep editing YAML"
   previewYaml: Edit as YAML
   showYaml: View as YAML
+  tableOfContents:
+    jumpTo: Jump to...
 
 providers:
   hosted: