fix: design review, backend breaking changes

2026-06-06 19:27:48 +00:00 · 2025-02-18 13:09:32 +01:00
parent 43a1e36087
commit d8bf1f7125
11 changed files with 253 additions and 183 deletions
@@ -19,7 +19,7 @@
        "e2e:ui": "playwright test tests/e2e --ui"
    },
    "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53",
        "@appwrite.io/pink-icons": "0.25.0",
        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290",
        "@appwrite.io/pink-legacy": "^1.0.1",
@@ -9,8 +9,8 @@ importers:
  .:
    dependencies:
      '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53
      '@appwrite.io/pink-icons':
        specifier: 0.25.0
        version: 0.25.0
@@ -211,8 +211,8 @@ packages:
  '@analytics/type-utils@0.6.2':
    resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}

-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53}
    version: 1.2.1

  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290':
@@ -4097,7 +4097,7 @@ snapshots:

  '@analytics/type-utils@0.6.2': {}

-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f6fbc25': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53': {}

  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290(svelte@4.2.19)':
    dependencies:
@@ -11,31 +11,33 @@
    export let disableFields = false;
 </script>

-<Layout.Stack gap="l">
-    {#key selectedInstallationId}
-        <InputSelect
-            id="installation"
-            label="Git organization"
+<Layout.Stack gap="xl">
+    <Layout.Stack gap="l">
+        {#key selectedInstallationId}
+            <InputSelect
+                id="installation"
+                label="Git organization"
+                disabled={disableFields}
+                options={installations.installations.map((entry) => {
+                    return {
+                        label: entry.organization,
+                        value: entry.$id
+                    };
+                })}
+                on:change={() => {
+                    $installation = installations.installations.find(
+                        (entry) => entry.$id === selectedInstallationId
+                    );
+                }}
+                bind:value={selectedInstallationId} />
+        {/key}
+        <InputText
+            id="repositoryName"
+            label="Repository name"
+            placeholder="my-repository"
            disabled={disableFields}
-            options={installations.installations.map((entry) => {
-                return {
-                    label: entry.organization,
-                    value: entry.$id
-                };
-            })}
-            on:change={() => {
-                $installation = installations.installations.find(
-                    (entry) => entry.$id === selectedInstallationId
-                );
-            }}
-            bind:value={selectedInstallationId} />
-    {/key}
-    <InputText
-        id="repositoryName"
-        label="Repository name"
-        placeholder="my-repository"
-        disabled={disableFields}
-        bind:value={repositoryName} />
+            bind:value={repositoryName} />
+    </Layout.Stack>
    <InputCheckbox
        id="repositoryPrivate"
        label="Keep repository private"
@@ -38,12 +38,13 @@

 <Card padding="s" radius="m">
    <Layout.Stack gap="l">
-        <Layout.Stack gap="xl" direction="row" alignItems="center">
+        <!-- <Layout.Stack gap="xl" direction="row" alignItems="center"> -->
+        <div class="card-grid">
            <Image
                border
                radius="s"
-                width={445}
-                height={280}
+                ratio="16/9"
+                style="width: 100%; align-self: start"
                src={deployment?.preview ||
                    ($app.themeInUse === 'dark'
                        ? `${base}/images/sites/screenshot-placeholder-dark.svg`
@@ -113,7 +114,7 @@
                        </Link>
                    </Layout.Stack>
                {/if}
-                <Layout.Stack gap="xl" direction="row">
+                <Layout.Stack gap="xl" direction="row" wrap="wrap">
                    {#if deployment?.buildTime}
                        <Layout.Stack gap="xxs" inline>
                            <Typography.Text
@@ -148,10 +149,13 @@
                                </Tooltip>
                            </Layout.Stack>
                        </Typography.Text>
-                        <Badge
-                            variant="secondary"
-                            type={isCloud ? 'success' : null}
-                            content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        <Layout.Stack inline alignItems="flex-start">
+                            <Badge
+                                size="xs"
+                                variant="secondary"
+                                type={isCloud ? 'success' : null}
+                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        </Layout.Stack>
                    </Layout.Stack>
                    <Layout.Stack gap="xxs" inline>
                        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
@@ -165,10 +169,13 @@
                                </Tooltip>
                            </Layout.Stack>
                        </Typography.Text>
-                        <Badge
-                            variant="secondary"
-                            type={isCloud ? 'success' : null}
-                            content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        <Layout.Stack inline alignItems="flex-start">
+                            <Badge
+                                size="xs"
+                                variant="secondary"
+                                type={isCloud ? 'success' : null}
+                                content={isCloud ? 'Connected' : 'Available on Cloud'} />
+                        </Layout.Stack>
                    </Layout.Stack>
                </Layout.Stack>
                <Layout.Stack gap="xxs">
@@ -180,8 +187,8 @@
                    </Typography.Text>
                </Layout.Stack>
            </Layout.Stack>
-        </Layout.Stack>
-
+            <!-- </Layout.Stack> -->
+        </div>
        {#if $$slots.footer}
            <span
                style="margin-left: calc(-1* var(--space-7));margin-right: calc(-1* var(--space-7));width:auto;">
@@ -197,3 +204,17 @@
 {#if show && siteUrl}
    <OpenOnMobileModal bind:show siteURL={siteUrl} />
 {/if}
+
+<style lang="scss">
+    .card-grid {
+        display: grid;
+        grid-template-columns: 45% 55%;
+        // justify-content: center;
+        align-items: center;
+        gap: var(--gap-xl);
+
+        @media (max-width: 930px) {
+            grid-template-columns: 1fr;
+        }
+    }
+</style>
@@ -15,7 +15,7 @@
 </script>

 <Card padding="s" radius="s">
-    <Layout.Stack gap="l">
+    <Layout.Stack gap="xl">
        <slot />
        <Layout.Stack gap="l">
            {#if repositoryName && showAfter}
@@ -4,7 +4,7 @@
    import { debounce } from '$lib/helpers/debounce';
    import { sdk } from '$lib/stores/sdk';
    import { consoleVariables } from '$routes/(console)/store';
-    import { ResourceType } from '@appwrite.io/console';
+    import { Type } from '@appwrite.io/console';
    import { Fieldset, Layout, Divider, Status, Typography } from '@appwrite.io/pink-svelte';

    export let domain: string;
@@ -14,8 +14,11 @@

    const checkDomain = debounce(async (value: string) => {
        try {
-            // TODO: @Meldiron Fix in future, blocked by issue PLA-2254
-            // await sdk.forProject.proxy.checkSubdomain(ResourceType.Site, value);
+            await sdk.forConsole.console.getResource(
+                `${value}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                Type.Rules
+            );
+
            domainIsValid = true;
        } catch {
            domainIsValid = false;
@@ -15,11 +15,12 @@
    import Details from '../../details.svelte';
    import ProductionBranch from '../../productionBranch.svelte';
    import Aside from '../../aside.svelte';
-    import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
+    import { BuildRuntime, Framework, ID, Query, ResourceType } from '@appwrite.io/console';
    import type { Models } from '@appwrite.io/console';
    import { onMount } from 'svelte';
    import Configuration from '../../configuration.svelte';
    import Domain from '../../domain.svelte';
+    import { consoleVariables } from '$routes/(console)/store';

    export let data;
    let showExitModal = false;
@@ -85,7 +86,6 @@
                    installCommand,
                    buildCommand,
                    outputDirectory,
-                    domain || undefined,
                    framework.adapters[Object.keys(framework.adapters)[0]].key, //TODO: fix this
                    data.installation.$id,
                    null,
@@ -94,10 +94,13 @@
                    silentMode,
                    rootDir
                );
-                trackEvent(Submit.SiteCreate, {
-                    source: 'repository',
-                    framework: framework.key
-                });
+
+                // Add domain
+                await sdk.forProject.proxy.createRule(
+                    `${domain}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                    ResourceType.Site,
+                    site.$id
+                );

                //Add variables
                const promises = variables.map((variable) =>
@@ -110,6 +113,11 @@
                );
                await Promise.all(promises);

+                trackEvent(Submit.SiteCreate, {
+                    source: 'repository',
+                    framework: framework.key
+                });
+
                const { deployments } = await sdk.forProject.sites.listDeployments(site.$id, [
                    Query.limit(1)
                ]);
@@ -1,6 +1,6 @@
 <script lang="ts">
    import { base } from '$app/paths';
-    import { EmptySearch } from '$lib/components';
+    import { EmptySearch, Pagination, PaginationWithLimit } from '$lib/components';
    import { Button, InputSearch } from '$lib/elements/forms';
    import { page } from '$app/stores';
    import Wizard from '$lib/layout/wizard.svelte';
@@ -114,38 +114,41 @@
            </Layout.Stack>
        </Layout.Stack>
    </svelte:fragment>
+    <Layout.Stack gap="l">
+        {#if data.templates?.length > 0}
+            <Layout.GridBox>
+                {#each data.templates as template}
+                    {@const templateFrameworks = template.frameworks.map((t) => t.name)}

-    {#if data.templates?.length > 0}
-        <Layout.GridBox>
-            {#each data.templates as template}
-                {@const templateFrameworks = template.frameworks.map((t) => t.name)}
+                    <Card.Link
+                        variant="secondary"
+                        href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.key}`}
+                        padding="xxs">
+                        <Card.Media
+                            title={template.name}
+                            description={templateFrameworks.join(', ')}
+                            src={template.demoImage ||
+                                ($app.themeInUse === 'dark'
+                                    ? `${base}/images/sites/screenshot-placeholder-dark.svg`
+                                    : `${base}/images/sites/screenshot-placeholder-light.svg`)}
+                            alt={template.name}>
+                        </Card.Media>
+                    </Card.Link>
+                {/each}
+            </Layout.GridBox>
+        {:else}
+            <EmptySearch
+                hidePagination
+                target="templates"
+                search={$page.url.searchParams.get('search')}>
+                <Button secondary on:click={clearSearch}>Clear search</Button>
+            </EmptySearch>
+        {/if}

-                <Card.Link
-                    variant="secondary"
-                    href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.key}`}
-                    padding="xxs">
-                    <Card.Media
-                        title={template.name}
-                        description={templateFrameworks.join(', ')}
-                        src={template.demoImage ||
-                            ($app.themeInUse === 'dark'
-                                ? `${base}/images/sites/screenshot-placeholder-dark.svg`
-                                : `${base}/images/sites/screenshot-placeholder-light.svg`)}
-                        alt={template.name}>
-                    </Card.Media>
-                </Card.Link>
-            {/each}
-        </Layout.GridBox>
-    {:else}
-        <EmptySearch
-            hidePagination
-            target="templates"
-            search={$page.url.searchParams.get('search')}>
-            <Button secondary on:click={clearSearch}>Clear search</Button>
-        </EmptySearch>
-    {/if}
-    <!-- <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
-        <p class="text">Total templates: {data.templates?.length}</p>
-        <Pagination limit={data.limit} offset={data.offset} sum={data.templates?.length} />
-    </div> -->
+        <PaginationWithLimit
+            name="Templates"
+            limit={data.limit}
+            offset={data.offset}
+            total={data.templates?.length} />
+    </Layout.Stack>
 </Wizard>
@@ -1,9 +1,8 @@
 import { sdk } from '$lib/stores/sdk';
 import { getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
-import { CARD_LIMIT } from '$lib/constants';

 export const load = async ({ url, route }) => {
-    const limit = CARD_LIMIT;
+    const limit = 12;
    const page = getPage(url);
    const search = getSearch(url);
    const view = getView(url, route, View.Grid);
@@ -18,7 +18,7 @@
        Typography,
        Image
    } from '@appwrite.io/pink-svelte';
-    import { IconGithub } from '@appwrite.io/pink-icons-svelte';
+    import { IconExternalLink, IconGithub } from '@appwrite.io/pink-icons-svelte';
    import { onMount } from 'svelte';
    import { writable } from 'svelte/store';
    import Details from '../../details.svelte';
@@ -26,11 +26,12 @@
    import ProductionBranch from '../../productionBranch.svelte';
    import Configuration from './configuration.svelte';
    import Aside from '../../aside.svelte';
-    import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
+    import { BuildRuntime, Framework, ID, ResourceType } from '@appwrite.io/console';
    import Domain from '../../domain.svelte';
    import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
    import { getFrameworkIcon } from '../../../store';
    import { app, iconPath } from '$lib/stores/app';
+    import { consoleVariables } from '$routes/(console)/store';

    export let data;

@@ -132,25 +133,21 @@
                    framework.installCommand,
                    framework.buildCommand,
                    framework.outputDirectory,
-                    domain || undefined,
                    framework.adapter,
                    selectedInstallationId || undefined,
                    framework.fallbackFile,
                    selectedRepository || undefined,
                    branch || undefined,
                    selectedRepository ? silentMode : undefined,
-                    rootDir || undefined,
-                    data.template.providerRepositoryId || undefined,
-                    data.template.providerOwner || undefined,
-                    framework.providerRootDirectory || undefined,
-                    data.template.providerVersion || undefined
+                    rootDir || undefined
                );

-                trackEvent(Submit.SiteCreate, {
-                    source: 'template',
-                    framework: framework.key,
-                    template: data.template.name
-                });
+                // Add domain
+                await sdk.forProject.proxy.createRule(
+                    `${domain}.${$consoleVariables._APP_DOMAIN_TARGET}`,
+                    ResourceType.Site,
+                    site.$id
+                );

                //Add variables
                const promises = variables.map((variable) =>
@@ -163,10 +160,20 @@
                );
                await Promise.all(promises);

-                const { deployments } = await sdk.forProject.sites.listDeployments(site.$id, [
-                    Query.limit(1)
-                ]);
-                const deployment = deployments[0];
+                const deployment = await sdk.forProject.sites.createTemplateDeployment(
+                    site.$id,
+                    data.template.providerRepositoryId || undefined,
+                    data.template.providerOwner || undefined,
+                    framework.providerRootDirectory || undefined,
+                    data.template.providerVersion || undefined
+                );
+
+                trackEvent(Submit.SiteCreate, {
+                    source: 'template',
+                    framework: framework.key,
+                    template: data.template.name
+                });
+
                await goto(
                    `${base}/project-${$page.params.project}/sites/create-site/deploying?site=${site.$id}&deployment=${deployment.$id}`
                );
@@ -246,7 +253,12 @@
                    };
                })}
                <Layout.Stack gap="xxl">
-                    <Details bind:name bind:id bind:framework {options} showFramework />
+                    <Details
+                        bind:name
+                        bind:id
+                        bind:framework
+                        {options}
+                        showFramework={options?.length > 1} />
                    <ConnectBehaviour bind:connectBehaviour />
                </Layout.Stack>
                {#if connectBehaviour === 'now'}
@@ -294,13 +306,14 @@
                            </Layout.Stack>
                        </Fieldset>
                    {:else}
-                        <Card isDashed isTile>
+                        <Card isDashed isTile padding="none">
                            <Empty
+                                type="secondary"
                                title="Connect Git repository"
                                description="Create and deploy a Site with a connected git repository.">
                                <svelte:fragment slot="actions">
                                    <Button secondary href={connectGitHub().toString()} size="s">
-                                        <Icon icon={IconGithub} />
+                                        <Icon icon={IconGithub} slot="start" />
                                        Connect to GitHub
                                    </Button>
                                </svelte:fragment>
@@ -318,27 +331,33 @@
    </Form>
    <svelte:fragment slot="aside">
        <Aside {framework} {repositoryName} {branch} {rootDir} {domain} showAfter={showSiteConfig}>
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Typography.Text variant="m-500" truncate>
-                    {name || data.template.name}
-                </Typography.Text>
-                {#if data?.template?.demoUrl}
-                    <Button secondary size="s" external href={data.template.demoUrl}>
-                        View demo
-                    </Button>
-                {/if}
-            </Layout.Stack>
+            <Layout.Stack>
+                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Typography.Text
+                        variant="m-500"
+                        truncate
+                        color="--color-fgcolor-neutral-primary">
+                        {name || data.template.name}
+                    </Typography.Text>
+                    {#if data?.template?.demoUrl}
+                        <Button secondary size="s" external href={data.template.demoUrl}>
+                            View demo
+                            <Icon icon={IconExternalLink} slot="end" size="s" />
+                        </Button>
+                    {/if}
+                </Layout.Stack>

-            <Image
-                objectPosition="top"
-                border
-                src={data?.template?.demoImage ||
-                    ($app.themeInUse === 'dark'
-                        ? `${base}/images/sites/screenshot-placeholder-dark.svg`
-                        : `${base}/images/sites/screenshot-placeholder-light.svg`)}
-                alt={data.template.name}
-                width={357}
-                height={200} />
+                <Image
+                    objectPosition="top"
+                    border
+                    src={data?.template?.demoImage ||
+                        ($app.themeInUse === 'dark'
+                            ? `${base}/images/sites/screenshot-placeholder-dark.svg`
+                            : `${base}/images/sites/screenshot-placeholder-light.svg`)}
+                    alt={data.template.name}
+                    width={357}
+                    height={200} />
+            </Layout.Stack>
        </Aside>
    </svelte:fragment>

@@ -70,68 +70,83 @@
    <Layout.Stack gap="l">
        <Layout.Stack>
            {#if requiredVariables?.length}
-                <Accordion
-                    title="Required variables"
-                    open
-                    hideDivider={!!optionalVariables?.length}>
-                    {#each requiredVariables as variable}
-                        <Layout.Stack gap="s" direction="row">
+                <Accordion title="Required variables" open hideDivider={!optionalVariables?.length}>
+                    <Layout.Stack>
+                        {#each requiredVariables as variable, i}
                            <Layout.Stack gap="s" direction="row">
-                                <InputText id={variable.name} value={variable.name} readonly />
-                                <svelte:component
-                                    this={selectComponent(variable.type)}
-                                    id={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    minlength={variable.type === 'password' ? 0 : null}
-                                    showPasswordButton={variable.type === 'password'}
-                                    bind:value={variable.value} />
+                                <Layout.Stack gap="s" direction="row" alignItems="flex-end">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconInfo} /></Button>
+                                        <p slot="tooltip">{variable.description}</p>
+                                    </Popover>
+                                </Layout.Stack>
                            </Layout.Stack>
-                            <Popover placement="bottom-end" let:toggle>
-                                <Button
-                                    secondary
-                                    icon
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon size="s" icon={IconInfo} /></Button>
-                                <p slot="tooltip">{variable.description}</p>
-                            </Popover>
-                        </Layout.Stack>
-                    {/each}
+                        {/each}
+                    </Layout.Stack>
                </Accordion>
            {/if}
            {#if optionalVariables?.length}
                <Accordion title="Optional variables" hideDivider>
-                    {#each optionalVariables as variable}
-                        <Layout.Stack gap="s" direction="row">
+                    <Layout.Stack>
+                        {#each optionalVariables as variable, i}
                            <Layout.Stack gap="s" direction="row">
-                                <InputText id={variable.name} value={variable.name} readonly />
-                                <svelte:component
-                                    this={selectComponent(variable.type)}
-                                    id={variable.name}
-                                    placeholder={variable.placeholder ?? 'Enter value'}
-                                    required={variable.required}
-                                    autocomplete={false}
-                                    minlength={variable.type === 'password' ? 0 : null}
-                                    showPasswordButton={variable.type === 'password'}
-                                    bind:value={variable.value} />
+                                <Layout.Stack gap="s" direction="row">
+                                    <InputText
+                                        id={variable.name}
+                                        value={variable.name}
+                                        readonly
+                                        label={i === 0 ? 'Key' : null} />
+                                    <svelte:component
+                                        this={selectComponent(variable.type)}
+                                        label={i === 0 ? 'Value' : null}
+                                        id={variable.name}
+                                        placeholder={variable.placeholder ?? 'Enter value'}
+                                        required={variable.required}
+                                        autocomplete={false}
+                                        minlength={variable.type === 'password' ? 0 : null}
+                                        showPasswordButton={variable.type === 'password'}
+                                        bind:value={variable.value} />
+                                </Layout.Stack>
+                                <Layout.Stack gap="s" justifyContent="flex-end" inline>
+                                    <Popover let:toggle>
+                                        <Button
+                                            secondary
+                                            icon
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                toggle(e);
+                                            }}>
+                                            <Icon size="s" icon={IconInfo} /></Button>
+                                        <p slot="tooltip">{variable.description}</p>
+                                    </Popover>
+                                </Layout.Stack>
                            </Layout.Stack>
-                            <Popover placement="bottom-end" let:toggle>
-                                <Button
-                                    secondary
-                                    icon
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        toggle(e);
-                                    }}>
-                                    <Icon size="s" icon={IconInfo} /></Button>
-                                <p slot="tooltip">{variable.description}</p>
-                            </Popover>
-                        </Layout.Stack>
-                    {/each}
+                        {/each}
+                    </Layout.Stack>
                </Accordion>
            {/if}
        </Layout.Stack>