mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Merge pull request #530 from appwrite/fix-1.4-QA-after-release
fix: 1.4 QA fixes after release
This commit is contained in:
Torsten Dittmann
@@ -7,6 +7,7 @@
|
||||
export let size = 40;
|
||||
export let avatarSize: keyof typeof Sizes = 'medium';
|
||||
export let bordered = false;
|
||||
export let color = '';
|
||||
|
||||
enum Sizes {
|
||||
xsmall = 'is-size-x-small',
|
||||
@@ -28,13 +29,13 @@
|
||||
|
||||
{#each icons as icon}
|
||||
<li class="avatars-group-item">
|
||||
<span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
|
||||
<span class="avatar {Sizes[avatarSize]} {color}"><span class={`icon-${icon}`} /></span>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
{#if total > 2}
|
||||
<li class="avatars-group-item">
|
||||
<div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
|
||||
<div class="avatar {Sizes[avatarSize]} {color}">+{total - 2}</div>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</article>
|
||||
|
||||
{#if !hidePagination}
|
||||
<div class="u-flex u-margin-block-start-32 u-main-space-between">
|
||||
<div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
|
||||
<p class="text">Total results: 0</p>
|
||||
<PaginationInline limit={1} offset={0} sum={0} {hidePages} />
|
||||
</div>
|
||||
|
||||
@@ -34,6 +34,7 @@
|
||||
|
||||
<div class="u-flex u-gap-12 u-cross-center">
|
||||
<InputSelect
|
||||
wrapperTag="div"
|
||||
id="rows"
|
||||
label="Rows per page"
|
||||
showLabel={false}
|
||||
|
||||
@@ -6,10 +6,7 @@
|
||||
| 'completed'
|
||||
| 'processing'
|
||||
| 'ready'
|
||||
| 'building'
|
||||
| string = null;
|
||||
|
||||
//TODO: Remove type string once SDK is updated
|
||||
| 'building';
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
||||
@@ -1,8 +1,17 @@
|
||||
<script context="module" lang="ts">
|
||||
export type FormItemTag = 'li' | 'div';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let tag: FormItemTag = 'li';
|
||||
export let fullWidth = false;
|
||||
export let isMultiple = false;
|
||||
</script>
|
||||
|
||||
<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
|
||||
<svelte:element
|
||||
this={tag}
|
||||
class="form-item"
|
||||
class:is-multiple={isMultiple}
|
||||
class:u-width-full-line={fullWidth}>
|
||||
<slot />
|
||||
</li>
|
||||
</svelte:element>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { onDestroy } from 'svelte';
|
||||
|
||||
export let value = '';
|
||||
@@ -10,6 +10,7 @@
|
||||
export let autofocus = false;
|
||||
export let isWithEndButton = true;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let element: HTMLInputElement;
|
||||
let timer: ReturnType<typeof setTimeout>;
|
||||
|
||||
@@ -26,13 +27,19 @@
|
||||
}
|
||||
});
|
||||
|
||||
const valueChange = (event: Event) => {
|
||||
function valueChange(event: Event) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
value = target.value;
|
||||
dispatch('change', value);
|
||||
}, debounce);
|
||||
};
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
value = '';
|
||||
dispatch('clear');
|
||||
}
|
||||
|
||||
$: if (!value) {
|
||||
if (element) {
|
||||
@@ -56,7 +63,8 @@
|
||||
class="button is-text is-only-icon"
|
||||
style="--button-size:1.5rem;"
|
||||
aria-label="Clear search"
|
||||
on:click={() => (value = '')}>
|
||||
type="button"
|
||||
on:click={clearSearch}>
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { FormItem, Helper, Label } from '.';
|
||||
import type { FormItemTag } from './formItem.svelte';
|
||||
|
||||
export let id: string;
|
||||
export let label: string | undefined = undefined;
|
||||
@@ -10,6 +11,7 @@
|
||||
export let required = false;
|
||||
export let hideRequired = false;
|
||||
export let disabled = false;
|
||||
export let wrapperTag: FormItemTag = 'li';
|
||||
export let options: {
|
||||
value: string | boolean | number;
|
||||
label: string;
|
||||
@@ -45,7 +47,7 @@
|
||||
$: hasNullOption = options.some((option) => option.value === null);
|
||||
</script>
|
||||
|
||||
<FormItem>
|
||||
<FormItem tag={wrapperTag}>
|
||||
{#if label}
|
||||
<Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
|
||||
{label}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
* Cancel navigation when wizard is open and triggered by popstate
|
||||
*/
|
||||
beforeNavigate((n) => {
|
||||
const external = n.to.url.hostname !== globalThis.location.hostname;
|
||||
const external = n?.to?.url?.hostname !== globalThis?.location?.hostname;
|
||||
if (external) return;
|
||||
if (!($wizard.show || $wizard.cover)) return;
|
||||
if (n.type === 'popstate') {
|
||||
|
||||
@@ -87,12 +87,12 @@
|
||||
</TableCellLink>
|
||||
<TableCell title="Verification">
|
||||
{#if domain.status === 'created'}
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<div class="u-flex u-gap-16 u-cross-center">
|
||||
<Pill danger>
|
||||
<span
|
||||
class="icon-exclamation-circle u-color-text-danger"
|
||||
aria-hidden="true" />
|
||||
<span class="u-text">Failed</span>
|
||||
<span class="u-text">failed</span>
|
||||
</Pill>
|
||||
<button type="button" on:click={() => openRetry(domain)}>
|
||||
<span class="link">Retry</span>
|
||||
@@ -103,30 +103,30 @@
|
||||
<span
|
||||
class="icon-check-circle u-color-text-success"
|
||||
aria-hidden="true" />
|
||||
<p class="text">Verified</p>
|
||||
<p class="text">verified</p>
|
||||
</Pill>
|
||||
{/if}
|
||||
</TableCell>
|
||||
<TableCell title="Cartificate">
|
||||
<TableCell title="Certificate">
|
||||
{#if domain.status === 'unverified'}
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<div class="u-flex u-gap-16 u-cross-center">
|
||||
<Pill danger>
|
||||
<span
|
||||
class="icon-exclamation-circle u-color-text-danger"
|
||||
aria-hidden="true" />
|
||||
<span class="u-text">Failed</span>
|
||||
<span class="u-text">failed</span>
|
||||
</Pill>
|
||||
<button type="button" on:click={() => openRetry(domain)}>
|
||||
<span class="link">Retry</span>
|
||||
</button>
|
||||
</div>
|
||||
{:else if domain.status === 'verified'}
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<div class="u-flex u-gap-16 u-cross-center">
|
||||
<Pill success>
|
||||
<span
|
||||
class="icon-check-circle u-color-text-success"
|
||||
aria-hidden="true" />
|
||||
<span>Generated</span>
|
||||
<span>generated</span>
|
||||
</Pill>
|
||||
{#if domain.renewAt}
|
||||
<span class="u-text-color-gray">
|
||||
@@ -135,12 +135,10 @@
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<Pill>
|
||||
<span class="icon-clock u-text-color-gray" aria-hidden="true" />
|
||||
<p class="text">Waiting for verification</p>
|
||||
</Pill>
|
||||
</div>
|
||||
<Pill warning>
|
||||
<span class="icon-clock u-text-color-gray" aria-hidden="true" />
|
||||
<p class="text">Blocked by verification</p>
|
||||
</Pill>
|
||||
{/if}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
@@ -192,6 +190,6 @@
|
||||
</svelte:fragment>
|
||||
<Retry on:error={(e) => (retryError = e.detail)} />
|
||||
<svelte:fragment slot="footer">
|
||||
<Button text on:click={() => (showRetry = false)}>Close</Button>
|
||||
<Button secondary on:click={() => (showRetry = false)}>Close</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
|
||||
{#if $domain.status === 'created'}
|
||||
<Box radius="small">
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
@@ -63,7 +64,6 @@
|
||||
</div>
|
||||
</Box>
|
||||
{:else if $domain.status === 'unverified'}
|
||||
<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
|
||||
<Box radius="small">
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
|
||||
|
||||
@@ -45,7 +45,12 @@
|
||||
<WizardStep beforeSubmit={createDomain}>
|
||||
<svelte:fragment slot="title">Add function domain</svelte:fragment>
|
||||
<svelte:fragment slot="subtitle">
|
||||
Use your self-owned domain as the endpoint of your Appwrite API.
|
||||
Use your self-owned domain as the endpoint of your Appwrite API. <a
|
||||
href="https://appwrite.io/docs/custom-domains"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">Learn more</a
|
||||
>.
|
||||
</svelte:fragment>
|
||||
|
||||
<FormList>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
|
||||
function onRetryError(event: CustomEvent<string>) {
|
||||
addNotification({
|
||||
title: 'Error',
|
||||
message: event.detail,
|
||||
type: 'error'
|
||||
});
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
<p class="text common-section">
|
||||
<p class="text u-margin-block-start-16">
|
||||
Manage organization configuration in your <a
|
||||
class="link"
|
||||
href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
|
||||
@@ -160,7 +160,7 @@
|
||||
alt={repo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="u-flex u-gap-8">
|
||||
<div class="u-flex u-gap-8 u-cross-center">
|
||||
<span class="text u-trim-1">{repo.name}</span>
|
||||
{#if repo.private}
|
||||
<span
|
||||
@@ -196,28 +196,12 @@
|
||||
<p>There are no repositories that match your search.</p>
|
||||
</div>
|
||||
<div class="u-flex u-gap-16 common-section u-main-center">
|
||||
<Button external href="https://appwrite.io/docs/client/teams" text
|
||||
>Documentation</Button>
|
||||
<Button secondary on:click={() => (search = '')}>Clear search</Button>
|
||||
</div>
|
||||
</div>
|
||||
</EmptySearch>
|
||||
{:else}
|
||||
<EmptySearch hidePages>
|
||||
<div class="common-section">
|
||||
<div class="u-text-center common-section">
|
||||
<p class="text u-line-height-1-5">You have no repositories.</p>
|
||||
<p class="text u-line-height-1-5">
|
||||
Need a hand? Learn more in our <a
|
||||
href="https://appwrite.io/docs/client/teams"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
documentation</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</EmptySearch>
|
||||
<EmptySearch hidePages />
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
import Repositories from './components/repositories.svelte';
|
||||
import CreateManual from './createManual.svelte';
|
||||
import CreateGit from './createGit.svelte';
|
||||
import { tooltip } from '$lib/actions/tooltip';
|
||||
|
||||
let hasInstallations: boolean;
|
||||
let selectedRepository: string;
|
||||
@@ -84,9 +85,7 @@
|
||||
<div class="card u-height-100-percent">
|
||||
<section class="common-section">
|
||||
<h2 class="heading-level-6">Quick start</h2>
|
||||
<p class="u-margin-block-start-8">
|
||||
Use a starter templates to begin with the basics.
|
||||
</p>
|
||||
<p class="u-margin-block-start-8">Use a starter template.</p>
|
||||
<ul
|
||||
class="grid-box u-margin-block-start-16"
|
||||
style:--grid-item-size="8rem"
|
||||
@@ -141,7 +140,10 @@
|
||||
{/each}
|
||||
|
||||
{#if quickStart.runtimes.length < 6}
|
||||
<li>
|
||||
<li
|
||||
use:tooltip={{
|
||||
content: 'More runtimes coming soon'
|
||||
}}>
|
||||
<Box
|
||||
class="u-width-full-line u-flex u-cross-center u-gap-8"
|
||||
padding={16}
|
||||
@@ -150,6 +152,7 @@
|
||||
icons={['dotnet', 'deno']}
|
||||
total={4}
|
||||
avatarSize="small"
|
||||
color="u-color-text-gray"
|
||||
bordered />
|
||||
</Box>
|
||||
</li>
|
||||
@@ -180,7 +183,7 @@
|
||||
<div class="avatar is-size-small" style:--p-text-size="1.25rem">
|
||||
<span class={template.icon} />
|
||||
</div>
|
||||
<div>
|
||||
<div class="u-flex u-flex-vertical u-gap-4">
|
||||
<div class="body-text-2 u-bold u-trim">{template.name}</div>
|
||||
<div class="u-trim-1 u-color-text-gray">
|
||||
{template.tagline}
|
||||
@@ -193,6 +196,7 @@
|
||||
</section>
|
||||
<Button
|
||||
text
|
||||
noMargin
|
||||
class="u-margin-inline-start-auto u-margin-block-start-16"
|
||||
href={`${base}/console/project-${$page.params.project}/functions/templates`}>
|
||||
<span> All templates </span>
|
||||
|
||||
@@ -22,8 +22,7 @@
|
||||
label="Entrypoint"
|
||||
id="entrypoint"
|
||||
placeholder="Entrypoint"
|
||||
bind:value={$createFunction.entrypoint}
|
||||
required />
|
||||
bind:value={$createFunction.entrypoint} />
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
<svelte:fragment slot="title">Build commands</svelte:fragment>
|
||||
|
||||
+1
-1
@@ -63,7 +63,7 @@
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link">
|
||||
Permissions fuide
|
||||
Permissions guide
|
||||
</a>.
|
||||
</p>
|
||||
<svelte:fragment slot="aside">
|
||||
|
||||
@@ -25,15 +25,13 @@
|
||||
TableRow,
|
||||
TableScroll
|
||||
} from '$lib/elements/table';
|
||||
import { execute, func, proxyRuleList } from './store';
|
||||
import { deploymentList, execute, func, proxyRuleList } from './store';
|
||||
import { Container } from '$lib/layout';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { calculateSize, humanFileSize } from '$lib/helpers/sizeConvertion';
|
||||
import { Query, type Models } from '@appwrite.io/console';
|
||||
import type { PageData } from './$types';
|
||||
import Delete from './delete.svelte';
|
||||
import Create from './create.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { sdk } from '$lib/stores/sdk';
|
||||
import Activate from './activate.svelte';
|
||||
import { calculateTime } from '$lib/helpers/timeConversion';
|
||||
@@ -43,23 +41,21 @@
|
||||
import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
|
||||
import DeploymentDomains from './deploymentDomains.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
export let data;
|
||||
|
||||
let showDropdown = [];
|
||||
let showDelete = false;
|
||||
let showActivate = false;
|
||||
let showRedeploy = false;
|
||||
let showAlert = true;
|
||||
|
||||
let selectedDeployment: Models.Deployment = null;
|
||||
let activeDeployment: Models.Deployment = null;
|
||||
|
||||
onMount(async () => {
|
||||
activeDeployment = await getActiveDeployment();
|
||||
});
|
||||
|
||||
async function getActiveDeployment() {
|
||||
if (!$func?.deployment) return null;
|
||||
const list = await sdk.forProject.functions.listDeployments($page.params.function, [
|
||||
Query.equal('$id', $func?.deployment)
|
||||
Query.equal('$id', $func.deployment)
|
||||
]);
|
||||
return list?.deployments?.[0];
|
||||
}
|
||||
@@ -67,6 +63,21 @@
|
||||
function handleActivate() {
|
||||
invalidate(Dependencies.DEPLOYMENTS);
|
||||
}
|
||||
|
||||
deploymentList.subscribe((list: Models.DeploymentList | null) => {
|
||||
if (list?.deployments) {
|
||||
let activeDep = list.deployments.find(
|
||||
(deployment) => deployment.$id === $func.deployment
|
||||
);
|
||||
if (!activeDep) {
|
||||
getActiveDeployment().then((deployment) => {
|
||||
activeDeployment = deployment;
|
||||
});
|
||||
} else {
|
||||
activeDeployment = activeDep;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
@@ -74,17 +85,20 @@
|
||||
<Heading tag="h2" size="5">Deployments</Heading>
|
||||
<Create main />
|
||||
</div>
|
||||
{#if data.deployments.total}
|
||||
{#if $deploymentList?.total}
|
||||
<div class="common-section">
|
||||
<Heading tag="h3" size="7">Active</Heading>
|
||||
</div>
|
||||
{#if activeDeployment && !$func.live}
|
||||
<div class="u-margin-block-start-8">
|
||||
<Alert type="warning" isStandalone dismissible>
|
||||
Some configuration options are not live yet. Redeploy your function to apply
|
||||
latest changes.
|
||||
</Alert>
|
||||
</div>
|
||||
{#if activeDeployment && !$func.live && showAlert}
|
||||
<Alert
|
||||
type="warning"
|
||||
class="u-margin-block-start-8"
|
||||
isStandalone
|
||||
dismissible
|
||||
on:dismiss={() => (showAlert = false)}>
|
||||
Some configuration options are not live yet. Redeploy your function to apply latest
|
||||
changes.
|
||||
</Alert>
|
||||
{/if}
|
||||
{#if activeDeployment}
|
||||
<CardGrid>
|
||||
@@ -130,8 +144,12 @@
|
||||
<Pill
|
||||
danger={status === 'failed'}
|
||||
warning={status === 'building'}
|
||||
info={status === 'ready'}>
|
||||
<span class="text u-trim">{activeDeployment.status}</span>
|
||||
success={status === 'ready'}>
|
||||
<span class="text u-trim">
|
||||
{activeDeployment.status === 'ready'
|
||||
? 'active'
|
||||
: activeDeployment.status}
|
||||
</span>
|
||||
</Pill>
|
||||
</div>
|
||||
</div>
|
||||
@@ -183,12 +201,12 @@
|
||||
<div class="common-section">
|
||||
<Heading tag="h3" size="7">All</Heading>
|
||||
</div>
|
||||
{#if data.deployments.total > 0}
|
||||
{#if $deploymentList.total}
|
||||
<div class="u-margin-block-start-24">
|
||||
<TableScroll noMargin>
|
||||
<TableHeader>
|
||||
<TableCellHead width={150}>Deployment ID</TableCellHead>
|
||||
<TableCellHead width={80}>Status</TableCellHead>
|
||||
<TableCellHead width={100}>Status</TableCellHead>
|
||||
<TableCellHead width={80}>Source</TableCellHead>
|
||||
<TableCellHead width={180}>Updated</TableCellHead>
|
||||
<TableCellHead width={80}>Build Time</TableCellHead>
|
||||
@@ -196,7 +214,7 @@
|
||||
<TableCellHead width={40} />
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{#each data.deployments.deployments as deployment, index}
|
||||
{#each $deploymentList.deployments as deployment, index (deployment.$id)}
|
||||
{@const status = deployment.status}
|
||||
<TableRow>
|
||||
<TableCell width={150} title="Deployment ID">
|
||||
@@ -333,7 +351,7 @@
|
||||
name="Deployments"
|
||||
limit={data.limit}
|
||||
offset={data.offset}
|
||||
total={data.deployments.total} />
|
||||
total={$deploymentList?.total} />
|
||||
</Container>
|
||||
|
||||
{#if selectedDeployment}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
|
||||
return {
|
||||
offset,
|
||||
limit,
|
||||
deployments: await sdk.forProject.functions.listDeployments(params.function, [
|
||||
deploymentList: await sdk.forProject.functions.listDeployments(params.function, [
|
||||
Query.limit(limit),
|
||||
Query.offset(offset),
|
||||
Query.orderDesc('')
|
||||
|
||||
@@ -35,7 +35,11 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal title="Activate Deployment" bind:show={showActivate} onSubmit={handleSubmit}>
|
||||
<Modal
|
||||
title="Activate Deployment"
|
||||
bind:show={showActivate}
|
||||
onSubmit={handleSubmit}
|
||||
headerDivider={false}>
|
||||
<p>Are you sure you want to activate this deployment?</p>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button text on:click={() => (showActivate = false)}>Cancel</Button>
|
||||
|
||||
+3
-4
@@ -33,8 +33,8 @@
|
||||
functionId,
|
||||
files[0],
|
||||
active,
|
||||
entrypoint,
|
||||
buildCommand
|
||||
entrypoint || undefined,
|
||||
buildCommand || undefined
|
||||
);
|
||||
await invalidate(Dependencies.DEPLOYMENTS);
|
||||
files = undefined;
|
||||
@@ -76,8 +76,7 @@
|
||||
label="Entrypoint"
|
||||
id="entrypoint"
|
||||
placeholder="Entrypoint"
|
||||
bind:value={entrypoint}
|
||||
required />
|
||||
bind:value={entrypoint} />
|
||||
{#if $func.version !== 'v3'}
|
||||
<Alert type="info">
|
||||
<svelte:fragment slot="title">
|
||||
|
||||
+1
-1
@@ -25,8 +25,8 @@
|
||||
});
|
||||
trackEvent(Submit.FunctionRedeploy);
|
||||
|
||||
invalidate(Dependencies.DEPLOYMENTS);
|
||||
invalidate(Dependencies.FUNCTION);
|
||||
invalidate(Dependencies.DEPLOYMENTS);
|
||||
show = false;
|
||||
} catch (error) {
|
||||
addNotification({
|
||||
|
||||
+7
-2
@@ -20,6 +20,7 @@
|
||||
import { Button } from '$lib/elements/forms';
|
||||
|
||||
export let data;
|
||||
let showAlert = true;
|
||||
|
||||
const sdkCreateVariable = async (key: string, value: string) => {
|
||||
await sdk.forProject.functions.createVariable($func.$id, key, value);
|
||||
@@ -42,8 +43,12 @@
|
||||
|
||||
<Container>
|
||||
<Heading tag="h2" size="5">Settings</Heading>
|
||||
{#if $func.version !== 'v3'}
|
||||
<Alert type="warning" dismissible class="u-margin-block-start-24">
|
||||
{#if $func.version !== 'v3' && showAlert}
|
||||
<Alert
|
||||
type="warning"
|
||||
dismissible
|
||||
class="u-margin-block-start-24"
|
||||
on:dismiss={() => (showAlert = false)}>
|
||||
<svelte:fragment slot="title">Your function is outdated</svelte:fragment>
|
||||
Update your function version to make use of new features including build commands and HTTP
|
||||
data in your executions. To update, follow the steps outlined in our
|
||||
|
||||
@@ -32,6 +32,7 @@ export const load: PageLoad = async ({ params, depends }) => {
|
||||
return {
|
||||
variables,
|
||||
globalVariables,
|
||||
runtimesList: sdk.forProject.functions.listRuntimes(),
|
||||
installations: sdk.forProject.vcs.listInstallations()
|
||||
};
|
||||
};
|
||||
|
||||
+1
-1
@@ -289,7 +289,7 @@
|
||||
first configure your environment variables.
|
||||
<svelte:fragment slot="buttons">
|
||||
<Button
|
||||
href="https://appwrite.io/docs/environment-variables#vcs_(version_control_system)"
|
||||
href="https://appwrite.io/docs/configuration#git"
|
||||
external
|
||||
text>
|
||||
Learn more
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { func } from '../store';
|
||||
import InputSelect from '$lib/elements/forms/inputSelect.svelte';
|
||||
import { runtimesList } from '$routes/console/project-[project]/functions/store';
|
||||
import { runtimesList } from '../../store';
|
||||
|
||||
const functionId = $page.params.function;
|
||||
let runtime: string = null;
|
||||
|
||||
@@ -3,6 +3,10 @@ import { derived, writable, type Writable } from 'svelte/store';
|
||||
import type { Models } from '@appwrite.io/console';
|
||||
|
||||
export const func = derived(page, ($page) => $page.data.function as Models.Function);
|
||||
export const deploymentList = derived(
|
||||
page,
|
||||
($page) => $page.data.deploymentList as Models.DeploymentList
|
||||
);
|
||||
export const proxyRuleList = derived(
|
||||
page,
|
||||
($page) => $page.data.proxyRuleList as Models.ProxyRuleList
|
||||
|
||||
@@ -8,18 +8,16 @@
|
||||
CollapsibleItem,
|
||||
EmptySearch,
|
||||
Heading,
|
||||
Pagination
|
||||
Pagination,
|
||||
SvgIcon
|
||||
} from '$lib/components';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { debounce } from '$lib/helpers/debounce';
|
||||
import { Button, InputSearch } from '$lib/elements/forms';
|
||||
import { Container } from '$lib/layout';
|
||||
import { app } from '$lib/stores/app';
|
||||
import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
let searchElement: HTMLInputElement;
|
||||
|
||||
function applyFilter(filter: string, value: string, event: Event) {
|
||||
const add = (event.target as EventTarget & HTMLInputElement).checked;
|
||||
const target = new URL($page.url);
|
||||
@@ -38,7 +36,6 @@
|
||||
const target = new URL($page.url);
|
||||
target.searchParams.delete('page');
|
||||
target.searchParams.delete('search');
|
||||
searchElement.value = '';
|
||||
goto(target.toString());
|
||||
}
|
||||
|
||||
@@ -59,8 +56,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
const applySearch = debounce((event: Event) => {
|
||||
const value = (event.target as EventTarget & HTMLInputElement).value;
|
||||
function applySearch(event: CustomEvent<string>) {
|
||||
const value = event.detail;
|
||||
const target = new URL($page.url);
|
||||
|
||||
if (value.length > 0) {
|
||||
@@ -70,7 +67,7 @@
|
||||
}
|
||||
target.searchParams.delete('page');
|
||||
goto(target.toString(), { keepFocus: true });
|
||||
}, 250);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Container>
|
||||
@@ -82,23 +79,10 @@
|
||||
</div>
|
||||
<div class="grid-300px-1fr u-margin-block-start-24">
|
||||
<section>
|
||||
<div
|
||||
class="input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 u-margin-block-start-12"
|
||||
style="--amount-of-buttons:1">
|
||||
<input
|
||||
bind:this={searchElement}
|
||||
on:input={applySearch}
|
||||
type="search"
|
||||
placeholder="Search templates" />
|
||||
<div class="icon-search" aria-hidden="true" />
|
||||
<button
|
||||
on:click={clearSearch}
|
||||
class="button is-text is-only-icon"
|
||||
aria-label="Clear search"
|
||||
style="--button-size:1.5rem;">
|
||||
<span class="icon-x" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<InputSearch
|
||||
placeholder="Search templates"
|
||||
on:clear={clearSearch}
|
||||
on:change={applySearch} />
|
||||
<div class="u-margin-block-start-24">
|
||||
<Collapsible>
|
||||
<CollapsibleItem>
|
||||
@@ -136,11 +120,11 @@
|
||||
on:change={(e) => applyFilter('runtime', runtime, e)} />
|
||||
<div class="u-flex u-cross-center u-gap-8">
|
||||
<div class="avatar is-size-x-small">
|
||||
<img
|
||||
src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
|
||||
alt={icon} />
|
||||
<SvgIcon name={icon} iconSize="small" />
|
||||
</div>
|
||||
<div class="u-trim-1 u-capitalize">
|
||||
{runtime?.split('-')?.join(' ')}
|
||||
</div>
|
||||
<div class="u-trim-1">{runtime}</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
@@ -171,10 +155,8 @@
|
||||
{@const hidden = template.runtimes.slice(1, -1)}
|
||||
<li>
|
||||
<article class="card u-min-height-100-percent">
|
||||
<div class="u-flex u-gap-16 u-cross-center">
|
||||
<h2
|
||||
class="body-text-1 u-bold u-trim"
|
||||
style:break-word="break-word">
|
||||
<div class="u-flex u-gap-16 u-cross-center u-main-space-between">
|
||||
<h2 class="body-text-1 u-bold u-trim-1">
|
||||
{template.name}
|
||||
</h2>
|
||||
<ul class="avatars-group is-with-border">
|
||||
@@ -242,11 +224,10 @@
|
||||
</div>
|
||||
</EmptySearch>
|
||||
{/if}
|
||||
<div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
|
||||
<p class="text">Total templates: {data.sum}</p>
|
||||
<Pagination limit={data.limit} offset={data.offset} sum={data.sum} />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="u-flex u-margin-block-start-32 u-flex-wrap">
|
||||
<div class="u-margin-inline-start-auto">
|
||||
<Pagination limit={data.limit} offset={data.offset} sum={data.sum} />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
+5
-10
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { Alert, Card, Heading } from '$lib/components';
|
||||
import { Alert, Card, Collapsible, Heading } from '$lib/components';
|
||||
import { Pill } from '$lib/elements';
|
||||
import { Button } from '$lib/elements/forms';
|
||||
import { Container } from '$lib/layout';
|
||||
@@ -13,7 +13,7 @@
|
||||
<Container>
|
||||
<div class="grid-300px-1fr">
|
||||
<section>
|
||||
<ul class="collapsible">
|
||||
<Collapsible>
|
||||
<li class="collapsible-item">
|
||||
<h3 class="body-text-2 u-bold u-padding-block-12">
|
||||
Use cases <span class="inline-tag">{$template.usecases.length}</span>
|
||||
@@ -44,7 +44,7 @@
|
||||
alt="" />
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</Collapsible>
|
||||
</section>
|
||||
<section>
|
||||
<Card>
|
||||
@@ -68,16 +68,13 @@
|
||||
In order to clone a template to a locally hosted Appwrite project, you must set
|
||||
up a Git integration and configure your environment variables.
|
||||
<svelte:fragment slot="buttons">
|
||||
<Button
|
||||
href="https://appwrite.io/docs/environment-variables"
|
||||
external
|
||||
text>
|
||||
<Button href="https://appwrite.io/docs/configuration#git" external text>
|
||||
Learn more
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
</Alert>
|
||||
{/if}
|
||||
<div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
|
||||
<div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">
|
||||
<Button
|
||||
text
|
||||
href={`https://github.com/${$template.providerOwner}/${$template.providerRepositoryId}`}
|
||||
@@ -87,13 +84,11 @@
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isSelfHosted && !isVcsEnabled}
|
||||
secondary
|
||||
on:click={() => connectTemplate($template)}>
|
||||
Create function
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>{@html $template.instructions}</Card>
|
||||
</section>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -188,10 +188,7 @@
|
||||
When installing Git in a locally hosted Appwrite project, you must first configure
|
||||
your environment variables.
|
||||
<svelte:fragment slot="buttons">
|
||||
<Button
|
||||
href="https://appwrite.io/docs/environment-variables#vcs_(version_control_system)"
|
||||
external
|
||||
text>
|
||||
<Button href="https://appwrite.io/docs/configuration#git" external text>
|
||||
Learn more
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
|
||||
@@ -103,23 +103,23 @@
|
||||
<Button text={true} on:click={() => toggleAllServices(true)}>Enable all</Button>
|
||||
</li>
|
||||
<li class="buttons-list-item">
|
||||
<Button text={true} on:click={() => toggleAllServices(false)}
|
||||
>Disable all</Button>
|
||||
<Button text={true} on:click={() => toggleAllServices(false)}>
|
||||
Disable all
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form card-separator">
|
||||
<FormList>
|
||||
<ul class="form-list is-multiple">
|
||||
{#each $services.list as service}
|
||||
<InputSwitch
|
||||
label={service.label}
|
||||
id={service.method}
|
||||
bind:value={service.value}
|
||||
on:change={() => {
|
||||
serviceUpdate(service);
|
||||
}} />
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="u-sep-block-start u-padding-block-8 u-margin-block-start-8" />
|
||||
<form class="form">
|
||||
<FormList class="is-multiple">
|
||||
{#each $services.list as service}
|
||||
<InputSwitch
|
||||
label={service.label}
|
||||
id={service.method}
|
||||
bind:value={service.value}
|
||||
on:change={() => {
|
||||
serviceUpdate(service);
|
||||
}} />
|
||||
{/each}
|
||||
</FormList>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -26,7 +26,7 @@
|
||||
let arePermsDisabled = true;
|
||||
|
||||
const getPreview = (fileId: string) =>
|
||||
sdk.forProject.storage.getFilePreview($file.bucketId, fileId, 205, 125).toString() +
|
||||
sdk.forProject.storage.getFilePreview($file.bucketId, fileId, 410, 250).toString() +
|
||||
'&mode=admin';
|
||||
const getView = (fileId: string) =>
|
||||
sdk.forProject.storage.getFileView($file.bucketId, fileId).toString() + '&mode=admin';
|
||||
@@ -107,7 +107,7 @@
|
||||
</svelte:fragment>
|
||||
|
||||
<svelte:fragment slot="actions">
|
||||
<Button secondary href={downloadFile()} event="download_file">
|
||||
<Button secondary href={downloadFile()} event="download_file" external>
|
||||
<span class="icon-download" aria-hidden="true" />
|
||||
<span class="text"> Download</span></Button>
|
||||
</svelte:fragment>
|
||||
|
||||
Reference in New Issue
Block a user