From 48e1b0b3bb93e9996bf14fb5e4a93b28c88149e1 Mon Sep 17 00:00:00 2001 From: Cody Jackson Date: Mon, 30 Oct 2023 12:23:17 -0700 Subject: [PATCH] Layout removal fixes #10059 --- .../side-nav/product-side-nav.spec.ts | 2 +- .../code-base-works/directory-structure.md | 8 - shell/assets/styles/global/_layout.scss | 99 +++ shell/components/SideNav.vue | 2 +- shell/components/nav/Group.vue | 4 +- shell/components/nav/Header.vue | 1 - shell/components/nav/TopLevelMenu.vue | 4 +- shell/components/nav/Type.vue | 4 +- shell/components/nav/__tests__/Type.test.ts | 2 +- shell/components/nuxt/nuxt.js | 2 +- .../templates}/blank.vue | 2 +- .../templates}/default.vue | 106 +-- .../templates}/error.vue | 11 +- .../templates}/home.vue | 5 +- .../templates}/plain.vue | 5 +- .../templates}/standalone.vue | 2 +- .../templates}/unauthenticated.vue | 2 +- shell/config/router.js | 747 +++++++++--------- shell/core/plugin-routes.ts | 170 ++-- shell/core/plugin.ts | 26 +- shell/core/plugins.js | 3 - shell/initialize/App.js | 48 +- shell/initialize/client.js | 115 +-- shell/initialize/index.js | 3 +- shell/initialize/layouts.ts | 26 - shell/pages/about.vue | 1 - shell/pages/account/create-key.vue | 1 - shell/pages/account/index.vue | 1 - shell/pages/auth/login.vue | 1 - shell/pages/auth/logout.vue | 2 - shell/pages/auth/setup.vue | 2 - shell/pages/auth/verify.vue | 2 - shell/pages/c/_cluster/apps/index.vue | 2 - shell/pages/c/_cluster/auth/index.vue | 2 - shell/pages/c/_cluster/ecm/index.vue | 2 - shell/pages/c/_cluster/index.vue | 2 - shell/pages/c/_cluster/settings/banners.vue | 2 - shell/pages/c/_cluster/settings/brand.vue | 2 - shell/pages/c/_cluster/settings/index.vue | 2 - shell/pages/c/_cluster/settings/links.vue | 1 - .../pages/c/_cluster/settings/performance.vue | 1 - shell/pages/c/_cluster/uiplugins/index.vue | 2 - shell/pages/c/index.vue | 9 - shell/pages/diagnostic.vue | 3 +- shell/pages/fail-whale.vue | 1 - shell/pages/prefs.vue | 1 - shell/pages/rio/mesh.vue | 508 ------------ shell/pages/support/index.vue | 1 - shell/pkg/auto-import.js | 2 +- 49 files changed, 616 insertions(+), 1336 deletions(-) rename shell/{layouts => components/templates}/blank.vue (89%) rename shell/{layouts => components/templates}/default.vue (81%) rename shell/{layouts => components/templates}/error.vue (96%) rename shell/{layouts => components/templates}/home.vue (96%) rename shell/{layouts => components/templates}/plain.vue (96%) rename shell/{layouts => components/templates}/standalone.vue (82%) rename shell/{layouts => components/templates}/unauthenticated.vue (92%) delete mode 100644 shell/initialize/layouts.ts delete mode 100644 shell/pages/c/index.vue delete mode 100644 shell/pages/rio/mesh.vue 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 index e8eabe670c4..fbb69f5d86d 100644 --- 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 index bd8b74dbdcc..7375961783b 100644 --- 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 index 9cab64883a6..ec0296b78cd 100644 --- 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 \ No newline at end of file diff --git a/shell/components/SideNav.vue b/shell/components/SideNav.vue index ff0cd6a0abd..838626c1fd2 100644 --- 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 index c33f01cc0b8..b4f2c030ec9 100644 --- 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 index bdb2796e4d7..dc0b00f06b1 100644 --- a/shell/components/nav/Header.vue +++ b/shell/components/nav/Header.vue @@ -441,7 +441,6 @@ export default {
-
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" > { describe('should not use highlight class', () => { diff --git a/shell/components/nuxt/nuxt.js b/shell/components/nuxt/nuxt.js index d4f683fe16a..2893752badf 100644 --- 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 b/shell/components/templates/blank.vue similarity index 89% rename from shell/layouts/blank.vue rename to shell/components/templates/blank.vue index 2476f05b775..6f58b69b0fb 100644 --- a/shell/layouts/blank.vue +++ b/shell/components/templates/blank.vue @@ -11,7 +11,7 @@ export default { - diff --git a/shell/layouts/error.vue b/shell/components/templates/error.vue similarity index 96% rename from shell/layouts/error.vue rename to shell/components/templates/error.vue index 0ad8e2d6c43..408a1ecb873 100644 --- a/shell/layouts/error.vue +++ b/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 b/shell/components/templates/home.vue similarity index 96% rename from shell/layouts/home.vue rename to shell/components/templates/home.vue index 3c547e3e488..06ee26232db 100644 --- a/shell/layouts/home.vue +++ b/shell/components/templates/home.vue @@ -68,7 +68,10 @@ export default { />
- +
diff --git a/shell/layouts/plain.vue b/shell/components/templates/plain.vue similarity index 96% rename from shell/layouts/plain.vue rename to shell/components/templates/plain.vue index 892164d4f68..116ebc85b8b 100644 --- a/shell/layouts/plain.vue +++ b/shell/components/templates/plain.vue @@ -70,7 +70,10 @@ export default {
- + diff --git a/shell/layouts/standalone.vue b/shell/components/templates/standalone.vue similarity index 82% rename from shell/layouts/standalone.vue rename to shell/components/templates/standalone.vue index 290875e8850..7b483abe530 100644 --- a/shell/layouts/standalone.vue +++ b/shell/components/templates/standalone.vue @@ -3,7 +3,7 @@ export default { middleware: ['unauthenticated'] }; diff --git a/shell/pages/support/index.vue b/shell/pages/support/index.vue index 0856ca03430..6bd71de7f07 100644 --- a/shell/pages/support/index.vue +++ b/shell/pages/support/index.vue @@ -10,7 +10,6 @@ import { isRancherPrime } from '@shell/config/version'; import { hasCspAdapter } from 'mixins/brand'; export default { - layout: 'home', components: { BannerGraphic, diff --git a/shell/pkg/auto-import.js b/shell/pkg/auto-import.js index 6b542d34ef5..b7d462e2ad2 100644 --- a/shell/pkg/auto-import.js +++ b/shell/pkg/auto-import.js @@ -1,6 +1,6 @@ const fs = require('fs'); const path = require('path'); -const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'layouts', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login']; +const contextFolders = ['chart', 'cloud-credential', 'content', 'detail', 'edit', 'list', 'machine-config', 'models', 'promptRemove', 'l10n', 'windowComponents', 'dialog', 'formatters', 'login']; const contextMap = contextFolders.reduce((map, obj) => { map[obj] = true;