BC-6929 - new topbar (#3219)

* add new topbar component * hide new layout behind a feature flag * refactor topbar components
hpi-schul-cloud · May 6, 2024 · 1db354f · 1db354f
1 parent e18789e
commit 1db354f
Show file tree

Hide file tree

Showing 51 changed files with 1,034 additions and 303 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -6,31 +6,32 @@
 	</v-app>
 </template>
 
-<script>
-import { authModule } from "@/store";
+<script setup lang="ts">
 import { Layouts } from "@/layouts/types";
-import { defineAsyncComponent } from "vue";
+import { computed, defineAsyncComponent } from "vue";
+import {
+	injectStrict,
+	AUTH_MODULE_KEY,
+	ENV_CONFIG_MODULE_KEY,
+} from "@/utils/inject";
+import { useRoute } from "vue-router";
 
-const defaultLayout = Layouts.LOGGED_IN;
+const authModule = injectStrict(AUTH_MODULE_KEY);
+const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+const route = useRoute();
 
-export default {
-	computed: {
-		layout() {
-			let layout = defaultLayout;
+const shouldUseNewLayout = envConfigModule.getEnv.FEATURE_NEW_LAYOUT_ENABLED;
+const defaultLayout = shouldUseNewLayout
+	? Layouts.NEW_LOGGED_IN
+	: Layouts.LOGGED_IN;
 
-			if (this.$route.meta?.layout) {
-				layout = this.$route.meta?.layout;
-			} else {
-				layout = authModule.isLoggedIn ? Layouts.LOGGED_IN : Layouts.LOGGED_OUT;
-			}
+const layout = computed(() => {
+	let layout = (route.meta.layout as Layouts) || defaultLayout;
 
-			return defineAsyncComponent(
-				() => import(`@/layouts/${layout}.layout.vue`)
-			);
-		},
-		isLoggedIn() {
-			return authModule.isLoggedIn;
-		},
-	},
-};
+	if (!authModule.isLoggedIn) {
+		layout = Layouts.LOGGED_OUT;
+	}
+
+	return defineAsyncComponent(() => import(`@/layouts/${layout}.layout.vue`));
+});
 </script>
diff --git a/src/components/base/BaseQrCode.unit.js b/src/components/base/BaseQrCode.unit.js
diff --git a/src/components/base/BaseQrCode.vue b/src/components/base/BaseQrCode.vue
diff --git a/src/components/base/components.js b/src/components/base/components.js
@@ -4,7 +4,6 @@ import BaseInputCheckbox from "@/components/base/BaseInput/BaseInputCheckbox.vue
 import BaseInputDefault from "@/components/base/BaseInput/BaseInputDefault.vue";
 import BaseLink from "@/components/base/BaseLink.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
-import BaseQrCode from "@/components/base/BaseQrCode.vue";
 
 export const mountBaseComponents = (app) => {
 	app.component("BaseDialog", BaseDialog);
@@ -13,5 +12,4 @@ export const mountBaseComponents = (app) => {
 	app.component("BaseInputDefault", BaseInputDefault);
 	app.component("BaseLink", BaseLink);
 	app.component("BaseModal", BaseModal);
-	app.component("BaseQrCode", BaseQrCode);
 };
diff --git a/src/components/icons/material/index.ts b/src/components/icons/material/index.ts
@@ -87,6 +87,7 @@ import {
 	mdiPlus,
 	mdiPlusCircleOutline,
 	mdiPresentation,
+	mdiPrinter,
 	mdiPound,
 	mdiPuzzleOutline,
 	mdiQrcode,
@@ -199,6 +200,7 @@ export {
 	mdiPlus,
 	mdiPlusCircleOutline,
 	mdiPresentation,
+	mdiPrinter,
 	mdiPound,
 	mdiPuzzleOutline,
 	mdiQrcode,

diff --git a/src/components/share/ShareModalResult.unit.ts b/src/components/share/ShareModalResult.unit.ts
@@ -1,6 +1,5 @@
 import { mount } from "@vue/test-utils";
 import ShareModalResult from "@/components/share/ShareModalResult.vue";
-import BaseQrCode from "@/components/base/BaseQrCode.vue";
 import {
 	createTestingI18n,
 	createTestingVuetify,
@@ -14,7 +13,7 @@ describe("@/components/share/ShareModalResult", () => {
 		const wrapper = mount(ShareModalResult, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
-				stubs: ["base-qr-code"],
+				stubs: ["QRCode"],
 			},
 			props: {
 				type: "courses",
@@ -34,12 +33,12 @@ describe("@/components/share/ShareModalResult", () => {
 	it("should render QR-Code if onShowQrCode is called", async () => {
 		const { wrapper, shareUrl } = setup();
 
-		expect(wrapper.findAllComponents(BaseQrCode)).toHaveLength(0);
+		expect(wrapper.findAllComponents({ name: "QRCode" })).toHaveLength(0);
 
 		const actionButton = wrapper.find("[data-testid=qrCodeAction]");
 		await actionButton.trigger("click");
 
-		const qrCodeComponent = wrapper.findAllComponents(BaseQrCode);
+		const qrCodeComponent = wrapper.findAllComponents({ name: "QRCode" });
 		expect(qrCodeComponent).toHaveLength(1);
 		expect(qrCodeComponent[0].props("url")).toStrictEqual(shareUrl);
 	});
@@ -52,7 +51,7 @@ describe("@/components/share/ShareModalResult", () => {
 		const actionButton = wrapper.find("[data-testid=qrCodeAction]");
 		await actionButton.trigger("click");
 
-		const qrCodeComponents = wrapper.findAllComponents(BaseQrCode);
+		const qrCodeComponents = wrapper.findAllComponents({ name: "QRCode" });
 
 		expect(qrCodeComponents).toHaveLength(1);
 		expect(qrCodeComponents[0].props("url")).toStrictEqual(shareUrl);

diff --git a/src/components/share/ShareModalResult.vue b/src/components/share/ShareModalResult.vue
@@ -93,13 +93,13 @@
 			v-if="isShowQrCode"
 			class="d-flex justify-content-center overflow-hidden"
 		>
-			<base-qr-code :url="shareUrl" data-testid="qrCode" />
+			<QRCode :url="shareUrl" data-testid="qrCode" />
 		</div>
 	</div>
 </template>
 
 <script setup>
-import BaseQrCode from "@/components/base/BaseQrCode";
+import { QRCode } from "@ui-qr-code";
 import { ShareTokenBodyParamsParentTypeEnum } from "@/serverApi/v3/api";
 import {
 	mdiContentCopy,

diff --git a/src/components/topbar/LanguageMenu.vue b/src/components/topbar/LanguageMenu.vue
diff --git a/src/components/topbar/MenuQrCode.unit.ts b/src/components/topbar/MenuQrCode.unit.ts
@@ -1,6 +1,5 @@
 import { mount } from "@vue/test-utils";
 import MenuQrCode from "./MenuQrCode.vue";
-import BaseQrCode from "@/components/base/BaseQrCode.vue";
 import {
 	createTestingI18n,
 	createTestingVuetify,
@@ -12,14 +11,11 @@ describe("@/components/topbar/MenuQrCode", () => {
 		const wrapper = mount(MenuQrCode, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
-				components: {
-					"base-qr-code": BaseQrCode,
-				},
 			},
 			props: { url: "testUrl" },
 		});
 
-		const qrCode = wrapper.findComponent({ name: "base-qr-code" });
+		const qrCode = wrapper.findComponent({ name: "QRCode" });
 		expect(qrCode.exists()).toBe(true);
 		expect(qrCode.props("url")).toBe("testUrl");
 
@@ -36,9 +32,6 @@ describe("@/components/topbar/MenuQrCode", () => {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 			},
-			components: {
-				"base-qr-code": BaseQrCode,
-			},
 		});
 
 		const windowMock = createMock<Window>({

diff --git a/src/components/topbar/MenuQrCode.vue b/src/components/topbar/MenuQrCode.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pa-4">
-		<base-qr-code ref="qrCode" :url="url" />
+		<QRCode ref="qrCode" :url="url" />
 		<div class="pb-2">
 			{{ $t("global.topbar.MenuQrCode.qrHintText") }}
 		</div>
@@ -13,9 +13,11 @@
 <script lang="ts">
 import { ComponentPublicInstance, defineComponent, ref } from "vue";
 import { mdiPrinter } from "@mdi/js";
+import { QRCode } from "@ui-qr-code";
 
 export default defineComponent({
 	name: "MenuQrCode",
+	components: { QRCode },
 	props: {
 		url: {
 			type: String,