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

package.json

@@ -90,6 +90,7 @@
     "overrides": {
         "vite": "npm:rolldown-vite@latest",
         "minimatch": "10.2.3",
-        "immutable": "^5.1.5"
+        "immutable": "^5.1.5",
+        "flatted": "^3.4.0"
     }
 }

src/lib/components/domains/recordTable.svelte

@@ -140,16 +140,14 @@
         {#if variant === 'cname' && !subdomain}
             {#if isCloud}
                 <Alert.Inline>
-                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain,
-                    CNAME record is only supported by certain providers. If yours doesn't, please verify
-                    using
+                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain, CNAME
+                    record is only supported by certain providers. If yours doesn't, please verify using
                     <Link variant="muted" on:click={onNavigateToNameservers}>nameservers</Link> instead.
                 </Alert.Inline>
             {:else if aTabVisible || aaaaTabVisible}
                 <Alert.Inline>
-                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain,
-                    CNAME record is only supported by certain providers. If yours doesn't, please verify
-                    using
+                    Since <Badge variant="secondary" size="s" content={domain} /> is an apex domain, CNAME
+                    record is only supported by certain providers. If yours doesn't, please verify using
                     {#if aTabVisible}
                         <Link variant="muted" on:click={onNavigateToA}>A record</Link>
                         {#if aaaaTabVisible}

src/lib/components/git/deploymentSource.svelte

@@ -1,35 +1,96 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { Link } from '$lib/elements';
-    import type { Models } from '@appwrite.io/console';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models } from '@appwrite.io/console';
     import {
         IconCode,
+        IconExclamation,
         IconGitBranch,
         IconGitCommit,
         IconGithub,
         IconTerminal
     } from '@appwrite.io/pink-icons-svelte';
-    import { ActionMenu, Layout, Popover, Icon } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Layout,
+        Popover,
+        Icon,
+        Skeleton,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
 
     let {
-        deployment
+        deployment,
+        resource,
+        region,
+        project
     }: {
         deployment: Models.Deployment;
+        resource?: Models.Site | Models.Function;
+        region?: string;
+        project?: string;
     } = $props();
+
+    let repository = $state<Models.ProviderRepository | null>(null);
+
+    async function loadRepository() {
+        if (!resource?.installationId || !resource?.providerRepositoryId || !region || !project) {
+            return;
+        }
+
+        try {
+            repository = await sdk.forProject(region, project).vcs.getRepository({
+                installationId: resource.installationId,
+                providerRepositoryId: resource.providerRepositoryId
+            });
+        } catch (err) {
+            console.warn(err);
+        }
+    }
 </script>
 
 {#if deployment.type === 'vcs'}
     <Popover padding="none" let:toggle>
         <div>
-            <Link
-                on:click={(e) => {
-                    e.preventDefault();
-                    toggle(e);
-                }}>
+            {#await loadRepository()}
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
+                    <Skeleton variant="line" width={100} height={20} />
+                </Layout.Stack>
+            {:then}
                 <Layout.Stack direction="row" gap="xs" alignItems="center">
-                    <Icon icon={IconGithub} size="s" /> GitHub
+                    <Link
+                        on:click={(e) => {
+                            e.preventDefault();
+                            toggle(e);
+                        }}>
+                        <Layout.Stack direction="row" gap="xs" alignItems="center">
+                            <Icon icon={IconGithub} size="s" /> GitHub
+                        </Layout.Stack>
+                    </Link>
+                    {#if repository?.authorized === false}
+                        <Popover let:toggle placement="bottom-start">
+                            <Button extraCompact on:click={toggle}>
+                                <Icon icon={IconExclamation} size="s" color="--bgcolor-warning" />
+                            </Button>
+                            <svelte:fragment slot="tooltip">
+                                <Typography.Text
+                                    variant="m-400"
+                                    color="--fgcolor-neutral-secondary">
+                                    Integration not authorized for auto deployments.<br />
+                                    To enable, add the repository to the installation settings on <Link
+                                        variant="muted"
+                                        external
+                                        href={`https://github.com/settings/installations/${repository.providerInstallationId}`}>
+                                        GitHub
+                                    </Link>.
+                                </Typography.Text>
+                            </svelte:fragment>
+                        </Popover>
+                    {/if}
                 </Layout.Stack>
-            </Link>
+            {/await}
         </div>
         <svelte:fragment slot="tooltip">
             <ActionMenu.Root>

src/routes/(console)/organization-[organization]/billing/budgetCap.svelte

@@ -49,8 +49,8 @@
 <Form onSubmit={updateBudget}>
     <CardGrid>
         <svelte:fragment slot="title">Budget cap</svelte:fragment>
-        Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of
-        each billing cycle.
+        Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of each
+        billing cycle.
         <svelte:fragment slot="aside">
             {#if !currentPlan.budgeting}
                 <Alert.Inline status="info" title="Budget caps are a Pro plan feature">

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

@@ -81,8 +81,8 @@
 
         <CardGrid>
             <svelte:fragment slot="title">Delete organization</svelte:fragment>
-            The organization will be permanently deleted, including all projects and data associated
-            with this organization. This action is irreversible.
+            The organization will be permanently deleted, including all projects and data associated with
+            this organization. This action is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="image">

src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte

@@ -16,8 +16,8 @@
 
 <CardGrid>
     <svelte:fragment slot="title">DPA</svelte:fragment>
-    After downloading, have the DPA signed by your organization's compliance authority, such as your
-    CEO or Compliance Manager, and submit it to
+    After downloading, have the DPA signed by your organization's compliance authority, such as your CEO
+    or Compliance Manager, and submit it to
     <a class="link" href="mailto:privacy@appwrite.io">privacy@appwrite.io</a>.
     <svelte:fragment slot="aside">
         <Box>

src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte

@@ -44,8 +44,8 @@
 
 <Modal {error} onSubmit={update} bind:show on:close title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <Link.Anchor
             class="link"
             href={oAuthProvider?.docs}

src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte

@@ -45,8 +45,8 @@
 
 <Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
     <svelte:fragment slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <Link.Anchor href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
             >visit the docs.</Link.Anchor>
     </svelte:fragment>

src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte

@@ -46,8 +46,8 @@
 
 <Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <Link.Anchor
             class="link"
             href={oAuthProvider?.docs}

src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte

@@ -44,8 +44,8 @@
 
 <Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <Link.Anchor href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
             >visit the docs.</Link.Anchor>
     </p>

src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte

@@ -43,8 +43,8 @@
     <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
 
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
             >visit the docs.</a>
     </p>

src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte

@@ -41,8 +41,8 @@
 
 <Modal {error} bind:show onSubmit={update} on:close title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <Link.Anchor
             class="link"
             href={oAuthProvider?.docs}

src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte

@@ -45,8 +45,8 @@
 
 <Modal {error} onSubmit={update} bind:show on:close title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
             visit the docs.
         </a>

src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte

@@ -67,8 +67,8 @@
 
 <Modal {error} onSubmit={update} title="{provider.name} OAuth2 settings" bind:show on:close>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
             >visit the docs.</a>
     </p>

src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte

@@ -55,8 +55,8 @@
     on:close
     title={`${provider.name} OAuth2 settings`}>
     <p slot="description">
-        To use {provider.name} authentication in your application, first fill in this form. For more
-        info you can
+        To use {provider.name} authentication in your application, first fill in this form. For more info
+        you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
             >visit the docs.</a>
     </p>

src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte

@@ -43,8 +43,8 @@
                         More info
                     </Tag>
                     <p slot="tooltip">
-                        User identities are the user's connected OAuth accounts. <br /> The user can
-                        sign in using these identities.
+                        User identities are the user's connected OAuth accounts. <br /> The user can sign
+                        in using these identities.
                     </p>
                 </Popover>
             </div>

src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte

@@ -25,8 +25,8 @@
                     </Tag>
                     <p slot="tooltip">
                         User targets include emails, phone numbers, and devices with your app
-                        installed.<br /> These targets can subscribe to a topic and receive messages
-                        published to it.
+                        installed.<br /> These targets can subscribe to a topic and receive messages published
+                        to it.
                     </p>
                 </Popover>
             </div>

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(components)/deploymentCard.svelte

@@ -187,7 +187,11 @@
                     {@render titleSnippet('Source')}
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
                         <div>
-                            <DeploymentSource {deployment} />
+                            <DeploymentSource
+                                {deployment}
+                                resource={$func}
+                                region={page.params.region}
+                                project={page.params.project} />
                         </div>
                     </Typography.Text>
                 </Layout.Stack>

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

@@ -2,7 +2,7 @@
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { goto, invalidate } from '$app/navigation';
-    import { base, resolve } from '$app/paths';
+    import { resolve } from '$app/paths';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError } from '$lib/actions/analytics';
@@ -75,12 +75,12 @@
     }
 </script>
 
-<Modal title="Project paused" bind:open={show} size="big" dismissible={false}>
+<Modal title="Project paused" bind:open={show} size="l" dismissible={false}>
     <Layout.Stack gap="m">
         <Typography.Text>This project has been paused due to inactivity.</Typography.Text>
         <Typography.Text>
-            Your data is safe and will remain intact. Upgrade your plan to keep your projects active,
-            or restore the project to continue using it.
+            Your data is safe and will remain intact. Upgrade your plan to keep your projects
+            active, or restore the project to continue using it.
         </Typography.Text>
 
         {#if error}
@@ -103,9 +103,7 @@
                         Restore project
                     {/if}
                 </Button>
-                <Button disabled={loading} on:click={handleUpgrade}>
-                    Upgrade
-                </Button>
+                <Button disabled={loading} on:click={handleUpgrade}>Upgrade</Button>
             </Layout.Stack>
         </Layout.Stack>
     </svelte:fragment>

src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte

@@ -29,12 +29,14 @@
     import type { Snippet } from 'svelte';
 
     let {
+        site,
         deployment,
         proxyRuleList,
         hideQRCode = false,
         variant = 'primary',
         footer
     }: {
+        site?: Models.Site;
         deployment: Models.Deployment;
         proxyRuleList: Models.ProxyRuleList;
         hideQRCode?: boolean;
@@ -208,7 +210,11 @@
                         Source
                     </Typography.Text>
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                        <DeploymentSource {deployment} />
+                        <DeploymentSource
+                            {deployment}
+                            resource={site}
+                            region={page.params.region}
+                            project={page.params.project} />
                     </Typography.Text>
                 </Layout.Stack>
             </Layout.Stack>

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

@@ -32,7 +32,10 @@
 <Container>
     <Layout.Stack gap="xxxl">
         {#if data?.deployment && data.deployment.status === 'ready'}
-            <SiteCard deployment={data.deployment} proxyRuleList={data.proxyRuleList}>
+            <SiteCard
+                site={data.site}
+                deployment={data.deployment}
+                proxyRuleList={data.proxyRuleList}>
                 {#snippet footer()}
                     {#if data.proxyRuleList.total}
                         <Button

src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateBuildSettings.svelte

@@ -184,8 +184,8 @@
 <Form onSubmit={update}>
     <CardGrid>
         <svelte:fragment slot="title">Build settings</svelte:fragment>
-        Default build settings are configured based on your framework, ensuring optimal performance.
-        Adjust the settings here if needed.
+        Default build settings are configured based on your framework, ensuring optimal performance. Adjust
+        the settings here if needed.
         <svelte:fragment slot="aside">
             {@const adapterData = adapterDataList.find(
                 (adapterData) => adapterData.framework === frameworkKey.toLowerCase()