From d091b8226b26dc1773f5714da0d81d6edb546c56 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 1 Mar 2024 20:23:10 -0800
Subject: [PATCH 1/3] feat(databases): create modal to show error details

---
 .../failedModal.svelte                        | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
new file mode 100644
index 000000000..cf9f0f37e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Modal from '$lib/components/modal.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+
+    export let show: boolean;
+    export let error: string;
+    export let title: string;
+    export let header: string;
+</script>
+
+<Modal {title} headerDivider={false} bind:show size="big">
+    <div class="box u-flex-vertical u-gap-24">
+        <p class="u-inline-flex u-cross-center u-gap-8">
+            <span
+                class="icon-exclamation-circle u-font-size-20"
+                aria-hidden="true"
+                style="color:hsl(var(--color-danger-100));" />{header}
+        </p>
+        <p>{error}</p>
+    </div>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>

From f10b700dce989d32281654304d40d59993b28cec Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 1 Mar 2024 20:24:10 -0800
Subject: [PATCH 2/3] feat(databases): show attribute/index failed error in
 modal

---
 .../attributes/+page.svelte                   | 29 +++++++++++++-----
 .../indexes/+page.svelte                      | 30 ++++++++++++++-----
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index bd48e7807..3ca3f4a97 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -16,6 +16,7 @@
     import { Container } from '$lib/layout';
     import Create from '../createAttribute.svelte';
     import { isRelationship } from '../document-[document]/attributes/store';
+    import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
@@ -35,6 +36,8 @@
     let showDelete = false;
     let showEdit = false;
     let showCreateIndex = false;
+    let showFailed = false;
+    let error = '';
 
     enum attributeFormatIcon {
         ip = 'location-marker',
@@ -89,13 +92,24 @@
                                     <span class="text u-trim-1" data-private>{attribute.key}</span>
                                 </div>
                                 {#if attribute.status !== 'available'}
-                                    <Pill
-                                        warning={attribute.status === 'processing'}
-                                        danger={['deleting', 'stuck', 'failed'].includes(
-                                            attribute.status
-                                        )}>
-                                        {attribute.status}
-                                    </Pill>
+                                    <div class="u-inline-flex u-gap-12 u-cross-center">
+                                        <Pill
+                                            warning={attribute.status === 'processing'}
+                                            danger={['deleting', 'stuck', 'failed'].includes(
+                                                attribute.status
+                                            )}>
+                                            {attribute.status}
+                                        </Pill>
+                                        {#if attribute.error}
+                                            <Button
+                                                link
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    error = attribute.error;
+                                                    showFailed = true;
+                                                }}>Details</Button>
+                                        {/if}
+                                    </div>
                                 {:else if attribute.required}
                                     <Pill>Required</Pill>
                                 {/if}
@@ -214,3 +228,4 @@
 <Delete bind:showDelete {selectedAttribute} />
 <Edit bind:showEdit {selectedAttribute} />
 <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
+<FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 4cc2d4263..a3d50bb09 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -20,6 +20,7 @@
     import { Button } from '$lib/elements/forms';
     import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
     import type { Option } from '../attributes/store';
+    import FailedModal from '../failedModal.svelte';
 
     let showDropdown = [];
     let selectedIndex: Models.Index = null;
@@ -29,6 +30,8 @@
     let showCreateAttribute = false;
     let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
+    let showFailed = false;
+    let error = '';
 </script>
 
 <Container>
@@ -60,13 +63,24 @@
                                 <div class="u-flex u-main-space-between">
                                     <span class="text u-trim"> {index.key}</span>
                                     {#if index.status !== 'available'}
-                                        <Pill
-                                            warning={index.status === 'processing'}
-                                            danger={['deleting', 'stuck', 'failed'].includes(
-                                                index.status
-                                            )}>
-                                            {index.status}
-                                        </Pill>
+                                        <div class="u-inline-flex u-gap-12 u-cross-center">
+                                            <Pill
+                                                warning={index.status === 'processing'}
+                                                danger={['deleting', 'stuck', 'failed'].includes(
+                                                    index.status
+                                                )}>
+                                                {index.status}
+                                            </Pill>
+                                            {#if index.error}
+                                                <Button
+                                                    link
+                                                    on:click={(e) => {
+                                                        e.preventDefault();
+                                                        error = index.error;
+                                                        showFailed = true;
+                                                    }}>Details</Button>
+                                            {/if}
+                                        </div>
                                     {/if}
                                 </div>
                             </TableCell>
@@ -162,3 +176,5 @@
 {/if}
 
 <CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
+
+<FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />

From c24e7b1c9ee4073e49e210bad215c8b38f295323 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Fri, 1 Mar 2024 20:27:45 -0800
Subject: [PATCH 3/3] feat(databases): prevent deleting processing attributes

Most of the time, develoeprs should just wait for processing
attributes. If they delete it, it will most likely become
stuck. As such, hide the delete button to reduce the
occurrence of stuck attributes.
---
 .../attributes/+page.svelte                   | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 3ca3f4a97..88bc3bef7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -172,15 +172,17 @@
                                             Create Index
                                         </DropListItem>
                                     {/if}
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedAttribute = attribute;
-                                            showDelete = true;
-                                            showDropdown[index] = false;
-                                        }}>
-                                        Delete
-                                    </DropListItem>
+                                    {#if attribute.status !== 'processing'}
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={() => {
+                                                selectedAttribute = attribute;
+                                                showDelete = true;
+                                                showDropdown[index] = false;
+                                            }}>
+                                            Delete
+                                        </DropListItem>
+                                    {/if}
                                 </svelte:fragment>
                             </DropList>
                         </TableCell>