fix: display names on relationship component.

Author: ItzNotABug

src/lib/components/columnSelector.svelte

@@ -46,8 +46,8 @@
         if (isCustomCollection) {
             const shownColumns = preferences.getCustomCollectionColumns(collectionId);
 
-            columns.set(
-                $columns.map((column) => {
+            columns.update((n) =>
+                n.map((column) => {
                     column.hide = shownColumns?.includes(column.id) ?? false;
                     return column;
                 })
@@ -56,24 +56,15 @@
             const prefs = preferences.get(page.route);
 
             if (prefs?.columns) {
-                columns.set(
-                    $columns.map((column) => {
+                columns.update((n) =>
+                    n.map((column) => {
                         column.hide = prefs.columns?.includes(column.id) ?? false;
                         return column;
                     })
                 );
             }
         }
 
-        columns.subscribe((ctx) => {
-            const columns = ctx.filter((n) => n.hide === true).map((n) => n.id);
-            if (isCustomCollection) {
-                preferences.setCustomCollectionColumns(collectionId, columns);
-            } else {
-                preferences.setColumns(columns);
-            }
-        });
-
         calcMaxHeight();
     });
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte

@@ -116,9 +116,24 @@
     $: totalCount = relatedList?.length ?? 0;
 
     $: options =
-        documentList?.documents?.map((n) => {
-            const data = displayNames.filter((name) => name !== '$id').map((name) => n?.[name]);
-            return { value: n.$id, label: n.$id, data };
+        documentList?.documents?.map((document) => {
+            const names = displayNames.filter((name) => name !== '$id');
+            const values = names
+                .map((name) => document?.[name])
+                // always supposed to be a string but just being a bit safe here
+                .filter((value) => value != null && typeof value === 'string' && value !== '');
+
+            const label = !values.length
+                ? document.$id
+                : // values are in `$id (a | b)` format
+                  // previously used to have a `$id a | b`.
+                  `${document.$id} (${values.join(' | ')})`;
+
+            return {
+                label,
+                value: document.$id,
+                data: names.map((name) => document?.[name])
+            };
         }) ?? [];
 
     $: hasItems = totalCount > 0;

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte

@@ -22,15 +22,15 @@
         data = null;
         selectedRelationship = null;
     }
+
+    $: tableColumns = [{ id: '$id', width: 200 }, ...args.map((id) => ({ id }))];
 </script>
 
 <Modal bind:show title={selectedRelationship?.key} hideFooter>
     {#if data?.length}
         <Paginator items={data} {limit}>
             {#snippet children(paginatedItems: typeof data)}
-                <Table.Root
-                    let:root
-                    columns={[{ id: '$id', width: 150 }, ...args.map((id) => ({ id }))]}>
+                <Table.Root let:root columns={tableColumns}>
                     <svelte:fragment slot="header" let:root>
                         <Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
                         {#if args?.length}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

@@ -15,7 +15,11 @@
     import { organization } from '$lib/stores/organization';
 
     const collectionId = page.params.collection;
-    let names: string[] = [...(preferences.getDisplayNames()?.[collectionId] ?? [])];
+
+    let names: string[] = $state(
+        // edge case with `$id`? probably got saved during local tests...
+        [...(preferences.getDisplayNames()?.[collectionId] ?? [])].filter((name) => name !== '$id')
+    );
 
     async function updateDisplayName() {
         try {
@@ -36,23 +40,32 @@
         }
     }
 
-    $: options = ($attributes as Models.AttributeString[])
-        .filter(
-            (attr) =>
-                attr.type === 'string' && !attr?.array && !names?.some((name) => name === attr.key)
-        )
-        .map((attr) => {
-            return {
+    function getValidAttributes() {
+        return ($attributes as Models.AttributeString[]).filter(
+            (attr) => attr.type === 'string' && !attr?.array
+        );
+    }
+
+    function getOptions(index: number) {
+        const current = names?.[index];
+        return getValidAttributes()
+            .filter((attr) => !names?.includes(attr.key) || attr.key === current)
+            .map((attr) => ({
                 value: attr.key,
                 label: attr.key
-            };
-        });
+            }));
+    }
 
-    $: addAttributeDisabled = names?.length >= 5 || (names?.length && !names[names?.length - 1]);
+    const addAttributeDisabled = $derived(
+        names?.length >= 5 || (names?.length && !names[names?.length - 1])
+    );
 
-    $: updateBtnDisabled =
+    const updateBtnDisabled = $derived(
         !symmetricDifference(names, preferences.getDisplayNames()?.[collectionId] ?? [])?.length ||
-        (names?.length && !last(names));
+            (names?.length && !last(names))
+    );
+
+    const hasExhaustedOptions = $derived(getValidAttributes().length === names?.length);
 </script>
 
 <Form onSubmit={updateDisplayName}>
@@ -72,38 +85,45 @@
                     </span>
                 </Layout.Stack>
                 {#if names?.length}
-                    {#each names as name, i}
+                    {#each names as name, index}
                         <Layout.Stack direction="row" gap="xxs">
+                            {@const options = getOptions(index)}
+                            {@const disabled =
+                                (!!names[index] && names.length > index + 1) || hasExhaustedOptions}
                             <InputSelect
                                 id={name}
-                                placeholder="Select attribute"
-                                bind:value={names[i]}
-                                disabled={!!names[i] && names.length > i + 1}
-                                {options} />
+                                {options}
+                                {disabled}
+                                bind:value={names[index]}
+                                placeholder="Select attribute" />
                             <Button
                                 icon
                                 extraCompact
                                 on:click={() => {
-                                    names.splice(i, 1);
+                                    names.splice(index, 1);
                                     names = names;
                                 }}>
                                 <Icon icon={IconX} />
                             </Button>
                         </Layout.Stack>
                     {/each}
                 {/if}
-                <div>
-                    <Button
-                        compact
-                        disabled={addAttributeDisabled}
-                        on:click={() => {
-                            names[names.length] = null;
-                            names = names;
-                        }}>
-                        <Icon icon={IconPlus} slot="start" size="s" />
-                        Add attribute
-                    </Button>
-                </div>
+
+                <!-- show only when options don't have all the attributes -->
+                {#if !hasExhaustedOptions}
+                    <div>
+                        <Button
+                            compact
+                            disabled={addAttributeDisabled}
+                            on:click={() => {
+                                names[names.length] = null;
+                                names = names;
+                            }}>
+                            <Icon icon={IconPlus} slot="start" size="s" />
+                            Add attribute
+                        </Button>
+                    </div>
+                {/if}
             </Layout.Stack>
         </svelte:fragment>