Skip to content

Commit

Permalink
Merge pull request #533 from appwrite/fix-design-QA-1.4
Browse files Browse the repository at this point in the history 
fix: even more design from 1.4 QA
  • Loading branch information
@TorstenDittmann
TorstenDittmann authored Sep 6, 2023
2 parents aa8d9f6 + 256c1cf commit 4af144c
Show file tree
Hide file tree
Showing 12 changed files with 170 additions and 191 deletions.
20 changes: 4 additions & 16 deletions src/lib/wizards/functions/steps/gitConfiguration.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Box } from '$lib/components';
import { Box, SvgIcon } from '$lib/components';
import { FormList, InputChoice, InputText } from '$lib/elements/forms';
import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
import { WizardStep } from '$lib/layout';
Expand All @@ -8,14 +8,6 @@
import { choices, installation, repository } from '../store';
$choices.rootDir ??= '';
function getProviderIcon(provider: string) {
switch (provider) {
case 'github':
return 'icon-github';
default:
return '';
}
}
async function loadBranches() {
const { branches } = await sdk.forProject.vcs.listRepositoryBranches(
Expand All @@ -40,13 +32,9 @@
</svelte:fragment>

<Box radius="small">
<div class="u-flex u-gap-16">
<div class="avatar is-size-x-small">
<span class={getProviderIcon($repository.provider)} />
</div>
<div class="u-cross-child-center u-line-height-1-5">
<h6 class="u-bold u-trim-1">{$installation.organization}/{$repository.name}</h6>
</div>
<div class="u-flex u-gap-8 u-cross-center">
<SvgIcon name={$repository.provider} iconSize="large" />
<h6 class="u-bold u-trim-1">{$installation.organization}/{$repository.name}</h6>
</div>
{#await loadBranches()}
<div class="u-flex u-gap-8 u-cross-center u-main-center">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
}
</script>

<Modal title="Create CLI deployment" size="big" bind:show>
<Modal title="Create CLI deployment" size="big" bind:show headerDivider={false}>
<p class="text">
Deploy your function using the Appwrite CLI by running the following command inside your
function's folder.
Expand Down
92 changes: 45 additions & 47 deletions src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export let show = false;
</script>

<Modal title="Create git deployment" size="big" bind:show headerDivider={false}>
<Modal title="Create Git deployment" size="big" bind:show headerDivider={false}>
{#if $func.installationId && $func.providerRepositoryId}
<p class="text">
Deploy your function from the Git provider of your choice by following the steps below.
Expand All @@ -19,52 +19,50 @@
class="link">documentation</a
>.
</p>
<Box>
<NumericList>
<NumericListItem fullWidth>
<span class="text">Checkout your production branch.</span>
<div class="u-margin-block-start-16">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git checkout ${$func.providerBranch}`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Add your changes</span>
<div class="u-margin-block-start-16">
<Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Create a new commit </span>
<div class="u-margin-block-start-16 u-min-width-0 u-grid">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git commit -m "deploying with Appwrite"`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Push your new commit</span>
<div class="u-margin-block-start-16">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git push ${$func.providerBranch}`} />
</div>
</NumericListItem>
<NumericListItem>
<span class="text"> A new deployment will be triggered automatically. </span>
</NumericListItem>
</NumericList>
</Box>
<NumericList>
<NumericListItem fullWidth>
<span class="text">Checkout your production branch.</span>
<div class="u-margin-block-start-16">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git checkout ${$func.providerBranch}`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Add your changes</span>
<div class="u-margin-block-start-16">
<Code language="sh" withCopy noMargin noBoxPadding code={`git add .`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Create a new commit </span>
<div class="u-margin-block-start-16 u-min-width-0 u-grid">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git commit -m "deploying with Appwrite"`} />
</div>
</NumericListItem>
<NumericListItem fullWidth>
<span class="text"> Push your new commit</span>
<div class="u-margin-block-start-16">
<Code
language="sh"
withCopy
noMargin
noBoxPadding
code={`git push ${$func.providerBranch}`} />
</div>
</NumericListItem>
<NumericListItem>
<span class="text"> A new deployment will be triggered automatically. </span>
</NumericListItem>
</NumericList>
{:else}
<Box>
<div class="u-flex u-gap-16">
Expand Down
27 changes: 15 additions & 12 deletions src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
<script lang="ts">
import {
InputChoice,
Button,
InputFile,
FormList,
InputTextarea,
InputText
} from '$lib/elements/forms';
import { InputChoice, Button, InputFile, FormList, InputText } from '$lib/elements/forms';
import { Alert, Collapsible, CollapsibleItem, Modal } from '$lib/components';
import { sdk } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
Expand Down Expand Up @@ -55,7 +48,13 @@
}
</script>

<Modal title="Create manual deployment" {error} size="big" bind:show onSubmit={create}>
<Modal
title="Create manual deployment"
{error}
size="big"
bind:show
onSubmit={create}
headerDivider={false}>
<p class="text">
Manually deploy a function by uploading a zip file containing the source code and a relative
path to the entry point.
Expand All @@ -66,7 +65,7 @@
class="link">Learn more about function deployments</a
>.
</p>
<FormList>
<FormList gap={16}>
<InputFile
label="Gzipped code (tar.gz)"
allowedFileExtensions={['gz']}
Expand All @@ -93,8 +92,12 @@
<CollapsibleItem>
<svelte:fragment slot="title">Build settings</svelte:fragment>
<svelte:fragment slot="subtitle">(optional)</svelte:fragment>
<FormList>
<InputTextarea
<FormList gap={16}>
<p class="text">
Overwrite your function configuration for a single deployment or save
commands for future use.
</p>
<InputText
label="Commands"
placeholder="Enter a build commad (e.g. 'npm install')"
tooltip="Enter a single command or chain multiple commands with the && operator"
Expand Down
5 changes: 3 additions & 2 deletions ...sole/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,14 @@
<Card>
<div class="u-stretch u-overflow-hidden">
<section class="code-panel">
<header class="code-panel-header u-flex u-main-space-between u-width-full-line">
<header
class="code-panel-header u-flex u-main-space-between u-width-full-line u-flex-wrap u-gap-16">
<div class="u-flex u-flex-vertical">
<h4 class="u-bold">Build {$func.name}</h4>
{#if $deployment.status === 'building'}
<span>Building...</span>
{:else}
{$deployment.status}
<span class="u-capitalize">{$deployment.status}</span>
{/if}
</div>

Expand Down
120 changes: 61 additions & 59 deletions src/routes/console/project-[project]/functions/function-[function]/execute.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,66 +147,68 @@
tooltip="Headers should contain alphanumeric characters (a-z, A-Z, and 0-9) and hyphens only (- and _).">
Headers
</Label>
<div class="form u-grid u-gap-8 u-margin-block-start-8">
<FormList>
{#if headers}
{#each headers as [name, value], index}
<FormItem isMultiple>
<InputText
isMultiple
fullWidth
label="Name"
placeholder="Enter Name"
id={`key-${index}`}
bind:value={name} />
<InputText
isMultiple
fullWidth
label="Value"
placeholder="Enter value"
id={`value-${index}`}
bind:value />
<FormItemPart alignEnd>
<Button
text
noMargin
disabled={(!name || !value) && index === 0}
on:click={() => {
if (index === 0) {
headers = [['', '']];
} else {
headers.splice(index, 1);
headers = headers;
}
}}>
<span class="icon-x" aria-hidden="true" />
</Button>
</FormItemPart>
</FormItem>
{/each}
{/if}
</FormList>
<Button
noMargin
text
disabled={headers?.length &&
headers[headers.length - 1][0] &&
headers[headers.length - 1][1]
? false
: true}
on:click={() => {
if (
headers[headers.length - 1][0] &&
headers[headers.length - 1][1]
) {
headers.push(['', '']);
headers = headers;
}
}}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add Header</span>
</Button>
</div>
</div>
<div class="form u-grid u-gap-16">
<FormList>
{#if headers}
{#each headers as [name, value], index}
<FormItem isMultiple>
<InputText
isMultiple
fullWidth
label="Name"
placeholder="Enter Name"
id={`key-${index}`}
bind:value={name} />
<InputText
isMultiple
fullWidth
label="Value"
placeholder="Enter value"
id={`value-${index}`}
bind:value />
<FormItemPart alignEnd>
<Button
text
disabled={(!name || !value) && index === 0}
on:click={() => {
if (index === 0) {
headers = [['', '']];
} else {
headers.splice(index, 1);
headers = headers;
}
}}>
<span class="icon-x" aria-hidden="true" />
</Button>
</FormItemPart>
</FormItem>
{/each}
{/if}
</FormList>
<Button
noMargin
text
disabled={headers?.length &&
headers[headers.length - 1][0] &&
headers[headers.length - 1][1]
? false
: true}
on:click={() => {
if (
headers[headers.length - 1][0] &&
headers[headers.length - 1][1]
) {
headers.push(['', '']);
headers = headers;
}
}}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Add Header</span>
</Button>
</div>

<InputTextarea
label="Body"
placeholder={`{ "myKey": "myValue" }`}
Expand Down
4 changes: 2 additions & 2 deletions ...es/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@
state="warning"
headerDivider={false}>
<p data-private>
Are you sure you want to disconnect {$func.name}? This will affect future deployments to
this function.
Are you sure you want to disconnect <b>{$func.name}</b>? This will affect future deployments
to this function.
</p>
<svelte:fragment slot="footer">
<Button text on:click={() => (show = false)}>Cancel</Button>
Expand Down
Loading

3 comments on commit 4af144c

@vercel
Copy link

@vercel vercel bot commented on 4af144c Sep 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

console – ./

console-git-main-appwrite.vercel.app
svelte-console.vercel.app
console-appwrite.vercel.app
demo.appwriters.com
brand-new-console.torsten.appwrite.org

@vercel
Copy link

@vercel vercel bot commented on 4af144c Sep 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

console-cloud – ./

console-cloud-git-main-appwrite.vercel.app
console-cloud-appwrite.vercel.app
console-cloud.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 4af144c Sep 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

console-preview – ./

console-next.vercel.app
console-preview-appwrite.vercel.app
console-preview-git-main-appwrite.vercel.app

Please sign in to comment.