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

website/.eslintrc.json

@@ -40,7 +40,6 @@
           }
         ],
         "@angular-eslint/no-output-native": "warn",
-        "@angular-eslint/no-host-metadata-property": "warn",
         // @typescript-eslint
         "@typescript-eslint/explicit-member-accessibility": [
           "error",

website/package.json

@@ -14,20 +14,22 @@
   },
   "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",
     "@ng-bootstrap/ng-bootstrap": "^18.0.0",
     "@popperjs/core": "^2.11.8",
+    "@typescript-eslint/eslint-plugin": "7",
+    "@typescript-eslint/parser": "7",
     "bootstrap": "^5.3.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^50.6.8",
@@ -44,23 +46,29 @@
     "@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-jasmine": "^4.2.2",
+    "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/app.component.spec.ts

@@ -16,19 +16,5 @@ describe('AppComponent', () => {
     expect(app)
       .toBeTruthy();
   });
-
-  it('should have the \'meshstack-hub\' title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title)
-      .toEqual('meshstack-hub');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent)
-      .toContain('Hello, meshstack-hub');
-  });
 });
+

website/src/app/app.component.ts

@@ -8,7 +8,7 @@ import { HeaderComponent } from 'app/shared/header/header.component';
 import { FooterComponent } from './shared/footer';
 
 @Component({
-  selector: 'app-root',
+  selector: 'mst-root',
   imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, NgbModule],
   templateUrl: './app.component.html',
   standalone: true

website/src/app/app.config.ts

@@ -6,5 +6,10 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideHttpClient(withFetch()), provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
+  providers: [
+    provideHttpClient(withFetch()),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideClientHydration(withEventReplay())
+  ]
 };

website/src/app/core/template.ts

@@ -8,7 +8,7 @@ export interface Template {
 	githubUrls: {
 		ssh: string;
 		https: string;
-	},
+	};
 	supportedPlatforms: PlatformType[];
 }
 

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

@@ -15,27 +15,40 @@
       <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>
-          <input
-            type="text"
-            class="form-control"
-            aria-label="meshStack URL"
-            formControlName="meshStackUrl"
-            (keyup.enter)="open()"
-            placeholder="Enter your meshStack URL"
-          />
+        <form [formGroup]="form" (ngSubmit)="openMeshStackUrl()">
+          <label class="form-label" for="meshStackUrl">Your meshStack URL</label>
+          <div class="ms-2">
+            <input
+              type="text"
+              class="form-control"
+              aria-label="meshStack URL"
+              formControlName="meshStackUrl"
+              placeholder="Enter your meshStack URL"
+            />
+            <div
+              *ngIf="form.controls.meshStackUrl.invalid && form.controls.meshStackUrl.touched"
+              class="mt-1 text-danger small"
+            >
+              Please enter a valid URL.
+            </div>
+          </div>
         </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,34 +1,61 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule, 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],
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './import-dialog.component.html',
-  styleUrl: './import-dialog.component.scss'
+  styleUrl: './import-dialog.component.scss',
+  standalone: true
 })
 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 {
+  public 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 = this.getSanitizedMeshStackUrl() + '/#/building-block-definition-import?name=' + this.name + '&module-path=' + this.modulePath;
+      window.open(url.toString(), '_blank', 'noopener,noreferrer');
+    }
   }
 
+  private getSanitizedMeshStackUrl(): string {
+    let meshStackUrl = this.form.controls.meshStackUrl.value;
+    const hashIndex = meshStackUrl.indexOf('#');
+
+    if (hashIndex !== -1) {
+      meshStackUrl = meshStackUrl.substring(0, hashIndex);
+    }
+
+    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>
@@ -39,7 +39,7 @@ <h2 class="fw-bold h4">
                   <a [href]="template.source" target="_blank" rel="noopener noreferrer" class="mr-3 flex-grow-1">
                     {{ template.source }}
                   </a>
-                  <button (click)="copyToClipboard(template.source)" class="btn btn-light btn-sm">
+                  <button type="button" (click)="copyToClipboard(template.source)" class="btn btn-light btn-sm">
                     <i *ngIf="copyLabel === 'Copy'" class="fas fa-copy"></i>
                     <i *ngIf="copyLabel === 'Copied'" class="fa-solid fa-check"></i>
                     {{ copyLabel }}
@@ -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 type="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;
+    }
   }
 
 }