From 349863211de4629d1f9d8c85dd5ccd8fc9c818f0 Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Thu, 24 Aug 2023 21:22:04 -0700
Subject: [PATCH] handle errors better. add dashboard location validation.

---
 .../pages/dashboard/dashboard.component.html  | 20 ++++++++++++++++++-
 .../pages/dashboard/dashboard.component.ts    |  6 +++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/dashboard/dashboard.component.html b/frontend/src/app/pages/dashboard/dashboard.component.html
index 692a1d1b..2433808f 100644
--- a/frontend/src/app/pages/dashboard/dashboard.component.html
+++ b/frontend/src/app/pages/dashboard/dashboard.component.html
@@ -79,16 +79,34 @@
             id="remoteDashboardLocation"
             class="form-control"
             placeholder="https://gist.github.com/..."
+            pattern="https://gist.github.com/.*"
             name="remoteDashboardLocation"
             type="url"
             [(ngModel)]="dashboardLocation"
+            #dashboardLocationField="ngModel"
           />
         </div>
       </div>
+
+      <div *ngIf="dashboardLocationField.invalid && (dashboardLocationField.dirty || dashboardLocationField.touched)"
+           class="alert alert-danger">
+
+        <div *ngIf="dashboardLocationField.errors?.['required']">
+          Dashboard Location is required.
+        </div>
+        <div *ngIf="dashboardLocationField.errors?.['pattern']">
+          Dashboard Location must be a valid github gist url.
+        </div>
+      </div>
+
+      <div *ngIf="dashboardLocationError" class="alert alert-danger">
+        {{dashboardLocationError}}
+      </div>
+
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
+    <button type="button" class="btn  btn-outline-indigo" [disabled]="addDashboardLoading" (click)="addDashboardLocation()">Add</button>
   </div>
 </ng-template>
 
diff --git a/frontend/src/app/pages/dashboard/dashboard.component.ts b/frontend/src/app/pages/dashboard/dashboard.component.ts
index 85bb5780..6337b4fb 100644
--- a/frontend/src/app/pages/dashboard/dashboard.component.ts
+++ b/frontend/src/app/pages/dashboard/dashboard.component.ts
@@ -36,6 +36,7 @@ export class DashboardComponent implements OnInit {
   //dashboardLocation is used to store the location of the dashboard that we're trying to add
   addDashboardLoading: boolean = false
   dashboardLocation: string = ''
+  dashboardLocationError: string = ''
 
   @ViewChild(GridstackComponent) gridComp?: GridstackComponent;
 
@@ -140,6 +141,7 @@ export class DashboardComponent implements OnInit {
 
   public addDashboardLocation(){
     this.addDashboardLoading = true
+    this.dashboardLocationError = ''
     this.fastenApi.addDashboardLocation(this.dashboardLocation).subscribe((result) => {
       console.log("Added Remote Dashboard", result)
       this.addDashboardLoading = false
@@ -151,7 +153,9 @@ export class DashboardComponent implements OnInit {
     }, (error) => {
       console.log("Error Adding Remote Dashboard", error)
       this.addDashboardLoading = false
-    },
+      this.dashboardLocationError = error
+
+      },
     () => {
       console.log("Completed Adding Remote Dashboard")
       this.addDashboardLoading = false