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

package/components/templates/default.vue

@@ -9,7 +9,6 @@ import ActionMenu from '@shell/components/ActionMenu';
 import GrowlManager from '@shell/components/GrowlManager';
 import ModalManager from '@shell/components/ModalManager';
 import SlideInPanelManager from '@shell/components/SlideInPanelManager';
-import WindowManager from '@shell/components/nav/WindowManager';
 import PromptRemove from '@shell/components/PromptRemove';
 import PromptRestore from '@shell/components/PromptRestore';
 import PromptModal from '@shell/components/PromptModal';
@@ -39,7 +38,6 @@ export default {
     GrowlManager,
     ModalManager,
     SlideInPanelManager,
-    WindowManager,
     FixedBanner,
     AwsComplianceBanner,
     Inactivity,
@@ -48,10 +46,11 @@ export default {
 
   mixins: [PageHeaderActions, Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   // Note - This will not run on route change
   data() {
     return {
-      layout:           Layout.default,
       noLocaleShortcut: process.env.dev || false,
       wantNavSync:      false,
     };
@@ -104,6 +103,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.default);
+  },
+
   methods: {
 
     handlePageAction(action) {
@@ -159,6 +162,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <AwsComplianceBanner v-if="managementReady" />
     <div
@@ -173,8 +180,10 @@ export default {
       />
       <main
         v-if="clusterAndRouteReady"
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.default')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
@@ -211,15 +220,22 @@ export default {
       <!-- Ensure there's an outlet to show the error (404) page -->
       <main
         v-else-if="unmatchedRoute"
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.default')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-default"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -227,3 +243,17 @@ export default {
     <Inactivity />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.skip-to-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  transform: translateY(-100%);
+
+  &:focus {
+    transform: translate(1rem, 1rem);
+  }
+}
+</style>

package/components/templates/home.vue

@@ -11,7 +11,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapState, mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -25,14 +24,14 @@ export default {
     AwsComplianceBanner,
     Inactivity,
     PromptModal,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
-      layout:           Layout.home,
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
       noLocaleShortcut: process.env.dev || false,
@@ -45,6 +44,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.home);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -59,6 +62,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />
@@ -74,15 +81,22 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.home')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
           class="outlet"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-home"
+        style="display: contents;"
+      />
     </div>
     <FixedBanner :footer="true" />
     <GrowlManager />
@@ -125,27 +139,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vr {
-    grid-area: wm-vr;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vl {
-    grid-area: wm-vl;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;
@@ -155,4 +148,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

package/components/templates/plain.vue

@@ -14,7 +14,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -31,17 +30,17 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
-      noLocaleShortcut: process.env.dev || false,
-      layout:           Layout.plain,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
@@ -50,6 +49,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.plain);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -63,6 +66,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 
@@ -72,8 +79,10 @@ export default {
     >
       <Header :simple="true" />
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.plain')"
+        tabindex="-1"
       >
         <IndentedPanel class="pt-20">
           <router-view
@@ -98,7 +107,12 @@ export default {
           @shortkey="toggleNoneLocale()"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-plain"
+        style="display: contents;"
+      />
     </div>
 
     <FixedBanner :footer="true" />
@@ -130,27 +144,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vr {
-    grid-area: wm-vr;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vl {
-    grid-area: wm-vl;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;
@@ -160,4 +153,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

package/components/templates/standalone.vue

@@ -1,3 +1,9 @@
+<script>
+import Brand from '@shell/mixins/brand';
+
+export default { mixins: [Brand] };
+</script>
+
 <template>
   <router-view :key="$route.path" />
 </template>
@@ -5,5 +11,16 @@
 <style lang="scss">
 body, #__root, #__layout {
   height: 100%;
+  background: var(--body-bg);
+  color: var(--body-text);
+}
+
+// Standalone pages should not reserve dashboard layout areas (e.g. side nav and header).
+#__layout {
+  --header-height: 0px;
+  --nav-width: 0px;
+  --wm-vl-width: 0px;
+  --wm-vr-width: 0px;
+  --wm-height: 0px;
 }
 </style>

package/composables/useFormValidation.ts

@@ -0,0 +1,93 @@
+import { computed, provide, ref } from 'vue';
+import { useForm } from 'vee-validate';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
+import type { Validator } from '@shell/utils/validators/formRules/index';
+import type { Translation } from '@shell/types/t';
+
+export interface RuleSet {
+  path: string;
+  rules: string[];
+  translationKey?: string;
+}
+
+const nullValidator: Validator = () => undefined;
+
+function createRuleResolver(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator>
+) {
+  return (path: string): Validator[] => {
+    const set = ruleSets.find((s) => s.path === path);
+
+    if (!set) return [];
+
+    const key = set.translationKey ? t(set.translationKey) : 'Value';
+    const allRules = {
+      ...formRulesGenerator(t, { key }),
+      ...extraRules,
+    };
+
+    return set.rules.map((r) => {
+      const rule = allRules[r] as Validator | undefined;
+
+      if (rule) {
+        return rule;
+      }
+
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(`[useFormValidation] Unknown validation rule: "${ r }". Check for a typo in your ruleSets.`);
+      }
+
+      return nullValidator;
+    });
+  };
+}
+
+/**
+ * For root/parent form components. Creates a vee-validate form context and
+ * resolves fvFormRuleSets-style rule string arrays into validator functions.
+ * Child components rendered within this form should use useFormRules instead.
+ */
+export function useFormValidation(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator> = {}
+) {
+  const { errors, validate } = useForm();
+  const showAllErrors = ref(false);
+
+  provide('vee-show-all-errors', showAllErrors);
+
+  const getRules = createRuleResolver(t, ruleSets, extraRules);
+  const isFormValid = computed(() => Object.keys(errors.value).length === 0);
+
+  const validateForm: typeof validate = async(...args) => {
+    const result = await validate(...args);
+
+    showAllErrors.value = true;
+
+    return result;
+  };
+
+  return {
+    getRules,
+    isFormValid,
+    validateForm,
+    veeErrors: errors,
+    showAllErrors,
+  };
+}
+
+/**
+ * For child components that render inside a parent useFormValidation() form.
+ * Resolves rule strings into validator functions without creating a new form
+ * context — fields register with the nearest ancestor's useFormValidation() context.
+ */
+export function useFormRules(
+  t: Translation,
+  ruleSets: RuleSet[],
+  extraRules: Record<string, Validator> = {}
+) {
+  return { getRules: createRuleResolver(t, ruleSets, extraRules) };
+}

package/composables/useLabeledFormElement.ts

@@ -6,7 +6,7 @@ import { _VIEW, _EDIT } from '@shell/config/query-params';
 
 interface LabeledFormElementProps {
   mode: string;
-  value: string | number | Record<string, any>
+  value: string | number | Record<string, any> | null
   required: boolean;
   disabled: boolean;
   rules: Array<any>;
@@ -18,6 +18,8 @@ interface UseLabeledFormElement {
   focused: Ref<boolean>;
   blurred: Ref<number | null>;
   requiredField: ComputedRef<any>;
+  empty: ComputedRef<boolean>;
+  isView: ComputedRef<boolean>;
   isDisabled: ComputedRef<any>;
   validationMessage: ComputedRef<any>;
   onFocusLabeled: () => void;
@@ -46,7 +48,7 @@ export const labeledFormElementProps = {
     default: null
   },
   value: {
-    type:    [String, Number, Object],
+    type:    [String, Number, Object, null],
     default: ''
   },
   mode: {
@@ -82,6 +84,10 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     return props.required || props.rules?.some((rule: any) => rule?.name === 'required');
   });
 
+  const empty = computed(() => {
+    return !!`${ props.value }`;
+  });
+
   const isView = computed(() => {
     return props.mode === _VIEW;
   });
@@ -143,6 +149,8 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     raised,
     focused,
     blurred,
+    empty,
+    isView,
     onFocusLabeled,
     onBlurLabeled,
     isDisabled,

package/composables/useLabeledSelect.ts

@@ -0,0 +1,60 @@
+import { computed, ComputedRef, Ref, nextTick } from 'vue';
+import { getWidth, setWidth } from '@shell/utils/width';
+
+interface LabeledSelectProps {
+  options?: Array<any>;
+  searchable?: boolean;
+  filterable?: boolean;
+}
+
+interface UseLabeledSelect {
+  isSearchable: ComputedRef<boolean>;
+  isFilterable: ComputedRef<boolean>;
+  resizeHandler: (selectRef: Ref<HTMLElement | null>) => void;
+}
+
+export const useLabeledSelect = (props: LabeledSelectProps, canPaginate?: ComputedRef<boolean>): UseLabeledSelect => {
+  const isSearchable = computed(() => {
+    if (canPaginate?.value) {
+      return true;
+    }
+    const options = props.options || [];
+
+    if (props.searchable || options.length >= 10) {
+      return true;
+    }
+
+    return false;
+  });
+
+  const isFilterable = computed(() => {
+    if (canPaginate?.value) {
+      return false;
+    }
+
+    return props.filterable ?? true;
+  });
+
+  const resizeHandler = (selectRef: Ref<HTMLElement | null>) => {
+    // since the DD is positioned there is no way to 'inherit' the size of the input, this calcs the size of the parent and set the dd width if it is smaller. If not let it grow with the regular styles
+    nextTick(() => {
+      if (!selectRef.value) {
+        return;
+      }
+
+      const DD = selectRef.value.querySelector('ul.vs__dropdown-menu');
+      const selectWidth = getWidth(selectRef.value) || 0;
+      const dropWidth = getWidth(DD as Element) || 0;
+
+      if (dropWidth < selectWidth) {
+        setWidth(DD as Element, selectWidth);
+      }
+    });
+  };
+
+  return {
+    isSearchable,
+    isFilterable,
+    resizeHandler
+  };
+};

package/composables/useUserRetentionValidation.ts

@@ -1,4 +1,4 @@
-import { Ref, ComputedRef, ref, computed } from 'vue';
+import { Ref } from 'vue';
 import { useStore } from 'vuex';
 
 import { SETTING } from '@shell/config/settings';
@@ -10,24 +10,12 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 dayjs.extend(duration);
 
-type SettingValidation = 'user-retention-cron' | 'disable-inactive-user-after' | 'delete-inactive-user-after';
-
-type Validation = {
-  [SETTING.DISABLE_INACTIVE_USER_AFTER]?: boolean;
-  [SETTING.DELETE_INACTIVE_USER_AFTER]?: boolean;
-  [SETTING.USER_RETENTION_CRON]?: boolean;
-}
-
 interface UseUserRetentionValidation {
   validateUserRetentionCron: (cronSetting: string | null) => string | undefined;
   validateDisableInactiveUserAfterDuration: (duration: string) => string | undefined;
   validateDeleteInactiveUserAfterDuration: (duration: string) => string | undefined;
   validateDeleteInactiveUserAfter: (duration: string) => string | undefined;
   validateDurationAgainstAuthUserSession: (duration: string) => string | undefined;
-  setValidation: (formField: SettingValidation, isValid: boolean) => void;
-  removeValidation : (setting: SettingValidation) => void;
-  addValidation: (setting: SettingValidation) => void;
-  isFormValid: ComputedRef<boolean>;
 }
 
 class ExpectedValidationError extends Error {
@@ -42,38 +30,6 @@ export const useUserRetentionValidation = (disableAfterPeriod: Ref<boolean>, del
   const store = useStore();
   const { t } = useI18n(store);
 
-  /**
-   * Tracks the validation state for user retention fields
-   */
-  const validation = ref<Validation>({
-    [SETTING.DISABLE_INACTIVE_USER_AFTER]: true,
-    [SETTING.DELETE_INACTIVE_USER_AFTER]:  true,
-    [SETTING.USER_RETENTION_CRON]:         true,
-  });
-
-  const isFormValid = computed(() => {
-    const validations = validation.value;
-
-    return !Object.values(validations).includes(false);
-  });
-
-  const setValidation = (formField: SettingValidation, isValid: boolean) => {
-    validation.value[formField] = isValid;
-  };
-
-  const removeValidation = (setting: SettingValidation) => {
-    const { [setting]: _, ...rest } = validation.value;
-
-    validation.value = rest;
-  };
-
-  const addValidation = (setting: SettingValidation) => {
-    validation.value = {
-      ...validation.value,
-      [setting]: true,
-    };
-  };
-
   /**
    * Takes a duration string and produces a dayjs duration object.
    * @param duration Duration string in {h|m|s} (e.g. 6h3m2s)
@@ -193,9 +149,5 @@ export const useUserRetentionValidation = (disableAfterPeriod: Ref<boolean>, del
     validateDeleteInactiveUserAfterDuration,
     validateDeleteInactiveUserAfter,
     validateDurationAgainstAuthUserSession,
-    setValidation,
-    removeValidation,
-    addValidation,
-    isFormValid,
   };
 };