From ff3a9717c5ab91dc9e1698dbec7cb62ae9089ec0 Mon Sep 17 00:00:00 2001
From: Katherine Brown <katherinebrown@Katherines-MBP.attlocal.net>
Date: Tue, 15 Oct 2024 15:09:54 -0500
Subject: [PATCH] rebased onto develop

---
 .../lib/arc-admin/arc-admin.component.html    | 302 ++++++------------
 .../lib/arc-admin/arc-admin.component.scss    |  30 +-
 .../src/lib/arc-admin/arc-admin.component.ts  |  63 +++-
 .../lib/arc-event/arc-event.component.html    |  19 +-
 .../lib/arc-layer/arc-layer.component.html    |  65 +++-
 .../lib/arc-layer/arc-layer.component.scss    |   6 +-
 6 files changed, 248 insertions(+), 237 deletions(-)

diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
index 29b876af6..10eb5d38b 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
@@ -1,7 +1,5 @@
 <div class="arc-admin">
   <h1>ArcGIS Configuration</h1>
-  <br/>
-
   <mat-card appearance="outlined">
     <mat-card-header>
       <mat-card-title>
@@ -73,199 +71,111 @@ <h1>ArcGIS Configuration</h1>
       <button (click)="onEditProcessing()" mat-button>Edit</button>
     </mat-card-actions>
   </mat-card>
-
-
-  <!-- <section class="arc-processing">
-    <header>
-      <h2>Processing <button class="edit-button" mat-icon-button (click)="onEditProcessing()"><mat-icon>edit</mat-icon></button></h2>
-      <p class="subheading">MAGE ArcGIS plugin processing settings.</p>
-    </header>
-    <div class="processing">
-      <table class="processing-table">
-        <tr>
-          <th>Enabled
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Enabled', 'Process observations and send to configured ArcGIS feature layers')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.enabled}}</td>
-        </tr>
-        <tr>
-          <th>Base URL
-            <button class="info-button" mat-icon-button (click)="showInfo('Base URL', 'MAGE server base URL')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.baseUrl}}</td>
-        </tr>
-        <tr>
-          <th>Interval (s)
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Interval', 'Observation query and processing frequency time interval in seconds')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.intervalSeconds}}</td>
-        </tr>
-        <tr>
-          <th>Startup Interval (s)
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Startup Interval', 'Startup interval in seconds to wait for feature layer processors to be ready')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.startupIntervalSeconds}}</td>
-        </tr>
-        <tr>
-          <th>Update Interval (s)
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Update Interval', 'Processing wait time interval in seconds when pending observation updates exist')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.updateIntervalSeconds}}</td>
-        </tr>
-        <tr>
-          <th>Batch Size
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Batch Size', 'Maximum number of observations to process during a single time interval')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.batchSize}}</td>
-        </tr>
-        <tr>
-          <th>Attachment Tolerance (ms)
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Attachment Tolerance', 'Time tolerance in milliseconds to consider an attachment as modified compared to the observation')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.attachmentModifiedTolerance}}</td>
-        </tr>
-      </table>
-    </div>
-  </section> -->
-  <arc-layer [config]=config (configChanged)=configChanged($event)></arc-layer>
-  <arc-event [config]=config (configChanged)=configChanged($event) [configChangedNotifier]=configChangedNotifier.asObservable()></arc-event>
-  <section class="arc-fields">
-    <header>
-      <h2>Attributes <button class="edit-button" mat-icon-button (click)="onEditAttributes()"><mat-icon>edit</mat-icon></button></h2>
-      <p class="subheading">MAGE Field to ArcGIS Attribute mappings.</p>
-    </header>
-    <div class="attributes">
-      <table class="attributes-table">
-        <tr>
-          <th>Observation Id Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Observation Id Field', 'The ArcGIS layer text field attribute name to store the MAGE observation id')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.observationIdField}}</td>
-        </tr>
-        <tr>
-          <th>Id Separator
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Id Separator', 'When event id field is not configured, the separator combining observation ids and event ids in the observation id field')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.idSeparator}}</td>
-        </tr>
-        <tr>
-          <th>Event Id Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Event Id Field', 'The ArcGIS layer integer field attribute name to store the MAGE event id')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.eventIdField}}</td>
-        </tr>
-        <tr>
-          <th>Last Edited Date Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Last Edited Date Field', 'The last edited date field attribute name on the ArcGIS layer')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.lastEditedDateField}}</td>
-        </tr>
-        <tr>
-          <th>Event Name Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Event Name Field', 'The ArcGIS layer text field attribute name to store the MAGE event name')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.eventNameField}}</td>
-        </tr>
-        <tr>
-          <th>User Id Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('User Id Field', 'The ArcGIS layer text field attribute name to store the MAGE user id')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.userIdField}}</td>
-        </tr>
-        <tr>
-          <th>Username Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Username Field', 'The ArcGIS layer text field attribute name to store the MAGE username')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.usernameField}}</td>
-        </tr>
-        <tr>
-          <th>User Display Name Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('User Display Name Field', 'The ArcGIS layer text field attribute name to store the MAGE user display name')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.userDisplayNameField}}</td>
-        </tr>
-        <tr>
-          <th>Device Id Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Device Id Field', 'The ArcGIS layer text field attribute name to store the MAGE device id')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.deviceIdField}}</td>
-        </tr>
-        <tr>
-          <th>Created At Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Created At Field', 'The ArcGIS layer date time field attribute name to store the MAGE created at date')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.createdAtField}}</td>
-        </tr>
-        <tr>
-          <th>Last Modified Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Last Modified Field', 'The ArcGIS layer date time field attribute name to store the MAGE last modified date (may be the same as last edited date field if editable)')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.lastModifiedField}}</td>
-        </tr>
-        <tr>
-          <th>Geometry Type Field
-            <button class="info-button" mat-icon-button
-              (click)="showInfo('Geometry Type Field', 'The ArcGIS layer text field attribute name to store the Esri geometry type')">
-              <mat-icon class="info-icon" [inline]="true">info_outline</mat-icon>
-            </button>
-          </th>
-          <td>{{config.geometryType}}</td>
-        </tr>
-      </table>
-    </div>
+    <arc-layer [config]="config" (configChanged)="configChanged($event)"></arc-layer>
+    <arc-event [config]="config" (configChanged)="configChanged($event)" [configChangedNotifier]="configChangedNotifier.asObservable()"></arc-event>
+ <section class="arc-fields"></section>
+    <mat-card appearance="outlined">
+      <mat-card-header>
+        <mat-card-title>Attributes</mat-card-title>
+        <mat-card-subtitle>MAGE Field to ArcGIS Attribute mappings.</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <form [formGroup]="attributesForm">
+          <div class="edit-attributes-form">
+            <div class="observation-id-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Observation Id Field</mat-label>
+                <input type="text" matInput formControlName="observationIdField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE observation id</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="id-separator-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Id Separator</mat-label>
+                <input type="text" matInput formControlName="idSeparator" />
+                <mat-hint>When event id field is not configured, the separator combining observation ids and event ids in the observation id field</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="event-id-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Event Id Field</mat-label>
+                <input type="text" matInput formControlName="eventIdField" />
+                <mat-hint>The ArcGIS layer integer field attribute name to store the MAGE event id</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="last-edited-date-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Last Edited Date Field</mat-label>
+                <input type="text" matInput formControlName="lastEditedDateField" />
+                <mat-hint>The last edited date field attribute name on the ArcGIS layer</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="event-name-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Event Name Field</mat-label>
+                <input type="text" matInput formControlName="eventNameField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE event name</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="user-id-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>User Id Field</mat-label>
+                <input type="text" matInput formControlName="userIdField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE user id</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="username-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Username Field</mat-label>
+                <input type="text" matInput formControlName="usernameField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE username</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="user-display-name-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>User Display Name Field</mat-label>
+                <input type="text" matInput formControlName="userDisplayNameField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE user display name</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="device-id-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Device Id Field</mat-label>
+                <input type="text" matInput formControlName="deviceIdField" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the MAGE device id</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="created-at-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Created At Field</mat-label>
+                <input type="text" matInput formControlName="createdAtField" />
+                <mat-hint>The ArcGIS layer date time field attribute name to store the MAGE created at date</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="last-modified-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Last Modified Field</mat-label>
+                <input type="text" matInput formControlName="lastModifiedField" />
+                <mat-hint>The ArcGIS layer date time field attribute name to store the MAGE last modified date (may be the
+                  same as last edited date field if editable)</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="geometry-type-field">
+              <mat-form-field [style.width.%]="90" appearance="fill">
+                <mat-label>Geometry Type Field</mat-label>
+                <input type="text" matInput formControlName="geometryType" />
+                <mat-hint>The ArcGIS layer text field attribute name to store the Esri geometry type</mat-hint>
+              </mat-form-field>
+            </div>
+            <div class="button-group">
+              <button mat-raised-button color="primary" type="submit" [disabled]="attributesForm.invalid">Save</button>
+              <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
+            </div>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+    <mat-card>
     <div class="fieldOverrides">
       Field Mappings
       <button class="info-button" mat-icon-button
@@ -725,8 +635,6 @@ <h2>Attributes <button class="edit-button" mat-icon-button (click)="onEditAttrib
         </ng-container>
       </table>
     </div>
-  </section>
-</div>
 <ng-template #infoDialog let-data>
   <h3 matDialogTitle>{{infoTitle}}</h3>
   <mat-dialog-content>
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
index 316f415d0..d575a3078 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
@@ -9,7 +9,7 @@
 
 section {
   >* {
-    margin-inline-start: 1em;
+    margin-inline-start: 0;
   }
 
   header {
@@ -50,20 +50,6 @@ section {
   }
 }
 
-.attributes-table {
-  tr {
-    th {
-      font-weight: normal;
-    }
-
-    td {
-      padding-left: 20px;
-      opacity: 0.5;
-      font-size: 0.9em;
-    }
-  }
-}
-
 .fieldOverrides {
   margin-top: 20px;
 }
@@ -193,3 +179,17 @@ section {
   line-height: inherit;
   width: inherit;
 }
+
+mat-form-field {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+mat-card {
+  margin-bottom: 8px;  
+}
+
+.hint {
+  font-size: 75%;
+  padding: 0 1em;
+}
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
index 887a9e077..a3a32ca94 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
@@ -4,6 +4,7 @@ import { AttributeConfig, AttributeConcatenationConfig, AttributeDefaultConfig,
 import { ArcGISPluginConfig, defaultArcGISPluginConfig } from '../ArcGISPluginConfig'
 import { ArcService, Form, MageEvent } from '../arc.service'
 import { Subject } from 'rxjs';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'arc-admin',
@@ -52,17 +53,12 @@ export class ArcAdminComponent implements OnInit {
   @ViewChild('editAttributeConfigDialog', { static: true })
   private editAttributeConfigTemplate: TemplateRef<unknown>
 
-  constructor(private arcService: ArcService, private dialog: MatDialog) {
+  attributesForm: FormGroup;
+
+  constructor(private arcService: ArcService, private dialog: MatDialog, private fb: FormBuilder) {
     this.config = defaultArcGISPluginConfig;
     this.editConfig = defaultArcGISPluginConfig;
     this.editFieldMappings = false;
-    arcService.fetchArcConfig().subscribe(x => {
-      this.config = x;
-      if (!this.config.baseUrl) {
-        this.config.baseUrl = window.location.origin
-      }
-      arcService.fetchPopulatedEvents().subscribe(x => this.handleEventResults(x));
-    })
   }
 
   configChanged(config: ArcGISPluginConfig) {
@@ -71,6 +67,49 @@ export class ArcAdminComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.attributesForm = this.fb.group({
+      observationIdField: [''],
+      idSeparator: [''],
+      eventIdField: [''],
+      lastEditedDateField: [''],
+      eventNameField: [''],
+      userIdField: [''],
+      usernameField: [''],
+      userDisplayNameField: [''],
+      deviceIdField: [''],
+      createdAtField: [''],
+      lastModifiedField: [''],
+      geometryType: ['']
+    });
+  }
+  
+  onSubmit(): void {
+    if (this.attributesForm.valid) {
+      const formValue = this.attributesForm.value;
+      console.log('Form Submitted:', formValue);
+    }}
+
+  onCancel(): void {
+    this.attributesForm.reset({
+      config: defaultArcGISPluginConfig,
+      editConfig: defaultArcGISPluginConfig,
+      editFieldMappings: false,
+      observationIdField: '',
+      idSeparator: '',
+      eventIdField: '',
+      lastEditedDateField: '',
+      eventNameField: '',
+      userIdField: '',
+      usernameField: '',
+      userDisplayNameField: '',
+      deviceIdField: '',
+      createdAtField: '',
+      lastModifiedField: '',
+      geometryType: ''
+    });
+
+    console.log('Canceled configuration edit');
+
   }
 
   handleEventResults(x: MageEvent[]) {
@@ -96,10 +135,10 @@ export class ArcAdminComponent implements OnInit {
     this.dialog.open<unknown, unknown, string>(this.editProcessingTemplate)
   }
 
-  onEditAttributes() {
-    this.editConfig = this.copyConfig()
-    this.dialog.open<unknown, unknown, string>(this.editAttributesTemplate)
-  }
+  // onEditAttributes() {
+  //   this.editConfig = this.copyConfig()
+  //   this.dialog.open<unknown, unknown, string>(this.editAttributesTemplate)
+  // }
 
   setField(field: string, value: any) {
     if (value != undefined && value.length == 0) {
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
index 043fb18ab..61ae84c21 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html
@@ -1,9 +1,13 @@
 <div class="arc-event">
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>
+        Events 
+      </mat-card-title>
+      <mat-card-subtitle>Change the ArcGIS layers each MAGE event sends its observations to.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
   <section class="arc-event-sync">
-    <header>
-      <h2>Events</h2>
-      <p class="subheading">Change the ArcGIS layers each MAGE event sends its observations to.</p>
-    </header>
     <div class="arcEvents" *ngIf="!model.events.length">
       <div class="arcEvent">
         There are no events synchronizing to ArcGIS layers.
@@ -32,7 +36,9 @@ <h2>Events</h2>
       </ng-container>
     </div>
   </section>
-</div>
+</mat-card-content>
+</mat-card>
+
 <ng-template #editEventDialog let-data>
   <h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.name}} is synchronizing</h2>
   <mat-dialog-content>
@@ -48,4 +54,5 @@ <h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.nam
     <button mat-flat-button color="primary" matDialogClose
       (click)="saveChanges()">SAVE</button>
   </mat-dialog-actions>
-</ng-template>
\ No newline at end of file
+</ng-template>
+</div>
\ No newline at end of file
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.html b/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.html
index 931d1c6e6..a64820431 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.html
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.html
@@ -1,9 +1,13 @@
 <div class="arc-layer">
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>
+        Feature Layers 
+      </mat-card-title>
+      <mat-card-subtitle>Add ArcGIS feature service urls and layers to synchronize MAGE data to.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
   <section class="arc-service">
-    <header>
-      <h2>Feature Layers</h2>
-      <p class="subheading">Add ArcGIS feature service urls and layers to sychronize MAGE data to.</p>
-    </header>
     <div>
       <button mat-button mat-stroked-button color="primary" (click)="onAddService()">ADD FEATURE SERVICE</button>
     </div>
@@ -31,7 +35,56 @@ <h2>Feature Layers</h2>
         <div class="featureLayer__value">
           {{layer.layer}}
         </div>
-      </div>
+      </ng-container>
     </div>
   </section>
-</div>
\ No newline at end of file
+<ng-template #addLayerDialog let-data>
+  <ng-container *ngIf="currentUrl == undefined; else editLayer">
+    <h2 matDialogTitle>Add ArcGIS Feature Service</h2>
+  </ng-container>
+  <ng-template #editLayer>
+    <h2 matDialogTitle>Edit ArcGIS Feature Service</h2>
+  </ng-template>
+  <mat-dialog-content>
+    <div class="arc-layer-form">
+      <mat-form-field [style.width.%]="100">
+        <mat-label>URL</mat-label>
+        <input type="text" matInput [formControl]="arcLayerControl" (keyup)="inputChanged(layerUrl.value, layerToken.value)"
+          placeholder="http{s}://{domain}/arcgis/rest/services/{service}/FeatureServer" #layerUrl />
+        <mat-error *ngIf="arcLayerControl.hasError('required')">
+          URL is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field [style.width.%]="100">
+        <mat-label>Token</mat-label>
+        <input type="text" matInput [formControl]="arcTokenControl" (keyup)="inputChanged(layerUrl.value, layerToken.value)" #layerToken />
+      </mat-form-field>
+    </div>
+    <h3 matDialogTitle>Layers</h3>
+    <mat-spinner *ngIf="isLoading"></mat-spinner>
+    <div class="arc-layers" *ngFor="let arcLayer of layers">
+      <div class="featureLayer__value">
+        <input type="checkbox" [checked]="arcLayer.isSelected" (change)="selectedChanged(arcLayer)" />
+        {{arcLayer.name}}
+      </div>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button matDialogClose>CANCEL</button>
+    <button [disabled]="isSaveDisabled()" mat-flat-button color="primary" matDialogClose
+      (click)="onAddLayerUrl({ layerUrl: layerUrl.value, selectableLayers: layers, layerToken: layerToken.value })">SAVE</button>
+  </mat-dialog-actions>
+</ng-template>
+<ng-template #deleteLayerDialog let-data>
+  <h3 matDialogTitle>Delete feature service?</h3>
+  <div class="deleteArcLayer__value">
+    {{currentUrl}}
+  </div>
+  <br>
+  <mat-dialog-actions align="end">
+    <button mat-button matDialogClose>CANCEL</button>
+    <button mat-flat-button color="primary" matDialogClose (click)="onDeleteLayer()">DELETE</button>
+  </mat-dialog-actions>
+</ng-template>
+</mat-card-content>
+</mat-card>
diff --git a/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.scss b/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.scss
index 0336d7fab..b4b3333cb 100644
--- a/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.scss
+++ b/plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.scss
@@ -83,4 +83,8 @@ section {
     height: inherit;
     line-height: inherit;
     width: inherit;
-}
\ No newline at end of file
+}
+
+mat-card {
+    margin-bottom: 16px;  
+  }
\ No newline at end of file