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>

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",

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'
-]

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
     ]);
   },
 

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));
   }
 

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) {

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",

shell/plugins/transitions.js

@@ -1,4 +0,0 @@
-import Vue from 'vue';
-import Transitions from 'vue2-transitions';
-
-Vue.use(Transitions);

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"