fix: some refactor, reload repo on disconnect

src/lib/wizards/functions/steps/gitConfiguration.svelte

@@ -3,6 +3,7 @@
     import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
+    import { sortBranches } from '$routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte';
     import { choices, installation, repository } from '../store';
 
     $choices.rootDir ??= '';
@@ -20,13 +21,7 @@
             $installation.$id,
             $repository.id
         );
-        const sorted = branches.sort((a, b) => {
-            if (a.name === 'main' || a.name === 'master') {
-                return -1;
-            }
-
-            return a.name > b.name ? -1 : 1;
-        });
+        const sorted = sortBranches(branches);
         $choices.branch = sorted[0]?.name ?? null;
 
         if (!$choices.branch) {
@@ -57,6 +52,17 @@
                 <div class="loader u-margin-32" />
             </div>
         {:then branches}
+            {@const options =
+                branches
+                    ?.map((branch) => {
+                        return {
+                            value: branch.name,
+                            label: branch.name
+                        };
+                    })
+                    ?.sort((a, b) => {
+                        return a.label > b.label ? 1 : -1;
+                    }) ?? []}
             <div class="u-margin-block-start-24">
                 <FormList>
                     <InputSelectSearch
@@ -73,12 +79,7 @@
                         }}
                         interactiveOutput
                         name="branch"
-                        options={branches?.map((branch) => {
-                            return {
-                                value: branch.name,
-                                label: branch.name
-                            };
-                        }) ?? []} />
+                        {options} />
                     <InputText
                         id="root"
                         label="Root directory"

src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte

@@ -42,7 +42,7 @@
     <ExecuteFunction />
     <UpdateName />
     <UpdateRuntime />
-    <UpdateConfiguration installations={data.installations} />
+    <UpdateConfiguration />
     <UpdateLogging />
     <UpdatePermissions />
     <UpdateEvents />

src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts

@@ -31,6 +31,7 @@ export const load: PageLoad = async ({ params, depends }) => {
 
     return {
         variables,
-        globalVariables
+        globalVariables,
+        installations: sdk.forProject.vcs.listInstallations()
     };
 };

src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte

@@ -7,10 +7,14 @@
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
+    import { createEventDispatcher } from 'svelte';
     import { func } from '../store';
 
     export let show = false;
     const functionId = $page.params.function;
+    let error = '';
+
+    const dispatch = createEventDispatcher();
 
     const handleSubmit = async () => {
         try {
@@ -33,23 +37,31 @@
                 ''
             );
             await invalidate(Dependencies.FUNCTION);
+            dispatch('success');
             addNotification({
                 type: 'success',
                 message: `Repository has been disconnected from your function`
             });
             trackEvent(Submit.FunctionDisconnectRepo);
             show = false;
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.FunctionDisconnectRepo);
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.FunctionDisconnectRepo);
         }
     };
+
+    $: if (!show) {
+        error = '';
+    }
 </script>
 
-<Modal bind:show onSubmit={handleSubmit} icon="exclamation" state="warning" headerDivider={false}>
+<Modal
+    bind:show
+    bind:error
+    onSubmit={handleSubmit}
+    icon="exclamation"
+    state="warning"
+    headerDivider={false}>
     <svelte:fragment slot="header">Disconnect Git repository</svelte:fragment>
     <p data-private>
         Are you sure you want to disconnect {$func.name}? This will affect future deployments to

src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte

@@ -12,9 +12,10 @@
     import { func, repositories } from '../store';
     import { invalidate } from '$app/navigation';
     import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
+    import { sortBranches } from './updateConfiguration.svelte';
+    import { installations } from '$lib/wizards/functions/store';
 
     export let show: boolean;
-    export let installationsList: Models.InstallationList;
 
     const functionId = $page.params.function;
 
@@ -29,7 +30,7 @@
     let selectedDir: string;
     let silentMode = false;
 
-    let installationsOptions = installationsList.installations.map((installation) => {
+    let installationsOptions = $installations.installations.map((installation) => {
         return {
             value: installation.$id,
             label: installation.organization
@@ -108,13 +109,7 @@
             selectedRepoId
         );
 
-        branchesList.branches = branchesList.branches.sort((a, b) => {
-            if (a.name === 'main' || a.name === 'master') {
-                return -1;
-            }
-
-            return a.name > b.name ? -1 : 1;
-        });
+        branchesList.branches = sortBranches(branchesList.branches);
 
         selectedBranch = branchesList?.branches[0].name;
     }
@@ -126,7 +121,7 @@
 
     $: selectedRepo = (repositoriesList ?? []).find((repo) => repo.id === selectedRepoId) ?? null;
     $: selectedInstallation =
-        (installationsList?.installations ?? []).find(
+        ($installations?.installations ?? []).find(
             (installation) => installation.$id === selectedInstallationId
         ) ?? null;
 </script>

src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte

@@ -1,9 +1,22 @@
+<script context="module" lang="ts">
+    export function sortBranches(branches: Models.Branch[]) {
+        return branches.sort((a, b) => {
+            if (a.name === 'main' || a.name === 'master') {
+                return -1;
+            }
+
+            return a.name > b.name ? 1 : -1;
+        });
+    }
+</script>
+
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
         AvatarGroup,
+        Box,
         CardGrid,
         Collapsible,
         CollapsibleItem,
@@ -33,8 +46,8 @@
     import { wizard } from '$lib/stores/wizard';
     import ConnectExisting from '$lib/wizards/functions/connectExisting.svelte';
     import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
+    import { installations } from '$lib/wizards/functions/store';
 
-    export let installations: Models.InstallationList;
     const functionId = $page.params.function;
 
     let entrypoint: string;
@@ -141,13 +154,7 @@
 
     async function getBranches(installation: string, repo: string) {
         branchesList = await sdk.forProject.vcs.listRepositoryBranches(installation, repo);
-        branchesList.branches = branchesList.branches.sort((a, b) => {
-            if (a.name === 'main' || a.name === 'master') {
-                return -1;
-            }
-
-            return a.name > b.name ? -1 : 1;
-        });
+        branchesList.branches = sortBranches(branchesList.branches);
 
         selectedBranch = $func?.providerBranch ?? branchesList.branches[0].name;
     }
@@ -207,7 +214,7 @@
                             {/if}
                         </svelte:fragment>
                         {#if repository}
-                            <div class="box" style:--box-border-radius="var(--border-radius-small)">
+                            <Box radius="small">
                                 <div class="u-flex u-gap-16">
                                     <div class="avatar is-size-x-small">
                                         <span class={getProviderIcon(repository.provider)} />
@@ -268,7 +275,7 @@
                                         <span class="icon-external-link" />
                                     </Button>
                                 </div>
-                            </div>
+                            </Box>
                         {:else}
                             <article class="card-git card is-border-dashed is-no-shadow">
                                 <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
@@ -315,10 +322,10 @@
     </CardGrid>
 </Form>
 
-{#if !installations?.total && showGit}
+{#if !$installations?.total && showGit}
     <GitInstallationModal bind:showGitInstall={showGit} />
 {:else}
-    <GitConfigurationModal bind:show={showGit} installationsList={installations} />
+    <GitConfigurationModal bind:show={showGit} />
 {/if}
 
-<DisconnectRepo bind:show={showDisconnect} />
+<DisconnectRepo bind:show={showDisconnect} on:success={loadRepository} />