Merge pull request rancher#10084 from codyrancher/layout-removal

Layout removal
momesgin · Jan 22, 2024 · e5ace49 · e5ace49
2 parents bd4b393 + 48e1b0b
commit e5ace49
Show file tree

Hide file tree

Showing 49 changed files with 616 additions and 1,336 deletions.
diff --git a/cypress/e2e/tests/navigation/side-nav/product-side-nav.spec.ts b/cypress/e2e/tests/navigation/side-nav/product-side-nav.spec.ts
@@ -51,7 +51,7 @@ describe('Side navigation: Cluster ', { tags: ['@navigation', '@adminUser'] }, (
     productNavPo.groups().not('.expanded').eq(0)
       .as('closedGroup');
     cy.get('@closedGroup').should('be.visible').click();
-    cy.get('@closedGroup').find('.nuxt-link-active').should('have.length.gt', 0);
+    cy.get('@closedGroup').find('.router-link-active').should('have.length.gt', 0);
   });
 
   // TODO: #5966: Verify cause of race condition issue making navigation link not trigger

diff --git a/docusaurus/docs/code-base-works/directory-structure.md b/docusaurus/docs/code-base-works/directory-structure.md
@@ -27,14 +27,6 @@ Components in the dialog folder are used within the `PromptModal` component. Dis
 ## formatters 
 This is not a top-level folder in the shell, which uses `/components/formatter`, but a top-level `formatters` directory works the same way in an extension as the shell `formatter` directory does. Formatters are used to format data within tables. see [Defining Products](./products-and-navigation.md) for more information on configuring resource tables.
 
-## layouts
-Components in this folder are used as layouts in other components. This is an artifact from our Nuxt usage and more details can be read about that in the Nuxt [documentation](https://nuxt.com/docs/guide/directory-structure/layouts).
-
-The existing layouts available can be found [here](https://github.com/rancher/dashboard/tree/master/shell/layouts).
-
-### Overlapping Layout Names
-If an extension uses the same name as an existing layout the extension's layout will override the shell's layout. We discourage overlapping layout names as it may introduce side effects and bugs. We may completely prevent it from happening in the future. 
-
 ## machine-config**
 Machine configs are used to add provider-specific UI to the rke2/k3s provisioning page. Read more about provisioning [here](./machine-drivers.md)
 

diff --git a/shell/assets/styles/global/_layout.scss b/shell/assets/styles/global/_layout.scss
@@ -54,3 +54,102 @@ HEADER {
   background-color: var(--nav-bg);
   height: var(--footer-height);
 }
+
+
+// !BEGIN This was all a part of default.vue but it wasn't scoped which meant it applied to all styles. Without layouts this style was being lazy loaded instead of on initial load. This was styling other layouts especially plain.vue.
+.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;
+}
+
+// !END
diff --git a/shell/components/SideNav.vue b/shell/components/SideNav.vue
@@ -583,7 +583,7 @@ export default {
         }
       }
 
-      &.nuxt-link-active:not(:hover) {
+      &.router-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

diff --git a/shell/components/nav/Group.vue b/shell/components/nav/Group.vue
@@ -390,8 +390,8 @@ export default {
     }
   }
 
-  .body ::v-deep > .child.nuxt-link-active,
-  .header ::v-deep > .child.nuxt-link-exact-active {
+  .body ::v-deep > .child.router-link-active,
+  .header ::v-deep > .child.router-link-exact-active {
     padding: 0;
 
     A, A I {

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
@@ -441,7 +441,6 @@ export default {
 
     <div class="rd-header-right">
       <component :is="navHeaderRight" />
-
       <div
         v-if="showFilter"
         class="top"

diff --git a/shell/components/nav/TopLevelMenu.vue b/shell/components/nav/TopLevelMenu.vue
@@ -892,7 +892,7 @@ export default {
           margin-right: 16px;
         }
 
-        &.nuxt-link-active, &.active-menu-link {
+        &.router-link-active, &.active-menu-link {
           background: var(--primary-hover-bg);
           color: var(--primary-hover-text);
 
@@ -1016,7 +1016,7 @@ export default {
               font-size: 14px;
             }
 
-            .nuxt-link-active {
+            .router-link-active {
               &:hover {
                 text-decoration: none;
               }

diff --git a/shell/components/nav/Type.vue b/shell/components/nav/Type.vue
@@ -1,7 +1,6 @@
 <script>
 import Favorite from '@shell/components/nav/Favorite';
 import { FAVORITE, USED } from '@shell/store/type-map';
-import { linkActiveClass } from '@shell/config/router';
 
 const showFavoritesFor = [FAVORITE, USED];
 
@@ -31,7 +30,6 @@ export default {
       near:     false,
       over:     false,
       menuPath: this.type.route ? this.$router.resolve(this.type.route)?.route?.path : undefined,
-      linkActiveClass
     };
   },
 
@@ -134,7 +132,7 @@ export default {
     :to="type.route"
     tag="li"
     class="child nav-type"
-    :class="{'root': isRoot, [`depth-${depth}`]: true, [linkActiveClass]: isCurrent}"
+    :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isCurrent}"
     :exact="type.exact"
   >
     <a

diff --git a/shell/components/nav/__tests__/Type.test.ts b/shell/components/nav/__tests__/Type.test.ts
@@ -5,7 +5,7 @@ import Type from '@shell/components/nav/Type.vue';
 jest.mock('vue-router');
 
 // Configuration text
-const className = 'nuxt-link-active';
+const className = 'router-link-active';
 
 describe('component: Type', () => {
   describe('should not use highlight class', () => {

diff --git a/shell/components/nuxt/nuxt.js b/shell/components/nuxt/nuxt.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { compile } from '../../utils/nuxt'
 
-import NuxtError from '../../layouts/error.vue'
+import NuxtError from '../../components/templates/error.vue'
 
 import NuxtChild from './nuxt-child'
 

diff --git a/shell/layouts/blank.vue → shell/components/templates/blank.vue b/shell/layouts/blank.vue → shell/components/templates/blank.vue
@@ -11,7 +11,7 @@ export default {
 
 <template>
   <main class="main-layout">
-    <nuxt />
+    <router-view :key="$route.path" />
 
     <Inactivity />
   </main>

diff --git a/shell/layouts/default.vue → shell/components/templates/default.vue b/shell/layouts/default.vue → shell/components/templates/default.vue
@@ -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>
diff --git a/shell/layouts/error.vue → shell/components/templates/error.vue b/shell/layouts/error.vue → shell/components/templates/error.vue
@@ -5,18 +5,15 @@ export default {
   name:       'NuxtError',
   mixins:     [Brand],
   middleware: ['unauthenticated'],
-  props:      {
-    error: {
-      type:    Object,
-      default: null
-    }
-  },
 
   data() {
     return { ready: false };
   },
 
   computed: {
+    error() {
+      return window.$nuxt.nuxt.err || {};
+    },
     statusCode() {
       return (this.error && this.error.statusCode) || 599;
     },
@@ -106,7 +103,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;

diff --git a/shell/layouts/home.vue → shell/components/templates/home.vue b/shell/layouts/home.vue → shell/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" />