feat: add domain flow sites

Author: ArmanNik

src/lib/stores/domains.ts

@@ -0,0 +1,22 @@
+export const statusCodeOptions = [
+    {
+        label: '301 Moved permanently',
+        value: 301
+    },
+    {
+        label: '302 Found',
+        value: 302
+    },
+    {
+        label: '303 See other',
+        value: 303
+    },
+    {
+        label: '307 Temporary redirect',
+        value: 307
+    },
+    {
+        label: '308 Permanent redirect',
+        value: 308
+    }
+];

src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte

@@ -3,40 +3,16 @@
     import { page } from '$app/stores';
     import { EmptySearch, PaginationWithLimit } from '$lib/components/index.js';
     import { Button } from '$lib/elements/forms';
-    import Link from '$lib/elements/link.svelte';
     import Container from '$lib/layout/container.svelte';
-    import { protocol } from '$routes/(console)/store.js';
-    import type { Models } from '@appwrite.io/console';
-    import {
-        IconDotsHorizontal,
-        IconExternalLink,
-        IconPlus,
-        IconRefresh,
-        IconTrash
-    } from '@appwrite.io/pink-icons-svelte';
-    import {
-        ActionMenu,
-        Card,
-        Empty,
-        Icon,
-        Layout,
-        Popover,
-        Table
-    } from '@appwrite.io/pink-svelte';
-    import DeleteDomainModal from './deleteDomainModal.svelte';
-    import RetryDomainModal from './retryDomainModal.svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
     import SearchQuery from '$lib/components/searchQuery.svelte';
     import { app } from '$lib/stores/app';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import CreatePreviewDomainModal from './createPreviewDomainModal.svelte';
+    import Table from './table.svelte';
 
     export let data;
 
-    let showDelete = false;
-    let showRetry = false;
-    let selectedDomain: Models.ProxyRule = null;
-    let showPreviewDomainModal = false;
-
     $: console.log(data.domains);
 </script>
 
@@ -56,80 +32,7 @@
     </Layout.Stack>
 
     {#if data.domains.total}
-        <Table.Root columns={4} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell {root}>Domain</Table.Header.Cell>
-                <Table.Header.Cell {root}>Redirect to</Table.Header.Cell>
-                <Table.Header.Cell {root}>Production branch</Table.Header.Cell>
-                <Table.Header.Cell {root} />
-            </svelte:fragment>
-            {#each data.domains.rules as domain}
-                <Table.Row.Base {root}>
-                    <Table.Cell {root}>
-                        <Link external href={`${$protocol}${domain.domain}`} variant="quiet">
-                            <Layout.Stack direction="row" alignItems="center" gap="xs">
-                                {domain.domain}
-                                <Icon icon={IconExternalLink} size="s" />
-                            </Layout.Stack>
-                        </Link>
-                    </Table.Cell>
-                    <!-- TODO design redirect status code -->
-                    <Table.Cell {root}>
-                        {domain?.redirectUrl || 'No redirect'}
-                        {domain?.redirectStatusCode ? `(${domain.redirectStatusCode})` : ''}
-                    </Table.Cell>
-                    <Table.Cell {root}>
-                        {domain.deploymentVcsProviderBranch || '-'}
-                    </Table.Cell>
-                    <Table.Cell {root}>
-                        <Layout.Stack direction="row" justifyContent="flex-end">
-                            <Popover let:toggle placement="bottom-start" padding="none">
-                                <Button
-                                    text
-                                    icon
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon icon={IconDotsHorizontal} size="s" />
-                                </Button>
-
-                                <svelte:fragment slot="tooltip" let:toggle>
-                                    <ActionMenu.Root>
-                                        {#if domain.status !== 'verified'}
-                                            <ActionMenu.Item.Button
-                                                leadingIcon={IconRefresh}
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    selectedDomain = domain;
-                                                    showRetry = true;
-                                                    toggle(e);
-                                                }}>
-                                                Retry
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                        <ActionMenu.Item.Button
-                                            status="danger"
-                                            leadingIcon={IconTrash}
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                selectedDomain = domain;
-                                                showDelete = true;
-                                                toggle(e);
-                                                trackEvent(Click.DomainDeleteClick, {
-                                                    source: 'sites_domain_overview'
-                                                });
-                                            }}>
-                                            Delete
-                                        </ActionMenu.Item.Button>
-                                    </ActionMenu.Root>
-                                </svelte:fragment>
-                            </Popover>
-                        </Layout.Stack>
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+        <Table domains={data.domains} />
 
         <PaginationWithLimit
             name="Domains"
@@ -174,15 +77,3 @@
         </Card.Base>
     {/if}
 </Container>
-
-{#if showDelete}
-    <DeleteDomainModal bind:show={showDelete} {selectedDomain} />
-{/if}
-
-{#if showRetry}
-    <RetryDomainModal bind:show={showRetry} {selectedDomain} />
-{/if}
-
-{#if showPreviewDomainModal}
-    <CreatePreviewDomainModal bind:show={showPreviewDomainModal} />
-{/if}