feat: add import modal for additional entities and update authentication handling

danOIntellitect · danOIntellitect · commit e59bc0bef8fe · 2026-02-20T14:47:19.000-08:00
diff --git a/src/app/models/index.ts b/src/app/models/index.ts
@@ -55,6 +55,7 @@ export type DatabaseType =
  * Authentication providers supported by DAB
  */
 export type AuthProvider =
+  | 'None'
   | 'StaticWebApps'
   | 'EntraID'
   | 'Simulator'
diff --git a/src/app/pages/config-wizard/tabs/entities-tab/entities-tab.component.ts b/src/app/pages/config-wizard/tabs/entities-tab/entities-tab.component.ts
@@ -401,6 +401,139 @@ import { SchemaImporterService } from '../../../../services/schema-importer.serv
           </div>
         </div>
       }
+
+      <!-- Import Modal -->
+      @if (showImportModal()) {
+        <div class="modal d-block" tabindex="-1" role="dialog" (click)="showImportModal.set(false)">
+          <div class="modal-dialog modal-lg" role="document" (click)="$event.stopPropagation()">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title">
+                  <i class="bi bi-file-earmark-arrow-up me-2"></i>
+                  Import Additional Entities
+                </h5>
+                <button
+                  type="button"
+                  class="btn-close"
+                  (click)="showImportModal.set(false)"
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div class="modal-body">
+                <p class="text-muted mb-4">
+                  Import your database schema to automatically generate entity configurations. All
+                  discovered tables will be added to your existing entities.
+                </p>
+
+                <div class="row g-3">
+                  <!-- JSON Import -->
+                  <div class="col-md-4">
+                    <div
+                      class="import-option p-4 border rounded text-center h-100"
+                      [class.active]="importMode() === 'json'"
+                      (click)="selectImportMode('json')"
+                    >
+                      <i class="bi bi-filetype-json display-4 text-primary mb-3 d-block"></i>
+                      <h6>Import JSON File</h6>
+                      <p class="text-muted small mb-0">Upload a JSON file with table definitions</p>
+                    </div>
+                  </div>
+
+                  <!-- SQL Import -->
+                  <div class="col-md-4">
+                    <div
+                      class="import-option p-4 border rounded text-center h-100"
+                      [class.active]="importMode() === 'sql'"
+                      (click)="selectImportMode('sql')"
+                    >
+                      <i class="bi bi-file-earmark-code display-4 text-success mb-3 d-block"></i>
+                      <h6>Paste SQL</h6>
+                      <p class="text-muted small mb-0">Paste CREATE TABLE statements</p>
+                    </div>
+                  </div>
+
+                  <!-- Manual Entry -->
+                  <div class="col-md-4">
+                    <div
+                      class="import-option p-4 border rounded text-center h-100"
+                      [class.active]="importMode() === 'manual'"
+                      (click)="selectImportMode('manual')"
+                    >
+                      <i class="bi bi-pencil-square display-4 text-warning mb-3 d-block"></i>
+                      <h6>Manual Entry</h6>
+                      <p class="text-muted small mb-0">Add entities manually one by one</p>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- JSON File Upload -->
+                @if (importMode() === 'json') {
+                  <div class="mt-4">
+                    <label for="jsonFileModal" class="form-label">Select JSON Schema File</label>
+                    <input
+                      type="file"
+                      id="jsonFileModal"
+                      class="form-control"
+                      accept=".json"
+                      (change)="onFileSelected($event)"
+                    />
+                    <small class="form-text text-muted">
+                      Expected format: &#123; "tables": [&#123; "name": "...", "schema": "...",
+                      "columns": [...] &#125;] &#125;
+                    </small>
+                  </div>
+                }
+
+                <!-- SQL Paste -->
+                @if (importMode() === 'sql') {
+                  <div class="mt-4">
+                    <label for="sqlInputModal" class="form-label">
+                      Paste CREATE TABLE Statements
+                    </label>
+                    <textarea
+                      id="sqlInputModal"
+                      class="form-control font-monospace"
+                      rows="10"
+                      placeholder="CREATE TABLE dbo.Users (
+    Id INT PRIMARY KEY,
+    Name NVARCHAR(100) NOT NULL,
+    Email NVARCHAR(255) NOT NULL,
+    CreatedAt DATETIME2
+);"
+                      [(ngModel)]="sqlInput"
+                    ></textarea>
+                    <button
+                      type="button"
+                      class="btn btn-primary mt-3"
+                      [disabled]="!sqlInput()"
+                      (click)="importSql()"
+                    >
+                      <i class="bi bi-upload me-1"></i>
+                      Parse and Import
+                    </button>
+                  </div>
+                }
+
+                <!-- Manual Entry -->
+                @if (importMode() === 'manual') {
+                  <div class="mt-4 text-center">
+                    <button type="button" class="btn btn-primary" (click)="addEntityFromModal()">
+                      <i class="bi bi-plus-lg me-1"></i>
+                      Add Entity Manually
+                    </button>
+                  </div>
+                }
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" (click)="closeImportModal()">
+                  Close
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-backdrop show"></div>
+      }
     </div>
   `,
   styles: `
@@ -504,8 +637,13 @@ export class EntitiesTabComponent {
       const entities = await this.schemaImporter.importAndGenerate(file);
       this.notifications.success(`Imported ${entities.length} entities`);
       this.importMode.set(null);
+      this.showImportModal.set(false);
+      // Reset the file input
+      input.value = '';
     } catch (error) {
       this.notifications.error(error instanceof Error ? error.message : 'Failed to import schema');
+      // Reset the file input even on error
+      input.value = '';
     }
   }
 
@@ -522,6 +660,7 @@ export class EntitiesTabComponent {
       this.notifications.success(`Imported ${entities.length} entities`);
       this.sqlInput.set('');
       this.importMode.set(null);
+      this.showImportModal.set(false);
     } catch (error) {
       this.notifications.error(error instanceof Error ? error.message : 'Failed to parse SQL');
     }
@@ -533,6 +672,16 @@ export class EntitiesTabComponent {
     this.selectedEntityId.set(entity.id);
   }
 
+  addEntityFromModal(): void {
+    this.addEntity();
+    this.closeImportModal();
+  }
+
+  closeImportModal(): void {
+    this.showImportModal.set(false);
+    this.importMode.set(null);
+  }
+
   deleteEntity(id: string): void {
     if (confirm('Are you sure you want to delete this entity?')) {
       this.configBuilder.removeEntity(id);
diff --git a/src/app/pages/config-wizard/tabs/runtime-tab/runtime-tab.component.ts b/src/app/pages/config-wizard/tabs/runtime-tab/runtime-tab.component.ts
@@ -276,7 +276,7 @@ import { ConfigBuilderService } from '../../../../services/config-builder.servic
                   <select
                     id="authProvider"
                     class="form-select"
-                    [ngModel]="configBuilder.hostConfig().authentication?.provider || 'AppService'"
+                    [ngModel]="configBuilder.hostConfig().authentication?.provider || 'None'"
                     (ngModelChange)="setAuthProvider($event)"
                   >
                     @for (provider of authProviders; track provider.value) {
@@ -314,6 +314,11 @@ import { ConfigBuilderService } from '../../../../services/config-builder.servic
               <div class="alert alert-info mb-0 mt-2">
                 <small>
                   @switch (configBuilder.hostConfig().authentication?.provider) {
+                    @case ('None') {
+                      <strong>No Authentication:</strong> All requests will be allowed without
+                      authentication. Use only for development or when authentication is handled
+                      externally.
+                    }
                     @case ('EntraID') {
                       <strong>Microsoft Entra ID:</strong> Configure JWT audience and issuer from
                       your app registration.
@@ -331,7 +336,9 @@ import { ConfigBuilderService } from '../../../../services/config-builder.servic
                       authenticated requests.
                     }
                     @default {
-                      Select an authentication provider to see configuration guidance.
+                      <strong>No Authentication:</strong> All requests will be allowed without
+                      authentication. Use only for development or when authentication is handled
+                      externally.
                     }
                   }
                 </small>
@@ -352,6 +359,7 @@ export class RuntimeTabComponent {
   protected readonly configBuilder = inject(ConfigBuilderService);
 
   readonly authProviders: { value: AuthProvider; label: string }[] = [
+    { value: 'None', label: 'None (No Authentication)' },
     { value: 'AppService', label: 'Azure App Service' },
     { value: 'EntraID', label: 'Microsoft Entra ID' },
     { value: 'StaticWebApps', label: 'Azure Static Web Apps' },
@@ -399,13 +407,20 @@ export class RuntimeTabComponent {
 
   setAuthProvider(provider: AuthProvider): void {
     const current = this.configBuilder.hostConfig();
-    this.configBuilder.setHostConfig({
-      authentication: {
-        ...current.authentication,
-        provider,
-        jwt: this.requiresJwt() ? current.authentication?.jwt : undefined,
-      },
-    });
+    if (provider === 'None') {
+      // Remove authentication section entirely
+      this.configBuilder.setHostConfig({
+        authentication: undefined,
+      });
+    } else {
+      this.configBuilder.setHostConfig({
+        authentication: {
+          ...current.authentication,
+          provider,
+          jwt: this.requiresJwt() ? current.authentication?.jwt : undefined,
+        },
+      });
+    }
   }
 
   setJwtField(field: 'audience' | 'issuer', value: string): void {
diff --git a/src/app/services/config-builder.service.ts b/src/app/services/config-builder.service.ts
@@ -174,11 +174,23 @@ export class ConfigBuilderService {
       entitiesConfig[entity.name] = this.buildEntityConfig(entity);
     }
 
+    // Build host config, excluding authentication if not configured or set to 'None'
+    const hostConfig = this.hostConfig();
+    const cleanedHostConfig: IHostConfig = {
+      cors: hostConfig.cors,
+      mode: hostConfig.mode,
+    };
+
+    // Only include authentication if it exists and provider is not 'None'
+    if (hostConfig.authentication && hostConfig.authentication.provider !== 'None') {
+      cleanedHostConfig.authentication = hostConfig.authentication;
+    }
+
     const runtime: IRuntimeConfig = {
       rest: this.restConfig(),
       graphql: this.graphqlConfig(),
       mcp: this.mcpConfig(),
-      host: this.hostConfig(),
+      host: cleanedHostConfig,
     };
 
     return {
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>IntelliTectSqlMcpConfiguration</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>SQL MCP Configuration</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
