#22: implement onboarding page

src/app/core/config/api-config.ts

@@ -55,4 +55,6 @@ export const apiConfig = {
   urlComment: '/api/comments',
   urlGetActiveUsers: '/api/users/activeUserDetails',
   urlShareWithTeam: '/api/solution/userAccess',
+  urlAddToCatalog: '/api/webBasedOnBoarding/addToCatalog',
+  urlMessagingStatus: '/api/webBasedOnBoarding/messagingStatus',
 };

src/app/core/services/shared-data/shared-data.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import {
   AuthorPublisherModel,
+  LicenseProfileModel,
   PublicSolution,
   Revision,
 } from 'src/app/shared/models';
@@ -47,19 +48,20 @@ export class SharedDataService {
   private _authorListSubject: BehaviorSubject<AuthorPublisherModel[]> =
     new BehaviorSubject<AuthorPublisherModel[]>([]);
 
-  private _selectedRevisionSubject: BehaviorSubject<{
-    version: string;
-    revisionId: string;
-  }> = new BehaviorSubject<Revision>({
-    version: '',
-    revisionId: '',
-    onBoarded: '',
-  });
+  private _selectedRevisionSubject: BehaviorSubject<Revision> =
+    new BehaviorSubject<Revision>({
+      version: '',
+      revisionId: '',
+      onBoarded: '',
+    });
 
   private _ratingSubject: BehaviorSubject<number> = new BehaviorSubject<number>(
     0,
   );
 
+  private _licenseProfileSubject =
+    new BehaviorSubject<LicenseProfileModel | null>(null);
+
   constructor() {}
 
   get versionId$(): Observable<string> {
@@ -117,4 +119,12 @@ export class SharedDataService {
   set rating(value: number) {
     this._ratingSubject.next(value);
   }
+
+  get licenseProfile$(): Observable<LicenseProfileModel | null> {
+    return this._licenseProfileSubject.asObservable();
+  }
+
+  set licenseProfile(value: LicenseProfileModel | null) {
+    this._licenseProfileSubject.next(value);
+  }
 }

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html

-<p>on-boarding-model works!</p>
+<div style="display: flex; flex-direction: column; margin: 40px">
+  <gp-headline [headlineTitle]="'On-Boarding Model'"></gp-headline>
+  <gp-breadcrumb-navigation
+    [firstNavigationLabel]="{ label: 'Home' }"
+    [secondNavigationLabel]="{ label: 'On-Boarding Model', disabled: true }"
+    (firstNavigationClicked)="onHomeClick()"
+  ></gp-breadcrumb-navigation>
+</div>
+<mat-divider></mat-divider>
+<div style="display: flex; flex-direction: column; margin: 40px; width: 100%">
+  <div></div>
+  <mat-divider></mat-divider>
+  <div style="display: flex; flex-direction: column; width: 100%">
+    <mat-divider></mat-divider>
+    <!-- on boarding-->
+    <div>
+      <gp-headline
+        [headlineTitle]="'ON-BOARD DOCKERIZED MODEL URI'"
+      ></gp-headline>
+    </div>
+    <!--process model-->
+    <div>
+      @if (solutionTrackId) {
+        <mat-list role="list" style="display: flex">
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span
+                class="image-content micro-service-process-completed"
+                alt=""
+                title=""
+              ></span>
+
+              <span>Create solution</span>
+            </div></mat-list-item
+          >
+          <mat-list-item
+            ><span class="progress-status progress-status-completed"></span
+          ></mat-list-item>
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span
+                class="image-content add-repository-completed"
+                alt="Add Artifacts"
+                title="Add Artifacts"
+              ></span>
+              <span>Add Artifacts </span>
+            </div></mat-list-item
+          >
+          <mat-list-item
+            ><span class="progress-status progress-status-completed"></span
+          ></mat-list-item>
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span
+                class="image-content onboarded-completed"
+                alt="Onboarding status"
+                title="Onboarding status"
+              ></span>
+              <button>View model</button>
+              <span>Model is on-boarded and available in Private catalog </span>
+            </div></mat-list-item
+          >
+        </mat-list>
+      } @else {
+        <mat-list role="list" style="display: flex">
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span class="image-content micro-service" alt="" title=""></span>
+
+              <span>Create solution</span>
+            </div></mat-list-item
+          >
+          <mat-list-item
+            ><span class="progress-status process-status-not-yet-started"></span
+          ></mat-list-item>
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span
+                class="image-content add-repository"
+                alt="Add Artifacts"
+                title="Add Artifacts"
+              ></span>
+              <span>Add Artifacts </span>
+            </div></mat-list-item
+          >
+          <mat-list-item
+            ><span class="progress-status process-status-not-yet-started"></span
+          ></mat-list-item>
+          <mat-list-item role="listitem"
+            ><div style="display: flex; flex-direction: column">
+              <span
+                class="image-content not-yet-onboarded"
+                alt="Not yet on-boarded"
+                title="Not yet on-boarded"
+              ></span>
+              <span>Not yet on-boarded </span>
+            </div></mat-list-item
+          >
+        </mat-list>
+      }
+    </div>
+    <div style="display: flex">
+      <div style="display: flex; flex-direction: column; width: 100%">
+        <!-- onboarding model form-->
+        <form style="width: 100" [formGroup]="onboardingModelForm">
+          <!--model name-->
+          <div style="display: flex; flex-direction: column">
+            <mat-label>Model name</mat-label>
+            <mat-form-field>
+              <input matInput formControlName="name" />
+              @if (
+                onboardingModelForm.controls["name"].errors?.["pattern"] &&
+                onboardingModelForm.controls["name"].touched
+              ) {
+                <mat-error class="modal-error"
+                  >Name must consist of lower case alphanumeric characters, '-'
+                  or '.', and must start and end with an alphanumeric
+                  character</mat-error
+                >
+              }
+              @if (
+                onboardingModelForm.controls["name"].errors?.["required"] &&
+                onboardingModelForm.controls["name"].touched
+              ) {
+                <mat-error class="modal-error">Name is required</mat-error>
+              }
+            </mat-form-field>
+          </div>
+          <!--docker URI-->
+          <div style="display: flex; flex-direction: column">
+            <mat-label>Docker URI </mat-label>
+            <mat-hint class="modal-note green"
+              ><strong>Dockerhub image example:</strong>
+              docker.io/myimage:latest
+            </mat-hint>
+            <mat-hint class="modal-note green"
+              ><strong>General public registry image example:</strong>
+              cicd.ai4eu-dev.eu:7444/myimage:v1
+            </mat-hint>
+            <mat-form-field>
+              <input matInput formControlName="dockerURI" />
+              @if (
+                onboardingModelForm.controls["dockerURI"].errors?.[
+                  "required"
+                ] && onboardingModelForm.controls["dockerURI"].touched
+              ) {
+                <mat-error class="modal-error"
+                  >Docker URI is required</mat-error
+                >
+              }
+            </mat-form-field>
+          </div>
+          <!--protobuf file-->
+          <div style="display: flex; flex-direction: column; width: 100%">
+            <mat-label>Upload Protobuf File </mat-label>
+            <div style="display: flex; width: 100%; gap: 10px">
+              <mat-form-field style="height: 70px">
+                <input matInput [value]="fileName" />
+                <mat-hint class="modal-note full-width no-padding">
+                  Supported files type: .proto</mat-hint
+                >
+
+                <input
+                  #fileDropRef
+                  type="file"
+                  id="fileInput"
+                  name="fileInput"
+                  (change)="selectFile($event)"
+                  hidden
+                  formControlName="protobufFile"
+                />
+              </mat-form-field>
+
+              <button
+                style="height: 48px"
+                color="primary"
+                mat-raised-button
+                (click)="uploadFile()"
+              >
+                Upload file
+              </button>
+            </div>
+            @if (message !== "") {
+              <span class="modal-error">.proto file is required.</span>
+            }
+            <!-- @if (
+              onboardingModelForm.controls["protobufFile"].errors?.[
+                "required"
+              ] && onboardingModelForm.controls["protobufFile"].touched
+            ) {
+              <span class="modal-error">.proto file is required.</span>
+            } -->
+          </div>
+          <!--license profile-->
+          <div style="display: flex; flex-direction: column">
+            <mat-checkbox
+              color="primary"
+              formControlName="addLicenseProfile"
+              (change)="onClickUpload($event)"
+              >Add License Profile</mat-checkbox
+            >
+
+            <!--  <mat-radio-group color="primary">
+              <mat-radio-button value="auto" (click)="onCreateLicenseProfile()"
+                >Create license profile</mat-radio-button
+              >
+              <mat-radio-button
+                value="always"
+                (click)="onClickUploadLicenseProfile()"
+                >Upload license profile</mat-radio-button
+              >
+            </mat-radio-group> -->
+          </div>
+          @if (
+            onboardingModelForm.controls["addLicenseProfile"].value === true
+          ) {
+            <gp-model-details-license-profile></gp-model-details-license-profile>
+          }
+
+          <div style="display: flex">
+            <button mat-raised-button (click)="resetData()">Reset form</button>
+            <button
+              mat-raised-button
+              color="primary"
+              [disabled]="!enableSubmit"
+            >
+              On-board model
+            </button>
+          </div>
+        </form>
+      </div>
+      <!--onboarding history-->
+      <div></div>
+    </div>
+  </div>
+</div>

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss

+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+#fileInput {
+  position: absolute;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+.asterisk--after:after {
+  content: "*";
+  color: red;
+}
+
+.modal-error {
+  color: red;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif !important;
+  padding: 0;
+}
+
+.modal-note {
+  color: #888;
+  font-size: 12px;
+  font-family: "Open Sans", sans-serif !important;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.green {
+  color: green;
+}
+::ng-deep.mat-mdc-form-field-hint-wrapper,
+::ng-deep.mat-mdc-form-field-error-wrapper {
+  padding: 0 !important;
+}
+.micro-service {
+  background-image: url(../../../../assets/images/ico_create_micro_service.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.micro-service-process-completed {
+  background-image: url(../../../../assets/images/ico_create_micro_service_green.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* .progress-status:after {
+  content: "" !important;
+  background: url("../../../../assets/images/loading_deactive.png") no-repeat
+    left center;
+  display: inline-block;
+  width: 45px;
+  height: 12px;
+  transform: scale(0.8);
+}
+ */
+.process-status-not-yet-started {
+  background: url("../../../../assets/images/loading_deactive.png") no-repeat
+    left center;
+}
+
+.progress-status-completed {
+  background: url("../../../../assets/images/stepper_progress_completed.png")
+    no-repeat left center;
+}
+
+.progress-status {
+  display: inline-block;
+  width: 47px;
+  height: 11px;
+  transform: scale(0.8);
+}
+
+.add-repository {
+  background-image: url(../../../../assets/images/ico_add_to_repository.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.add-repository-completed {
+  background-image: url(../../../../assets/images/ico_add_to_repository_green.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.not-yet-onboarded {
+  background-image: url(../../../../assets/images/ico_not_yet_onboarded.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.onboarded-completed {
+  background-image: url(../../../../assets/images/ico-checkmark.png);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.image-content {
+  width: 62px;
+  height: 62px;
+  border-radius: 62px;
+
+  border: 3px solid #fff;
+  background-color: #ebebeb;
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  line-height: 68px;
+}
+
+.mdc-list-item.mdc-list-item--with-one-line {
+  height: 90px;
+}

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts

-import { Component } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
+import { MatDividerModule } from '@angular/material/divider';
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import {
+  MatCheckboxChange,
+  MatCheckboxModule,
+} from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { UploadLicenseProfileComponent } from 'src/app/shared/components/upload-license-profile/upload-license-profile.component';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { CreateEditLicenseProfileComponent } from 'src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component';
+import { MatRadioModule } from '@angular/material/radio';
+import { ModelDetailsLicenseProfileComponent } from 'src/app/shared/components/model-details-license-profile/model-details-license-profile.component';
+import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
+import { Alert, AlertType, LicenseProfileModel } from 'src/app/shared/models';
+import { HttpEventType } from '@angular/common/http';
+import { AlertService } from 'src/app/core/services/alert.service';
+import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
+import { Observable, Subject, Subscription, map, takeUntil } from 'rxjs';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'gp-on-boarding-model',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    HeadlineComponent,
+    BreadcrumbNavigationComponent,
+    MatDividerModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    UploadLicenseProfileComponent,
+    MatRadioModule,
+    ModelDetailsLicenseProfileComponent,
+    MatListModule,
+  ],
   templateUrl: './on-boarding-model.component.html',
-  styleUrl: './on-boarding-model.component.scss'
+  styleUrl: './on-boarding-model.component.scss',
 })
-export class OnBoardingModelComponent {
+export class OnBoardingModelComponent implements OnInit {
+  @ViewChild('fileDropRef') fileDropRef!: ElementRef<HTMLInputElement>;
+  currentFile?: File;
+  fileSize = 0;
+  message = '';
+  fileName = 'No chosen file';
+  onboardingModelForm!: FormGroup;
+  modelUploadError: boolean = false;
+  modelUploadErrorMsg: string[] = [];
+  userId$: Observable<string | undefined>;
+  solutionTrackId!: string;
+  enableSubmit: boolean = false;
+  private onDestroy = new Subject<void>();
+  private subscription: Subscription = new Subscription();
+  modelLicense: LicenseProfileModel | null = null;
 
+  constructor(
+    private formBuilder: FormBuilder,
+    private sharedDataService: SharedDataService,
+    public dialog: MatDialog,
+    private alertService: AlertService,
+    private privateCatalogsService: PrivateCatalogsService,
+    private browserStorageService: BrowserStorageService,
+  ) {
+    this.onboardingModelForm = this.formBuilder.group({
+      name: [
+        '',
+        [
+          Validators.required,
+          Validators.pattern('^(?=.*[a-z])[A-Za-z0-9]+[-.][A-Za-z0-9]+$'),
+          // this.notSameAsPublisher(this.publisherName),
+        ],
+        // [],
+      ],
+      dockerURI: ['', [Validators.required]],
+      protobufFile: [null, [Validators.required]],
+      addLicenseProfile: [false],
+      licenseProfile: [null],
+    });
+
+    this.userId$ = this.browserStorageService
+      .getUserDetails()
+      .pipe(map((details) => details?.userId));
+  }
+  ngOnInit(): void {
+    this.subscription.add(
+      this.sharedDataService.licenseProfile$.subscribe((licenseProfile) => {
+        this.modelLicense = licenseProfile;
+        this.onboardingModelForm.patchValue({
+          licenseProfile: licenseProfile,
+        });
+        /**
+         * this.cd.detectChanges();  // Manually trigger change detection
+         */
+        if (licenseProfile) {
+          console.log('License profile updated:', licenseProfile);
+        } else {
+          console.log('License profile reset to null');
+        }
+      }),
+    );
+
+    this.onboardingModelForm.valueChanges
+      .pipe(takeUntil(this.onDestroy))
+      .subscribe(() => {
+        this.checkFormValidity();
+      });
+  }
+
+  checkFormValidity() {
+    const { name, dockerURI, addLicenseProfile, protobufFile } =
+      this.onboardingModelForm.value;
+    console.log({ protobufFile });
+    if (!addLicenseProfile) {
+      console.log('currentFile', this.currentFile);
+      this.enableSubmit = name && dockerURI && protobufFile;
+    } else {
+      this.enableSubmit =
+        name && dockerURI && this.currentFile && this.modelLicense;
+    }
+  }
+
+  onHomeClick() {}
+
+  ngOnDestroy() {
+    this.onDestroy.next();
+    this.onDestroy.complete();
+  }
+
+  selectFile(event: any): void {
+    this.message = '';
+
+    if (event.target.files && event.target.files[0]) {
+      const file: File = event.target.files[0];
+      this.currentFile = file;
+      this.fileName = this.currentFile.name;
+      this.onboardingModelForm.patchValue({ protobufFile: file });
+      console.log('file info', this.currentFile);
+      const extensionFile = this.getFilenameExtension(this.fileName);
+      if (extensionFile !== 'proto') {
+        this.message = '.proto file is required.';
+      } else if (this.currentFile && extensionFile === 'proto') {
+        console.log('inside proto');
+        this.privateCatalogsService
+          .uploadProtoBufFile(this.currentFile)
+          .subscribe({
+            next: (event) => this.processEvent(event),
+            error: (error) => {}, // To catch any errors not caught by catchError
+            complete: () => {},
+          });
+      }
+    } else {
+      this.fileName = 'No chosen file';
+    }
+  }
+  /* 
+  handleFileInput(event: Event | File) {
+    let file: File | null = null;
+    if (event instanceof File) {
+      file = event;
+    } else {
+      const element = event.target as HTMLInputElement;
+      file = element.files?.[0] || null;
+    }
+    if (file) {
+      this.currentFile = file;
+      if (this.currentFile.size / 1024 / 1024 < 1) {
+        this.fileSize = Math.ceil(file.size / 1024);
+      }
+    }
+  } */
+
+  uploadFile() {
+    event?.preventDefault();
+    this.fileDropRef.nativeElement.click();
+    if (this.currentFile) {
+      console.log('current file', this.currentFile);
+      this.privateCatalogsService
+        .uploadProtoBufFile(this.currentFile)
+        .subscribe({
+          next: (event) => this.processEvent(event),
+          error: (error) => {}, // To catch any errors not caught by catchError
+          complete: () => {},
+        });
+    }
+  }
+
+  getFilenameExtension(filename: string): string {
+    // Split the filename by dot (.) and get the last element of the array
+    const parts = filename.split('.');
+    return parts[parts.length - 1];
+  }
+
+  onClickUpload(event: MatCheckboxChange) {}
+
+  onCreateLicenseProfile() {
+    const dialogRef: MatDialogRef<CreateEditLicenseProfileComponent> =
+      this.dialog.open(CreateEditLicenseProfileComponent, {
+        data: {
+          dataKey: {
+            isEditMode: false,
+            solutionId: '',
+            revisionId: '',
+          },
+        },
+      });
+    dialogRef.afterClosed().subscribe((result) => {
+      // This will be executed when the dialog is closed
+      // Reload data to fetch the updated license profile
+    });
+  }
+
+  onClickUploadLicenseProfile() {
+    const dialogRef: MatDialogRef<UploadLicenseProfileComponent> =
+      this.dialog.open(UploadLicenseProfileComponent);
+  }
+
+  resetData() {
+    this.onboardingModelForm.reset();
+    this.sharedDataService.licenseProfile = null;
+  }
+
+  processEvent(event: any): void {
+    if (event && event.type === HttpEventType.Response) {
+      this.handleUploadSuccess(event.body);
+    }
+  }
+
+  private handleUploadSuccess(response: any) {
+    const alert: Alert = {
+      message: 'File uploaded successfully',
+      type: AlertType.Success,
+    };
+    this.alertService.notify(alert, 5000);
+  }
+
+  private handleUploadError(error: any) {
+    // Error handling logic here
+    this.modelUploadError = true;
+    if (error) {
+      this.modelUploadErrorMsg = [error];
+    } else if (error.error) {
+      const messageError = error.error.response_detail ?? error.error;
+      this.modelUploadErrorMsg = [messageError];
+    }
+
+    // Additional error handling
+  }
 }

src/app/features/login/local-login/local-login.component.ts

@@ -19,7 +19,7 @@ import {
 
 import { AuthService } from 'src/app/core/services/auth/auth.service';
 import { LocalLoginService } from 'src/app/core/services/auth/local-login.service';
-import { NavigationStart, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import {

src/app/features/marketplace/marketplace.component.html

 <section class="pageheadsection mob-pageheadsection1">
   <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
     <div>
-      <div class="headline">
-        <span>Marketplace | </span>
-      </div>
+      <gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
       <div
         style="display: flex; flex-direction: row; align-items: center"
         *ngIf="loginUserId"

src/app/features/marketplace/marketplace.component.ts

@@ -34,6 +34,7 @@ import { BrowserStorageService } from 'src/app/core/services/storage/browser-sto
 import { Observable, Subscription, map } from 'rxjs';
 import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
 import { MatButtonModule } from '@angular/material/button';
+import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
 
 @Component({
   selector: 'gp-marketplace',
@@ -50,6 +51,7 @@ import { MatButtonModule } from '@angular/material/button';
     SolutionsToggleViewComponent,
     ListItemComponent,
     MatButtonModule,
+    HeadlineComponent,
   ],
   templateUrl: './marketplace.component.html',
   styleUrl: './marketplace.component.scss',

src/app/features/model-details/model-details.component.html

@@ -89,8 +89,8 @@
   <div class="md-head-container2" style="margin-top: 12px">
     <gp-breadcrumb-navigation
       [solution]="data.solution"
-      [firstNavigationLabel]="'Home'"
-      [secondNavigationLabel]="'MarketPlace'"
+      [firstNavigationLabel]="{ label: 'Home' }"
+      [secondNavigationLabel]="{ label: 'MarketPlace' }"
       (firstNavigationClicked)="onHomeClick()"
       (secondNavigationClicked)="onMarketPlaceClick()"
     ></gp-breadcrumb-navigation>

src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component.html

 <ul class="c-breadcrumb">
-  <li>
-    <a (click)="onFirstNavigationLabelClick()">{{ firstNavigationLabel }}</a>
-  </li>
-  <li>
-    <a (click)="onSecondNavigationClick()">{{ secondNavigationLabel }}</a>
-  </li>
-  <li>
-    <span
-      class="md-breadcrumb-item"
-      matTooltip="{{ solution?.name?.toString()?.split('_')?.join(' ') }}"
-      >{{ solution?.name?.toString()?.split("_")?.join(" ") }}</span
-    >
-  </li>
-  <li>
-    <gp-solution-id [solutionId]="solution.solutionId"></gp-solution-id>
+  <li [ariaDisabled]="firstNavigationLabel.disabled">
+    <a (click)="onFirstNavigationLabelClick()">{{
+      firstNavigationLabel.label
+    }}</a>
   </li>
+  @if (secondNavigationLabel) {
+    <li [ariaDisabled]="secondNavigationLabel.disabled">
+      <a (click)="onSecondNavigationClick()">{{
+        secondNavigationLabel.label
+      }}</a>
+    </li>
+  }
+  @if (solution) {
+    <li>
+      <span
+        class="md-breadcrumb-item"
+        matTooltip="{{ solution?.name?.toString()?.split('_')?.join(' ') }}"
+        >{{ solution?.name?.toString()?.split("_")?.join(" ") }}</span
+      >
+    </li>
+    <li>
+      <gp-solution-id [solutionId]="solution.solutionId"></gp-solution-id>
+    </li>
+  }
 </ul>

src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component.scss

@@ -54,3 +54,7 @@
   display: inline-block;
   padding: 0 5px;
 }
+
+[aria-disabled="true"] {
+  pointer-events: none;
+}

src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component.ts

 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SolutionIdComponent } from '../solution-id/solution-id.component';
-import { PublicSolutionDetailsModel } from '../../models';
+import { NavigationLabelModel, PublicSolutionDetailsModel } from '../../models';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
@@ -12,8 +12,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
   styleUrl: './breadcrumb-navigation.component.scss',
 })
 export class BreadcrumbNavigationComponent {
-  @Input() firstNavigationLabel!: string;
-  @Input() secondNavigationLabel!: string;
+  @Input() firstNavigationLabel!: NavigationLabelModel;
+  @Input() secondNavigationLabel!: NavigationLabelModel;
   @Input() solution!: PublicSolutionDetailsModel;
 
   @Output() firstNavigationClicked = new EventEmitter<void>();

src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.ts

@@ -117,6 +117,7 @@ export class CreateEditLicenseProfileComponent implements OnInit {
     this.isEditMode = this.data.dataKey.isEditMode;
     this.solutionId = this.data.dataKey.solutionId;
     this.revisionId = this.data.dataKey.revisionId;
+
     this.initializeForm();
     this.setupFormValueChangesSubscription();
     if (this.modelLicense) this.updateFormValues();
@@ -235,6 +236,7 @@ export class CreateEditLicenseProfileComponent implements OnInit {
           next: (event) => {
             if (event.type === HttpEventType.Response) {
               this.handleUploadSuccess(event.body);
+              this.sharedDataService.licenseProfile = licenseProfile;
               this.dialogRef.close();
             }
           },

src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component.ts

@@ -8,9 +8,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
-import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
-import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
-import { Alert, AlertType, UserDetails } from '../../models';
+import { AlertType } from '../../models';
 import { AlertService } from 'src/app/core/services/alert.service';
 
 @Component({

src/app/shared/components/headline/headline.component.html

+<div class="headline">
+  <span>{{ headlineTitle }} </span>
+</div>

src/app/shared/components/headline/headline.component.scss

+.headline {
+  font-size: 20px;
+  height: 30px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.02em;
+  margin: 3px 0;
+  padding: 0;
+  color: #671c9d;
+  text-overflow: ellipsis;
+  float: left;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/app/shared/components/headline/headline.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeadlineComponent } from './headline.component';
+
+describe('HeadlineComponent', () => {
+  let component: HeadlineComponent;
+  let fixture: ComponentFixture<HeadlineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeadlineComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(HeadlineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/headline/headline.component.ts

+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'gp-headline',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './headline.component.html',
+  styleUrl: './headline.component.scss',
+})
+export class HeadlineComponent {
+  @Input() headlineTitle!: string;
+}

src/app/shared/components/home/home.component.html

@@ -15,7 +15,6 @@
           >
             Marketplace
           </button>
-          <button mat-button (click)="onClickUpload()">Onboard Model</button>
         </div>
       </div>
     </div>

src/app/shared/components/home/home.component.ts

@@ -35,7 +35,6 @@ export class HomeComponent {
   constructor(
     private publicSolutionsService: PublicSolutionsService,
     private router: Router,
-    public dialog: MatDialog,
     private browserStorageService: BrowserStorageService,
   ) {
     this.userId$ = this.browserStorageService
@@ -77,11 +76,4 @@ export class HomeComponent {
       }),
     );
   }
-
-  onClickUpload() {
-    if (this.userId$) {
-      const dialogRef: MatDialogRef<UploadLicenseProfileComponent> =
-        this.dialog.open(UploadLicenseProfileComponent);
-    }
-  }
 }