OZG-6999 Add fav icon and build info

alfa-client/apps/admin-e2e/src/components/buildinfo/buildinfo.e2e.component.ts

 export class BuildInfoE2EComponent {
-  private readonly locatorVersion: string = 'build-version';
+  private readonly locatorBuildInfo: string = 'build-info';
   private readonly locatorBuildTime: string = 'build-time';
 
-  public getVersion() {
-    return cy.getTestElement(this.locatorVersion);
+  public getBuildInfo() {
+    return cy.getTestElement(this.locatorBuildInfo);
   }
 
   public getBuildTime() {

alfa-client/apps/admin-e2e/src/e2e/app/buildinfo.cy.ts

@@ -14,8 +14,8 @@ describe('Buildinfo', () => {
   });
 
   describe('get buildinfo', () => {
-    it('should show version', () => {
-      exist(buildInfo.getVersion());
+    it('should show build info', () => {
+      exist(buildInfo.getBuildInfo());
       header.getCurrentUserProfile().logout();
     });
   });

alfa-client/apps/admin/project.json

@@ -8,24 +8,22 @@
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
-      "outputs": [
-        "{options.outputPath}"
-      ],
+      "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/admin",
         "index": "apps/admin/src/index.html",
         "main": "apps/admin/src/main.ts",
-        "polyfills": [
-          "zone.js"
-        ],
+        "polyfills": ["zone.js"],
         "tsConfig": "apps/admin/tsconfig.app.json",
         "assets": [
-          "apps/admin/src/favicon.ico",
-          "apps/admin/src/assets"
-        ],
-        "styles": [
-          "apps/admin/src/styles.scss"
+          "apps/admin/src/assets",
+          {
+            "input": "apps/admin/src/favicon",
+            "glob": "**/*",
+            "output": ""
+          }
         ],
+        "styles": ["apps/admin/src/styles.scss"],
         "scripts": [],
         "stylePreprocessorOptions": {
           "includePaths": [
@@ -87,15 +85,11 @@
     },
     "lint": {
       "executor": "@nx/eslint:lint",
-      "outputs": [
-        "{options.outputFile}"
-      ]
+      "outputs": ["{options.outputFile}"]
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": [
-        "{workspaceRoot}/coverage/{projectRoot}"
-      ],
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "apps/admin/jest.config.ts"
       }
@@ -108,20 +102,14 @@
     },
     "container": {
       "executor": "@nx-tools/nx-container:build",
-      "dependsOn": [
-        "build"
-      ],
+      "dependsOn": ["build"],
       "options": {
         "engine": "docker",
         "push": false,
         "metadata": {
-          "images": [
-            "docker.ozg-sh.de/admin-client"
-          ],
+          "images": ["docker.ozg-sh.de/admin-client"],
           "load": true,
-          "tags": [
-            "build-latest"
-          ]
+          "tags": ["build-latest"]
         }
       }
     }

alfa-client/apps/admin/src/app/app.component.html

@@ -37,6 +37,6 @@
         <unavailable-page></unavailable-page>
       </ng-template>
     </main>
+    <alfa-build-info *ngIf="apiRoot" [apiRoot]="apiRoot" data-test-id="build-info" />
   </div>
-  <footer data-test-id="build-version">Version: {{ apiRoot.version }}</footer>
 </ng-container>

alfa-client/apps/admin/src/app/app.component.spec.ts

 import { ApiRootLinkRel, ApiRootResource, ApiRootService } from '@alfa-client/api-root-shared';
-import {
-  HasLinkPipe,
-  createEmptyStateResource,
-  createStateResource,
-} from '@alfa-client/tech-shared';
+import { HasLinkPipe, createEmptyStateResource, createStateResource } from '@alfa-client/tech-shared';
 import {
   Mock,
   dispatchEventFromFixture,
@@ -24,6 +20,7 @@ import {
 } from '@ods/system';
 import { AuthenticationService } from 'authentication';
 import { createApiRootResource } from 'libs/api-root-shared/test/api-root';
+import { BuildInfoComponent } from 'libs/navigation/src/lib/build-info/build-info.component';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -36,7 +33,7 @@ describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
 
   const adminHeaderSelector: string = getDataTestIdOf('admin-header');
-  const buildVersionSelector: string = getDataTestIdOf('build-version');
+  const buildInfoSelector: string = getDataTestIdOf('build-info');
   const userProfileButtonSelector: string = getDataTestIdOf('user-profile-button');
   const navigationSelector: string = getDataTestIdOf('navigation');
   const logoLink: string = getDataTestIdOf('logo-link');
@@ -62,6 +59,7 @@ describe('AppComponent', () => {
         MockComponent(UnavailablePageComponent),
         MockComponent(NavbarComponent),
         MockComponent(NavItemComponent),
+        MockComponent(BuildInfoComponent),
         HasLinkPipe,
         MockDirective(RouterOutlet),
       ],
@@ -160,9 +158,7 @@ describe('AppComponent', () => {
   describe('navigation', () => {
     beforeEach(() => {});
     it('should show links if configuration link exists', () => {
-      component.apiRootStateResource$ = of(
-        createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])),
-      );
+      component.apiRootStateResource$ = of(createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])));
       fixture.detectChanges();
 
       const navbarElement: HTMLElement = getElementFromFixture(fixture, navigationSelector);
@@ -181,17 +177,15 @@ describe('AppComponent', () => {
   });
 
   describe('build version', () => {
-    const apiResource: ApiRootResource = createApiRootResource();
-
-    beforeEach(() => {
-      component.apiRootStateResource$ = of(createStateResource(apiResource));
+    it('should not be rendered if api root not loaded', () => {
+      notExistsAsHtmlElement(fixture, buildInfoSelector);
     });
 
     it('should show after apiRoot loaded', () => {
+      component.apiRootStateResource$ = of(createStateResource(createApiRootResource()));
       fixture.detectChanges();
 
-      const buildVersionElement = getElementFromFixture(fixture, buildVersionSelector);
-      expect(buildVersionElement.textContent.trim()).toEqual(`Version: ${apiResource.version}`);
+      existsAsHtmlElement(fixture, buildInfoSelector);
     });
   });
 
@@ -199,9 +193,7 @@ describe('AppComponent', () => {
     beforeEach(() => {});
 
     it('should exist if configuration resource available', () => {
-      component.apiRootStateResource$ = of(
-        createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])),
-      );
+      component.apiRootStateResource$ = of(createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])));
 
       fixture.detectChanges();
 

alfa-client/apps/admin/src/app/app.module.ts

 import { AdminSettingsModule } from '@admin-client/admin-settings';
 import { ApiRootModule } from '@alfa-client/api-root-shared';
 import { EnvironmentModule } from '@alfa-client/environment-shared';
+import { NavigationModule } from '@alfa-client/navigation';
 import { TechSharedModule } from '@alfa-client/tech-shared';
-import { CommonModule } from '@angular/common';
+import { CommonModule, registerLocaleData } from '@angular/common';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import localeDe from '@angular/common/locales/de';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -36,6 +38,8 @@ import { UserRolesPageComponent } from '../pages/users-roles/user-roles-page/use
 import { AppComponent } from './app.component';
 import { appRoutes } from './app.routes';
 
+registerLocaleData(localeDe);
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -53,6 +57,7 @@ import { appRoutes } from './app.routes';
     DropdownMenuButtonComponent,
     NavItemComponent,
     NavbarComponent,
+    NavigationModule,
     OrgaUnitIconComponent,
     LogoutIconComponent,
     UsersIconComponent,

alfa-client/apps/admin/src/favicon/manifest.json

+{
+  "name": "Alfa Administration",
+  "short_name": "Administration Client",
+  "icons": [
+    {
+      "src": "favicon.svg",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

alfa-client/apps/admin/src/index.html

@@ -5,11 +5,11 @@
     <title>admin</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
   </head>
-  <body
-    class="flex max-h-full min-h-full overflow-hidden bg-white text-black dark:bg-slate-900 dark:text-slate-100"
-  >
+  <body class="flex max-h-full min-h-full overflow-hidden bg-white text-black dark:bg-slate-900 dark:text-slate-100">
     <app-root class="flex w-full flex-col"></app-root>
   </body>
 </html>

alfa-client/libs/navigation/src/lib/build-info/build-info.component.html

@@ -30,6 +30,4 @@
     <span data-test-id="build-time">{{ buildTime }}</span>
   </ng-container>
 </p>
-<p *ngIf="isNotProduction" data-test-id="not-production-text" class="test-environment text-error">
-  Achtung Testumgebung
-</p>
+<p *ngIf="isNotProduction" data-test-id="not-production-text" class="test-environment text-error">Achtung Testumgebung</p>

alfa-client/libs/navigation/src/lib/build-info/build-info.component.ts

@@ -21,8 +21,8 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { ApiRootResource } from '@alfa-client/api-root-shared';
+import { Component, Input } from '@angular/core';
 
 import * as DateUtil from '@alfa-client/tech-shared';