001-migration-ui-redesign (#3)

Reviewed-on: #3

frontend/src/components/MissingMappingModal.svelte

@@ -0,0 +1,112 @@
+<!-- [DEF:MissingMappingModal:Component] -->
+<!--
+@SEMANTICS: modal, mapping, prompt, migration
+@PURPOSE:   Prompts the user to provide a database mapping when one is missing during migration.
+@LAYER:     Feature
+@RELATION:  DISPATCHES -> resolve
+
+@INVARIANT: Modal blocks migration progress until resolved or cancelled.
+-->
+
+<script lang="ts">
+  // [SECTION: IMPORTS]
+  import { createEventDispatcher } from 'svelte';
+  // [/SECTION]
+
+  // [SECTION: PROPS]
+  export let show: boolean = false;
+  export let sourceDbName: string = "";
+  export let sourceDbUuid: string = "";
+  export let targetDatabases: Array<{uuid: string, database_name: string}> = [];
+  // [/SECTION]
+
+  let selectedTargetUuid = "";
+  const dispatch = createEventDispatcher();
+
+  // [DEF:resolve:Function]
+  function resolve() {
+    if (!selectedTargetUuid) return;
+    dispatch('resolve', {
+      sourceDbUuid,
+      targetDbUuid: selectedTargetUuid,
+      targetDbName: targetDatabases.find(d => d.uuid === selectedTargetUuid)?.database_name
+    });
+    show = false;
+  }
+  // [/DEF:resolve]
+
+  // [DEF:cancel:Function]
+  function cancel() {
+    dispatch('cancel');
+    show = false;
+  }
+  // [/DEF:cancel]
+</script>
+
+<!-- [SECTION: TEMPLATE] -->
+{#if show}
+  <div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+
+      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+      <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div>
+          <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
+            <svg class="h-6 w-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </div>
+          <div class="mt-3 text-center sm:mt-5">
+            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+              Missing Database Mapping
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                The database <strong>{sourceDbName}</strong> is used in the assets being migrated but has no mapping to the target environment. Please select a target database.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-5 sm:mt-6">
+          <select
+            class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            bind:value={selectedTargetUuid}
+          >
+            <option value="" disabled>-- Select Target Database --</option>
+            {#each targetDatabases as tDb}
+              <option value={tDb.uuid}>{tDb.database_name}</option>
+            {/each}
+          </select>
+        </div>
+
+        <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+          <button
+            type="button"
+            on:click={resolve}
+            disabled={!selectedTargetUuid}
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-400"
+          >
+            Apply & Continue
+          </button>
+          <button
+            type="button"
+            on:click={cancel}
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+          >
+            Cancel Migration
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+<!-- [/SECTION] -->
+
+<style>
+  /* Modal specific styles */
+</style>
+
+<!-- [/DEF:MissingMappingModal] -->