feat: add dashboard (#695)

Co-authored-by: Timon Masberg <[email protected]>

apps/spa-e2e/src/auth.setup.ts

@@ -21,7 +21,7 @@ setup('authenticate as testusers', async ({ browser }) => {
 			const context = await browser.newContext();
 			const page = await context.newPage();
 			await new LoginPo(page).loginWithB2C(username, password);
-			await page.waitForURL('/protected');
+			await page.waitForURL('/dashboard');
 
 			await context.storageState({ path: getAuthStoragePath(username) });
 			await context.close();
@@ -31,7 +31,7 @@ setup('authenticate as testusers', async ({ browser }) => {
 			const context = await browser.newContext();
 			const page = await context.newPage();
 			await new LoginPo(page).loginViaDevAuth(user.userName);
-			await page.waitForURL('/protected');
+			await page.waitForURL('/dashboard');
 
 			await context.storageState({ path: getAuthStoragePath(user.userName) });
 			await context.close();

apps/spa-e2e/src/auth.spec.ts

@@ -12,9 +12,9 @@ test('should get redirected to auth as unauthenticated', async ({ page }) => {
 test.describe('as authenticated', () => {
 	asUser('testuser');
 
-	test('should get initially redirected to /protected', async ({ page }) => {
+	test('should get initially redirected to /dashboard', async ({ page }) => {
 		await page.goto('/');
-		await page.waitForURL('/protected');
-		await expect(page).toHaveURL('/protected');
+		await page.waitForURL('/dashboard');
+		await expect(page).toHaveURL('/dashboard');
 	});
 });

apps/spa/project.json

@@ -37,8 +37,8 @@
 						},
 						{
 							"type": "anyComponentStyle",
-							"maximumWarning": "2kb",
-							"maximumError": "4kb"
+							"maximumWarning": "500kb",
+							"maximumError": "1mb"
 						}
 					],
 					"outputHashing": "all"

apps/spa/src/app/app.module.ts

@@ -10,6 +10,7 @@ import DOMPurify from 'dompurify';
 import { NZ_I18N, de_DE } from 'ng-zorro-antd/i18n';
 
 import { AuthModule, DevAuthModule } from '@kordis/spa/auth';
+import { DashboardComponent } from '@kordis/spa/dashboard';
 import { GraphqlModule } from '@kordis/spa/graphql';
 import {
 	NoopObservabilityModule,
@@ -18,13 +19,12 @@ import {
 
 import { environment } from '../environments/environment';
 import { AppComponent } from './component/app.component';
-import { ProtectedComponent } from './component/protected.component';
 import routes from './routes';
 
 registerLocaleData(de);
 
 @NgModule({
-	declarations: [AppComponent, ProtectedComponent],
+	declarations: [AppComponent],
 	imports: [
 		BrowserModule,
 		BrowserAnimationsModule,
@@ -53,6 +53,7 @@ registerLocaleData(de);
 			// or after 30 seconds (whichever comes first).
 			registrationStrategy: 'registerWhenStable:30000',
 		}),
+		DashboardComponent,
 	],
 	providers: [
 		{

apps/spa/src/app/routes.ts

@@ -1,21 +1,20 @@
 import { Routes } from '@angular/router';
 
 import { authGuard } from '@kordis/spa/auth';
-
-import { ProtectedComponent } from './component/protected.component';
+import { DashboardComponent } from '@kordis/spa/dashboard';
 
 const routes: Routes = [
 	{
 		path: '',
-		redirectTo: 'protected',
+		redirectTo: 'dashbaord',
 		pathMatch: 'full',
 	},
 	{
-		path: 'protected',
-		component: ProtectedComponent,
+		path: 'dashboard',
+		component: DashboardComponent,
 		canActivate: [authGuard],
 	},
-	{ path: '**', redirectTo: 'protected' },
+	{ path: '**', redirectTo: 'dashboard' },
 ];
 
 export default routes;

apps/spa/tsconfig.app.json

@@ -4,8 +4,7 @@
 		"outDir": "../../dist/out-tsc",
 		"types": [],
 		"target": "ES2022",
-		"useDefineForClassFields": false,
-		"allowSyntheticDefaultImports": true
+		"useDefineForClassFields": false
 	},
 	"files": ["src/main.ts"],
 	"include": ["src/**/*.d.ts", "../../reset.d.ts"],

apps/spa/tsconfig.json

@@ -7,7 +7,8 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
   },
   "files": [],
   "include": [],

libs/spa/dashboard/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+	"extends": ["../../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"extends": [
+				"plugin:@nx/angular",
+				"plugin:@angular-eslint/template/process-inline-templates"
+			],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "krd",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "krd",
+						"style": "kebab-case"
+					}
+				]
+			}
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@nx/angular-template"],
+			"rules": {}
+		}
+	]
+}

libs/spa/dashboard/README.md

@@ -0,0 +1,8 @@
+# Dashboard
+
+This library provides the dashboard view which integrates the protocol,
+operations and deployments view as well as a menu and some user functionality.
+
+## Running unit tests
+
+Run `nx test spa-dashboard` to execute the unit tests.

libs/spa/dashboard/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+	displayName: 'spa-dashboard',
+	preset: '../../../jest.preset.js',
+	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+	coverageDirectory: '../../../coverage/libs/spa/dashboard',
+	transform: {
+		'^.+\\.(ts|mjs|js|html)$': [
+			'jest-preset-angular',
+			{
+				tsconfig: '<rootDir>/tsconfig.spec.json',
+				stringifyContentPathRegex: '\\.(html|svg)$',
+			},
+		],
+	},
+	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+	snapshotSerializers: [
+		'jest-preset-angular/build/serializers/no-ng-attributes',
+		'jest-preset-angular/build/serializers/ng-snapshot',
+		'jest-preset-angular/build/serializers/html-comment',
+	],
+};

libs/spa/dashboard/project.json

@@ -0,0 +1,21 @@
+{
+	"name": "spa-dashboard",
+	"$schema": "../../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "libs/spa/dashboard/src",
+	"prefix": "krd",
+	"tags": [],
+	"projectType": "library",
+	"targets": {
+		"test": {
+			"executor": "@nx/jest:jest",
+			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+			"options": {
+				"jestConfig": "libs/spa/dashboard/jest.config.ts"
+			}
+		},
+		"lint": {
+			"executor": "@nx/eslint:lint",
+			"outputs": ["{options.outputFile}"]
+		}
+	}
+}

libs/spa/dashboard/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/dashboard/dashboard.component';

libs/spa/dashboard/src/lib/dashboard/dashboard.component.css

@@ -0,0 +1,57 @@
+@import 'ng-zorro-antd/ng-zorro-antd.variable.min.css';
+
+nz-layout {
+	--header-size: 64px;
+
+	[nz-menu] {
+		line-height: var(--header-size);
+	}
+
+	nz-header {
+		background: none;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.logo {
+			color: var(--ant-primary-color);
+			font-size: 24px;
+		}
+	}
+
+	nz-content {
+		display: grid;
+		grid-gap: 8px;
+		grid-template-areas:
+			'protocol operations'
+			'deployments deployments';
+		grid-template-columns: 3fr 2fr;
+		grid-template-rows: 3fr 2fr;
+		min-height: 720px;
+		min-width: 1280px;
+		padding: 8px;
+		width: 100%;
+		height: calc(100vh - var(--header-size));
+
+		.placeholder {
+			/* TODO: Remove this section when filled */
+			height: 100%;
+			width: 100%;
+			background-color: snow;
+			padding: 16px;
+			border-radius: 2px;
+		}
+
+		.protocol {
+			grid-area: protocol;
+		}
+
+		.operations {
+			grid-area: operations;
+		}
+
+		.deployments {
+			grid-area: deployments;
+		}
+	}
+}

libs/spa/dashboard/src/lib/dashboard/dashboard.component.html

@@ -0,0 +1,37 @@
+<nz-layout>
+	<nz-header>
+		<div class="logo">Kordis</div>
+		<div>
+			<nz-avatar
+				nzText="{{ (user$ | async)?.firstName?.slice(0, 1) }}{{
+					(user$ | async)?.lastName?.slice(0, 1)
+				}}"
+				[nzDropdownMenu]="userMenu"
+				nz-dropdown
+			></nz-avatar>
+			<nz-dropdown-menu #userMenu="nzDropdownMenu">
+				<ul nz-menu>
+					<li nz-menu-item nzDisabled>
+						{{ (user$ | async)?.firstName }} {{ (user$ | async)?.lastName }}
+					</li>
+					<li (click)="logout()" nz-menu-item>Abmelden</li>
+					<li nz-menu-divider></li>
+					<li (click)="showCreditsAndLicensesModal()" nz-menu-item>
+						Credits und Lizenzen
+					</li>
+				</ul>
+			</nz-dropdown-menu>
+		</div>
+	</nz-header>
+	<nz-content>
+		<div class="protocol">
+			<div class="placeholder">Protocol</div>
+		</div>
+		<div class="operations">
+			<div class="placeholder">Operations</div>
+		</div>
+		<div class="deployments">
+			<div class="placeholder">Deployments</div>
+		</div>
+	</nz-content>
+</nz-layout>

libs/spa/dashboard/src/lib/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { createMock } from '@golevelup/ts-jest';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
+import { of } from 'rxjs';
+
+import { AUTH_SERVICE, AuthService } from '@kordis/spa/auth';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+	let component: DashboardComponent;
+	let fixture: ComponentFixture<DashboardComponent>;
+	const authServiceMock = createMock<AuthService>({
+		user$: of(null),
+	});
+	const modalServiceMock = createMock<NzModalService>();
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [BrowserAnimationsModule],
+			providers: [{ provide: AUTH_SERVICE, useValue: authServiceMock }],
+		}).compileComponents();
+
+		TestBed.overrideModule(NzModalModule, {
+			set: {
+				providers: [{ provide: NzModalService, useValue: modalServiceMock }],
+			},
+		});
+
+		fixture = TestBed.createComponent(DashboardComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+
+	it('should call authService.logout() when logout is called', () => {
+		component.logout();
+		expect(authServiceMock.logout).toHaveBeenCalled();
+	});
+
+	it('should call modalService.create() when showCreditsAndLicensesModal is called', () => {
+		component.showCreditsAndLicensesModal();
+		expect(modalServiceMock.create).toHaveBeenCalled();
+	});
+});