Skip to content

Commit 7c70098

Browse files
HarshMN2345HarshMN2345
authored
Merge branch 'main' into fix-SER-26-connect-button-not-shown-if-repo-name-to-long
2 parents 1aa098a + f08ff9b commit 7c70098

File tree

9 files changed

+176
-106
lines changed

9 files changed

+176
-106
lines changed

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

Lines changed: 127 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
import { page } from '$app/state';
2424
import Card from '../card.svelte';
2525
import SkeletonRepoList from './skeletonRepoList.svelte';
26-
import { onMount, untrack } from 'svelte';
26+
import { onMount, untrack, onDestroy } from 'svelte';
27+
import { debounce } from '$lib/helpers/debounce';
2728
2829
let {
2930
action = $bindable('select'),
@@ -52,6 +53,28 @@
5253
loadInstallations();
5354
});
5455
56+
const debouncedLoadRepositories = debounce(
57+
async (installationId: string, searchTerm: string) => {
58+
isLoadingRepositories = true;
59+
try {
60+
await loadRepositories(installationId, searchTerm);
61+
} finally {
62+
isLoadingRepositories = false;
63+
}
64+
},
65+
300
66+
);
67+
68+
$effect(() => {
69+
if (selectedInstallation && search !== undefined) {
70+
debouncedLoadRepositories(selectedInstallation, search);
71+
}
72+
});
73+
74+
onDestroy(() => {
75+
debouncedLoadRepositories.cancel();
76+
});
77+
5578
async function loadInstallations() {
5679
if (installationList) {
5780
if (installationList.installations.length) {
@@ -71,7 +94,7 @@
7194
.vcs.listInstallations();
7295
if (installations.length) {
7396
if (!selectedInstallation) {
74-
untrack(() => (selectedInstallation = installationList.installations[0].$id));
97+
untrack(() => (selectedInstallation = installations[0].$id));
7598
}
7699
installation.set(installations.find((entry) => entry.$id === selectedInstallation));
77100
}
@@ -80,22 +103,6 @@
80103
}
81104
82105
async function loadRepositories(installationId: string, search: string) {
83-
if (
84-
!$repositories ||
85-
$repositories.installationId !== installationId ||
86-
$repositories.search !== search
87-
) {
88-
await fetchRepos(installationId, search);
89-
}
90-
91-
if ($repositories.repositories.length && action === 'select') {
92-
selectedRepository = $repositories.repositories[0].id;
93-
$repository = $repositories.repositories[0];
94-
}
95-
return $repositories.repositories;
96-
}
97-
98-
async function fetchRepos(installationId: string, search: string) {
99106
if (product === 'functions') {
100107
$repositories.repositories = (
101108
(await sdk
@@ -117,9 +124,9 @@
117124
)) as unknown as Models.ProviderRepositoryFrameworkList
118125
).frameworkProviderRepositories;
119126
}
120-
121127
$repositories.search = search;
122128
$repositories.installationId = installationId;
129+
return $repositories.repositories;
123130
}
124131
125132
selectedRepository;
@@ -168,10 +175,7 @@
168175
installationsMap.find((entry) => entry.$id === selectedInstallation)
169176
);
170177

171-
isLoadingRepositories = true;
172-
loadRepositories(selectedInstallation, search).then(() => {
173-
isLoadingRepositories = false;
174-
});
178+
debouncedLoadRepositories.cancel();
175179
}}
176180
bind:value={selectedInstallation} />
177181
<InputSearch
@@ -185,20 +189,52 @@
185189
<!-- manual installation change -->
186190
{#if isLoadingRepositories}
187191
<SkeletonRepoList />
188-
{:else}
189-
{#await loadRepositories(selectedInstallation, search)}
190-
<SkeletonRepoList />
191-
{:then response}
192-
{#if response?.length}
193-
<Paginator items={response} hideFooter={response?.length <= 6} limit={6}>
194-
{#snippet children(
195-
paginatedItems: Models.ProviderRepositoryRuntime[] &
196-
Models.ProviderRepositoryFramework[]
197-
)}
198-
<Table.Root columns={1} let:root>
199-
{#each paginatedItems as repo}
200-
<Table.Row.Base {root}>
201-
<Table.Cell {root}>
192+
{:else if $repositories?.repositories?.length}
193+
<Paginator
194+
items={$repositories.repositories}
195+
hideFooter={$repositories.repositories?.length <= 6}
196+
limit={6}>
197+
{#snippet children(
198+
paginatedItems: Models.ProviderRepositoryRuntime[] &
199+
Models.ProviderRepositoryFramework[]
200+
)}
201+
<Table.Root columns={1} let:root>
202+
{#each paginatedItems as repo}
203+
<Table.Row.Base {root}>
204+
<Table.Cell {root}>
205+
<Layout.Stack direction="row" alignItems="center" gap="s">
206+
{#if action === 'select'}
207+
<input
208+
class="is-small u-margin-inline-end-8"
209+
type="radio"
210+
name="repositories"
211+
bind:group={selectedRepository}
212+
onchange={() => repository.set(repo)}
213+
value={repo.id} />
214+
{/if}
215+
{#if product === 'sites'}
216+
{#if repo?.framework && repo.framework !== 'other'}
217+
<Avatar size="xs" alt={repo.name}>
218+
<SvgIcon
219+
name={getFrameworkIcon(repo.framework)}
220+
iconSize="small" />
221+
</Avatar>
222+
{:else}
223+
<Avatar size="xs" alt={repo.name} empty />
224+
{/if}
225+
{:else}
226+
{@const iconName = repo?.runtime
227+
? repo.runtime.split('-')[0]
228+
: undefined}
229+
<Avatar size="xs" alt={repo.name} empty={!iconName}>
230+
<SvgIcon name={iconName} iconSize="small" />
231+
</Avatar>
232+
{/if}
233+
<Layout.Stack
234+
gap="s"
235+
direction="row"
236+
alignItems="center"
237+
justifyContent="space-between">
202238
<Layout.Stack
203239
direction="row"
204240
alignItems="center"
@@ -279,36 +315,62 @@
279315
on:click={() => connect(repo)}>
280316
Connect
281317
</PinkButton.Button>
318+
gap="s"
319+
alignItems="center">
320+
<Typography.Text
321+
truncate
322+
color="--fgcolor-neutral-secondary">
323+
{repo.name}
324+
</Typography.Text>
325+
{#if repo.private}
326+
<Icon
327+
size="s"
328+
icon={IconLockClosed}
329+
color="--fgcolor-neutral-tertiary" />
330+
{/if}
331+
{#if !$isSmallViewport}
332+
<time datetime={repo.pushedAt}>
333+
<Typography.Caption
334+
variant="400"
335+
truncate
336+
color="--fgcolor-neutral-tertiary">
337+
{timeFromNow(repo.pushedAt)}
338+
</Typography.Caption>
339+
</time>
282340
{/if}
283341
</Layout.Stack>
284-
</Table.Cell>
285-
</Table.Row.Base>
286-
{/each}
287-
</Table.Root>
288-
{/snippet}
289-
</Paginator>
290-
{:else if search}
291-
<EmptySearch hidePages hidePagination bind:search target="repositories">
292-
<svelte:fragment slot="actions">
293-
{#if search}
294-
<Button secondary on:click={() => (search = '')}>
295-
Clear search
296-
</Button>
297-
{/if}
298-
</svelte:fragment>
299-
</EmptySearch>
300-
{:else}
301-
<Card>
302-
<Layout.Stack alignItems="center" justifyContent="center">
303-
<Typography.Text
304-
variation="m-500"
305-
color="--fgcolor-neutral-tertiary">
306-
No repositories available
307-
</Typography.Text>
308-
</Layout.Stack>
309-
</Card>
310-
{/if}
311-
{/await}
342+
{#if action === 'button'}
343+
<PinkButton.Button
344+
size="xs"
345+
variant="secondary"
346+
on:click={() => connect(repo)}>
347+
Connect
348+
</PinkButton.Button>
349+
{/if}
350+
</Layout.Stack>
351+
</Layout.Stack>
352+
</Table.Cell>
353+
</Table.Row.Base>
354+
{/each}
355+
</Table.Root>
356+
{/snippet}
357+
</Paginator>
358+
{:else if search}
359+
<EmptySearch hidePages hidePagination bind:search target="repositories">
360+
<svelte:fragment slot="actions">
361+
{#if search}
362+
<Button secondary on:click={() => (search = '')}>Clear search</Button>
363+
{/if}
364+
</svelte:fragment>
365+
</EmptySearch>
366+
{:else}
367+
<Card>
368+
<Layout.Stack alignItems="center" justifyContent="center">
369+
<Typography.Text variation="m-500" color="--fgcolor-neutral-tertiary">
370+
No repositories available
371+
</Typography.Text>
372+
</Layout.Stack>
373+
</Card>
312374
{/if}
313375
{/if}
314376
</Layout.Stack>

‎src/lib/images/promos/database-upsert-dark.png

563 KB
Loading

‎src/lib/images/promos/database-upsert-light.png

306 KB
Loading

‎src/routes/(console)/bottomAlerts.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import BulkApiLight from '$lib/images/promos/bulk-api-light.png';
77

88
import CSVImportDark from '$lib/images/promos/csv-import-placeholder-dark.png';
99
import CSVImportLight from '$lib/images/promos/csv-import-placeholder-light.png';
10+
import DatabaseUpsertDark from '$lib/images/promos/database-upsert-dark.png';
11+
import DatabaseUpsertLight from '$lib/images/promos/database-upsert-light.png';
1012

1113
const listOfPromotions: BottomModalAlertItem[] = [];
1214

@@ -52,8 +54,27 @@ if (isCloud) {
5254
},
5355
show: true
5456
};
57+
const databaseUpsert: BottomModalAlertItem = {
58+
id: 'modal:database_upsert_announcement',
59+
src: {
60+
dark: DatabaseUpsertDark,
61+
light: DatabaseUpsertLight
62+
},
63+
title: 'Introducing Database Upsert',
64+
message: 'A new Appwrite Database feature, built to simplify your database interactions.',
65+
plan: 'free',
66+
importance: 8,
67+
scope: 'project',
68+
cta: {
69+
text: 'Read announcement',
70+
link: () => 'https://appwrite.io/blog/post/announcing-database-upsert',
71+
external: true,
72+
hideOnClick: true
73+
},
74+
show: true
75+
};
5576

56-
listOfPromotions.push(bulkApiPromo, csvImportPromo);
77+
listOfPromotions.push(databaseUpsert, bulkApiPromo, csvImportPromo);
5778
}
5879

5980
export function addBottomModalAlerts() {

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,11 @@
2323
selectedRelationship = null;
2424
}
2525
26-
$: tableColumns = [{ id: '$id', width: 200 }, ...args.map((id) => ({ id }))];
26+
$: tableColumns = [
27+
// take full width if no display names set
28+
{ id: '$id', width: args.length ? 200 : undefined },
29+
...args.map((id) => ({ id }))
30+
];
2731
</script>
2832

2933
<Modal bind:show title={selectedRelationship?.key} hideFooter>
@@ -33,7 +37,7 @@
3337
<Table.Root let:root columns={tableColumns}>
3438
<svelte:fragment slot="header" let:root>
3539
<Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
36-
{#if args?.length}
40+
{#if args.length}
3741
{#each args as arg}
3842
<Table.Header.Cell column={arg} {root}>{arg}</Table.Header.Cell>
3943
{/each}
@@ -47,7 +51,7 @@
4751
<Table.Cell column="$id" {root}>
4852
<Id value={doc.$id}>{doc.$id}</Id>
4953
</Table.Cell>
50-
{#if args?.length}
54+
{#if args.length}
5155
{#each args as arg}
5256
<Table.Cell column={arg} {root}>{doc[arg]}</Table.Cell>
5357
{/each}

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,9 @@
7373
(names?.length && !last(names))
7474
);
7575
76-
const hasExhaustedOptions = $derived(getValidAttributes().length === names?.length);
76+
const hasExhaustedOptions = $derived(
77+
getValidAttributes().length === names.filter(Boolean).length
78+
);
7779
</script>
7880

7981
<Form onSubmit={updateDisplayName}>

0 commit comments

Comments
 (0)