unique index handling in schema editor

packages/web/src/tableeditor/ColumnsConstraintEditorModal.svelte

@@ -22,6 +22,8 @@
   export let tableInfo;
   export let constraintLabel;
   export let constraintType;
+  export let constraintNameLabel = 'Constraint name';
+  export let getExtractConstraintProps;
 
   let constraintName = constraintInfo?.constraintName;
   let columns = constraintInfo?.columns || [];
@@ -35,6 +37,7 @@
       schemaName: tableInfo.schemaName,
       constraintName,
       constraintType,
+      ...(getExtractConstraintProps ? getExtractConstraintProps() : {}),
     };
   }
 </script>
@@ -47,12 +50,16 @@
 
     <div class="largeFormMarker">
       <div class="row">
-        <div class="label col-3">Constraint name</div>
+        <div class="label col-3">{constraintNameLabel}</div>
         <div class="col-9">
           <TextField value={constraintName} on:input={e => (constraintName = e.target['value'])} focused />
         </div>
       </div>
 
+      {#if $$slots.constraintProps}
+        <slot name="constraintProps" />
+      {/if}
+
       {#each columns as column, index}
         <div class="row">
           <div class="label col-3">Column {index + 1}</div>

packages/web/src/tableeditor/IndexEditorModal.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import CheckboxField from '../forms/CheckboxField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
   import SelectField from '../forms/SelectField.svelte';
 
   import ColumnsConstraintEditorModal from './ColumnsConstraintEditorModal.svelte';
@@ -6,15 +8,25 @@
   export let constraintInfo;
   export let setTableInfo;
   export let tableInfo;
+
+  let isUnique = constraintInfo?.isUnique;
+
+  function getExtractConstraintProps() {
+    return {
+      isUnique,
+    };
+  }
 </script>
 
 <ColumnsConstraintEditorModal
   {...$$restProps}
   constraintLabel="index"
   constraintType="index"
+  constraintNameLabel="Index name"
   {constraintInfo}
   {setTableInfo}
   {tableInfo}
+  {getExtractConstraintProps}
 >
   <svelte:fragment slot="column" let:column let:setColumns let:index>
     <SelectField
@@ -38,4 +50,18 @@
       }}
     />
   </svelte:fragment>
+  <svelte:fragment slot="constraintProps">
+    <div class="largeFormMarker">
+      <div class="row">
+        <CheckboxField checked={isUnique} on:change={e => (isUnique = e.target.checked)} /> Is unique index
+      </div>
+    </div>
+  </svelte:fragment>
 </ColumnsConstraintEditorModal>
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+</style>

packages/web/src/tableeditor/TableEditor.svelte

@@ -162,7 +162,7 @@
     columns={[
       {
         fieldName: 'notNull',
-        header: 'Not NULL',
+        header: 'Nullability',
         sortable: true,
         slot: 0,
       },
@@ -202,7 +202,7 @@
         : null,
     ]}
   >
-    <svelte:fragment slot="0" let:row>{row?.notNull ? 'YES' : 'NO'}</svelte:fragment>
+    <svelte:fragment slot="0" let:row>{row?.notNull ? 'NOT NULL' : 'NULL'}</svelte:fragment>
     <svelte:fragment slot="1" let:row>{row?.isSparse ? 'YES' : 'NO'}</svelte:fragment>
     <svelte:fragment slot="2" let:row>{row?.isPersisted ? 'YES' : 'NO'}</svelte:fragment>
     <svelte:fragment slot="3" let:row
@@ -256,25 +256,31 @@
     title={`Indexes (${indexes?.length || 0})`}
     emptyMessage={writable() ? 'No index defined' : null}
     clickable={writable()}
-    on:clickrow={e => showModal(UniqueEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
+    on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
       {
         fieldName: 'columns',
         header: 'Columns',
         slot: 0,
       },
+      {
+        fieldName: 'unique',
+        header: 'Unique',
+        slot: 1,
+      },
       writable()
         ? {
             fieldName: 'actions',
             sortable: true,
-            slot: 1,
+            slot: 2,
           }
         : null,
     ]}
   >
     <svelte:fragment slot="name" let:row><ConstraintLabel {...row} /></svelte:fragment>
     <svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
-    <svelte:fragment slot="1" let:row
+    <svelte:fragment slot="1" let:row>{row?.isUnique ? 'YES' : 'NO'}</svelte:fragment>
+    <svelte:fragment slot="2" let:row
       ><Link
         onClick={e => {
           e.stopPropagation();
@@ -290,7 +296,7 @@
     title={`Unique constraints (${uniques?.length || 0})`}
     emptyMessage={writable() ? 'No unique defined' : null}
     clickable={writable()}
-    on:clickrow={e => showModal(IndexEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
+    on:clickrow={e => showModal(UniqueEditorModal, { constraintInfo: e.detail, tableInfo, setTableInfo })}
     columns={[
       {
         fieldName: 'columns',