New DB connection form

mathesar_ui/.eslintrc.cjs

@@ -118,6 +118,8 @@ module.exports = {
               'DEFAULT',
               'Mathesar.org',
               'NULL',
+              '@',
+              '/',
               '*',
               '+',
               ':',

mathesar_ui/src/AppTypes.ts

@@ -1,6 +1,6 @@
 import type { TreeItem } from '@mathesar-component-library/types';
 
-/** @deprecated Use either Connection or ConnectionModel interface instead */
+/** @deprecated in favor of Connection */
 export interface Database {
   id: number;
   nickname: string;

mathesar_ui/src/api/connections.ts

@@ -1,9 +1,10 @@
 import {
+  addQueryParamsToUrl,
+  deleteAPI,
   getAPI,
   patchAPI,
+  postAPI,
   type PaginatedResponse,
-  deleteAPI,
-  addQueryParamsToUrl,
 } from './utils/requestUtils';
 
 export interface Connection {
@@ -27,6 +28,70 @@ function list() {
   );
 }
 
+export const sampleDataOptions = [
+  'library_management',
+  'movie_collection',
+] as const;
+
+export type SampleDataSchemaIdentifier = (typeof sampleDataOptions)[number];
+
+export type ConnectionReference =
+  | { connection_type: 'internal_database' }
+  | { connection_type: 'user_database'; id: Connection['id'] };
+
+export interface CommonCreationProps {
+  database_name: string;
+  sample_data: SampleDataSchemaIdentifier[];
+  nickname: string;
+}
+
+export interface CreateFromKnownConnectionProps extends CommonCreationProps {
+  credentials: { connection: ConnectionReference };
+  create_database: boolean;
+}
+
+/**
+ * The `create_database` field is not present on this variant because we do not
+ * support creating the database in this case. The reason for this restriction
+ * is that we need a valid connection to an existing database in order to first
+ * create one. In theory, we could ask the user to supply such a connection but
+ * Sean and Brent deemed that approach to add too much additional complexity to
+ * the UI to justify its inclusion. We predict that if someone already has a
+ * PostgreSQL user, they are likely to already have a PostgreSQL database too.
+ */
+export interface CreateFromScratchProps extends CommonCreationProps {
+  credentials: {
+    user: string;
+    password: string;
+    host: string;
+    port: string;
+  };
+}
+
+export interface CreateWithNewUserProps extends CommonCreationProps {
+  credentials: {
+    create_user_via: ConnectionReference;
+    user: string;
+    password: string;
+  };
+  create_database: boolean;
+}
+
+function createFromKnownConnection(props: CreateFromKnownConnectionProps) {
+  const url = '/api/ui/v0/connections/create_from_known_connection/';
+  return postAPI<Connection>(url, props);
+}
+
+function createFromScratch(props: CreateFromScratchProps) {
+  const url = '/api/ui/v0/connections/create_from_scratch/';
+  return postAPI<Connection>(url, props);
+}
+
+function createWithNewUser(props: CreateWithNewUserProps) {
+  const url = '/api/ui/v0/connections/create_with_new_user/';
+  return postAPI<Connection>(url, props);
+}
+
 function update(
   connectionId: Connection['id'],
   properties: Partial<UpdatableConnectionProperties>,
@@ -51,6 +116,9 @@ function deleteConnection(
 
 export default {
   list,
+  createFromKnownConnection,
+  createFromScratch,
+  createWithNewUser,
   update,
   delete: deleteConnection,
 };

mathesar_ui/src/component-library/checkbox-group/CheckboxGroup.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
-  import FieldsetGroup from '@mathesar-component-library-dir/fieldset-group/FieldsetGroup.svelte';
+  import type { SvelteComponent } from 'svelte';
+
   import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
   import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
+  import FieldsetGroup from '@mathesar-component-library-dir/fieldset-group/FieldsetGroup.svelte';
+  import type { ComponentWithProps } from '../types';
 
   type Option = $$Generic;
 
   export let values: Option[] = [];
   export let isInline = false;
-  export let options: Option[] = [];
+  export let options: readonly Option[] = [];
   export let label: string | undefined = undefined;
+  export let ariaLabel: string | undefined = undefined;
   export let checkboxLabelKey: string | undefined = undefined;
   export let getCheckboxLabel: LabelGetter<Option> | undefined = undefined;
+  export let getCheckboxHelp: <C extends SvelteComponent>(
+    value: Option,
+  ) => string | ComponentWithProps<C> | undefined = () => undefined;
+  export let getCheckboxDisabled: (value: Option | undefined) => boolean = () =>
+    false;
   /**
    * By default, options will be compared by equality. If you're using objects as
    * options, you can supply a custom function here to compare them.
@@ -41,12 +50,15 @@
   {isInline}
   {options}
   {label}
+  {ariaLabel}
   {disabled}
   let:option
   let:disabled={innerDisabled}
   on:change
   labelKey={checkboxLabelKey}
   getLabel={getCheckboxLabel}
+  getHelp={getCheckboxHelp}
+  getDisabled={getCheckboxDisabled}
 >
   <Checkbox
     on:change={({ detail: checked }) => handleChange(option, checked)}

mathesar_ui/src/component-library/common/utils/typeUtils.ts

@@ -46,6 +46,16 @@ export function requiredNonNullable<T>(
   return defaultValue;
 }
 
+/**
+ * Used to make sure that a value is defined before using it.
+ */
+export function defined<T, U>(
+  v: T | undefined,
+  f: (v: T) => U | undefined,
+): U | undefined {
+  return v === undefined ? undefined : f(v);
+}
+
 /**
  * From https://stackoverflow.com/a/51365037/895563
  */

mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.scss

@@ -1,5 +1,6 @@
 .fieldset-group {
   padding: 0;
+  margin: 0;
   --spacing-y-default: 0.5em;
   --spacing-x-default: 1em;
 
@@ -14,10 +15,15 @@
   &.has-label .options {
     margin-top: 1em;
   }
-  &:not(.inline) .option {
+  &:not(.inline) .option:not(:first-child) {
     margin-top: var(--spacing-y, var(--spacing-y-default));
+  }
+  &:not(.inline) .option:not(:last-child) {
     margin-bottom: var(--spacing-y, var(--spacing-y-default));
   }
+  &:not(.inline) .option.has-help:not(:last-child) {
+    margin-bottom: calc(2 * var(--spacing-y, var(--spacing-y-default)));
+  }
 
   &.inline .options {
     display: flex;

mathesar_ui/src/component-library/fieldset-group/FieldsetGroup.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-  import LabeledInput from '@mathesar-component-library-dir/labeled-input/LabeledInput.svelte';
+  import type { SvelteComponent } from 'svelte';
+
   import type { LabelGetter } from '@mathesar-component-library-dir/common/utils/formatUtils';
   import { getLabel as defaultGetLabel } from '@mathesar-component-library-dir/common/utils/formatUtils';
+  import LabeledInput from '@mathesar-component-library-dir/labeled-input/LabeledInput.svelte';
   import StringOrComponent from '@mathesar-component-library-dir/string-or-component/StringOrComponent.svelte';
+  import StringOrComponentTyped from '@mathesar-component-library-dir/string-or-component/StringOrComponentTyped.svelte';
+  import type { ComponentWithProps } from '../types';
 
   type Option = $$Generic;
 
   export let isInline = false;
-  export let options: Option[] = [];
+  export let options: readonly Option[] = [];
   export let label: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
   export let disabled = false;
   export let labelKey = 'label';
   export let getLabel: LabelGetter<Option> = (o: Option) =>
     defaultGetLabel(o, labelKey);
   export let boxed = false;
-
   export let getDisabled: (value: Option | undefined) => boolean = () => false;
+  export let getHelp: <C extends SvelteComponent>(
+    value: Option,
+  ) => string | ComponentWithProps<C> | undefined = () => undefined;
 </script>
 
 <fieldset
@@ -35,12 +41,18 @@
   {/if}
   <ul class="options">
     {#each options as option (option)}
-      <li class="option">
+      {@const help = getHelp(option)}
+      <li class="option" class:has-help={!!help}>
         <LabeledInput layout="inline-input-first">
           <svelte:fragment slot="label">
             <StringOrComponent arg={getLabel(option)} />
           </svelte:fragment>
           <slot {option} disabled={getDisabled(option) || disabled} />
+          <svelte:fragment slot="help">
+            {#if help}
+              <StringOrComponentTyped arg={help} />
+            {/if}
+          </svelte:fragment>
         </LabeledInput>
       </li>
     {/each}

mathesar_ui/src/component-library/labeled-input/LabeledInput.scss

@@ -17,8 +17,6 @@
   }
 
   .help {
-    // TODO figure out how we want to support help text with an inline layout.
-    // This CSS assumes the layout is stacked
     display: block;
     font-size: var(--text-size-small);
     color: var(--color-text-muted);
@@ -34,29 +32,33 @@
     }
   }
 
-  &.layout-inline .label-content,
-  &.layout-inline-input-first .label-content {
+  // TODO: add support for help text with an inline layout.
+  &.layout-inline .label-content {
     display: inline-flex;
+    flex-direction: row;
+    align-items: center; // To support a text input that's taller than the label
     .label {
       flex: 1 1 auto;
     }
     .input {
       flex: 0 0 auto;
-    }
-  }
-
-  &.layout-inline .label-content {
-    flex-direction: row;
-    align-items: center; // To support a text input that's taller than the label
-    .input {
       margin-left: var(--spacing-x, var(--spacing-x-default));
     }
   }
+
   &.layout-inline-input-first .label-content {
-    flex-direction: row-reverse;
-    align-items: flex-start; // To support a checkbox with a wrapping label
+    display: grid;
+    grid-template: auto auto / auto 1fr;
     .input {
+      grid-area: 1 / 1 / 1 / 1;
       margin-right: var(--spacing-x, var(--spacing-x-default));
     }
+    .label {
+      grid-area: 1 / 2 / 1 / 2;
+    }
+    .help {
+      grid-area: 2 / 2 / 2 / 2;
+      margin-top: var(--spacing-y, var(--spacing-y-default));
+    }
   }
 }

mathesar_ui/src/component-library/labeled-input/LabeledInput.svelte

@@ -15,14 +15,13 @@
 >
   <Label>
     <span class="label-content">
-      <span class="label">
-        {label ?? ''}
-        <slot name="label" />
-      </span>
-      <span class="help">
-        {help ?? ''}
-        <slot name="help" />
-      </span>
+      <!--
+        ⚠️ NOTE: Do not add any white space within `.label` or `.help`. We have
+        CSS that uses the `:empty` pseudo-class which does not work if there is
+        white space.
+      -->
+      <span class="label">{label ?? ''}<slot name="label" /></span>
+      <span class="help">{help ?? ''}<slot name="help" /></span>
       <span class="input"><slot /></span>
     </span>
   </Label>

mathesar_ui/src/component-library/list-box/ListBoxTypes.ts

@@ -15,7 +15,7 @@ export interface ListBoxStaticContextProps<Option> {
 export interface ListBoxProps<Option>
   extends Partial<ListBoxStaticContextProps<Option>> {
   labelKey?: string;
-  options: Option[] | (() => CancellablePromise<Option[]>);
+  options: readonly Option[] | (() => CancellablePromise<Option[]>);
   value?: Option[];
 }
 

mathesar_ui/src/component-library/radio-group/RadioGroup.svelte

@@ -7,7 +7,7 @@
 
   export let value: Option | undefined = undefined;
   export let isInline = false;
-  export let options: Option[] = [];
+  export let options: readonly Option[] = [];
   export let label: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
   export let radioLabelKey: string | undefined = undefined;

mathesar_ui/src/component-library/render/Render.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { SvelteComponent } from 'svelte';
+
+  import type { ComponentWithProps } from '../types';
+
+  type T = $$Generic<SvelteComponent>;
+
+  export let componentWithProps: ComponentWithProps<T>;
+
+  // I'm not sure how to fix the use of `any` here. Suggestions welcome!
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  $: component = componentWithProps.component as any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  $: props = componentWithProps.props as any;
+</script>
+
+<svelte:component this={component} {...props} />

mathesar_ui/src/component-library/select/Select.svelte

@@ -81,15 +81,15 @@
 
   export let autoSelect: DefinedProps['autoSelect'] = 'first';
 
-  function setValueFromArray(values: (Option | undefined)[]) {
+  function setValueFromArray(values: readonly (Option | undefined)[]) {
     [value] = values;
     dispatch('change', value);
     dispatch('input', value);
     dispatch('artificialChange', value);
     dispatch('artificialInput', value);
   }
 
-  function setValueOnOptionChange(opts: Option[]) {
+  function setValueOnOptionChange(opts: readonly Option[]) {
     if (autoSelect === 'none') {
       return;
     }

mathesar_ui/src/component-library/select/SelectTypes.ts

@@ -4,7 +4,7 @@ import type { Appearance } from '@mathesar-component-library-dir/commonTypes';
 import type { ListBoxProps } from '@mathesar-component-library-dir/list-box/ListBoxTypes';
 
 export interface SelectProps<Option> extends BaseInputProps {
-  options: Option[];
+  options: readonly Option[];
   value?: Option;
   labelKey?: string;
   getLabel?: LabelGetter<Option | undefined>;

mathesar_ui/src/component-library/string-or-component/StringOrComponent.svelte

@@ -1,3 +1,10 @@
+<!--
+  @component
+
+  @deprecated in favor of `StringOrComponentTyped` which uses
+  `ComponentWithProps` for better type safety in comparing a component to its
+  props.
+-->
 <script lang="ts">
   import type { ComponentAndProps } from '@mathesar-component-library-dir/types';
   import {