Merge branch 'feat-pink-v2' into fix-wizard-not-closing

CONTRIBUTING.md

@@ -108,9 +108,9 @@ pnpm run lint
 
 Diagnostic tool that checks for the following:
 
--   Unused CSS
--   Svelte A11y hints
--   TypeScript compiler errors
+- Unused CSS
+- Svelte A11y hints
+- TypeScript compiler errors
 
 ```bash
 pnpm run check
@@ -130,11 +130,11 @@ doc-548-submit-a-pull-request-section-to-contribution-guide
 
 When `TYPE` can be:
 
--   **feat** - is a new feature
--   **doc** - documentation only changes
--   **cicd** - changes related to CI/CD system
--   **fix** - a bug fix
--   **refactor** - code change that neither fixes a bug nor adds a feature
+- **feat** - is a new feature
+- **doc** - documentation only changes
+- **cicd** - changes related to CI/CD system
+- **fix** - a bug fix
+- **refactor** - code change that neither fixes a bug nor adds a feature
 
 **All PRs must include a commit message with a description of the changes made!**
 
@@ -175,22 +175,22 @@ $ git push origin [name_of_your_new_branch]
 
 Before committing always make sure to run all available tools to improve the codebase:
 
--   Formatter
-    -   `pnpm run format`
--   Tests
-    -   `pnpm test`
--   Diagnostics
-    -   `pnpm run check`
+- Formatter
+    - `pnpm run format`
+- Tests
+    - `pnpm test`
+- Diagnostics
+    - `pnpm run check`
 
 ### Performance
 
 Page load times are a key consideration for users of all browsers and device types.
 
 There are some general things we can do in front-end development:
 
--   Minimize HTTP requests
--   Minimize blocking – content should be readable before client-side processing
--   Lazy load "supplementary" content, especially images
+- Minimize HTTP requests
+- Minimize blocking – content should be readable before client-side processing
+- Lazy load "supplementary" content, especially images
 
 ### Don't Repeat Yourself (DRY)
 
@@ -202,12 +202,12 @@ If you stick to this principle, you will ensure that you will only ever need to
 
 Separate _structure_ from _presentation_ from _behavior_ to aid maintainability and understanding.
 
--   Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
--   Avoid writing inline CSS or Javascript in HTML
--   Avoid writing CSS or HTML in Javascript
--   Don't choose HTML elements to imply style
--   Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
--   Try to use templates when defining markup in Javascript
+- Keep CSS (presentation), JS (behavior) and HTML (structure) in the same respective Svelte component
+- Avoid writing inline CSS or Javascript in HTML
+- Avoid writing CSS or HTML in Javascript
+- Don't choose HTML elements to imply style
+- Where appropriate, use CSS or Svelte rather than Javascript for animations and transitions
+- Try to use templates when defining markup in Javascript
 
 ### Write code to be read
 

README.md

@@ -10,8 +10,8 @@
 
 Appwrite Console has been built with the following frameworks:
 
--   [Svelte](https://svelte.dev/)
--   [Svelte Kit](https://kit.svelte.dev/)
+- [Svelte](https://svelte.dev/)
+- [Svelte Kit](https://kit.svelte.dev/)
 
 ## Developer Experience
 

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

@@ -44,9 +44,9 @@
     title={`${selectedVar ? 'Update' : 'Create'} ${isGlobal ? 'global' : 'environment'} variable`}>
     <svelte:fragment slot="description">
         <span>
-            Set the environment variables or secret keys that will be passed to {isGlobal
-                ? `all ${product}s within your project`
-                : `your ${product}s`}.
+            Set the environment variables or secret keys that will be passed to {!isGlobal
+                ? `your ${product}`
+                : `all functions and sites within your project`}.
         </span>
     </svelte:fragment>
     <Layout.Stack>

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

@@ -12,8 +12,6 @@
     import { ActionMenu, Layout, Popover, Icon } from '@appwrite.io/pink-svelte';
 
     export let deployment: Models.Deployment;
-
-    $: console.log(deployment);
 </script>
 
 {#if deployment.type === 'vcs'}
@@ -40,13 +38,14 @@
                     {deployment.providerBranch}
                 </ActionMenu.Item.Anchor>
                 {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
+                    <!-- TODO: either the Popover or this Anchor needs to correctly manage the width -->
                     <ActionMenu.Item.Anchor
                         href={deployment.providerCommitUrl}
                         external
                         leadingIcon={IconGitCommit}>
                         <Trim alternativeTrim>
                             {deployment?.providerCommitHash?.substring(0, 7)}
-                            {deployment.providerCommitMessage}
+                            {deployment.providerCommitMessage.substring(0, 15)}...
                         </Trim>
                     </ActionMenu.Item.Anchor>
                 {/if}

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

@@ -79,21 +79,24 @@
                   lightCyan: [133, 219, 216]
               };
 
+    // TODO: Fix the buildLogs to return object, currently its a string.
     function formatLogs(logs: { timestamp: string; content: string }[] = []) {
         let output = '';
-        // TODO: type class needs an update
         const sum = logs.map((n) => `${n.timestamp} ${n.content}`).join('\n');
         const iterator = ansicolor.parse(sum);
-        for (const element of iterator) {
+        for (const element of iterator.spans) {
             if (element.color && !element.color.name) output += `<span>${element.text}</span>`;
-            else output += `<span style="${element.css}">${element.text}</span>`;
+            else output += `${element.text}`;
         }
         return output;
     }
 
     async function cancelDeployment() {
         try {
-            await sdk.forProject.sites.updateDeploymentBuild(deployment.resourceId, deployment.$id);
+            await sdk.forProject.sites.updateDeploymentBuild(
+                deployment.resourceId,
+                deployment.$id
+            );
             await invalidate(Dependencies.DEPLOYMENTS);
             addNotification({
                 type: 'success',
@@ -129,7 +132,9 @@
             </Layout.Stack>
         </div>
     </Layout.Stack>
-    <pre><code>{@html formatLogs(buildLogs)}</code></pre>
+    <pre>
+        <code>{formatLogs(buildLogs)}</code>
+    </pre>
     <!-- <div>
                         <Code lang="text" code={buildLogs.replace(/\\n/g, '\n')} />
                     </div> -->

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

@@ -8,8 +8,6 @@
     import Logs from '../../(components)/logs.svelte';
 
     export let data;
-
-    $: console.log(data.deployment);
 </script>
 
 <Wizard

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

@@ -158,6 +158,10 @@
         selectedInstallationId = $installation?.$id;
         repositoryName = name.split(' ').join('-').toLowerCase();
     }
+
+    $: if (connectBehaviour === 'later') {
+        selectedRepository = null;
+    }
 </script>
 
 <svelte:head>

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

@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { PaginationWithLimit } from '$lib/components/index.js';
-    import { Button, InputCheckbox, InputSearch } from '$lib/elements/forms';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import Link from '$lib/elements/link.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Container from '$lib/layout/container.svelte';
@@ -35,21 +35,17 @@
         <Button
             href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
             <Icon icon={IconPlus} size="s" />
-            Add Domain
+            Add domain
         </Button>
     </Layout.Stack>
     <Table.Root>
         <svelte:fragment slot="header">
-            <Table.Header.Selector />
             <Table.Header.Cell>Domain</Table.Header.Cell>
             <Table.Header.Cell>Updated</Table.Header.Cell>
             <Table.Header.Cell />
         </svelte:fragment>
         {#each data.domains.rules as domain}
             <Table.Row>
-                <Table.Cell>
-                    <InputCheckbox id={domain.domain} />
-                </Table.Cell>
                 <Table.Cell>
                     <Layout.Stack direction="row" alignItems="center" gap="xs">
                         <Link

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

@@ -21,12 +21,16 @@ export const load = async ({ params, depends, url, route, parent }) => {
         limit,
         query,
         search,
-        logs: await sdk.forProject.sites.listLogs(params.site, [
-            Query.limit(limit),
-            Query.offset(offset),
-            Query.orderDesc(''),
-            ...parsedQueries.values()
-        ], search),
-        site,
+        logs: await sdk.forProject.sites.listLogs(
+            params.site,
+            [
+                Query.limit(limit),
+                Query.offset(offset),
+                Query.orderDesc(''),
+                ...parsedQueries.values()
+            ],
+            search
+        ),
+        site
     };
 };

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

@@ -38,7 +38,7 @@
     icon="exclamation"
     state="warning">
     <p data-private>
-        Are you sure you want to delete this function and all associated deployments from your
+        Are you sure you want to delete this site and all associated deployments from your
         project?
     </p>
     <svelte:fragment slot="footer">

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

@@ -82,7 +82,7 @@
                 silentMode || undefined,
                 selectedDir || undefined
             );
-            await invalidate(Dependencies.FUNCTION);
+            await invalidate(Dependencies.SITE);
             addNotification({
                 type: 'success',
                 message: `${site.name} git configuration has been updated successfully`

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

@@ -191,12 +191,12 @@
     </Heading>
     {#if isGlobal}
         <p>
-            Set the environment variables or secret keys that will be passed to all functions within
-            your project.
+            Set the environment variables or secret keys that will be passed to all functions and
+            sites within your project.
         </p>
     {:else}
         <p>
-            Set the environment variables or secret keys that will be passed to your function.
+            Set the environment variables or secret keys that will be passed to your {product}.
             Global variables can be found in <Link
                 href={`${base}/project-${$project.$id}/settings#variables`}>
                 project settings</Link
@@ -375,6 +375,7 @@
 
 {#if showVariablesUpload}
     <UploadVariables
+        {product}
         {isGlobal}
         {sdkCreateVariable}
         {sdkUpdateVariable}

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

@@ -18,6 +18,7 @@
 
     let files: FileList;
     let error: string;
+    export let product: 'function' | 'site' = 'function';
 
     async function handleSubmit() {
         try {
@@ -62,19 +63,18 @@
             error = e.message;
         }
     }
+
+    const title = `Import new ${isGlobal ? 'global' : 'environment'} variables`;
 </script>
 
-<Modal headerDivider={false} bind:show onSubmit={handleSubmit} bind:error>
-    <svelte:fragment slot="title">
-        Import new {isGlobal ? 'global' : 'environment'} variables
-    </svelte:fragment>
+<Modal {title} bind:show bind:error headerDivider={false} onSubmit={handleSubmit}>
     <div class="u-flex u-flex-vertical u-gap-24 u-margin-block-start-8">
         <p>
-            Import new {isGlobal ? 'global' : 'environment'} variables from
+            {title} from
             <span class="inline-code">.env</span>
-            file that will be passed to {isGlobal
-                ? 'all functions within your project'
-                : 'your function'}.
+            file that will be passed to {!isGlobal
+                ? `your ${product}`
+                : 'all functions and sites within your project'}.
         </p>
 
         {#if variableList.total > 0}