Skip to content

Commit ab39fb9

Browse files
hmacrhmacr
authored
Improve UX for repositories modal (#2809)
* Improve UX for repositories modal * use resolveRoute * color * use page.params
1 parent aef0808 commit ab39fb9

File tree

3 files changed

+79
-28
lines changed

3 files changed

+79
-28
lines changed

‎src/lib/components/git/repositories.svelte‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,12 @@
4949
let isLoadingRepositories = $state(null);
5050
let installationsMap = $state(null);
5151
let offset = $state(0);
52+
let connectingRepositoryId = $state<string | null>(null);
53+
let loadRepositoriesRequestId = 0;
5254
const limit = 5;
5355
5456
onMount(() => {
57+
isLoadingRepositories = true;
5558
loadInstallations();
5659
});
5760
@@ -115,6 +118,8 @@
115118
}
116119
117120
async function loadRepositories(installationId: string, search: string) {
121+
const requestId = ++loadRepositoriesRequestId;
122+
118123
const result = await sdk
119124
.forProject(page.params.region, page.params.project)
120125
.vcs.listRepositories({
@@ -125,6 +130,11 @@
125130
queries: [Query.limit(limit), Query.offset(offset)]
126131
});
127132
133+
// Stale request
134+
if (requestId !== loadRepositoriesRequestId) {
135+
return;
136+
}
137+
128138
$repositories.repositories =
129139
product === 'functions'
130140
? (result as unknown as Models.ProviderRepositoryRuntimeList)
@@ -186,10 +196,7 @@
186196
debouncedLoadRepositories.cancel();
187197
}}
188198
bind:value={selectedInstallation} />
189-
<InputSearch
190-
placeholder="Search repositories"
191-
bind:value={search}
192-
disabled={!search && !$repositories?.repositories?.length} />
199+
<InputSearch placeholder="Search repositories" bind:value={search} />
193200
</Layout.Stack>
194201
{/if}
195202
</Layout.Stack>
@@ -266,7 +273,11 @@
266273
size="xs"
267274
variant="secondary"
268275
style="flex-shrink: 0;"
269-
on:click={() => connect(repo)}>
276+
disabled={!!connectingRepositoryId}
277+
on:click={() => {
278+
connectingRepositoryId = repo.id;
279+
connect(repo);
280+
}}>
270281
Connect
271282
</PinkButton.Button>
272283
{/if}
@@ -305,7 +316,7 @@
305316
<PaginationInline
306317
{limit}
307318
bind:offset
308-
total={$repositories.total}
319+
total={isLoadingRepositories ? 0 : $repositories.total}
309320
hidePages={true}
310321
on:change={loadRepositoryPage} />
311322
</Layout.Stack>

‎src/routes/(console)/project-[region]-[project]/functions/create-function/+page.svelte‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
2-
import { base } from '$app/paths';
32
import { SvgIcon } from '$lib/components';
43
import { page } from '$app/state';
54
import { Click, trackEvent } from '$lib/actions/analytics';
65
import type { Models } from '@appwrite.io/console';
76
import { isSelfHosted } from '$lib/system';
8-
import { afterNavigate, goto } from '$app/navigation';
7+
import { goto } from '$app/navigation';
8+
import { resolveRoute } from '$lib/stores/navigation';
99
import { installation, repository } from '$lib/stores/vcs';
1010
import { Repositories } from '$lib/components/git';
1111
import {
@@ -26,11 +26,7 @@
2626
export let data;
2727
2828
const isVcsEnabled = $regionalConsoleVariables?._APP_VCS_ENABLED === true;
29-
const wizardBase = `${base}/project-${page.params.region}-${page.params.project}/functions`;
30-
let previousPage: string = wizardBase;
31-
afterNavigate(({ from }) => {
32-
previousPage = from?.url?.pathname || previousPage;
33-
});
29+
const wizardBase = resolveRoute('/(console)/project-[region]-[project]/functions', page.params);
3430
3531
let selectedRepository: string;
3632
@@ -56,11 +52,19 @@
5652
function connect(e: Models.ProviderRepository) {
5753
trackEvent(Click.ConnectRepositoryClick, { from: 'cover' });
5854
repository.set(e);
59-
goto(`${wizardBase}/create-function/repository-${e.id}?installation=${$installation.$id}`);
55+
goto(
56+
resolveRoute(
57+
'/(console)/project-[region]-[project]/functions/create-function/repository-[repository]',
58+
{
59+
...page.params,
60+
repository: e.id
61+
}
62+
) + `?installation=${$installation.$id}`
63+
);
6064
}
6165
</script>
6266

63-
<Wizard title="Create function" href={previousPage} column columnSize="l" hideFooter>
67+
<Wizard title="Create function" href={wizardBase} column columnSize="l" hideFooter>
6468
<Layout.Stack gap="l">
6569
<Layout.GridFraction start={4} end={6} gap="l" rowSize="auto">
6670
<Card.Base>
@@ -105,10 +109,13 @@
105109
}}
106110
{connect} />
107111
</Layout.Stack>
108-
{#if data.installations.total}
112+
{#if $installation}
109113
<Layout.Stack gap="l">
110114
<Divider />
111-
<Link variant="quiet" href="#/">
115+
<Link
116+
variant="quiet"
117+
external
118+
href={`https://github.com/settings/installations/${$installation.providerInstallationId}`}>
112119
<Layout.Stack direction="row" gap="xs">
113120
Missing a repository? check your permissions <Icon
114121
icon={IconArrowSmRight} />
@@ -140,7 +147,13 @@
140147
runtime: template.name
141148
});
142149
}}
143-
href={`${wizardBase}/create-function/template-${starterTemplate.id}?runtime=${runtimeDetail.$id}`}>
150+
href={resolveRoute(
151+
'/(console)/project-[region]-[project]/functions/create-function/template-[template]',
152+
{
153+
...page.params,
154+
template: starterTemplate.id
155+
}
156+
) + `?runtime=${runtimeDetail.$id}`}>
144157
<Layout.Stack direction="row" gap="s" alignItems="center">
145158
<Avatar size="xs" alt={template.name} empty={!template.name}>
146159
<SvgIcon name={iconName} iconSize="small" />
@@ -168,7 +181,13 @@
168181
<Card.Link
169182
radius="s"
170183
padding="xs"
171-
href={`${wizardBase}/create-function/template-${template.id}`}
184+
href={resolveRoute(
185+
'/(console)/project-[region]-[project]/functions/create-function/template-[template]',
186+
{
187+
...page.params,
188+
template: template.id
189+
}
190+
)}
172191
on:click={() => {
173192
trackEvent('click_connect_template', {
174193
from: 'cover',
@@ -198,7 +217,12 @@
198217
{/each}
199218
</Layout.Grid>
200219

201-
<Link variant="quiet" href={`${wizardBase}/templates`}>
220+
<Link
221+
variant="quiet"
222+
href={resolveRoute(
223+
'/(console)/project-[region]-[project]/functions/templates',
224+
page.params
225+
)}>
202226
<Layout.Stack direction="row" gap="xs">
203227
Browse all templates <Icon icon={IconArrowSmRight} />
204228
</Layout.Stack>
@@ -212,7 +236,10 @@
212236
on:click={() => {
213237
trackEvent('click_create_function_manual', { from: 'cover' });
214238
}}
215-
href={`${wizardBase}/create-function/manual`}>manually</Link>
239+
href={resolveRoute(
240+
'/(console)/project-[region]-[project]/functions/create-function/manual',
241+
page.params
242+
)}>manually</Link>
216243
or using the CLI.
217244
<Link href="https://appwrite.io/docs/products/functions/deployment" external
218245
>Learn more</Link

‎src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/+page.svelte‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
22
import { goto } from '$app/navigation';
3-
import { base } from '$app/paths';
43
import { page } from '$app/state';
54
import { Click, trackEvent } from '$lib/actions/analytics.js';
65
import Card from '$lib/components/card.svelte';
76
import { Repositories } from '$lib/components/git/index.js';
87
import Button from '$lib/elements/forms/button.svelte';
98
import { Wizard } from '$lib/layout';
9+
import { resolveRoute } from '$lib/stores/navigation.js';
1010
import { installation, repository } from '$lib/stores/vcs.js';
1111
import type { Models } from '@appwrite.io/console';
1212
import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -20,14 +20,21 @@
2020
from: 'cover'
2121
});
2222
repository.set(e);
23-
const target = `${base}/project-${page.params.region}-${page.params.project}/sites/create-site/repositories/repository-${e.id}?installation=${$installation.$id}`;
23+
const target =
24+
resolveRoute(
25+
'/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]',
26+
{
27+
...page.params,
28+
repository: e.id
29+
}
30+
) + `?installation=${$installation.$id}`;
2431
goto(target);
2532
}
2633
</script>
2734

2835
<Wizard
2936
title="Create site"
30-
href={`${base}/project-${page.params.region}-${page.params.project}/sites/`}
37+
href={resolveRoute('/(console)/project-[region]-[project]/sites', page.params)}
3138
hideFooter>
3239
{#if !!data?.installations?.total}
3340
<Fieldset legend="Git repository">
@@ -52,7 +59,10 @@
5259
</Typography.Text>
5360
</Layout.Stack>
5461
<Button
55-
href={`${base}/project-${page.params.region}-${page.params.project}/sites/create-site/templates`}
62+
href={resolveRoute(
63+
'/(console)/project-[region]-[project]/sites/create-site/templates',
64+
page.params
65+
)}
5666
secondary>View templates</Button>
5767
{:else}
5868
<Layout.Stack gap="s">
@@ -70,9 +80,12 @@
7080
href="https://appwrite.io/docs/products/sites/deploy-from-git"
7181
external
7282
secondary>Docs</Button>
73-
<Button
74-
href={`https://github.com/${data.installations.installations[0].organization}`}
75-
text>Go to GitHub</Button>
83+
{#if $installation}
84+
<Button
85+
href={`https://github.com/settings/installations/${$installation.providerInstallationId}`}
86+
external
87+
text>Go to GitHub</Button>
88+
{/if}
7689
</Layout.Stack>
7790
{/if}
7891
</Layout.Stack>

0 commit comments

Comments
 (0)