remove page transitions from Dashboard (#10126)

* remove page transitions from Dashboard * fix lint errors * rename component rendered + fix issue where navigating from workloads to pods list view wasn't adjusting scroll * rebase fixes * address pr comments --------- Co-authored-by: Alexandre Alves <aalves@Alexandres-MacBook-Pro.local>
2023-12-15 16:45:09 +00:00 · 2023-12-15 16:45:09 +00:00 · aa76d2d46c
parent 0292e1182d
commit aa76d2d46c
8 changed files with 5 additions and 170 deletions
--- a/package.json
+++ b/package.json
@ -116,7 +116,6 @@
    "vue-server-renderer": "2.6.14",
    "vue-shortkey": "3.1.7",
    "vue-virtual-scroll-list": "^2.3.4",
-    "vue2-transitions": "0.3.0",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.2",
    "xterm": "5.0.0",
--- a/shell/components/nuxt/nuxt-child.js
+++ b/shell/components/nuxt/nuxt-child.js
@ -18,10 +18,8 @@ export default {

    data.nuxtChild = true
    const _parent = parent
-    const transitions = parent.$nuxt.nuxt.transitions
-    const defaultTransition = parent.$nuxt.nuxt.defaultTransition
-
    let depth = 0
+
    while (parent) {
      if (parent.$vnode && parent.$vnode.data.nuxtChild) {
        depth++
@ -29,20 +27,8 @@ export default {
      parent = parent.$parent
    }
    data.nuxtChildDepth = depth
-    const transition = transitions[depth] || defaultTransition
-    const transitionProps = {}
-    transitionsKeys.forEach((key) => {
-      if (typeof transition[key] !== 'undefined') {
-        transitionProps[key] = transition[key]
-      }
-    })

    const listeners = {}
-    listenersKeys.forEach((key) => {
-      if (typeof transition[key] === 'function') {
-        listeners[key] = transition[key].bind(_parent)
-      }
-    })
    
    // Add triggerScroll event on beforeEnter (fix #1376)
    const beforeEnter = listeners.beforeEnter
@ -56,66 +42,17 @@ export default {
      }
    }

-    // make sure that leave is called asynchronous (fix #5703)
-    if (transition.css === false) {
-      const leave = listeners.leave
-
-      // only add leave listener when user didnt provide one
-      // or when it misses the done argument
-      if (!leave || leave.length < 2) {
-        listeners.leave = (el, done) => {
-          if (leave) {
-            leave.call(_parent, el)
-          }
-
-          _parent.$nextTick(done)
-        }
-      }
-    }
-
    let routerView = h('routerView', data)

    if (props.keepAlive) {
      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
    }

+    // this needs to be a "transition" or another non-rendering component, 
+    // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
+    // we can deal with this later once we remove this component and <nuxt /> component
    return h('transition', {
-      props: transitionProps,
      on: listeners
    }, [routerView])
  }
 }
-
-const transitionsKeys = [
-  'name',
-  'mode',
-  'appear',
-  'css',
-  'type',
-  'duration',
-  'enterClass',
-  'leaveClass',
-  'appearClass',
-  'enterActiveClass',
-  'enterActiveClass',
-  'leaveActiveClass',
-  'appearActiveClass',
-  'enterToClass',
-  'leaveToClass',
-  'appearToClass'
-]
-
-const listenersKeys = [
-  'beforeEnter',
-  'enter',
-  'afterEnter',
-  'enterCancelled',
-  'beforeLeave',
-  'leave',
-  'afterLeave',
-  'leaveCancelled',
-  'beforeAppear',
-  'appear',
-  'afterAppear',
-  'appearCancelled'
-]
--- a/shell/initialize/App.js
+++ b/shell/initialize/App.js
@ -21,25 +21,10 @@ export default {
      key:      this.layoutName
    }, [layoutEl]);

-    const transitionEl = h('transition', {
-      props: {
-        name: 'layout',
-        mode: 'out-in'
-      },
-      on: {
-        beforeEnter(el) {
-          // Ensure to trigger scroll event after calling scrollBehavior
-          window.$nuxt.$nextTick(() => {
-            window.$nuxt.$emit('triggerScroll');
-          });
-        }
-      }
-    }, [templateEl]);
-
    return h('div', { domProps: { id: '__nuxt' } }, [
      loadingEl,
      // h(NuxtBuildIndicator), // The build indicator doesn't work as is right now and emits an error in the console so I'm leaving it out for now
-      transitionEl
+      templateEl
    ]);
  },

--- a/shell/initialize/client.js
+++ b/shell/initialize/client.js
@ -128,49 +128,6 @@ const errorHandler = Vue.config.errorHandler || console.error; // eslint-disable
 // Create and mount App
 createApp(nuxt.publicRuntimeConfig).then(mountApp).catch(errorHandler); // eslint-disable-line no-undef

-function componentOption(component, key, ...args) {
-  if (!component || !component.options || !component.options[key]) {
-    return {};
-  }
-  const option = component.options[key];
-
-  if (typeof option === 'function') {
-    return option(...args);
-  }
-
-  return option;
-}
-
-function mapTransitions(toComponents, to, from) {
-  const componentTransitions = (component) => {
-    const transition = componentOption(component, 'transition', to, from) || {};
-
-    return (typeof transition === 'string' ? { name: transition } : transition);
-  };
-
-  const fromComponents = from ? getMatchedComponents(from) : [];
-  const maxDepth = Math.max(toComponents.length, fromComponents.length);
-
-  const mergedTransitions = [];
-
-  for (let i = 0; i < maxDepth; i++) {
-    // Clone original objects to prevent overrides
-    const toTransitions = Object.assign({}, componentTransitions(toComponents[i]));
-    const transitions = Object.assign({}, componentTransitions(fromComponents[i]));
-
-    // Combine transitions & prefer `leave` properties of "from" route
-    Object.keys(toTransitions)
-      .filter((key) => typeof toTransitions[key] !== 'undefined' && !key.toLowerCase().includes('leave'))
-      .forEach((key) => {
-        transitions[key] = toTransitions[key];
-      });
-
-    mergedTransitions.push(transitions);
-  }
-
-  return mergedTransitions;
-}
-
 async function loadAsyncComponents(to, from, next) {
  // Check if route changed (this._routeChanged), only if the page is not an error (for validate())
  this._routeChanged = Boolean(app.nuxt.err) || from.name !== to.name;
@ -364,9 +321,6 @@ async function render(to, from, next) {
    }
  });

-  // Apply transitions
-  this.setTransitions(mapTransitions(Components, to, from));
-
  try {
    // Call middleware
    await callMiddleware.call(this, Components, app.context);
@ -805,10 +759,7 @@ async function mountApp(__app) {
  // Resolve route components
  const Components = await Promise.all(resolveComponents(app.context.route));

-  // Enable transitions
-  _app.setTransitions = _app.$options.nuxt.setTransitions.bind(_app);
  if (Components.length) {
-    _app.setTransitions(mapTransitions(Components, router.currentRoute));
    _lastPaths = router.currentRoute.matched.map((route) => compile(route.path)(router.currentRoute.params));
  }

--- a/shell/initialize/index.js
+++ b/shell/initialize/index.js
@ -20,7 +20,6 @@ import pluginsLoader from '../core/plugins-loader.js';
 import axiosShell from '../plugins/axios';
 import '../plugins/tooltip';
 import '../plugins/v-select';
-import '../plugins/transitions';
 import '../plugins/vue-js-modal';
 import '../plugins/js-yaml';
 import '../plugins/resize';
@ -86,10 +85,6 @@ Object.defineProperty(Vue.prototype, '$nuxt', {
  configurable: true
 });

-const defaultTransition = {
-  name: 'page', mode: 'out-in', appear: true, appearClass: 'appear', appearActiveClass: 'appear-active', appearToClass: 'appear-to'
-};
-
 async function createApp(config = {}) {
  const router = await createRouter(config);

@ -106,28 +101,6 @@ async function createApp(config = {}) {
    store,
    router,
    nuxt: {
-      defaultTransition,
-      transitions: [defaultTransition],
-      setTransitions(transitions) {
-        if (!Array.isArray(transitions)) {
-          transitions = [transitions];
-        }
-        transitions = transitions.map((transition) => {
-          if (!transition) {
-            transition = defaultTransition;
-          } else if (typeof transition === 'string') {
-            transition = Object.assign({}, defaultTransition, { name: transition });
-          } else {
-            transition = Object.assign({}, defaultTransition, transition);
-          }
-
-          return transition;
-        });
-        this.$options.nuxt.transitions = transitions;
-
-        return transitions;
-      },
-
      err:     null,
      dateErr: null,
      error(err) {
--- a/shell/package.json
+++ b/shell/package.json
@ -129,7 +129,6 @@
    "vue-shortkey": "3.1.7",
    "vue-template-compiler": "2.7.14",
    "vue-virtual-scroll-list": "^2.3.4",
-    "vue2-transitions": "0.3.0",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.2",
    "webpack-bundle-analyzer": "4.5.0",
--- a/shell/plugins/transitions.js
+++ b/shell/plugins/transitions.js
@ -1,4 +0,0 @@
-import Vue from 'vue';
-import Transitions from 'vue2-transitions';
-
-Vue.use(Transitions);
--- a/yarn.lock
+++ b/yarn.lock
@ -15490,11 +15490,6 @@ vue-virtual-scroll-list@^2.3.4:
  resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.4.tgz#0d08c2d26299d8609018b8c04f5e3ca608fbe2d6"
  integrity sha512-a9bmmIhAdnKcp8NG0C9ZQ+pW9nAOrDv5SHqJfbbEpXxVVERCtbIgGeBnkwrGgmoILBoFz/WANIZgA22G44F0Yw==

-vue2-transitions@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/vue2-transitions/-/vue2-transitions-0.3.0.tgz#765fc0d743103fcfe2d10f431697d8873a075c17"
-  integrity sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w==
-
 vue@2.7.14, vue@^2.0.0, vue@^2.6.10:
  version "2.7.14"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"