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

package/components/CruResource.vue

@@ -1,5 +1,6 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
+import throttle from 'lodash/throttle';
 import { createYamlWithOptions } from '@shell/utils/create-yaml';
 import { clone, get } from '@shell/utils/object';
 import { SCHEMA, NAMESPACE } from '@shell/config/types';
@@ -11,6 +12,10 @@ import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
 import { useResourceCreatePageProvider, useResourceEditPageProvider } from '@shell/composables/cruResource';
 
+import { useFormSummary } from '@shell/components/TableOfContents/composables';
+import { useTemplateRef } from 'vue';
+import TableOfContents from '@shell/components/TableOfContents/TableOfContents.vue';
+
 import {
   _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE, _CREATE
 } from '@shell/config/query-params';
@@ -31,7 +36,8 @@ export default {
     Banner,
     CruResourceFooter,
     ResourceYaml,
-    Wizard
+    Wizard,
+    TableOfContents
   },
 
   props: {
@@ -162,9 +168,22 @@ export default {
     yamlModifiers: {
       type:    Object,
       default: undefined
+    },
+
+    showToc: {
+      type:    Boolean,
+      default: false
     }
   },
 
+  setup() {
+    const cruFormRef = useTemplateRef('cru-form');
+    const { locatedComponents } = useFormSummary(cruFormRef);
+    const accordions = locatedComponents;
+
+    return { accordions };
+  },
+
   data(props) {
     const inStore = this.$store.getters['currentStore'](this.resource);
     const schema = this.$store.getters[`${ inStore }/schemaFor`](this.resource.type);
@@ -176,27 +195,30 @@ export default {
     }
 
     return {
-      isCancelModal:   false,
-      showAsForm:      this.$route.query[AS] !== _YAML,
+      isCancelModal:                      false,
+      showAsForm:                         this.$route.query[AS] !== _YAML,
+      tocContainerHeight:                 0,
+      mainLayoutEl:                       null,
+      throttledComputeTocContainerHeight: null,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
        */
-      resourceYaml:    null,
+      resourceYaml:                       null,
       /**
        * Initialised on demand (given that it needs to make a request to fetch schema definition)
        */
-      initialYaml:     null,
+      initialYaml:                        null,
       /**
        * Save a copy of the initial resource. This is used to calc the initial yaml later on
        */
-      initialResource: clone(this.resource),
-      abbrSizes:       {
+      initialResource:                    clone(this.resource),
+      abbrSizes:                          {
         3: '24px',
         4: '18px',
         5: '16px',
         6: '14px'
       },
-      schema
+      schema,
     };
   },
 
@@ -276,10 +298,11 @@ export default {
           icon:    null
         }
       }), {});
-    },
+    }
   },
 
   created() {
+    this.throttledComputeTocContainerHeight = throttle(this.computeTocContainerHeight, 20);
     if ( this._selectedSubtype ) {
       this.$emit('select-type', this._selectedSubtype);
     }
@@ -290,12 +313,42 @@ export default {
   },
 
   beforeUnmount() {
+    this.mainLayoutEl?.removeEventListener('scroll', this.throttledComputeTocContainerHeight);
+    window.removeEventListener('resize', this.throttledComputeTocContainerHeight);
+    this.throttledComputeTocContainerHeight?.cancel?.();
     this.$store.dispatch('cru-resource/setCreateNamespace', false);
   },
 
   methods: {
     stringify,
 
+    // as the user scrolls past the CruResource Masthead, the amount of vertical space available to the table of contents changes
+    computeTocContainerHeight() {
+      const root = this.$el;
+
+      if (!root) {
+        this.tocContainerHeight = 0;
+
+        return 0;
+      }
+
+      const tocEl = root.querySelector('.cru__toc');
+      const footerEl = root.querySelector('.cru__footer');
+
+      if (!tocEl || !footerEl) {
+        this.tocContainerHeight = 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;
+
+      this.tocContainerHeight = Math.max(0, Math.round((footerTop - tocTop) - gapLg));
+    },
+
     confirmCancel(isCancelNotBack = true) {
       if (isCancelNotBack) {
         this.emitOrRoute();
@@ -532,13 +585,38 @@ export default {
           this.initialYaml = await this.createResourceYaml(undefined, this.initialResource);
         }
       }
+    },
+
+    showToc: {
+      handler(neu, old) {
+        if (neu) {
+          // Compute height on first render
+          this.$nextTick(() => {
+            this.throttledComputeTocContainerHeight?.();
+          });
+          // Add event listeners for computeTocContainerHeight on scroll
+          this.mainLayoutEl = document.querySelector('.main-layout');
+          this.mainLayoutEl?.addEventListener('scroll', this.throttledComputeTocContainerHeight, { passive: true });
+          // Add event listener for computeTocContainerHeight on window resize
+          window.addEventListener('resize', this.throttledComputeTocContainerHeight, { passive: true });
+        } else if (old) {
+          // Remove event listeners for computeTocContainerHeight when TOC is hidden
+          this.mainLayoutEl?.removeEventListener('scroll', this.throttledComputeTocContainerHeight);
+          window.removeEventListener('resize', this.throttledComputeTocContainerHeight);
+        }
+      },
+      immediate: true
     }
   }
 };
 </script>
 
 <template>
-  <section class="cru">
+  <section
+    ref="cru-form"
+    :class="{'show-toc':showToc}"
+    class="cru"
+  >
     <slot name="noticeBanner" />
     <p
       v-if="description"
@@ -548,6 +626,7 @@ export default {
     </p>
     <component
       :is="(isView? 'div' : 'form')"
+
       :value="resource"
       data-testid="cru-form"
       class="create-resource-container cru__form"
@@ -771,15 +850,23 @@ export default {
       </template>
       <!------ SINGLE PROCESS ------>
       <template v-else-if="showAsForm">
+        <TableOfContents
+          v-if="showToc"
+          class="cru__toc"
+          :style="tocContainerHeight ? { '--toc-container-height': `${tocContainerHeight}px` } : {}"
+          :accordions="accordions"
+        />
         <div
           v-if="_selectedSubtype || !subtypes.length"
-          class="resource-container cru__content"
+          class="cru__content resource-container"
+
           :style="[minHeight ? { 'min-height': minHeight } : {}]"
         >
           <slot name="single">
             <slot />
           </slot>
         </div>
+
         <slot name="form-footer">
           <CruResourceFooter
             v-if="!isView"
@@ -912,6 +999,11 @@ export default {
 </template>
 
 <style lang='scss' scoped>
+$logo: 60px;
+$logo-space: 100px;
+
+$table-contents-width: 250px;
+
 .cru-resource-yaml-container {
   .resource-yaml {
     .yaml-editor {
@@ -937,9 +1029,6 @@ export default {
   }
 }
 
-$logo: 60px;
-$logo-space: 100px;
-
 .title {
   margin-top: 20px;
 
@@ -992,10 +1081,26 @@ form.create-resource-container .cru {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+
+  }
+
+  &__toc {
+    width: $table-contents-width;
+    margin: 20px var(--gap-lg) 20px var(--gap-lg);
+    min-width: $table-contents-width;
+    max-width: $table-contents-width;
+    position: sticky;
+    top: 24px;
+    align-self: flex-start;
+    max-height: var(--toc-container-height, calc(100vh - 24px - $footer-height - calc( 2 * var(--gap-lg)) - 125px));
+    transition: max-height 50ms ease-in-out;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   &__content {
     flex-grow: 1;
+
     &-wizard {
       display: flex;
     }
@@ -1025,6 +1130,48 @@ form.create-resource-container .cru {
   }
 }
 
+.show-toc.cru{
+   &>.cru__form{
+        display: grid;
+        grid-template-columns: [content] 1fr [toc] calc(#{$table-contents-width} + var(--gap-lg));
+        grid-template-rows: [errors] auto [content] 1fr [footer] min-content;
+
+      &>.cru__errors {
+        grid-column: content;
+        grid-row: errors;
+      }
+
+      &>.cru__toc {
+        grid-column: toc;
+        grid-row: errors / footer;
+      }
+
+      &>.cru__content {
+          grid-column: content;
+          grid-row: content;
+      }
+
+      &>.cru__footer {
+        grid-column: content / 3;
+        grid-row: footer;
+      }
+    }
+}
+
+@media (max-width: map-get($breakpoints, '--viewport-9')) {
+  .show-toc.cru {
+    & > .cru__form {
+      display: flex;
+      grid-template-columns: none;
+      grid-template-rows: none;
+
+      & > .cru__toc {
+        display: none;
+      }
+    }
+  }
+}
+
 .description {
   margin-bottom: 15px;
   margin-top: 5px;

package/components/CruResourceFooter.vue

@@ -3,13 +3,16 @@ import { mapGetters } from 'vuex';
 
 import AsyncButton from '@shell/components/AsyncButton';
 import ResourceCancelModal from '@shell/components/ResourceCancelModal';
+import { RcButton } from '@components/RcButton';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
   emits: ['cancel-confirmed', 'finish'],
 
-  components: { AsyncButton, ResourceCancelModal },
-  props:      {
+  components: {
+    AsyncButton, RcButton, ResourceCancelModal
+  },
+  props: {
     mode: {
       type:    String,
       default: 'create',
@@ -84,16 +87,17 @@ export default {
   <div class="cru-resource-footer">
     <slot name="footer-prefix" />
     <slot name="cancel">
-      <button
+      <RcButton
         v-if="!isView && showCancel"
         id="cru-cancel"
         :data-testid="componentTestid + '-cancel'"
         type="button"
-        class="btn role-secondary"
+        variant="secondary"
+        size="large"
         @click="confirmCancelRequired ? checkCancel(true) : $emit('cancel-confirmed', true)"
       >
         <t k="generic.cancel" />
-      </button>
+      </RcButton>
     </slot>
     <slot :checkCancel="checkCancel">
       <AsyncButton

package/components/ExplorerMembers.vue

@@ -12,6 +12,7 @@ import { mapGetters } from 'vuex';
 import { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor.vue';
 import { allHash } from '@shell/utils/promise';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import { RcButton } from '@components/RcButton';
 
 /**
  * Explorer members page.
@@ -26,7 +27,8 @@ export default {
     ResourceTable,
     Tabbed,
     Tab,
-    SortableTable
+    SortableTable,
+    RcButton,
   },
 
   props: {
@@ -308,12 +310,14 @@ export default {
           v-if="canEditClusterMembers"
           class="row mb-10 cluster-add"
         >
-          <router-link
+          <rc-button
+            size="large"
+            class="pull-right"
+            data-testid="button-cluster-member-add"
             :to="createLocation"
-            class="btn role-primary pull-right"
           >
             {{ t('members.createActionLabel') }}
-          </router-link>
+          </rc-button>
         </div>
         <ResourceTable
           :schema="schema"

package/components/ExplorerProjectsNamespaces.vue

@@ -20,6 +20,7 @@ import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import { RcButton } from '@components/RcButton';
 
 export default {
   name:       'ListProjectNamespace',
@@ -29,6 +30,7 @@ export default {
     ResourceTable,
     ButtonMultiAction,
     ActionMenu,
+    RcButton
   },
   mixins: [ResourceFetch],
 
@@ -295,7 +297,7 @@ export default {
       return this.$store.getters['i18n/t']('resourceTable.groupLabel.notInAProject');
     },
     showCreateNsButton() {
-      return this.groupPreference !== 'namespace';
+      return this.groupPreference !== 'namespace' && this.isNamespaceCreatable;
     },
     projectGroupBy() {
       return this.groupPreference === 'none' ? null : 'groupById';
@@ -445,13 +447,14 @@ export default {
         v-if="showCreateNsButton"
         #extraActions
       >
-        <router-link
+        <rc-button
+          size="large"
+          class="mr-10"
           :to="createNamespaceLocationFlatList()"
-          class="btn role-primary mr-10"
           data-testid="create_project_namespaces"
         >
           {{ t('projectNamespaces.createNamespace') }}
-        </router-link>
+        </rc-button>
       </template>
     </Masthead>
     <!-- Extensions area -->
@@ -495,13 +498,14 @@ export default {
             </div>
           </div>
           <div class="right mr-10">
-            <router-link
+            <rc-button
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm role-secondary mr-5"
+              variant="secondary"
+              class="mr-5"
               :to="createNamespaceLocation(group.group)"
             >
               {{ t('projectNamespaces.createNamespace') }}
-            </router-link>
+            </rc-button>
             <template v-if="featureDropdownMenu">
               <ActionMenu
                 v-if="showProjectActionButton(group.group)"

package/components/GrowlManager.vue

@@ -204,6 +204,10 @@ export default {
         > P {
           padding-top: 2px;
 
+          // Limit size of message and scroll just the message, not the entire growl, so that the title and icon are always visible
+          max-height: 200px;
+          overflow-y: scroll;
+
           &.has-title {
             margin-top: 5px;
           }

package/components/InstallHelmCharts.vue

@@ -248,7 +248,7 @@ export default {
 
       };
 
-      this.installCmd.namespace = this.targetNamespace || this.chart?.targetNamespace || 'default';
+      this.installCmd.namespace = this.targetNamespace || this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] || this.chart?.targetNamespace || 'default';
     }
   },
 
@@ -360,7 +360,7 @@ export default {
           this.canInstallChart = false;
         } else {
           try {
-            const app = await this.$store.dispatch(`${ this.store }/find`, { type: CATALOG.APP, id: `${ this.targetNamespace || this.chart?.targetNamespace || 'default' }/${ this.chartName }` });
+            const app = await this.$store.dispatch(`${ this.store }/find`, { type: CATALOG.APP, id: `${ this.targetNamespace || this.versionInfo?.chart?.annotations?.[CATALOG_ANNOTATIONS.NAMESPACE] || this.chart?.targetNamespace || 'default' }/${ this.chartName }` });
 
             if (app) {
               this.installedVersion = app?.spec?.chart?.metadata?.appVersion;

package/components/LandingPagePreference.vue

@@ -14,10 +14,6 @@ export default {
     Select,
   },
 
-  async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
-  },
-
   data() {
     // Store the route as it was on page load (before the user may have changed it)
     const customRoute = this.$store.getters['prefs/get'](AFTER_LOGIN_ROUTE);
@@ -90,13 +86,25 @@ export default {
   },
 
   methods: {
-    updateLoginRoute(neu) {
+    async updateLoginRoute(neu) {
       if (neu) {
         this.afterLoginRoute = neu;
       } else {
+        this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
         this.afterLoginRoute = this.routeFromDropdown?.value || this.routeDropdownOptions[0]?.value;
       }
     },
+  },
+
+  watch: {
+    afterLoginRoute: {
+      async handler(neu) {
+        if (typeof neu === 'object') {
+          this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
+        }
+      },
+      immediate: true
+    },
   }
 };
 </script>
@@ -129,6 +137,7 @@ export default {
           />
           <Select
             v-model:value="routeFromDropdown"
+            :loading="clusters.length < 1"
             :aria-label="t('landing.landingPrefs.ariaLabelTakeMeToCluster')"
             :searchable="true"
             :disabled="afterLoginRoute === 'home' || afterLoginRoute === 'last-visited'"