feat: fix logic to open url

* display error message if url is not valid

CU-86c2nhgk4

Author: uleMeshcloud

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/features/template-details/import-dialog/import-dialog.component.html

@@ -17,13 +17,21 @@ <h5 class="card-text mt-3">to continue using this building block template</h5>
       <div class="pt-4 text-start">
         <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"
-            placeholder="Enter your meshStack URL"
-          />
+          <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>
       <button

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

@@ -1,4 +1,4 @@
-import { isPlatformBrowser } from '@angular/common';
+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';
@@ -9,9 +9,10 @@ interface ImportDialogForm {
 
 @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 {
 
@@ -38,9 +39,7 @@ export class ImportDialogComponent implements OnInit {
   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);
+      const url = this.getSanitizedMeshStackUrl() + '/#/building-block-definition-import?name=' + this.name + '&module-path=' + this.modulePath;
       window.open(url.toString(), '_blank', 'noopener,noreferrer');
     }
   }