Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: even more design from 1.4 QA #533

Merged
merged 3 commits into from
Sep 6, 2023
Merged

fix: even more design from 1.4 QA #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
800262e
fix: design fixes from QA
ArmanNik Sep 6, 2023
e7b16b7
fix: design and logic in env variables card
ArmanNik Sep 6, 2023
256c1cf
fix: git disconect modal design
ArmanNik Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 4 additions & 16 deletions src/lib/wizards/functions/steps/gitConfiguration.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading