@rancher/shell 1.2.0 → 2.0.0

package/components/nuxt/nuxt-link.client.js

@@ -1,98 +1,16 @@
-import Vue from 'vue'
-
-const requestIdleCallback = window.requestIdleCallback ||
-  function (cb) {
-    const start = Date.now()
-    return setTimeout(function () {
-      cb({
-        didTimeout: false,
-        timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-      })
-    }, 1)
-  }
-
-const cancelIdleCallback = window.cancelIdleCallback || function (id) {
-  clearTimeout(id)
-}
-
-const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => {
-  entries.forEach(({ intersectionRatio, target: link }) => {
-    if (intersectionRatio <= 0 || !link.__prefetch) {
-      return
-    }
-    link.__prefetch()
-  })
-})
-
-export default {
-  name: 'NuxtLink',
-  extends: Vue.component('RouterLink'),
-  props: {
-    prefetch: {
-      type: Boolean,
-      default: false
-    },
-    noPrefetch: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted () {
-    if (this.prefetch && !this.noPrefetch) {
-      this.handleId = requestIdleCallback(this.observe, { timeout: 2e3 })
-    }
-  },
-  beforeDestroy () {
-    cancelIdleCallback(this.handleId)
-
-    if (this.__observed) {
-      observer.unobserve(this.$el)
-      delete this.$el.__prefetch
-    }
-  },
-  methods: {
-    observe () {
-      // If no IntersectionObserver, avoid prefetching
-      if (!observer) {
-        return
-      }
-      // Add to observer
-      if (this.shouldPrefetch()) {
-        this.$el.__prefetch = this.prefetchLink.bind(this)
-        observer.observe(this.$el)
-        this.__observed = true
-      }
-    },
-    shouldPrefetch () {
-      return this.getPrefetchComponents().length > 0
-    },
-    canPrefetch () {
-      const conn = navigator.connection
-      const hasBadConnection = this.$nuxt.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
-
-      return !hasBadConnection
-    },
-    getPrefetchComponents () {
-      const ref = this.$router.resolve(this.to, this.$route, this.append)
-      const Components = ref.resolved.matched.map(r => r.components.default)
-
-      return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
-    },
-    prefetchLink () {
-      if (!this.canPrefetch()) {
-        return
-      }
-      // Stop observing this link (in case of internet connection changes)
-      observer.unobserve(this.$el)
-      const Components = this.getPrefetchComponents()
-
-      for (const Component of Components) {
-        const componentOrPromise = Component()
-        if (componentOrPromise instanceof Promise) {
-          componentOrPromise.catch(() => {})
-        }
-        Component.__prefetched = true
-      }
+// TODO: #9541 Remove for Vue 3 migration
+/**
+ * Prints a deprecation warning for any extensions that might be using NuxtLink
+ * @param {string} aliasName The alias that will print the deprecation warning
+ * @returns Functional component that prints a deprecation warning and renders a
+ * `router-link` instead
+ */
+export const nuxtLinkAlias = (aliasName) => {
+  return {
+    functional: true,
+    render(createElement, context) {
+      console.warn(`${aliasName} is deprecated in Rancher Dashboard. Use 'router-link' instead.`);
+      return createElement('router-link', context.data, context.children);
     }
   }
 }

package/{layouts → components/templates}/blank.vue

@@ -11,7 +11,7 @@ export default {
 
 <template>
   <main class="main-layout">
-    <nuxt />
+    <router-view :key="$route.path" />
 
     <Inactivity />
   </main>

package/{layouts → components/templates}/default.vue

@@ -24,7 +24,7 @@ import isEqual from 'lodash/isEqual';
 import { markSeenReleaseNotes } from '@shell/utils/version';
 import PageHeaderActions from '@shell/mixins/page-actions';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
-import { getClusterFromRoute, getProductFromRoute } from '@shell/middleware/authenticated';
+import { getClusterFromRoute, getProductFromRoute } from '@shell/utils/router';
 import { BOTTOM } from '@shell/utils/position';
 import SideNav from '@shell/components/SideNav';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
@@ -70,7 +70,7 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['clusterId', 'currentProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
+    ...mapGetters(['clusterId', 'currentProduct', 'rootProduct', 'isRancherInHarvester', 'showTopLevelMenu']),
 
     afterLoginRoute: mapPref(AFTER_LOGIN_ROUTE),
 
@@ -78,7 +78,7 @@ export default {
 
     pageActions() {
       const pageActions = [];
-      const product = this.currentProduct;
+      const product = this.rootProduct;
 
       if ( !product ) {
         return [];
@@ -248,7 +248,10 @@ export default {
         v-if="clusterAndRouteReady"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
         <ActionMenu />
         <PromptRemove />
         <PromptRestore />
@@ -282,7 +285,10 @@ export default {
         v-else-if="unmatchedRoute"
         class="main-layout"
       >
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
       <div
         v-if="$refs.draggableZone"
@@ -304,99 +310,3 @@ export default {
     <DraggableZone ref="draggableZone" />
   </div>
 </template>
-<style lang="scss">
-  .dashboard-root {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .dashboard-content {
-    display: grid;
-    position: relative;
-    flex: 1 1 auto;
-    overflow-y: auto;
-    min-height: 0px;
-
-    &.dashboard-padding-left {
-    padding-left: $app-bar-collapsed-width;
-
-      .overlay-content-mode {
-        left: calc(var(--nav-width) + $app-bar-collapsed-width);
-      }
-   }
-
-    &.pin-right {
-      grid-template-areas:
-        "header  header  header"
-        "nav      main     wm";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--nav-width)     auto var(--wm-width, 0px);
-    }
-
-    &.pin-bottom {
-      grid-template-areas:
-        "header  header"
-        "nav       main"
-        "wm         wm";
-      grid-template-rows:    var(--header-height) auto  var(--wm-height, 0px);
-      grid-template-columns: var(--nav-width)     auto;
-    }
-
-    &.pin-left {
-      grid-template-areas:
-        "header  header  header"
-        "wm       nav     main";
-      grid-template-rows:    var(--header-height) auto;
-      grid-template-columns: var(--wm-width, 0px) var(--nav-width) auto;
-    }
-
-    > HEADER {
-      grid-area: header;
-    }
-
-    .default-side-nav {
-      grid-area: nav;
-    }
-  }
-
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: 1;
-  }
-
-  .localeSelector {
-    ::v-deep .popover-inner {
-      padding: 50px 0;
-    }
-
-    ::v-deep .popover-arrow {
-      display: none;
-    }
-
-    ::v-deep .popover:focus {
-      outline: 0;
-    }
-
-    li {
-      padding: 8px 20px;
-
-      &:hover {
-        background-color: var(--primary-hover-bg);
-        color: var(--primary-hover-text);
-        text-decoration: none;
-      }
-    }
-  }
-
-  .drag-start {
-    z-index: 1000;
-    opacity: 0.5;
-    transition: opacity .3s ease;
-  }
-
-  .drag-end {
-    opacity: 1;
-  }
-</style>

package/{layouts → components/templates}/error.vue

@@ -2,15 +2,8 @@
 import Brand from '@shell/mixins/brand';
 
 export default {
-  name:       'NuxtError',
-  mixins:     [Brand],
-  middleware: ['unauthenticated'],
-  props:      {
-    error: {
-      type:    Object,
-      default: null
-    }
-  },
+  name:   'NuxtError',
+  mixins: [Brand],
 
   data() {
     return { ready: false };
@@ -18,10 +11,15 @@ export default {
 
   computed: {
     statusCode() {
-      return (this.error && this.error.statusCode) || 599;
+      return 599;
     },
     message() {
-      return this.error.message || '';
+      return '';
+    }
+  },
+  watch: {
+    message(neu) {
+      document.title = neu;
     }
   },
 
@@ -40,19 +38,8 @@ export default {
     setTimeout(() => {
       this.ready = true;
     }, 1000);
+    document.title = this.message;
   },
-
-  head() {
-    return {
-      title: this.message,
-      meta:  [
-        {
-          name:    'viewport',
-          content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0'
-        }
-      ]
-    };
-  }
 };
 </script>
 
@@ -85,13 +72,13 @@ export default {
           class="error-link"
           href="/"
         >Back to Home</a>
-        <n-link
+        <router-link
           v-else
           class="error-link"
           to="/"
         >
           Back to Home
-        </n-link>
+        </router-link>
       </p>
     </div>
   </div>
@@ -112,7 +99,7 @@ export default {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

package/{layouts → components/templates}/home.vue

@@ -68,7 +68,10 @@ export default {
       />
 
       <main class="main-layout">
-        <nuxt class="outlet" />
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
       </main>
     </div>
     <FixedBanner :footer="true" />

package/{layouts → components/templates}/plain.vue

@@ -70,7 +70,10 @@ export default {
       <Header :simple="true" />
       <main class="main-layout">
         <IndentedPanel class="pt-20">
-          <nuxt class="outlet" />
+          <router-view
+            :key="$route.path"
+            class="outlet"
+          />
         </IndentedPanel>
         <ActionMenu />
         <PromptRemove />

package/{layouts → components/templates}/standalone.vue

@@ -1,9 +1,5 @@
-<script>
-export default { middleware: ['unauthenticated'] };
-</script>
-
 <template>
-  <nuxt />
+  <router-view :key="$route.path" />
 </template>
 
 <style lang="scss">

package/{layouts → components/templates}/unauthenticated.vue

@@ -4,8 +4,7 @@ import FixedBanner from '@shell/components/FixedBanner';
 
 export default {
   mixins:     [Brand],
-  components: { FixedBanner },
-  middleware: ['unauthenticated'],
+  components: { FixedBanner }
 };
 </script>
 
@@ -14,7 +13,7 @@ export default {
     <div class="dashboard-root">
       <FixedBanner :header="true" />
       <FixedBanner :consent="true" />
-      <nuxt />
+      <router-view :key="$route.path" />
       <FixedBanner :footer="true" />
     </div>
   </main>

package/composables/useCompactInput.test.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { useCompactInput } from './useCompactInput';
+
+describe('useCompactInput', () => {
+  it('should compute isCompact correctly when compact is explicitly set', () => {
+    const props = ref({
+      compact:  true,
+      label:    'Test Label',
+      labelKey: 'testLabel',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    expect(isCompact.value).toBe(true);
+
+    // When compact is explicitly set to false, isCompact should be false
+    props.value.compact = false;
+    expect(isCompact.value).toBe(false);
+  });
+
+  it('should compute isCompact correctly when compact is not explicitly set', () => {
+    const props = ref({
+      label:    '',
+      labelKey: '',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    // When there is no label and labelKey is also not present, isCompact should be true
+    expect(isCompact.value).toBe(true);
+
+    // When label is present, isCompact should be false
+    props.value.label = 'Updated Label';
+    expect(isCompact.value).toBe(false);
+  });
+});

package/composables/useCompactInput.ts

@@ -0,0 +1,20 @@
+import { computed, ComputedRef } from 'vue';
+
+interface CompactInputProps {
+  compact?: boolean | null;
+  label?: string;
+  labelKey?: string;
+}
+
+interface UseCompactInput {
+  isCompact: ComputedRef<boolean>;
+}
+
+export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
+  const isCompact = computed(() => {
+    // Compact if explicitly set - otherwise compact if there is no label
+    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
+  });
+
+  return { isCompact };
+};

package/composables/useLabeledFormElement.test.ts

@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+import { useLabeledFormElement } from './useLabeledFormElement';
+
+describe('useLabeledFormElement', () => {
+  it('should set raised to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, raised } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(raised.value).toBe(true);
+
+    onBlurLabeled();
+    expect(raised.value).toBe(false);
+  });
+
+  it('should set focused to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, focused } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(focused.value).toBe(true);
+
+    onBlurLabeled();
+    expect(focused.value).toBe(false);
+  });
+
+  it('should set blurred to current timestamp when blurred', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onBlurLabeled, blurred } = useLabeledFormElement(props, emit);
+
+    onBlurLabeled();
+    expect(blurred.value).toBeTruthy();
+  });
+
+  it('should compute isDisabled correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { isDisabled } = useLabeledFormElement(props.value, emit);
+
+    expect(isDisabled.value).toBe(false);
+
+    props.value.disabled = true;
+    expect(isDisabled.value).toBe(true);
+
+    props.value.mode = 'view';
+    expect(isDisabled.value).toBe(true);
+  });
+
+  it('should compute validationMessage correctly for required field', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'This field is required' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('This field is required');
+  });
+
+  it('should compute validationMessage correctly for custom rules', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    'test',
+      required: false,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'Value must be at least 5 characters long' : undefined),
+        (value: string[]) => (value.includes('test') ? 'Value cannot contain the word "test"' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('Value must be at least 5 characters long, Value cannot contain the word "test"');
+  });
+
+  it('should compute requiredField correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { requiredField } = useLabeledFormElement(props.value, emit);
+
+    expect(requiredField.value).toBe(true);
+
+    // When the field is not required, requiredField should be false
+    props.value.required = false;
+    expect(requiredField.value).toBe(false);
+  });
+});