feat: fix from QA v8

package.json

@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^10.0.0",
-        "@aw-labs/icons": "0.0.0-72",
-        "@aw-labs/ui": "0.0.0-72",
+        "@aw-labs/icons": "0.0.0-74",
+        "@aw-labs/ui": "0.0.0-74",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "pretty-bytes": "^6.0.0",

src/lib/components/card.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
     export let isTile = false;
     export let isDashed = false;
+    export let danger = false;
 </script>
 
-<article class="card" class:is-border-dashed={isDashed} class:common-section={!isTile}>
+<article
+    class="card"
+    class:is-danger={danger}
+    class:is-border-dashed={isDashed}
+    class:common-section={!isTile}>
     <slot />
 </article>

src/lib/components/cardGrid.svelte

@@ -1,8 +1,10 @@
 <script>
     import { Card } from './';
+
+    export let danger = false;
 </script>
 
-<Card>
+<Card {danger}>
     <div class="common-section grid-1-2">
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />

src/lib/components/index.ts

@@ -42,3 +42,4 @@ export { default as Tab } from './tab.svelte';
 export { default as EventModal } from './eventModal.svelte';
 export { default as Status } from './status.svelte';
 export { default as Heading } from './heading.svelte';
+export { default as Output } from './output.svelte';

src/lib/components/output.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Copy from './copy.svelte';
+
+    export let value: string;
+</script>
+
+<Copy {value}>
+    <div class="interactive-text-output is-textarea">
+        <span class="text u-line-height-1-5 u-break-word"><slot /></span>
+
+        <div class="u-flex u-cross-child-start u-gap-8">
+            <button class="interactive-text-output-button" aria-label="copy text">
+                <span class="icon-duplicate" aria-hidden="true" />
+            </button>
+        </div>
+    </div>
+</Copy>

src/lib/layout/logs.svelte

@@ -2,7 +2,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { log } from '$lib/stores/logs';
-    import { Status, Tab, Tabs } from '../components';
+    import { Output, Status, Tab, Tabs } from '../components';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { app } from '$lib/stores/app';
@@ -68,7 +68,12 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <h2 class="body-text-2">Deployment ID: {$log.data.$id}</h2>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <h2 class="body-text-2">Deployment ID:</h2>
+                            <Output value={$log.data.$id}>
+                                {$log.data.$id}
+                            </Output>
+                        </div>
                         <time class="u-block"
                             >Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
                         <div>Size: {size.value} {size.unit}</div>
@@ -131,7 +136,12 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <h2 class="body-text-2">Execution ID: {$log.data.$id}</h2>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <h2 class="body-text-2">Execution ID:</h2>
+                            <Output value={$log.data.$id}>
+                                {$log.data.$id}
+                            </Output>
+                        </div>
                         <time class="u-block">
                             Created at: {toLocaleDateTime($log.data.$createdAt)}</time>
                     </div>

src/routes/console/account/+page.svelte

@@ -155,7 +155,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Delete Account</Heading>
         </div>

src/routes/console/account/sessions/[[page]]/+page.svelte

@@ -55,7 +55,7 @@
                 {#each data.sessions.sessions as session}
                     <TableRow>
                         <TableCell title="Client">
-                            <div class="u-flex u-gap-12">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <div class="u-flex u-cross-center u-gap-12">
                                     {#if session.clientName}
                                         <div class="avatar is-small">

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

@@ -59,7 +59,7 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
+        <CardGrid danger>
             <div>
                 <Heading tag="h6" size="7">Delete Organization</Heading>
             </div>

src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte

@@ -77,7 +77,7 @@
         </CardGrid>
     </Form>
 
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>

src/routes/console/project-[project]/auth/user-[user]/+page.svelte

@@ -444,7 +444,7 @@
         </CardGrid>
     </Form>
 
-    <CardGrid>
+    <CardGrid danger>
         <div>
             <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>

src/routes/console/project-[project]/auth/user-[user]/sessions/[[page]]/+page.svelte

@@ -45,7 +45,7 @@
                 {#each data.sessions.sessions as session}
                     <TableRow>
                         <TableCell title="Client">
-                            <div class="u-flex u-gap-12">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <div class="image-item">
                                     <img
                                         height="20"

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte

@@ -83,7 +83,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid>
+    <CardGrid danger>
         <Heading tag="h6" size="7">Delete Document</Heading>
         <p>
             The document will be permanently deleted, including all the data within it. This action

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte

@@ -211,7 +211,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <Heading tag="h6" size="7">Delete Collection</Heading>
             <p>
                 The collection will be permanently deleted, including all the documents within it.

src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte

@@ -85,7 +85,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid>
+        <CardGrid danger>
             <div>
                 <Heading tag="h6" size="7">Danger Zone</Heading>
             </div>

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

@@ -37,6 +37,7 @@
     import { browser } from '$app/environment';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { page } from '$app/stores';
+    import Output from '$lib/components/output.svelte';
 
     export let data: PageData;
 
@@ -98,8 +99,17 @@
                             alt="technology" />
                     </div>
                     <div>
-                        <p><b>Function ID: {$func.$id} </b></p>
-                        <p>Deployment ID: {$func.deployment}</p>
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <p><b>Function ID: </b></p>
+                            <Output value={$func.$id}><b>{$func.$id}</b></Output>
+                        </div>
+
+                        <div class="u-flex u-gap-12 u-cross-center">
+                            <p>Deployment ID:</p>
+                            <Output value={$func.deployment}>
+                                {$func.deployment}
+                            </Output>
+                        </div>
                     </div>
                 </div>
                 <svelte:fragment slot="aside">

src/routes/console/project-[project]/functions/function-[function]/create.svelte

@@ -2,12 +2,13 @@
     import { InputChoice, Button, InputText, InputFile, FormList } from '$lib/elements/forms';
     import { Modal, Collapsible, CollapsibleItem, Tabs, Tab, Code } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
     import Github from '$lib/images/github-illustration.svg';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import { func } from './store';
 
     export let showCreate = false;
 
@@ -20,11 +21,70 @@
     let entrypoint: string;
     let active: boolean;
     let files: FileList;
+    let lang = 'js';
+    let codeSnippets = {};
 
     const functionId = $page.params.function;
     const dispatch = createEventDispatcher();
 
-    const create = async () => {
+    onMount(() => {
+        lang = setLanguage($func.runtime);
+        codeSnippets = setCodeSnippets(lang);
+    });
+
+    function setLanguage(runtime: string) {
+        if (runtime.includes('node') || runtime.includes('deno')) {
+            return 'js';
+        } else if (runtime.includes('php')) {
+            return 'php';
+        } else if (runtime.includes('python')) {
+            return 'py';
+        } else if (runtime.includes('dart')) {
+            return 'dart';
+        } else if (runtime.includes('dotnet')) {
+            return 'cs';
+        } else if (runtime.includes('ruby')) {
+            return 'rb';
+        } else if (runtime.includes('swift')) {
+            return 'swift';
+        } else if (runtime.includes('kotlin')) {
+            return 'kt';
+        } else if (runtime.includes('java')) {
+            return 'java';
+        }
+    }
+
+    function setCodeSnippets(lang: string) {
+        return {
+            Unix: {
+                code: `appwrite functions createDeployment \\ 
+    --functionId=${functionId} \\ 
+    --entrypoint='index.${lang}' \\ 
+    --code="." \\ 
+    --activate=true`,
+                language: 'bash'
+            },
+
+            CMD: {
+                code: `appwrite functions createDeployment ^
+    --functionId=${functionId} ^
+    --entrypoint='index.${lang}' ^
+    --code="." ^
+    --activate=true`,
+                language: 'CMD'
+            },
+            PowerShell: {
+                code: `appwrite functions createDeployment ,
+    --functionId=${functionId} ,
+    --entrypoint='index.${lang}' ,
+    --code="." ,
+    --activate=true`,
+                language: 'PowerShell'
+            }
+        };
+    }
+
+    async function create() {
         try {
             await sdkForProject.functions.createDeployment(
                 functionId,
@@ -42,35 +102,7 @@
                 message: error.message
             });
         }
-    };
-
-    const codeSnippets = {
-        Unix: {
-            code: `appwrite functions createDeployment \\ 
-    --functionId=${functionId} \\ 
-    --entrypoint='index.js' \\ 
-    --code="." \\ 
-    --activate=true`,
-            language: 'bash'
-        },
-
-        CMD: {
-            code: `appwrite functions createDeployment ^
-    --functionId=${functionId} ^
-    --entrypoint='index.js' ^
-    --code="." ^
-    --activate=true`,
-            language: 'CMD'
-        },
-        PowerShell: {
-            code: `appwrite functions createDeployment ,
-    --functionId=${functionId} ,
-    --entrypoint='index.js' ,
-    --code="." ,
-    --activate=true`,
-            language: 'PowerShell'
-        }
-    };
+    }
 </script>
 
 <Modal size="big" bind:show={showCreate} on:submit={create}>
@@ -128,7 +160,7 @@
         <FormList>
             <InputText
                 label="Entrypoint"
-                placeholder="main.py"
+                placeholder={`main.${lang}`}
                 id="entrypoint"
                 bind:value={entrypoint}
                 required />