Merge pull request #1383 from centerofci/949_fk_list_detail

Show detailed FK info in constraints dialog
mathesar-foundation · May 24, 2022 · 41b8262 · 41b8262
2 parents 3de482e + 60217dd
commit 41b8262
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 17 deletions.
diff --git a/mathesar_ui/src/api/tables/constraints.ts b/mathesar_ui/src/api/tables/constraints.ts
@@ -1,21 +1,17 @@
-export type ConstraintType =
-  | 'foreignkey'
-  | 'primary'
-  | 'unique'
-  | 'check'
-  | 'exclude';
-
-export interface BasicConstraint {
+export interface BaseConstraint {
   id: number;
   name: string;
-  type: ConstraintType;
   /**
    * Each number is a column id.
    */
   columns: number[];
 }
 
-export interface FkConstraint extends BasicConstraint {
+export interface BasicConstraint extends BaseConstraint {
+  type: 'primary' | 'unique' | 'check' | 'exclude';
+}
+
+export interface FkConstraint extends BaseConstraint {
   type: 'foreignkey';
   /** The ids of the columns in the table which this FK references */
   referent_columns: number[];
@@ -40,3 +36,5 @@ export interface FkConstraint extends BasicConstraint {
 }
 
 export type Constraint = BasicConstraint | FkConstraint;
+
+export type ConstraintType = Constraint['type'];
diff --git a/mathesar_ui/src/sections/table-view/constraints/TableConstraint.svelte b/mathesar_ui/src/sections/table-view/constraints/TableConstraint.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-  import { Icon, Button } from '@mathesar-component-library';
-  import { faTrash } from '@fortawesome/free-solid-svg-icons';
-  import { confirmDelete } from '@mathesar/stores/confirmation';
-  import type {
-    Constraint,
-    TabularDataStore,
-  } from '@mathesar/stores/table-data/types';
   import { getContext } from 'svelte';
+  import { Icon, Button, Spinner } from '@mathesar-component-library';
+  import {
+    faArrowRight,
+    faExclamationTriangle,
+    faPlus,
+    faTrash,
+  } from '@fortawesome/free-solid-svg-icons';
+  import { confirmDelete } from '@mathesar/stores/confirmation';
+  import type { TabularDataStore } from '@mathesar/stores/table-data/types';
+  import type { Constraint } from '@mathesar/api/tables/constraints';
+  import { tables } from '@mathesar/stores/tables';
+  import Identifier from '@mathesar/components/Identifier.svelte';
+  import type { Column } from '@mathesar/api/tables/columns';
+  import type { PaginatedResponse } from '@mathesar/utils/api';
+  import { getAPI } from '@mathesar/utils/api';
 
   export let constraint: Constraint;
   export let drop: () => Promise<void>;
@@ -28,6 +36,22 @@
   );
   $: columnNames = columns.map((columnInConstraint) => columnInConstraint.name);
   $: columnSummary = columnNames.join(', ');
+  $: referentTable =
+    constraint.type === 'foreignkey'
+      ? $tables.data.get(constraint.referent_table)
+      : undefined;
+
+  async function getReferentColumns(_constraint: Constraint) {
+    if (_constraint.type !== 'foreignkey') {
+      return [];
+    }
+    const tableId = _constraint.referent_table;
+    const url = `/api/db/v0/tables/${tableId}/columns/?limit=500`;
+    const referentTableColumns = await getAPI<PaginatedResponse<Column>>(url);
+    return referentTableColumns.results.filter((c) =>
+      _constraint.referent_columns.includes(c.id),
+    );
+  }
 </script>
 
 <div class="table-constraint">
@@ -38,6 +62,25 @@
       <span>&bull;</span>
       <span class="columns">{columnSummary}</span>
     </div>
+    <div class="referent">
+      {#if referentTable}
+        References
+        <Identifier>{referentTable.name}</Identifier>
+        <Icon data={faArrowRight} />
+        {#await getReferentColumns(constraint)}
+          <Spinner />
+        {:then referentColumns}
+          {#each referentColumns as referentColumn, index (referentColumn.id)}
+            <Identifier>{referentColumn.name}</Identifier>
+            {#if index < referentColumns.length - 1}
+              <Icon data={faPlus} />
+            {/if}
+          {/each}
+        {:catch error}
+          <Icon data={faExclamationTriangle} />
+        {/await}
+      {/if}
+    </div>
   </div>
   <div class="drop">
     <Button on:click={handleDrop} title={dropTitle}>
@@ -65,4 +108,7 @@
     color: #666;
     font-size: 0.9rem;
   }
+  .referent {
+    color: #666;
+  }
 </style>