feat: Setting custom 404 page for broker and connector ui

src/app/app.module.ts

@@ -19,6 +19,7 @@ import {NgxsModule} from '@ngxs/store';
 import {NgChartsModule} from 'ng2-charts';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {PageNotFoundComponent} from './component-library/error-404-component/page-not-found.component';
 import {provideAppConfig} from './core/config/app-config-initializer';
 import {provideAppConfigProperty} from './core/config/app-config-injection-utils';
 import {ApiKeyInterceptor} from './core/services/api/api-key.interceptor';
@@ -54,7 +55,7 @@ import {
     // Routing
     AppRoutingModule,
   ],
-  declarations: [AppComponent],
+  declarations: [AppComponent, PageNotFoundComponent],
   providers: [
     provideAppConfig(),
 

src/app/component-library/catalog/asset-detail-dialog/asset-property-grid-group-builder.ts

@@ -50,7 +50,6 @@ export class AssetPropertyGridGroupBuilder {
         labelTitle: AssetProperties.language,
         ...this.propertyGridUtils.guessValue(asset.language?.label),
       },
-
       {
         icon: 'apartment',
         label: 'Publisher',

src/app/component-library/error-404-component/page-not-found.component.html

@@ -0,0 +1,12 @@
+<section class="bg-white">
+  <div class="py-18 px-8 lg:py-28 lg:px-6">
+    <div class="text-center">
+      <h1>404</h1>
+      <p class="text-bold">Something's missing.</p>
+      <p class="text-light">Sorry, we can't find that page.</p>
+      <a routerLink="/" mat-raised-button color="primary">
+        Back to {{ navigator }}
+      </a>
+    </div>
+  </div>
+</section>

src/app/component-library/error-404-component/page-not-found.component.ts

@@ -0,0 +1,20 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {APP_CONFIG, AppConfig} from '../../core/config/app-config';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+})
+export class PageNotFoundComponent implements OnInit {
+  navigator!: string;
+
+  constructor(@Inject(APP_CONFIG) private config: AppConfig) {}
+
+  ngOnInit(): void {
+    if (this.config.profile != 'broker') {
+      this.navigator = 'Dashboard';
+    } else {
+      this.navigator = 'Data Offers';
+    }
+  }
+}

src/app/routes/broker-ui/broker-ui-routing.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {PageNotFoundComponent} from '../../component-library/error-404-component/page-not-found.component';
 import {BrokerUiComponent} from './broker-ui.component';
 import {CatalogPageComponent} from './catalog-page/catalog-page/catalog-page.component';
 import {ConnectorPageComponent} from './connector-page/connector-page/connector-page.component';
@@ -34,6 +35,7 @@ export const routes: Routes = [
       hideInNav: true,
     },
   },
+  {path: '**', component: PageNotFoundComponent, data: {hideInNav: true}},
 ];
 
 @NgModule({

src/app/routes/connector-ui/connector-ui-routing.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
+import {PageNotFoundComponent} from '../../component-library/error-404-component/page-not-found.component';
 import {EdcUiFeature} from '../../core/config/profiles/edc-ui-feature';
 import {AssetPageComponent} from './asset-page/asset-page/asset-page.component';
 import {CatalogBrowserPageComponent} from './catalog-browser-page/catalog-browser-page/catalog-browser-page.component';
@@ -61,6 +62,7 @@ export const routes: Routes = [
       requiresFeature: 'logout-button' as EdcUiFeature,
     },
   },
+  {path: '**', component: PageNotFoundComponent, data: {hideInNav: true}},
 ];
 
 @NgModule({

src/app/routes/connector-ui/connector-ui.component.html

@@ -15,18 +15,20 @@
         [style]="config.brandLogoStyle" />
     </mat-toolbar>
     <mat-nav-list class="overflow-auto grow">
-      <a *ngFor="let route of routes" [routerLink]="[route.path]">
-        <mat-list-item
-          *ngIf="
-            route.component &&
-            (!route.data?.requiresFeature ||
-              (route.data!.requiresFeature! | isActiveFeature))
-          "
-          [routerLinkActive]="['is-active']">
-          <mat-icon mat-list-icon>{{ route.data?.icon }}</mat-icon>
-          <span matLine>{{ route.data?.title ?? route.path }}</span>
-        </mat-list-item>
-      </a>
+      <ng-container *ngFor="let route of routes">
+        <a *ngIf="!route.data?.hideInNav" [routerLink]="[route.path]">
+          <mat-list-item
+            *ngIf="
+              route.component &&
+              (!route.data?.requiresFeature ||
+                (route.data!.requiresFeature! | isActiveFeature))
+            "
+            [routerLinkActive]="['is-active']">
+            <mat-icon mat-list-icon>{{ route.data?.icon }}</mat-icon>
+            <span matLine>{{ route.data?.title ?? route.path }}</span>
+          </mat-list-item>
+        </a>
+      </ng-container>
     </mat-nav-list>
     <div
       *ngIf="'sovity-zammad-integration' | isActiveFeature"

src/styles.scss

@@ -43,6 +43,21 @@ body {
   white-space: nowrap;
 }
 
+.text-bold {
+  letter-spacing: -0.025em;
+  font-size: 1.25rem; /* 20px */
+  line-height: 1.75rem; /* 28px */
+  font-weight: 700;
+  color: rgb(17 24 39);
+}
+
+.text-light {
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 300;
+  color: rgb(107 114 128);
+}
+
 .mat-hint-text-ellipsis {
   mat-hint {
     text-overflow: ellipsis;