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

package/chart/monitoring/prometheus/index.vue

@@ -12,6 +12,7 @@ import { RadioGroup } from '@components/Form/Radio';
 import { set } from '@shell/utils/object';
 import { simplify, convert } from '@shell/utils/selector';
 import { POD } from '@shell/config/types';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
@@ -22,6 +23,7 @@ export default {
     MatchExpressions,
     RadioGroup,
     StorageClassSelector,
+    RcButton,
   },
 
   props: {
@@ -190,12 +192,13 @@ export default {
           :key="i"
           class="mt-10"
         >
-          <router-link
+          <rc-button
+            size="large"
+            variant="tertiary"
             :to="wl.link"
-            class="btn role-tertiary"
           >
             {{ wl.label }}
-          </router-link>
+          </rc-button>
         </div>
       </template>
     </Banner>

package/components/ActionDropdownShell.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
+import { ButtonSize } from '@components/RcButton';
 type HiddenAction = {
   action: string;
   enabled: boolean;
@@ -11,11 +12,12 @@ type HiddenAction = {
   anyEnabled: boolean;
 }
 
-defineProps<{
+withDefaults(defineProps<{
   disabled: boolean,
   hiddenActions: HiddenAction[],
   actionTooltip: unknown,
-}>();
+  size?: ButtonSize,
+}>(), { size: 'large' });
 
 const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
 
@@ -35,7 +37,7 @@ const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' |
   >
     <rc-dropdown-trigger
       class="bulk-actions-dropdown"
-      size="large"
+      :size="size"
       :disabled="disabled"
     >
       <template #before>

package/components/ButtonGroup.vue

@@ -31,11 +31,25 @@ export default {
     disabled: {
       type:    Boolean,
       default: false,
-    }
+    },
+
+    size: {
+      type:      String,
+      default:   'large',
+      validator: (value) => ['small', 'medium', 'large'].includes(value),
+    },
 
   },
 
   computed: {
+    sizeClass() {
+      return {
+        small:  'btn-sm',
+        medium: 'btn-md',
+        large:  null,
+      }[this.size];
+    },
+
     optionObjects() {
       const value = this.value;
 
@@ -52,6 +66,7 @@ export default {
 
         out.class = {
           btn:                  true,
+          [this.sizeClass]:     !!this.sizeClass,
           [this.inactiveClass]: !active,
           [this.activeClass]:   active,
         };
@@ -122,3 +137,13 @@ export default {
     </button>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.btn-group {
+  .btn-md {
+    padding: 0 12px;
+    min-height: 32px;
+    line-height: 32px;
+  }
+}
+</style>

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: {
@@ -121,6 +127,12 @@ export default {
       default: () => []
     },
 
+    // Used to be called before going to the next step in the wizard.
+    beforeNext: {
+      type:    Function,
+      default: null
+    },
+
     stepsOptions: {
       type:    Object,
       default: () => ({ editFirstStep: true })
@@ -162,9 +174,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 +201,31 @@ 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,
+      nextValidating:                     false,
       /**
        * 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 +305,11 @@ export default {
           icon:    null
         }
       }), {});
-    },
+    }
   },
 
   created() {
+    this.throttledComputeTocContainerHeight = throttle(this.computeTocContainerHeight, 20);
     if ( this._selectedSubtype ) {
       this.$emit('select-type', this._selectedSubtype);
     }
@@ -290,12 +320,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();
@@ -435,6 +495,47 @@ export default {
       return slot !== 'default' && typeof this.$slots[slot] === 'function';
     },
 
+    async wizardBeforeGoToStep(fromStep, toStep) {
+      if (!this.beforeNext) {
+        return;
+      }
+
+      const fromIdx = this.steps.findIndex((s) => s.name === fromStep.name);
+      const toIdx = this.steps.findIndex((s) => s.name === toStep.name);
+
+      if (toIdx <= fromIdx) {
+        return;
+      }
+
+      try {
+        await this.beforeNext(fromStep);
+        this.$emit('error', []);
+      } catch (err) {
+        this.$emit('error', exceptionToErrorsArray(err));
+        throw err;
+      }
+    },
+
+    async handleNext(nextFn, activeStep) {
+      if (!this.beforeNext) {
+        nextFn();
+
+        return;
+      }
+
+      this.nextValidating = true;
+
+      try {
+        await this.beforeNext(activeStep);
+        this.$emit('error', []);
+        nextFn();
+      } catch (err) {
+        this.$emit('error', exceptionToErrorsArray(err));
+      } finally {
+        this.nextValidating = false;
+      }
+    },
+
     formatError(err) {
       if ( typeof err === 'string') {
         return err;
@@ -532,13 +633,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 +674,7 @@ export default {
     </p>
     <component
       :is="(isView? 'div' : 'form')"
+
       :value="resource"
       data-testid="cru-form"
       class="create-resource-container cru__form"
@@ -672,6 +799,7 @@ export default {
             :edit-first-step="stepsOptions.editFirstStep"
             :errors="errors"
             :finish-mode="finishMode"
+            :before-go-to-step="wizardBeforeGoToStep"
             class="wizard"
             @error="e=>errors = e"
           >
@@ -755,10 +883,10 @@ export default {
                     name="next"
                   >
                     <button
-                      :disabled="!canNext"
+                      :disabled="!canNext || nextValidating"
                       type="button"
                       class="btn role-primary"
-                      @click="next()"
+                      @click="handleNext(next, activeStep)"
                     >
                       <t k="wizard.next" />
                     </button>
@@ -771,15 +899,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 +1048,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 +1078,6 @@ export default {
   }
 }
 
-$logo: 60px;
-$logo-space: 100px;
-
 .title {
   margin-top: 20px;
 
@@ -992,10 +1130,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 +1179,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/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],
 
@@ -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;
           }