fix: relationships from design review

package.json

@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
+        "@appwrite.io/pink": "^0.0.6-rc.14",
         "@appwrite.io/console": "0.2.0",
-        "@appwrite.io/pink": "^0.0.6-rc.10",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",

src/lib/components/clickableListItem.svelte

@@ -4,11 +4,15 @@
 
 <li class="clickable-list-item">
     <a {href} class="clickable-list-button" on:click>
-        <h5 class="clickable-list-title u-trim-1">
-            <slot />
-        </h5>
-        <div class="clickable-list-desc">
-            <p class="text u-margin-block-start-8"><slot name="desc" /></p>
-        </div>
+        {#if $$slots.default}
+            <h5 class="clickable-list-title u-trim-1">
+                <slot />
+            </h5>
+        {/if}
+        {#if $$slots.desc}
+            <div class="clickable-list-desc">
+                <p class="text u-margin-block-start-8"><slot name="desc" /></p>
+            </div>
+        {/if}
     </a>
 </li>

src/lib/components/viewSelector.svelte

@@ -84,7 +84,7 @@
                         class="icon-view-boards u-opacity-50"
                         aria-hidden="true"
                         aria-label="columns" />
-                    <span class="text is-only-desktop">Columns</span>
+                    <span class="text">Columns</span>
                     <span class="inline-tag">{selectedColumnsNumber}</span>
                 </Button>
                 <svelte:fragment slot="list">

src/lib/elements/forms/formItem.svelte

@@ -1,3 +1,7 @@
-<li class="form-item">
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
+<li class="form-item" class:u-width-full-line={fullWidth}>
     <slot />
 </li>

src/lib/elements/forms/inputText.svelte

@@ -16,6 +16,7 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
+    export let fullWidth = false;
     export let maxlength: number = null;
     export let tooltip: string = null;
 
@@ -58,7 +59,7 @@
     $: showNullCheckbox = nullable && !required;
 </script>
 
-<FormItem>
+<FormItem {fullWidth}>
     <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>

src/lib/elements/table/tableScroll.svelte

@@ -2,6 +2,7 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    export let noMargin = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement> = (node) => {
@@ -37,8 +38,8 @@
     };
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32" data-private>
-    <div class="table-wrapper" use:hasOverflow>
+<div class="table-with-scroll" class:u-margin-block-start-32={!noMargin} data-private>
+    <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
         </table>

src/routes/console/project-[project]/databases/+page.svelte

@@ -24,7 +24,12 @@
 </script>
 
 <Container>
-    <GridHeader title="Databases" {columns} view={data.view}>
+    <GridHeader
+        title="Databases"
+        {columns}
+        view={data.view}
+        hideColumns={!data.databases.total}
+        hideView={!data.databases.total}>
         <Button on:click={() => (showCreate = true)} event="create_database">
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create database</span>

src/routes/console/project-[project]/databases/database-[database]/+page.svelte

@@ -11,7 +11,12 @@
 </script>
 
 <Container>
-    <GridHeader title="Collections" {columns} view={data.view}>
+    <GridHeader
+        title="Collections"
+        {columns}
+        view={data.view}
+        hideColumns={!data.collections.total}
+        hideView={!data.collections.total}>
         <Button on:click={() => ($showCreate = true)} event="create_collection">
             <span class="icon-plus" aria-hidden="true" />
             <span class="text">Create collection</span>

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

@@ -61,7 +61,7 @@
             const documents = await sdk.forProject.databases.listDocuments(
                 databaseId,
                 attribute.relatedCollection,
-                [Query.search('$id', search), Query.orderDesc('$createdAt')]
+                [Query.startsWith('$id', search), Query.orderDesc('$createdAt')]
             );
             return documents;
         } else {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte

@@ -52,7 +52,7 @@
             invalidate(Dependencies.DOCUMENT);
             trackEvent(Submit.DocumentUpdate);
             addNotification({
-                message: 'Document was updated!',
+                message: 'Document has been updated',
                 type: 'success'
             });
         } catch (error) {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte

@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Alert, Modal } from '$lib/components';
+    import { Alert, Modal, Trim } from '$lib/components';
     import { Button, InputChoice } from '$lib/elements/forms';
     import {
         TableBody,
@@ -68,17 +68,12 @@
     headerDivider={false}>
     <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
-    <p data-private>
-        Are you sure you want to delete <b
-            >the document from <span data-private>{$collection.name}</span></b
-        >?
-    </p>
-
     {#if relAttributes?.length}
-        <TableScroll>
+        <p class="text">This document contains the following relationships:</p>
+        <TableScroll noMargin>
             <TableHeader>
-                <TableCellHead width={50}>Relation</TableCellHead>
-                <TableCellHead width={50}>Setting</TableCellHead>
+                <TableCellHead width={70}>Relation</TableCellHead>
+                <TableCellHead width={70}>Setting</TableCellHead>
                 <TableCellHead width={200} />
             </TableHeader>
             <TableBody>
@@ -91,7 +86,7 @@
                                 {:else}
                                     <span class="icon-arrow-sm-right" />
                                 {/if}
-                                <span data-private>{attr.key}</span>
+                                <Trim>{attr.key}</Trim>
                             </span>
                         </TableCell>
                         <TableCellText title="Settings">
@@ -111,7 +106,14 @@
                 Delete document from <span data-private>{$collection.name}</span>
             </InputChoice>
         </div>
+    {:else}
+        <p data-private>
+            Are you sure you want to delete <b
+                >the document from <span data-private>{$collection.name}</span></b
+            >?
+        </p>
     {/if}
+
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
         <Button secondary submit disabled={relAttributes?.length && !checked}>Delete</Button>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte

@@ -65,7 +65,7 @@
             trackEvent(Submit.DocumentUpdate);
             disableUpdate = true;
             addNotification({
-                message: 'Document was updated!',
+                message: 'Document has been updated',
                 type: 'success'
             });
         } catch (error) {

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/header.svelte

@@ -51,7 +51,9 @@
         <CoverTitle href={`/console/project-${projectId}/databases/database-${databaseId}`}>
             {$collection?.name}
         </CoverTitle>
-        <Id value={$collection?.$id}>{$collection?.$id}</Id>
+        {#key $collection?.$id}
+            <Id value={$collection?.$id}>{$collection?.$id}</Id>
+        {/key}
     </svelte:fragment>
 
     <Tabs>

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

@@ -12,7 +12,10 @@
     const databaseId = $page.params.database;
     const limit = 10;
 
-    $: args = preferences.getDisplayNames()?.[selectedRelationship?.relatedCollection] ?? [];
+    $: args =
+        preferences
+            .getDisplayNames()
+            ?.[selectedRelationship?.relatedCollection]?.filter((p) => p !== '$id') ?? [];
 
     $: if (!show) {
         data = null;

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

@@ -37,10 +37,7 @@
     $: options = ($attributes as Models.AttributeString[])
         .filter(
             (attr) =>
-                attr.type === 'string' &&
-                attr?.size <= 50 &&
-                !attr?.array &&
-                !names?.some((name) => name === attr.key)
+                attr.type === 'string' && !attr?.array && !names?.some((name) => name === attr.key)
         )
         .map((attr) => {
             return {
@@ -60,19 +57,28 @@
     <CardGrid>
         <Heading tag="h6" size="7">Display Name</Heading>
         <p class="text">
-            Set string attributes with maximum 50 characters to be used as a display name in the
-            Appwrite console. Maximum 5 names.
+            Select string attributes as display names for your documents. The selected names will be
+            used as short forms to identify documents in the Appwrite console, like when creating
+            database relationships. You can specify up to 5 names.
         </p>
 
         <svelte:fragment slot="aside">
             <div class="u-flex u-flex-vertical u-gap-4">
-                <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
-                    <InputText
-                        id="id"
-                        label="Document ID"
-                        showLabel={false}
-                        placeholder="Document ID"
-                        readonly />
+                <ul class="u-flex-vertical u-gap-8">
+                    <li class="u-flex u-gap-8">
+                        <InputText
+                            id="id"
+                            label="Document ID"
+                            showLabel={false}
+                            placeholder="Document ID"
+                            readonly
+                            fullWidth />
+                        <div class="form-item-part u-cross-child-end u-opacity-0">
+                            <Button text noMargin disabled>
+                                <span class="icon-x" aria-hidden="true" />
+                            </Button>
+                        </div>
+                    </li>
                     {#if names?.length}
                         {#each names as name, i}
                             <div class="u-flex u-gap-8">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte

@@ -19,6 +19,7 @@
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
+    import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let data: PageData;
 
@@ -111,22 +112,26 @@
                                 {#if !isRelationshipToMany(attr)}
                                     {#if document[column.id]}
                                         {@const related = document[column.id]}
-                                        <button
-                                            class="link u-flex u-gap-4 u-padding-block-8"
-                                            type="button"
+                                        <div
+                                            tabindex="0"
+                                            class="link is-5px-offset u-trim-1 u-break-word"
+                                            role="button"
+                                            on:keyup={clickOnEnter}
                                             on:click|preventDefault|stopPropagation={() =>
                                                 goto(
                                                     `${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
                                                 )}>
                                             {#each args as arg, i}
                                                 {#if arg !== undefined}
-                                                    {i ? '|' : ''}
+                                                    {#if i}
+                                                        &nbsp;|
+                                                    {/if}
                                                     <span class="text" data-private>
                                                         {related?.[arg]}
                                                     </span>
                                                 {/if}
                                             {/each}
-                                        </button>
+                                        </div>
                                     {:else}
                                         <span class="text">n/a</span>
                                     {/if}