Show warning when VCS integration is not authorized for auto-deployments

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

@@ -32,6 +32,7 @@
     import CreateActionMenu from './(components)/createActionMenu.svelte';
     import { Menu } from '$lib/components/menu';
     import DownloadActionMenuItem from './(components)/downloadActionMenuItem.svelte';
+    import { Link } from '$lib/elements';
 
     export let data;
 
@@ -93,6 +94,19 @@
                     title="Some configuration changes are not live yet. Your function is redeploying — changes will be applied once the build is complete." />
             {/if}
         {/if}
+
+        {#if data.repository && !data.repository.authorized}
+            <Alert.Inline status="warning">
+                Integration with your repository is not authorized to perform auto-deployments.
+                Please add the repository to the installation settings
+                <Link
+                    variant="muted"
+                    external
+                    href={`https://github.com/settings/installations/${data.repository.providerInstallationId}`}>
+                    here
+                </Link>.
+            </Alert.Inline>
+        {/if}
         <Layout.Stack gap="xxxl">
             {#if activeDeployment}
                 <DeploymentCard

src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts

@@ -13,56 +13,128 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
 
-    const parsedQueries = queryParamToMap(query || '[]');
-    queries.set(parsedQueries);
-    let activeDeployment: Models.Deployment | null = null;
-    if (data.function.deploymentId) {
-        try {
-            activeDeployment = await sdk
-                .forProject(params.region, params.project)
-                .functions.getDeployment({
-                    functionId: params.function,
-                    deploymentId: data.function.deploymentId
-                });
-        } catch (error) {
-            // active deployment with the requested ID could not be found
-            activeDeployment = null;
-        }
-    }
+    const [deploymentList, activeDeployment, repository] = await Promise.all([
+        loadDeploymentList({
+            region: params.region,
+            project: params.project,
+            functionId: params.function,
+            limit,
+            offset,
+            query
+        }),
+        data.function.deploymentId
+            ? loadActiveDeployment({
+                  region: params.region,
+                  project: params.project,
+                  functionId: params.function,
+                  deploymentId: data.function.deploymentId
+              })
+            : Promise.resolve(null),
+        data.function.installationId && data.function.providerRepositoryId
+            ? loadRepository({
+                  region: params.region,
+                  project: params.project,
+                  installationId: data.function.installationId,
+                  providerRepositoryId: data.function.providerRepositoryId
+              })
+            : Promise.resolve(null)
+    ]);
 
     return {
         offset,
         limit,
         query,
         installations: data.installations,
         activeDeployment,
-        deploymentList: await sdk
-            .forProject(params.region, params.project)
-            .functions.listDeployments({
-                functionId: params.function,
-                queries: [
-                    Query.limit(limit),
-                    Query.offset(offset),
-                    Query.orderDesc(''),
-                    Query.select([
-                        'buildSize',
-                        'sourceSize',
-                        'totalSize',
-                        'buildDuration',
-                        'status',
-                        'type',
-                        'resourceId',
-                        'providerRepositoryUrl',
-                        'providerRepositoryOwner',
-                        'providerRepositoryName',
-                        'providerBranchUrl',
-                        'providerBranch',
-                        'providerCommitMessage',
-                        'providerCommitHash',
-                        'providerCommitUrl'
-                    ]),
-                    ...parsedQueries.values()
-                ]
-            })
+        repository,
+        deploymentList
     };
 };
+
+async function loadDeploymentList({
+    region,
+    project,
+    functionId,
+    limit,
+    offset,
+    query
+}: {
+    region: string;
+    project: string;
+    functionId: string;
+    limit: number;
+    offset: number;
+    query: string;
+}): Promise<Models.DeploymentList> {
+    const parsedQueries = queryParamToMap(query || '[]');
+    queries.set(parsedQueries);
+
+    return sdk.forProject(region, project).functions.listDeployments({
+        functionId,
+        queries: [
+            Query.limit(limit),
+            Query.offset(offset),
+            Query.orderDesc(''),
+            Query.select([
+                'buildSize',
+                'sourceSize',
+                'totalSize',
+                'buildDuration',
+                'status',
+                'type',
+                'resourceId',
+                'providerRepositoryUrl',
+                'providerRepositoryOwner',
+                'providerRepositoryName',
+                'providerBranchUrl',
+                'providerBranch',
+                'providerCommitMessage',
+                'providerCommitHash',
+                'providerCommitUrl'
+            ]),
+            ...parsedQueries.values()
+        ]
+    });
+}
+
+async function loadActiveDeployment({
+    region,
+    project,
+    functionId,
+    deploymentId
+}: {
+    region: string;
+    project: string;
+    functionId: string;
+    deploymentId: string;
+}): Promise<Models.Deployment | null> {
+    try {
+        return await sdk.forProject(region, project).functions.getDeployment({
+            functionId,
+            deploymentId
+        });
+    } catch (error) {
+        return null;
+    }
+}
+
+async function loadRepository({
+    region,
+    project,
+    installationId,
+    providerRepositoryId
+}: {
+    region: string;
+    project: string;
+    installationId: string;
+    providerRepositoryId: string;
+}): Promise<Models.ProviderRepository | null> {
+    try {
+        return await sdk.forProject(region, project).vcs.getRepository({
+            installationId,
+            providerRepositoryId
+        });
+    } catch (error) {
+        return null;
+    }
+}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, Divider, Empty, Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Alert, Card, Divider, Empty, Layout, Tooltip } from '@appwrite.io/pink-svelte';
     import SiteCard from '../(components)/siteCard.svelte';
     import DomainsOverview from './domainsOverview.svelte';
     import DeploymentsOverview from './deploymentsOverview.svelte';
@@ -15,6 +15,7 @@
     import { base } from '$app/paths';
     import type { PageProps } from './$types';
     import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
+    import { Link } from '$lib/elements';
 
     let { data }: PageProps = $props();
 
@@ -31,6 +32,19 @@
 
 <Container>
     <Layout.Stack gap="xxxl">
+        {#if data.repository && !data.repository.authorized}
+            <Alert.Inline status="warning">
+                Integration with your repository is not authorized to perform auto-deployments.
+                Please add the repository to the installation settings
+                <Link
+                    variant="muted"
+                    external
+                    href={`https://github.com/settings/installations/${data.repository.providerInstallationId}`}>
+                    here
+                </Link>.
+            </Alert.Inline>
+        {/if}
+
         {#if data?.deployment && data.deployment.status === 'ready'}
             <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
                 {#snippet footer()}

src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts

@@ -58,25 +58,75 @@ export const load = async ({ params, depends, parent }) => {
         })
     ]);
 
-    let deployment: Models.Deployment | null = null;
-    if (deploymentList?.total && site.deploymentId) {
-        try {
-            deployment = await sdk
-                .forProject(params.region, params.project)
-                .sites.getDeployment({ siteId: params.site, deploymentId: site.deploymentId });
-        } catch (error) {
-            // active deployment with the requested ID could not be found
-            deployment = null;
-        }
-    }
+    const [deployment, repository] = await Promise.all([
+        deploymentList?.total && site.deploymentId
+            ? loadDeployment({
+                  region: params.region,
+                  project: params.project,
+                  siteId: params.site,
+                  deploymentId: site.deploymentId
+              })
+            : Promise.resolve(null),
+        site.installationId && site.providerRepositoryId
+            ? loadRepository({
+                  region: params.region,
+                  project: params.project,
+                  installationId: site.installationId,
+                  providerRepositoryId: site.providerRepositoryId
+              })
+            : Promise.resolve(null)
+    ]);
 
     return {
         site,
         deploymentList,
         deployment,
+        repository,
         proxyRuleList,
         prodReadyDeployments,
         hasProdReadyDeployments:
             prodReadyDeployments?.deployments?.filter((d) => d?.$id !== deployment?.$id).length > 0
     };
 };
+
+async function loadDeployment({
+    region,
+    project,
+    siteId,
+    deploymentId
+}: {
+    region: string;
+    project: string;
+    siteId: string;
+    deploymentId: string;
+}): Promise<Models.Deployment | null> {
+    try {
+        return await sdk.forProject(region, project).sites.getDeployment({
+            siteId,
+            deploymentId
+        });
+    } catch (error) {
+        return null;
+    }
+}
+
+async function loadRepository({
+    region,
+    project,
+    installationId,
+    providerRepositoryId
+}: {
+    region: string;
+    project: string;
+    installationId: string;
+    providerRepositoryId: string;
+}): Promise<Models.ProviderRepository | null> {
+    try {
+        return await sdk.forProject(region, project).vcs.getRepository({
+            installationId,
+            providerRepositoryId
+        });
+    } catch (error) {
+        return null;
+    }
+}