UI for adding multi-column unique constraints

mathesar_ui/.eslintrc.cjs

@@ -53,6 +53,7 @@ module.exports = {
         'operator-linebreak': 'off',
         'space-in-parens': 'off',
         'no-confusing-arrow': 'off',
+        'no-constant-condition': 'off',
       },
     },
     {
@@ -91,6 +92,7 @@ module.exports = {
         'operator-linebreak': 'off',
         'space-in-parens': 'off',
         'no-confusing-arrow': 'off',
+        'no-constant-condition': 'off',
       },
     },
   ],

mathesar_ui/src/component-library/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.d.ts

@@ -0,0 +1,17 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import type {
+  IconFlip,
+  IconRotate,
+} from '@mathesar-component-library-dir/types';
+
+export interface IconDetails {
+  data: IconDefinition;
+  spin?: boolean;
+  flip?: IconFlip;
+  rotate?: IconRotate;
+}
+
+export interface ButtonDetails {
+  label: string;
+  icon: IconDetails;
+}

mathesar_ui/src/component-library/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte

@@ -1,25 +1,9 @@
 <script lang="ts">
-  import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
   import Button from '@mathesar-component-library-dir/button/Button.svelte';
   import SpinnerButton from '@mathesar-component-library-dir/spinner-button/SpinnerButton.svelte';
   import Icon from '@mathesar-component-library-dir/icon/Icon.svelte';
-  import type {
-    IconFlip,
-    IconRotate,
-  } from '@mathesar-component-library-dir/types';
   import { faArrowLeft, faCheck } from '@fortawesome/free-solid-svg-icons';
-
-  interface IconDetails {
-    data: IconDefinition;
-    spin?: boolean;
-    flip?: IconFlip;
-    rotate?: IconRotate;
-  }
-
-  interface ButtonDetails {
-    label: string;
-    icon: IconDetails;
-  }
+  import type { ButtonDetails } from './CancelOrProceedButtonPair';
 
   const cancelButtonDefaults: ButtonDetails = {
     label: 'Cancel',

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

@@ -21,7 +21,7 @@
   }
 </script>
 
-<FieldsetGroup {isInline} {options} {label} let:option>
+<FieldsetGroup {isInline} {options} {label} let:option on:change>
   <Checkbox
     on:change={(e) => handleChange(option, e)}
     checked={set.has(option.value)}

mathesar_ui/src/component-library/common/utils/ImmutableSet.test.ts

@@ -10,3 +10,13 @@ test('ImmutableSet', () => {
   expect(s.without(9).valuesArray()).toEqual([7, 8]);
   expect(s.without(8).valuesArray()).toEqual([7]);
 });
+
+test('union', () => {
+  const a = new ImmutableSet<number>([2, 7, 13, 19, 5]);
+  const b = new ImmutableSet<number>([23, 13, 3, 2]);
+  const empty = new ImmutableSet<number>();
+  expect(a.union(b).valuesArray()).toEqual([2, 7, 13, 19, 5, 23, 3]);
+  expect(b.union(a).valuesArray()).toEqual([23, 13, 3, 2, 7, 19, 5]);
+  expect(a.union(empty).valuesArray()).toEqual([2, 7, 13, 19, 5]);
+  expect(empty.union(a).valuesArray()).toEqual([2, 7, 13, 19, 5]);
+});

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

@@ -11,6 +11,14 @@ export class ImmutableSet<T extends string | number | boolean | null> {
     return new ImmutableSet(set);
   }
 
+  union(other: ImmutableSet<T>): ImmutableSet<T> {
+    const set = new Set(this.set);
+    [...other.values()].forEach((value) => {
+      set.add(value);
+    });
+    return new ImmutableSet(set);
+  }
+
   without(item: T): ImmutableSet<T> {
     const set = new Set(this.set);
     set.delete(item);

mathesar_ui/src/component-library/confirmation/Confirmation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import CancelOrProceedButtonPair from '@mathesar-component-library-dir/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte';
-  import Modal from '../modal/Modal.svelte';
+  import { ControlledModal } from '@mathesar-component-library-dir/modal';
   import StringOrComponent from '../string-or-component/StringOrComponent.svelte';
   import type { ConfirmationController } from './ConfirmationController';
 
@@ -52,8 +52,8 @@
   }
 </script>
 
-<Modal
-  bind:isOpen={$modal}
+<ControlledModal
+  controller={modal}
   {allowClose}
   on:close={onClose}
   class="confirmation"
@@ -67,4 +67,4 @@
     onCancel={handleCancelButton}
     onProceed={handleProceedButton}
   />
-</Modal>
+</ControlledModal>

mathesar_ui/src/component-library/confirmation/ConfirmationController.ts

@@ -2,7 +2,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faArrowLeft, faCheck } from '@fortawesome/free-solid-svg-icons';
 import type { Writable } from 'svelte/store';
 import { writable } from 'svelte/store';
-import type { ModalVisibilityStore } from '@mathesar-component-library';
+import type { ModalController } from '@mathesar-component-library-dir/modal';
 import type {
   IconFlip,
   IconRotate,
@@ -48,17 +48,17 @@ const baseConfirmationProps: ConfirmationProps = {
 };
 
 export class ConfirmationController {
-  modal: ModalVisibilityStore;
+  modal: ModalController;
 
   confirmationProps: Writable<ConfirmationProps>;
 
   resolve = writable<(isConfirmed: boolean) => void>(() => {});
 
   constructor(
-    modalVisibilityStore: ModalVisibilityStore,
+    modalController: ModalController,
     initialConfirmationProps: ConfirmationProps,
   ) {
-    this.modal = modalVisibilityStore;
+    this.modal = modalController;
     this.confirmationProps = writable(initialConfirmationProps);
   }
 }
@@ -72,7 +72,7 @@ export function makeConfirm({
   confirmationModal,
   defaultConfirmationProps,
 }: {
-  confirmationModal: ModalVisibilityStore;
+  confirmationModal: ModalController;
   defaultConfirmationProps?: ConfirmationProps;
 }): MakeConfirm {
   const fullDefaultConfirmationProps = {

mathesar_ui/src/component-library/confirmation/__meta__/Confirmation.stories.svelte

@@ -35,7 +35,7 @@
 
   const toast = makeToast();
   const modal = new ModalMultiplexer();
-  const confirmationModal = modal.createVisibilityStore();
+  const confirmationModal = modal.spawnModalController();
   const { confirm, confirmationController } = makeConfirm({
     confirmationModal,
   });

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

@@ -7,7 +7,7 @@
   export let label: string | undefined = undefined;
 </script>
 
-<fieldset class="fieldset-group" class:inline={isInline}>
+<fieldset class="fieldset-group" class:inline={isInline} on:change>
   {#if $$slots.label || label}
     <legend>
       {#if $$slots.label}<slot name="label" />{/if}

mathesar_ui/src/component-library/index.ts

@@ -26,7 +26,6 @@ export { default as NumberInput } from './number-input/NumberInput.svelte';
 export { default as Progress } from './progress/Progress.svelte';
 export { default as Radio } from './radio/Radio.svelte';
 export { default as RadioGroup } from './radio-group/RadioGroup.svelte';
-export { default as Seesaw } from './seesaw/Seesaw.svelte';
 export { default as Skeleton } from './skeleton/Skeleton.svelte';
 export { default as Spinner } from './spinner/Spinner.svelte';
 export { default as SpinnerArea } from './spinner-area/SpinnerArea.svelte';

mathesar_ui/src/component-library/modal/ControlledModal.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Size } from '../types';
+  import type { ModalCloseAction } from './modal';
+  import IndependentModal from './IndependentModal.svelte';
+  import type ModalController from './ModalController';
+
+  export let controller: ModalController;
+  export let title: string | undefined = undefined;
+  let classes = '';
+  export { classes as class };
+  export let style = '';
+  export let size: Size = 'medium';
+  export let allowClose = true;
+  export let closeOn: ModalCloseAction[] = ['button'];
+
+  $: ({ isOpen, isOnTop } = controller);
+</script>
+
+<IndependentModal
+  bind:isOpen={$isOpen}
+  hasOverlay={$isOnTop}
+  {title}
+  class={classes}
+  {style}
+  {size}
+  allowClose={allowClose && $isOnTop}
+  {closeOn}
+  on:open
+  on:close
+>
+  <slot />
+  <slot name="title" slot="title" />
+  <slot name="footer" slot="footer" />
+</IndependentModal>

mathesar_ui/src/component-library/modal/Modal.scss → mathesar_ui/src/component-library/modal/IndependentModal.scss

@@ -10,7 +10,7 @@
   justify-content: center;
 
   .overlay {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.2);
     position: absolute;
     top: 0;
     right: 0;
@@ -29,12 +29,16 @@
     z-index: 52;
     display: flex;
     flex-direction: column;
+    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
 
     .title-bar {
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
       .title {
+        &:empty {
+          display: none;
+        }
         flex: 1 1 100%;
         padding: 1em 1em 0.5em 1em;
         font-weight: bold;
@@ -44,11 +48,14 @@
     > .body,
     > .footer {
       padding: 1em;
+      &:empty {
+        display: none;
+      }
 
-      :first-child {
+      > :first-child {
         margin-top: 0;
       }
-      :last-child {
+      > :last-child {
         margin-bottom: 0;
       }
     }

mathesar_ui/src/component-library/modal/Modal.svelte → mathesar_ui/src/component-library/modal/IndependentModal.svelte

@@ -15,6 +15,7 @@
   export let style = '';
   export let size: Size = 'medium';
   export let allowClose = true;
+  export let hasOverlay = true;
   export let closeOn: ModalCloseAction[] = ['button'];
 
   $: closeOnButton = allowClose && closeOn.includes('button');
@@ -49,12 +50,14 @@
 
 {#if isOpen}
   <div class="modal-wrapper" use:portal>
-    <div
-      class="overlay"
-      on:click={handleOverlayClick}
-      in:fade={{ duration: 150 }}
-      out:fade={{ duration: 150 }}
-    />
+    {#if hasOverlay}
+      <div
+        class="overlay"
+        on:click={handleOverlayClick}
+        in:fade={{ duration: 150 }}
+        out:fade={{ duration: 150 }}
+      />
+    {/if}
     <div
       class={['modal', `modal-size-${size}`, classes].join(' ')}
       {style}
@@ -64,8 +67,8 @@
       {#if $$slots.title || title || closeOnButton}
         <div class="title-bar">
           <div class="title">
-            {#if $$slots.title}<slot name="title" />{/if}
-            {#if title}{title}{/if}
+            <slot name="title" />
+            {title ?? ''}
           </div>
           {#if closeOnButton}
             <Button appearance="plain" class="close-button" on:click={close}>
@@ -79,9 +82,7 @@
         <slot {close} />
       </div>
 
-      {#if $$slots.footer}
-        <div class="footer"><slot name="footer" /></div>
-      {/if}
+      <div class="footer"><slot name="footer" /></div>
     </div>
   </div>
 {/if}