feat: implement to open meshStack link to open in a new tab to use template

* update dependencies
* fix spellings and minor improvements

CU-86c2nhgk4

Author: uleMeshcloud

website/package.json

@@ -14,15 +14,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/platform-server": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@angular/ssr": "^19.2.3",
+    "@angular/common": "19.2.5",
+    "@angular/compiler": "19.2.5",
+    "@angular/core": "19.2.5",
+    "@angular/forms": "19.2.5",
+    "@angular/platform-browser": "19.2.5",
+    "@angular/platform-browser-dynamic": "19.2.5",
+    "@angular/platform-server": "19.2.5",
+    "@angular/router": "19.2.5",
+    "@angular/ssr": "19.2.5",
     "@fontsource/montserrat": "^5.2.5",
     "@fontsource/roboto": "^5.2.5",
     "@fortawesome/fontawesome-free": "^6.7.2",
@@ -44,23 +44,33 @@
     "@angular-eslint/schematics": "19.2.1",
     "@angular-eslint/template-parser": "19.2.1",
     "@angular/cli": "^19.2.3",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular/compiler-cli": "19.2.5",
+    "@angular/localize": "19.2.5",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "20",
     "@typescript-eslint/eslint-plugin": "^8.28.0",
     "@typescript-eslint/parser": "^8.28.0",
+    "@typescript-eslint/types": "^8.0.0",
+    "@typescript-eslint/utils": "^8.0.0",
     "angular-eslint": "19.2.1",
-    "eslint": "^9.23.0",
-    "eslint-import-resolver-typescript": "^4.2.4",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "2.25.2",
+    "eslint-plugin-jasmine": "^4.2.2",
+    "eslint-plugin-jsdoc": "^43.0.5",
+    "eslint-plugin-local-rules": "^3.0.2",
+    "eslint-plugin-prefer-arrow": "1.2.2",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.5.3",
-    "typescript": "~5.7.2"
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.0"
   },
   "engines": {
     "node": "^20.0"

website/src/app/features/template-details/import-dialog/import-dialog.component.html

@@ -15,27 +15,32 @@
       <h4 class="card-title fw-bold">Provide link of your meshStack</h4>
       <h5 class="card-text mt-3">to continue using this building block template</h5>
       <div class="pt-4 text-start">
-        <form [formGroup]="form" (ngSubmit)="open()">
-          <label class="form-label" for="meshStackUrl">meshStack URL</label>
+        <form [formGroup]="form" (ngSubmit)="openMeshStackUrl()">
+          <label class="form-label" for="meshStackUrl">Your meshStack URL</label>
           <input
             type="text"
             class="form-control"
             aria-label="meshStack URL"
             formControlName="meshStackUrl"
-            (keyup.enter)="open()"
             placeholder="Enter your meshStack URL"
           />
         </form>
       </div>
-      <a [href]="meshStackUrl" class="btn btn-primary mt-4" (click)="open()" target="_blank" rel="noopener noreferrer">
+      <button
+        type="submit"
+        class="btn btn-primary mt-4"
+        [disabled]="!form.valid"
+        aria-label="Open up meshStack to add template"
+        (click)="openMeshStackUrl()"
+      >
         Add to meshStack
         <i class="fa-solid fa-arrow-up-right-from-square ms-2"></i>
-      </a>
+      </button>
       <hr />
       <div class="pt-3">
         <p>Don't use meshStack yet?</p>
-        <p>Check out and how it can help your platform team</p>
-        <a href="https://www.meshcloud.io/en/book-demo" class="btn btn-outline-primary mt-2" (click)="open()">
+        <p>Check it out and how it can help your platform team</p>
+        <a href="https://www.meshcloud.io/en/book-demo" class="btn btn-outline-primary mt-2">
           Discover meshStack
           <img src="assets/meshstack-logo.png" alt="meshStack Logo" class="button-image" />
         </a>

website/src/app/features/template-details/import-dialog/import-dialog.component.ts

@@ -1,7 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { isPlatformBrowser } from '@angular/common';
+import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
+interface ImportDialogForm {
+  meshStackUrl: FormControl<string>;
+}
+
 @Component({
   selector: 'mst-import-dialog',
   imports: [ReactiveFormsModule],
@@ -10,25 +15,42 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 })
 export class ImportDialogComponent implements OnInit {
 
-  public form!: FormGroup;
+  @Input()
+  public name!: string;
 
-  public get meshStackUrl() {
-    return this.form.get('meshStackUrl')?.value;
-  }
+  @Input()
+  public modulePath!: string;
+
+  public form!: FormGroup<ImportDialogForm>;
 
   constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
     public activeModal: NgbActiveModal,
     private fb: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
-      meshStackUrl: ['']
+      meshStackUrl: this.fb.nonNullable.control('', [Validators.required, Validators.pattern(/^(https?:\/\/).*/)]),
     });
   }
 
-  public open() {
-
+  public openMeshStackUrl() {
+    // Only runs in browser, not during SSR
+    if (isPlatformBrowser(this.platformId)) {
+      const url = new URL(this.getSanitizedMeshStackUrl());
+      url.searchParams.set('module-path', this.modulePath);
+      url.searchParams.set('name', this.name);
+      window.open(url.toString(), '_blank', 'noopener,noreferrer');
+    }
   }
 
+  private getSanitizedMeshStackUrl(): string {
+    let meshStackUrl = this.form.controls.meshStackUrl.value;
+      if (meshStackUrl.endsWith('/')) {
+        meshStackUrl = meshStackUrl.slice(0, -1);
+      }
+
+      return meshStackUrl;
+  }
 }

website/src/app/features/template-details/template-details.component.html

@@ -3,7 +3,7 @@
     <ng-container *ngIf="template$ | async as template">
       <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-          <li class="breadcrumb-item ps-0"><a href="#">meshStack Hub</a></li>
+          <li class="breadcrumb-item ps-0"><a href="#">Overview</a></li>
           <li class="breadcrumb-item active" aria-current="page">{{ template.name }}</li>
         </ol>
       </nav>
@@ -79,7 +79,7 @@ <h3 class="fw-bold h6">Option 2: Copy the Files into your own Repository</h3>
 
               <div class="pt-5 d-flex justify-content-end">
                 <a href="#" class="btn btn-outline-primary me-2">Go Back</a>
-                <button class="btn btn-primary" (click)="open()">Use template</button>
+                <button class="btn btn-primary" (click)="open(template)">Add to meshStack</button>
               </div>
             </div>
           </div>

website/src/app/features/template-details/template-details.component.scss

@@ -27,9 +27,9 @@
   line-height: 2rem;
 }
 
-.breadcrumb-item+.breadcrumb-item::before {
-  content: "\f054";
-  font-family: "Font Awesome 6 Free";
+.breadcrumb-item + .breadcrumb-item::before {
+  content: '\f054';
+  font-family: 'Font Awesome 6 Free';
   font-weight: 900;
-  color: gray
-}
+  color: gray;
+}

website/src/app/features/template-details/template-details.component.ts

@@ -71,11 +71,25 @@ export class TemplateDetailsComponent implements OnInit, OnDestroy {
           this.copyLabel = 'Copy';
         }, 1000);
       })
-      .catch(e => console.log(e));
+      .catch(e =>
+        /* eslint-disable-next-line */
+        console.log(e)
+      );
   }
 
-  public open() {
-    this.modalService.open(ImportDialogComponent, { size: 'lg', centered: true });
+  public open(template: TemplateDetailsVm) {
+    const regex = /modules\/[^\/]+\/[^\/]+/;
+    const match = template.source.match(regex);
+    const modulePath = match ? match[0] : '';
+
+    if (!modulePath) {
+      /* eslint-disable-next-line */
+      console.error('Module path not found in source URL');
+    } else {
+      const component = this.modalService.open(ImportDialogComponent, { size: 'lg', centered: true }).componentInstance;
+      component.name = template.name;
+      component.modulePath = modulePath;
+    }
   }
 
 }