WIP

mathesar-foundation · Nov 22, 2023 · f033cb4 · f033cb4
1 parent 4f01514
commit f033cb4
Showing 1 changed file with 46 additions and 41 deletions.
diff --git a/mathesar_ui/src/pages/database-connection/DatabaseConnectionForm.svelte b/mathesar_ui/src/pages/database-connection/DatabaseConnectionForm.svelte
@@ -8,22 +8,21 @@
     RadioGroup,
   } from '@mathesar-component-library';
   import type { Database } from '@mathesar/AppTypes';
-  import databaseConnectionApi from '@mathesar/api/databaseConnection';
   import { extractDetailedFieldBasedErrors } from '@mathesar/api/utils/errors';
+  import Checkbox from '@mathesar/component-library/checkbox/Checkbox.svelte';
+  import LabeledInput from '@mathesar/component-library/labeled-input/LabeledInput.svelte';
+  import Select from '@mathesar/component-library/select/Select.svelte';
   import {
     FormSubmit,
     makeForm,
     requiredField,
   } from '@mathesar/components/form';
   import Field from '@mathesar/components/form/Field.svelte';
+  import FieldHelp from '@mathesar/components/form/FieldHelp.svelte';
+  import { assertExhaustive } from '@mathesar/utils/typeUtils';
   import GridForm from './GridForm.svelte';
   import GridFormDivider from './GridFormDivider.svelte';
   import GridFormLabelRow from './GridFormLabelRow.svelte';
-  import LabeledInput from '@mathesar/component-library/labeled-input/LabeledInput.svelte';
-  import Checkbox from '@mathesar/component-library/checkbox/Checkbox.svelte';
-  import Select from '@mathesar/component-library/select/Select.svelte';
-  import FieldHelp from '@mathesar/components/form/FieldHelp.svelte';
-  import { assertExhaustive } from '@mathesar/utils/typeUtils';
 
   const credentialsStrategyOptions = ['reuse', 'new'] as const;
   type CredentialsStrategy = typeof credentialsStrategyOptions[number];
@@ -61,7 +60,7 @@
     host: string;
     port: string;
   }
-  const bootstrapConnectionOptions: C[] = [
+  const availableConnections: C[] = [
     {
       user: 'mathesar',
       host: 'localhost',
@@ -85,49 +84,58 @@
   $: username = requiredField('');
   $: host = requiredField('');
   $: port = requiredField(5432);
-  $: bootstrapConnection = requiredField(bootstrapConnectionOptions[0]);
+  $: connectionToReuse = requiredField(availableConnections[0]);
+  $: bootstrapConnection = requiredField(availableConnections[0]);
   $: existingPassword = requiredField('');
   $: newPassword = requiredField('');
   $: confirmPassword = requiredField('');
   $: existingUserName = requiredField('');
   $: newUserName = requiredField('');
   $: createDatabase = requiredField(true);
-  $: formFields = {
-    connectionName,
-    databaseName,
-    username,
-    host,
-    port,
-    password: existingPassword,
-  };
-  $: form = makeForm(formFields);
+  $: form = (() => {
+    if ($credentialsStrategy === 'reuse') {
+      return makeForm({
+        credentialsStrategy,
+        connectionName,
+        databaseName,
+        username,
+        host,
+        port,
+        existingPassword,
+      });
+    }
+
+    return makeForm({
+      connectionName,
+      databaseName,
+      username,
+      host,
+      port,
+      existingPassword,
+    });
+  })();
 
   $: canCreateDb = $credentialsStrategy === 'reuse' || $userType === 'create';
   $: databaseNameHelp = canCreateDb
     ? undefined
     : $_('this_database_must_exist_already');
 
-  async function addNewDatabaseConnection() {
-    const formValues = $form.values;
-    return databaseConnectionApi.add({
-      name: formValues.connectionName,
-      db_name: formValues.databaseName,
-      username: formValues.username,
-      host: formValues.host,
-      port: String(formValues.port),
-      password: formValues.password,
-    });
-  }
-
   async function saveConnectionDetails() {
-    const newDatabase = await addNewDatabaseConnection();
-    await onCreate?.(newDatabase);
+    // const formValues = $form.values;
+    // const newDatabase = await databaseConnectionApi.add({
+    //   name: formValues.connectionName,
+    //   db_name: formValues.databaseName,
+    //   username: formValues.username,
+    //   host: formValues.host,
+    //   port: String(formValues.port),
+    //   password: formValues.existingPassword,
+    // });
+    // await onCreate?.(newDatabase);
   }
 
   function getErrorMessages(e: unknown) {
-    type FieldKey = keyof typeof formFields;
     const { commonErrors, fieldSpecificErrors } =
-      extractDetailedFieldBasedErrors<FieldKey>(e, {
+      extractDetailedFieldBasedErrors(e, {
         name: 'connectionName',
         db_name: 'databaseName',
       });
@@ -136,11 +144,8 @@
       if (field) {
         field.serverErrors.set(errors);
       } else {
-        /**
-         * Incase an error occurs when the server returned field
-         * is not part of the form.
-         * Ideally this should never happen.
-         */
+        // In case an error occurs when the server returned field is not part of
+        // the form. Ideally this should never happen.
         commonErrors.push(...errors);
       }
     }
@@ -163,8 +168,8 @@
     {#if $credentialsStrategy === 'reuse'}
       <GridFormLabelRow label={$_('known_connection')}>
         <Select
-          bind:value={$bootstrapConnection}
-          options={bootstrapConnectionOptions}
+          bind:value={$connectionToReuse}
+          options={availableConnections}
           getLabel={getConnectionLabel}
         />
         <FieldHelp>
@@ -213,7 +218,7 @@
           <!-- TODO: handle overflow when option label is very long -->
           <Select
             bind:value={$bootstrapConnection}
-            options={bootstrapConnectionOptions}
+            options={availableConnections}
             getLabel={getConnectionLabel}
           />
           <FieldHelp>{$_('bootstrap_connection_help')}</FieldHelp>