From f0a977ef7d188f4b96c41fa1e483b25822a353ec Mon Sep 17 00:00:00 2001
From: Matej Baco <matejbaco2000@gmail.com>
Date: Tue, 14 Mar 2023 11:13:56 +0000
Subject: [PATCH] Improve UI with design feedback, add logs, fix realtime rules

---
 package-lock.json                             | 14 ++--
 package.json                                  |  2 +-
 src/lib/components/code.svelte                | 16 ++++-
 .../components/domains/domainContainer.svelte | 24 ++++++-
 src/lib/components/domains/logs.svelte        | 19 +++++
 .../components/domains/wizard/step4.svelte    | 31 ++++++---
 .../environmentVariables/snippet.svelte       | 69 ++++++++++++++-----
 .../environmentVariables/variables.svelte     | 29 +++-----
 .../functions/+layout.svelte                  |  2 +
 .../function-[function]/settings/+page.svelte |  2 -
 .../project-[project]/settings/header.svelte  |  4 +-
 11 files changed, 153 insertions(+), 59 deletions(-)
 create mode 100644 src/lib/components/domains/logs.svelte

diff --git a/package-lock.json b/package-lock.json
index edf974b73..ad6057f69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
             "version": "0.0.1",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.9",
+                "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.10",
                 "@aw-labs/icons": "0.0.0-77",
                 "@aw-labs/ui": "0.0.0-77",
                 "@popperjs/core": "^2.11.6",
@@ -146,9 +146,9 @@
         },
         "node_modules/@aw-labs/appwrite-console": {
             "name": "matej-appwrite-console",
-            "version": "7.1.9",
-            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.9.tgz",
-            "integrity": "sha512-3sYGFRfUZK0f6caBHCVTw4F6thKlq1/HgqLg5bOfB+gIz5u8ADRPhjPL5CukdN35vLyJkWvn92rOcCr65tY1tA==",
+            "version": "7.1.10",
+            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.10.tgz",
+            "integrity": "sha512-GlNTTkJ5iHpUYgyJ3rexeGmCdD2WQ0zwSw6yFA2lf4aLVh+VuZQdoEEmW0K1dpTnBtg8EGkqhMCIIZTRV4mgcw==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
@@ -7741,9 +7741,9 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "@aw-labs/appwrite-console": {
-            "version": "npm:matej-appwrite-console@7.1.9",
-            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.9.tgz",
-            "integrity": "sha512-3sYGFRfUZK0f6caBHCVTw4F6thKlq1/HgqLg5bOfB+gIz5u8ADRPhjPL5CukdN35vLyJkWvn92rOcCr65tY1tA==",
+            "version": "npm:matej-appwrite-console@7.1.10",
+            "resolved": "https://registry.npmjs.org/matej-appwrite-console/-/matej-appwrite-console-7.1.10.tgz",
+            "integrity": "sha512-GlNTTkJ5iHpUYgyJ3rexeGmCdD2WQ0zwSw6yFA2lf4aLVh+VuZQdoEEmW0K1dpTnBtg8EGkqhMCIIZTRV4mgcw==",
             "requires": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 58cd3362b..39b8a04f9 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
-        "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.9",
+        "@aw-labs/appwrite-console": "npm:matej-appwrite-console@7.1.10",
         "@aw-labs/icons": "0.0.0-77",
         "@aw-labs/ui": "0.0.0-77",
         "@popperjs/core": "^2.11.6",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 24debe415..f5b23ab26 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
     import { Pill } from '$lib/elements';
     import Prism from 'prismjs';
+    import 'prismjs/components/prism-ruby';
+    import 'prismjs/components/prism-php';
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
+    import 'prismjs/components/prism-python';
     import 'prismjs/components/prism-json';
     import 'prismjs/components/prism-bash';
     import 'prismjs/components/prism-yaml';
@@ -16,7 +19,18 @@
     export let label: string = null;
     export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
     export let code: string;
-    export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
+    export let language:
+        | 'js'
+        | 'html'
+        | 'dart'
+        | 'ruby'
+        | 'python'
+        | 'php'
+        | 'kotlin'
+        | 'json'
+        | 'sh'
+        | 'yml'
+        | 'swift';
     export let withLineNumbers = false;
     export let withCopy = false;
     export let noMargin = false;
diff --git a/src/lib/components/domains/domainContainer.svelte b/src/lib/components/domains/domainContainer.svelte
index c85e9d8fc..68a8b78f3 100644
--- a/src/lib/components/domains/domainContainer.svelte
+++ b/src/lib/components/domains/domainContainer.svelte
@@ -22,12 +22,14 @@
     import Delete from './delete.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { ruleResource } from './wizard/store';
+    import Logs from './logs.svelte';
 
     export let rules: Models.ProxyRuleList;
     export let resourceType: string;
     export let resourceId: string;
 
     let showDelete = false;
+    let showLogs = false;
     let selectedRule: Models.ProxyRule;
     let isVerifying = {};
 
@@ -75,9 +77,9 @@
     {#if rules.total}
         <TableScroll>
             <TableHeader>
-                <TableCellHead width={200}>Domain Name</TableCellHead>
-                <TableCellHead width={50}>Status</TableCellHead>
-                <TableCellHead width={250} />
+                <TableCellHead width={300}>Domain Name</TableCellHead>
+                <TableCellHead width={100}>Status</TableCellHead>
+                <TableCellHead width={150} />
                 <TableCellHead width={40}>Actions</TableCellHead>
             </TableHeader>
             <TableBody>
@@ -123,6 +125,20 @@
                                         <span class="icon-key" aria-hidden="true" />
                                     </button>
                                 {/if}
+                                {#if rule.status === 'unverified' || rule.status === 'verified'}
+                                    <!-- TODO: remove inline styles -->
+                                    <button
+                                        class="button is-text is-only-icon u-padding-inline-0"
+                                        style="--p-button-size: var(--button-size, 2.0rem);"
+                                        aria-label="Verify item"
+                                        on:click={() => {
+                                            showLogs = true;
+                                            selectedRule = rule;
+                                        }}>
+                                        <span class="icon-terminal" aria-hidden="true" />
+                                    </button>
+                                {/if}
+
                                 <!-- TODO: remove inline styles -->
                                 <button
                                     class="button tooltip is-text is-only-icon u-padding-inline-0"
@@ -153,3 +169,5 @@
 </Container>
 
 <Delete bind:showDelete bind:selectedRule />
+
+<Logs bind:showLogs logs={selectedRule?.logs ? selectedRule?.logs : 'No logs recorded.'} />
diff --git a/src/lib/components/domains/logs.svelte b/src/lib/components/domains/logs.svelte
new file mode 100644
index 000000000..b3c7a682b
--- /dev/null
+++ b/src/lib/components/domains/logs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import Code from '$lib/components/code.svelte';
+    import { Button } from '$lib/elements/forms';
+
+    export let showLogs = false;
+    export let logs: string;
+</script>
+
+<Modal bind:show={showLogs}>
+    <svelte:fragment slot="header">Certificate Logs</svelte:fragment>
+    <p>Logs from the process of certificate generation with LetsEncrypt and Certbot.</p>
+
+    <Code withLineNumbers withCopy language="sh" code={logs} />
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showLogs = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/lib/components/domains/wizard/step4.svelte b/src/lib/components/domains/wizard/step4.svelte
index 516a43e2f..74da9cf26 100644
--- a/src/lib/components/domains/wizard/step4.svelte
+++ b/src/lib/components/domains/wizard/step4.svelte
@@ -1,20 +1,33 @@
 <script lang="ts">
     import { WizardStep } from '$lib/layout';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { rule } from './store';
+    import { sdkForConsole, sdkForProject } from '$lib/stores/sdk';
     import CnameTable from './cnameTable.svelte';
     import VerificationBox from './verificationBox.svelte';
+    import { onDestroy, onMount } from 'svelte';
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { rule } from './store';
 
     let status = 'verifying';
-    const checkCertificate = () => {
-        setTimeout(async () => {
-            const result = await sdkForProject.proxy.getRule($rule.$id);
-            status = result.status;
 
-            if (result.status === 'verifying') {
-                checkCertificate();
+    let unsubscribe: { (): void };
+
+    onMount(() => {
+        unsubscribe = sdkForConsole.client.subscribe<Models.ProxyRule>('console', (response) => {
+            if (response.events.includes(`rules.${$rule.$id}`)) {
+                status = response.payload.status;
             }
-        }, 2000);
+        });
+    });
+
+    onDestroy(() => {
+        if (unsubscribe) {
+            unsubscribe();
+        }
+    });
+
+    const checkCertificate = async () => {
+        const result = await sdkForProject.proxy.getRule($rule.$id);
+        status = result.status;
     };
     checkCertificate();
 </script>
diff --git a/src/lib/components/environmentVariables/snippet.svelte b/src/lib/components/environmentVariables/snippet.svelte
index e951c9eb6..d6ddbc971 100644
--- a/src/lib/components/environmentVariables/snippet.svelte
+++ b/src/lib/components/environmentVariables/snippet.svelte
@@ -8,46 +8,83 @@
     export let showSnippet = false;
     export let variableKey: string;
 
-    // TODO: @Meldiron Finish or delete this component
+    // TODO: @Meldiron finish this component
 
     enum Language {
-        NodeJS,
+        NodeJs,
+        PHP,
         Python,
-        Dart,
         Ruby,
-        Java
+        Deno,
+        Dart,
+        Kotlin,
+        Swift
     }
-    let language: Language = Language.NodeJS;
+    let language: Language = Language.NodeJs;
 </script>
 
 <Modal bind:show={showSnippet} size="big">
     <svelte:fragment slot="header">Code Snippet</svelte:fragment>
     <p>Snippet of a code showing how to read environment variables in Appwrite Functions.</p>
     <Tabs>
-        <Tab on:click={() => (language = Language.NodeJS)} selected={language === Language.NodeJS}>
-            Node.JS
+        <Tab on:click={() => (language = Language.NodeJs)} selected={language === Language.NodeJs}>
+            Node.js
+        </Tab>
+        <Tab on:click={() => (language = Language.PHP)} selected={language === Language.PHP}>
+            PHP
         </Tab>
         <Tab on:click={() => (language = Language.Python)} selected={language === Language.Python}>
             Python
         </Tab>
-        <Tab on:click={() => (language = Language.Dart)} selected={language === Language.Dart}>
-            Dart
-        </Tab>
         <Tab on:click={() => (language = Language.Ruby)} selected={language === Language.Ruby}>
             Ruby
         </Tab>
-        <Tab on:click={() => (language = Language.Java)} selected={language === Language.Java}>
-            Java
+        <Tab on:click={() => (language = Language.Deno)} selected={language === Language.Deno}>
+            Deno
+        </Tab>
+        <Tab on:click={() => (language = Language.Dart)} selected={language === Language.Dart}>
+            Dart
+        </Tab>
+        <Tab on:click={() => (language = Language.Kotlin)} selected={language === Language.Kotlin}>
+            Kotlin
+        </Tab>
+        <Tab on:click={() => (language = Language.Swift)} selected={language === Language.Swift}>
+            Swift
         </Tab>
     </Tabs>
 
-    {#if language === Language.NodeJS}
+    {#if language === Language.NodeJs}
+        <Code withLineNumbers withCopy language="js" code={`process.env['${variableKey}']`} />
+    {:else if language === Language.PHP}
+        <Code withLineNumbers withCopy language="php" code={`getenv('${variableKey}')`} />
+    {:else if language === Language.Python}
         <Code
             withLineNumbers
             withCopy
-            language="js"
-            label="JavaScript"
-            code={`process.env['${variableKey}']`} />
+            language="python"
+            code={`os.environ.get('${variableKey}')`} />
+    {:else if language === Language.Ruby}
+        <Code withLineNumbers withCopy language="ruby" code={`ENV['${variableKey}']`} />
+    {:else if language === Language.Deno}
+        <Code withLineNumbers withCopy language="js" code={`Deno.env.get("${variableKey}")`} />
+    {:else if language === Language.Dart}
+        <Code
+            withLineNumbers
+            withCopy
+            language="dart"
+            code={`Platform.environment['${variableKey}']`} />
+    {:else if language === Language.Kotlin}
+        <Code
+            withLineNumbers
+            withCopy
+            language="kotlin"
+            code={`System.getenv().getOrDefault("${variableKey}")`} />
+    {:else if language === Language.Swift}
+        <Code
+            withLineNumbers
+            withCopy
+            language="swift"
+            code={`ProcessInfo.processInfo.environment["${variableKey}"]`} />
     {/if}
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/environmentVariables/variables.svelte b/src/lib/components/environmentVariables/variables.svelte
index bcc3ba9b1..b0d0d3328 100644
--- a/src/lib/components/environmentVariables/variables.svelte
+++ b/src/lib/components/environmentVariables/variables.svelte
@@ -209,21 +209,6 @@
                                             <span class="icon-duplicate" aria-hidden="true" />
                                         </button>
                                     </Copy>
-
-                                    <button
-                                        type="button"
-                                        on:click={() => {
-                                            snippetKey = variable.key;
-                                            showSnippet = true;
-                                        }}
-                                        use:tooltip={{
-                                            content: 'Code snippets',
-                                            hideOnClick: false
-                                        }}
-                                        class="interactive-text-output-button"
-                                        aria-label="copy code">
-                                        <span class="icon-code" aria-hidden="true" />
-                                    </button>
                                 </div>
                             </div>
                         </td>
@@ -240,6 +225,14 @@
                                     <span class="icon-dots-horizontal" aria-hidden="true" />
                                 </button>
                                 <svelte:fragment slot="list">
+                                    <DropListItem
+                                        icon="code"
+                                        on:click={() => {
+                                            snippetKey = variable.key;
+                                            showSnippet = true;
+                                        }}>
+                                        Code snippets
+                                    </DropListItem>
                                     <DropListItem
                                         icon="pencil"
                                         on:click={() => {
@@ -281,7 +274,7 @@
                 showVariablesModal = true;
             }}>
             <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create environment variables</span>
+            <span class="text">Create environment variable</span>
         </button>
     </div>
 {:else}
@@ -291,7 +284,7 @@
 
 {#if !isShared && !isWizard}
     <Alert type="info">
-        Shared variables from <a href={sharedVariablesUrl} class="link">project settings</a> are also
+        Global variables from <a href={sharedVariablesUrl} class="link">project settings</a> are also
         available. When there is name conflict, function variable is used.
     </Alert>
 {/if}
@@ -307,7 +300,7 @@
 
 {#if !isShared}
     <Modal bind:show={showPromote} on:submit={() => handlePromote(promoteVariable)} warning>
-        <svelte:fragment slot="header">Promote To Shared Variable</svelte:fragment>
+        <svelte:fragment slot="header">Promote To Global Variable</svelte:fragment>
         <p>
             Are you sure you want to promote <code>{promoteVariable.key}</code>? This will move
             variable into project settings and make it visible to all services.
diff --git a/src/routes/console/project-[project]/functions/+layout.svelte b/src/routes/console/project-[project]/functions/+layout.svelte
index 8ccdfb692..68c237bf3 100644
--- a/src/routes/console/project-[project]/functions/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/+layout.svelte
@@ -10,6 +10,8 @@
         unsubscribe = sdkForConsole.client.subscribe('console', (response) => {
             if (response.events.includes('functions.*.deployments.*')) {
                 invalidate(Dependencies.DEPLOYMENTS);
+            } else if (response.events.includes('rules.*')) {
+                invalidate(Dependencies.RULES);
             }
         });
     });
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 141d0c09e..477eaaa9f 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -36,8 +36,6 @@
     let arePermsDisabled = true;
     let logging: boolean = null;
 
-    // TODO: @Meldiron implement "Promote"
-
     const eventSet: Writable<Set<string>> = writable(new Set());
     let showEvents = false;
     let areEventsDisabled = true;
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
index 0b494a3cd..b4726b8f8 100644
--- a/src/routes/console/project-[project]/settings/header.svelte
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -24,8 +24,8 @@
         },
         {
             href: `${path}/variables`,
-            title: 'Shared Variables',
-            event: 'sharedVariables'
+            title: 'Global Variables',
+            event: 'globalVariables'
         }
     ];
 </script>