From 3b9f1e93f45c8329ee3bdf58e3fe742cca2e9ae3 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 19 Mar 2025 16:04:35 +0100
Subject: [PATCH] feat: add search to functions

---
 src/lib/components/domains/cnameTable.svelte  | 66 +++++++++++++++++++
 .../project-[project]/functions/+page.svelte  | 12 +++-
 .../project-[project]/functions/+page.ts      | 14 ++--
 .../add-domain/verificationFieldset.svelte    | 56 +---------------
 .../domains/retryDomainModal.svelte           |  6 +-
 5 files changed, 90 insertions(+), 64 deletions(-)
 create mode 100644 src/lib/components/domains/cnameTable.svelte

diff --git a/src/lib/components/domains/cnameTable.svelte b/src/lib/components/domains/cnameTable.svelte
new file mode 100644
index 000000000..40c89e3fe
--- /dev/null
+++ b/src/lib/components/domains/cnameTable.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { Link } from '$lib/elements';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Badge,
+        Layout,
+        Typography,
+        Table,
+        Icon,
+        InteractiveText
+    } from '@appwrite.io/pink-svelte';
+
+    export let domain: string;
+    export let verified = false;
+</script>
+
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="s">
+        <Layout.Stack gap="s" direction="row" alignItems="center">
+            <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
+                {domain}
+            </Typography.Text>
+            {#if verified}
+                <Badge variant="secondary" type="success" content="Verified" />
+            {:else if verified === false}
+                <Badge variant="secondary" type="error" content="Verification failed" />
+            {:else}
+                <Badge
+                    variant="secondary"
+                    type="warning"
+                    size="xs"
+                    content="Pending verification" />
+            {/if}
+        </Layout.Stack>
+        <Typography.Text variant="m-400">
+            Add the following record on your DNS provider. Note that DNS changes may take time to
+            propagate fully.
+        </Typography.Text>
+    </Layout.Stack>
+
+    <Table.Root columns={3} let:root>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Type</Table.Header.Cell>
+            <Table.Header.Cell {root}>Name</Table.Header.Cell>
+            <Table.Header.Cell {root}>Value</Table.Header.Cell>
+        </svelte:fragment>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>CNAME</Table.Cell>
+            <Table.Cell {root}>{domain}</Table.Cell>
+            <Table.Cell {root}>
+                <InteractiveText variant="copy" isVisible text={globalThis?.location?.origin}>
+                    {globalThis?.location?.origin}</InteractiveText>
+            </Table.Cell>
+        </Table.Row.Base>
+    </Table.Root>
+    <Layout.Stack gap="s" direction="row" alignItems="center">
+        <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
+        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+            A list of all domain providers and their DNS setting is available <Link
+                variant="muted"
+                external
+                href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+            >.
+        </Typography.Text>
+    </Layout.Stack>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/functions/+page.svelte b/src/routes/(console)/project-[project]/functions/+page.svelte
index 599312c94..224b19734 100644
--- a/src/routes/(console)/project-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/+page.svelte
@@ -5,9 +5,11 @@
     import {
         CardContainer,
         Empty,
+        EmptySearch,
         GridItem1,
         Id,
         PaginationWithLimit,
+        SearchQuery,
         SvgIcon
     } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -74,7 +76,9 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="flex-end">
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <SearchQuery search={data.search} placeholder="Search functions" />
+
         <Button href={`${base}/project-${project}/functions/create-function`}>
             <Icon icon={IconPlus} slot="start" />
             Create function
@@ -122,6 +126,12 @@
             limit={data.limit}
             offset={data.offset}
             total={data.functions.total} />
+    {:else if data?.search}
+        <EmptySearch hidePages bind:search={data.search} target="functions">
+            <Button secondary href={`${base}/project-${$page.params.project}/functions`}>
+                Clear search
+            </Button>
+        </EmptySearch>
     {:else}
         <Empty
             single
diff --git a/src/routes/(console)/project-[project]/functions/+page.ts b/src/routes/(console)/project-[project]/functions/+page.ts
index 96f2b6489..8929f79ac 100644
--- a/src/routes/(console)/project-[project]/functions/+page.ts
+++ b/src/routes/(console)/project-[project]/functions/+page.ts
@@ -1,12 +1,12 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
 export const load = async ({ url, depends, route, parent }) => {
     depends(Dependencies.FUNCTIONS);
     const { templatesList } = await parent();
-
+    const search = getSearch(url);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
@@ -14,11 +14,11 @@ export const load = async ({ url, depends, route, parent }) => {
     return {
         offset,
         limit,
-        functions: await sdk.forProject.functions.list([
-            Query.limit(limit),
-            Query.offset(offset),
-            Query.orderDesc('')
-        ]),
+        functions: await sdk.forProject.functions.list(
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+            search
+        ),
+        search,
         templatesList
     };
 };
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte
index 163e4b089..9ce6c0554 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/add-domain/verificationFieldset.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { Link } from '$lib/elements';
+    import CnameTable from '$lib/components/domains/cnameTable.svelte';
     import { consoleVariables } from '$routes/(console)/store';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import {
         Badge,
         Divider,
         Fieldset,
-        Icon,
         InteractiveText,
         Layout,
         Table,
@@ -48,57 +46,7 @@
             <Divider />
         </div>
         {#if selectedTab === 'cname' && isSubDomain}
-            <Layout.Stack gap="s">
-                <Layout.Stack gap="s" direction="row" alignItems="center">
-                    <Typography.Text variant="l-500" color="--fgcolor-neutral-primary">
-                        {domain}
-                    </Typography.Text>
-                    {#if verified}
-                        <Badge variant="secondary" type="success" content="Verified" />
-                    {:else if verified === false}
-                        <Badge variant="secondary" type="error" content="Verification failed" />
-                    {:else}
-                        <Badge
-                            variant="secondary"
-                            type="warning"
-                            size="xs"
-                            content="Pending verification" />
-                    {/if}
-                </Layout.Stack>
-                <Typography.Text variant="m-400">
-                    Add the following record on your DNS provider. Note that DNS changes may take
-                    time to propagate fully.
-                </Typography.Text>
-            </Layout.Stack>
-
-            <Table.Root columns={3} let:root>
-                <svelte:fragment slot="header" let:root>
-                    <Table.Header.Cell {root}>Type</Table.Header.Cell>
-                    <Table.Header.Cell {root}>Name</Table.Header.Cell>
-                    <Table.Header.Cell {root}>Value</Table.Header.Cell>
-                </svelte:fragment>
-                <Table.Row.Base {root}>
-                    <Table.Cell {root}>CNAME</Table.Cell>
-                    <Table.Cell {root}>{domain}</Table.Cell>
-                    <Table.Cell {root}>
-                        <InteractiveText
-                            variant="copy"
-                            isVisible
-                            text={globalThis?.location?.origin}>
-                            {globalThis?.location?.origin}</InteractiveText>
-                    </Table.Cell>
-                </Table.Row.Base>
-            </Table.Root>
-            <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                    A list of all domain providers and their DNS setting is available <Link
-                        variant="muted"
-                        external
-                        href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
-                    >.
-                </Typography.Text>
-            </Layout.Stack>
+            <CnameTable {domain} {verified} />
         {:else}
             <Layout.Stack gap="s">
                 <Layout.Stack gap="s" direction="row" alignItems="center">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
index 9e0d3eb62..a30c23e79 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
@@ -6,9 +6,9 @@
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
-    import RecordsCard from './recordsCard.svelte';
     import type { Domain } from '$lib/sdk/domains';
     import type { Models } from '@appwrite.io/console';
+    import CnameTable from '$lib/components/domains/cnameTable.svelte';
 
     export let show = false;
     export let selectedDomain: Domain | Models.ProxyRule;
@@ -37,7 +37,9 @@
 
 <Modal title="Retry verification" bind:show onSubmit={retryDomain} bind:error>
     {#if selectedDomain}
-        <RecordsCard domain={selectedDomain} />
+        <CnameTable
+            domain={selectedDomain.domain}
+            verified={selectedDomain.status === 'verified'} />
     {/if}
 
     <svelte:fragment slot="footer">