Feat. Project labels

package.json

@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@f21fc7f",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@9c55755",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc",
         "@appwrite.io/pink-legacy": "^1.0.3",

src/lib/actions/analytics.ts

@@ -247,6 +247,7 @@ export enum Submit {
     ProjectDelete = 'submit_project_delete',
     ProjectUpdateName = 'submit_project_update_name',
     ProjectUpdateTeam = 'submit_project_update_team',
+    ProjectUpdateLabels = 'submit_project_update_labels',
     ProjectService = 'submit_project_service',
     ProjectUpdateSMTP = 'submit_project_update_smtp',
     MemberCreate = 'submit_member_create',

src/routes/(console)/+layout.ts

@@ -18,7 +18,7 @@ export const load: LayoutLoad = async ({ depends, parent }) => {
         sdk.forConsole.account.getPrefs(),
         isCloud ? sdk.forConsole.billing.getPlansInfo() : null,
         fetch(`${endpoint}/health/version`, {
-            headers: { 'X-Appwrite-Project': project }
+            headers: { 'X-Appwrite-Project': project as string }
         }).then((response) => response.json() as { version?: string }),
         sdk.forConsole.console.variables()
     ]);

src/routes/(console)/organization-[organization]/+page.svelte

@@ -170,7 +170,7 @@
 
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between" class="common-section">
-        <SearchQuery bind:this={searchQuery} placeholder="Search by name or ID" />
+        <SearchQuery bind:this={searchQuery} placeholder="Search by name, label, or ID" />
 
         {#if $canWriteProjects}
             {#if projectCreationDisabled && reachedProjectLimit}

src/routes/(console)/organization-[organization]/+page.ts

@@ -24,8 +24,12 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
     const archivedPage =
         Number.isFinite(archivedPageRaw) && archivedPageRaw > 0 ? archivedPageRaw : 1;
     const archivedOffset = pageToOffset(archivedPage, limit);
-    const common = [Query.equal('teamId', params.organization)];
-    const active = isCloud
+
+    const searchQueries = search
+        ? [Query.or([Query.search('search', search), Query.contains('labels', search)])]
+        : [];
+    const commonQueries = [Query.equal('teamId', params.organization)];
+    const activeQueries = isCloud
         ? [Query.or([Query.equal('status', 'active'), Query.isNull('status')])]
         : [];
 
@@ -35,31 +39,29 @@ export const load: PageLoad = async ({ params, url, route, depends, parent }) =>
                 Query.offset(offset),
                 Query.limit(limit),
                 Query.orderDesc(''),
-                ...common,
-                ...active
-            ],
-            search: search || undefined
+                ...commonQueries,
+                ...searchQueries,
+                ...activeQueries
+            ]
         }),
         isCloud
             ? sdk.forConsole.projects.list({
                   queries: [
                       Query.offset(archivedOffset),
                       Query.limit(limit),
                       Query.orderDesc(''),
-                      ...common,
+                      ...commonQueries,
+                      ...searchQueries,
                       Query.equal('status', 'archived')
-                  ],
-                  search: search || undefined
+                  ]
               })
             : Promise.resolve({ projects: [], total: 0 }),
         sdk.forConsole.projects.list({
-            queries: [...common, ...active],
-            search: search || undefined
+            queries: [...commonQueries, ...activeQueries, ...searchQueries]
         }),
         isCloud
             ? sdk.forConsole.projects.list({
-                  queries: [...common, Query.equal('status', 'archived')],
-                  search: search || undefined
+                  queries: [...commonQueries, ...searchQueries, Query.equal('status', 'archived')]
               })
             : Promise.resolve({ projects: [], total: 0 })
     ]);

src/routes/(console)/project-[region]-[project]/settings/+page.svelte

@@ -15,6 +15,7 @@
     import ChangeOrganization from './changeOrganization.svelte';
     import UpdateVariables from '../updateVariables.svelte';
     import { page } from '$app/state';
+    import UpdateLabels from './updateLabels.svelte';
 
     export let data;
 
@@ -84,8 +85,9 @@
 
 <Container>
     {#if $project}
-        <UpdateName />
         {#if $canWriteProjects}
+            <UpdateName />
+            <UpdateLabels />
             <UpdateServices />
             <UpdateInstallations {...data.installations} limit={data.limit} offset={data.offset} />
             <UpdateVariables

src/routes/(console)/project-[region]-[project]/settings/updateLabels.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputTags } from '$lib/elements/forms';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../store';
+    import { Tag, Input, Layout, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+
+    const alphaNumericRegExp = /^[a-zA-Z0-9]+$/;
+    let suggestedLabels = ['live', 'stage', 'internal'];
+    let labels: string[] = [];
+    let error = '';
+
+    onMount(async () => {
+        labels = [...$project.labels];
+    });
+
+    async function updateLabels() {
+        try {
+            await sdk.forConsole.projects.updateLabels({ projectId: $project.$id, labels });
+            await invalidate(Dependencies.PROJECT);
+            isDisabled = true;
+            addNotification({
+                type: 'success',
+                message: 'Project labels have been updated'
+            });
+            trackEvent(Submit.ProjectUpdateLabels);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.ProjectUpdateLabels);
+        }
+    }
+
+    $: isDisabled = !!error || !symmetricDifference(labels, $project.labels).length;
+
+    $: if (labels) {
+        const invalidLabels = [];
+
+        labels.forEach((label) => {
+            if (!alphaNumericRegExp.test(label)) {
+                invalidLabels.push(label);
+            }
+        });
+
+        if (invalidLabels.length) {
+            error = `Invalid labels: ${invalidLabels.join(', ')}`;
+        } else {
+            error = '';
+        }
+    }
+</script>
+
+<Form onSubmit={updateLabels}>
+    <CardGrid>
+        <svelte:fragment slot="title">Labels</svelte:fragment>
+        Categorize and manage your projects for easy searching based on specific criteria by assigning
+        them customizable labels.
+        <svelte:fragment slot="aside">
+            <Layout.Stack gap="s">
+                {#key labels.length}
+                    <InputTags
+                        id="project-labels"
+                        label="Labels"
+                        placeholder="Select or type project labels"
+                        bind:tags={labels} />
+                {/key}
+                <Layout.Stack direction="row">
+                    {#each suggestedLabels as suggestedLabel}
+                        <Tag
+                            size="s"
+                            selected={labels.includes(suggestedLabel)}
+                            on:click={() => {
+                                if (!labels.includes(suggestedLabel)) {
+                                    labels = [...labels, suggestedLabel];
+                                } else {
+                                    labels = labels.filter((e) => e !== suggestedLabel);
+                                }
+                            }}>
+                            <Icon icon={IconPlus} size="s" slot="start" />
+                            {suggestedLabel}
+                        </Tag>
+                    {/each}
+                </Layout.Stack>
+                <Input.Helper state={error ? 'warning' : 'default'}
+                    >{error ? error : 'Only alphanumeric characters are allowed'}</Input.Helper>
+            </Layout.Stack>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={isDisabled} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte

@@ -57,7 +57,7 @@
             const res = await fetch(`${endpoint}/account/invite`, {
                 method: 'POST',
                 headers: {
-                    'X-Appwrite-Project': project,
+                    'X-Appwrite-Project': project as string,
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({