From b9b5a2faeb05f42678416e908bfc7a651e39fb91 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sun, 27 Mar 2022 21:48:25 +0200
Subject: [PATCH 1/3] add search in repo and branch select

---
 .../configuration/_GithubRepositories.svelte  | 89 ++++++++++---------
 src/tailwind.css                              | 20 +++++
 2 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/routes/applications/[id]/configuration/_GithubRepositories.svelte b/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
index 4afbea65c..99be47d10 100644
--- a/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let application;
-
+	import Select from 'svelte-select';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { get, post } from '$lib/api';
@@ -35,6 +35,9 @@
 			Authorization: `token ${$gitTokens.githubToken}`
 		});
 	}
+
+	let reposSelectOptions;
+	let branchSelectOptions;
 	async function loadRepositories() {
 		let page = 1;
 		let reposCount = 0;
@@ -49,8 +52,13 @@
 			}
 		}
 		loading.repositories = false;
+		reposSelectOptions = repositories.map((repo) => ({
+			value: repo.full_name,
+			label: repo.name
+		}));
 	}
-	async function loadBranches() {
+	async function loadBranches(event) {
+		selected.repository = event.detail.value;
 		loading.branches = true;
 		selected.branch = undefined;
 		selected.projectId = repositories.find((repo) => repo.full_name === selected.repository).id;
@@ -58,6 +66,10 @@
 			branches = await get(`${apiUrl}/repos/${selected.repository}/branches`, {
 				Authorization: `token ${$gitTokens.githubToken}`
 			});
+			branchSelectOptions = branches.map((branch) => ({
+				value: branch.name,
+				label: branch.name
+			}));
 			return;
 		} catch ({ error }) {
 			return errorNotification(error);
@@ -65,7 +77,8 @@
 			loading.branches = false;
 		}
 	}
-	async function isBranchAlreadyUsed() {
+	async function isBranchAlreadyUsed(event) {
+		selected.branch = event.detail.value;
 		try {
 			const data = await get(
 				`/applications/${id}/configuration/repository.json?repository=${selected.repository}&branch=${selected.branch}`
@@ -143,6 +156,8 @@
 			return errorNotification(error);
 		}
 	}
+
+	console.log(reposSelectOptions, repositories);
 </script>
 
 {#if repositories.length === 0 && loading.repositories === false}
@@ -153,47 +168,33 @@
 {:else}
 	<form on:submit|preventDefault={handleSubmit} class="flex flex-col justify-center text-center">
 		<div class="flex-col space-y-3 md:space-y-0 space-x-1">
-			{#if loading.repositories}
-				<select name="repository" disabled class="w-96">
-					<option selected value="">Loading repositories...</option>
-				</select>
-			{:else}
-				<select
-					name="repository"
-					class="w-96"
-					bind:value={selected.repository}
-					on:change={loadBranches}
-				>
-					<option value="" disabled selected>Please select a repository</option>
-					{#each repositories as repository}
-						<option value={repository.full_name}>{repository.name}</option>
-					{/each}
-				</select>
-			{/if}
-			<input class="hidden" bind:value={selected.projectId} name="projectId" />
-			{#if loading.branches}
-				<select name="branch" disabled class="w-96">
-					<option selected value="">Loading branches...</option>
-				</select>
-			{:else}
-				<select
-					name="branch"
-					class="w-96"
-					disabled={!selected.repository}
-					bind:value={selected.branch}
-					on:change={isBranchAlreadyUsed}
-				>
-					{#if !selected.repository}
-						<option value="" disabled selected>Select a repository first</option>
-					{:else}
-						<option value="" disabled selected>Please select a branch</option>
-					{/if}
-
-					{#each branches as branch}
-						<option value={branch.name}>{branch.name}</option>
-					{/each}
-				</select>
-			{/if}
+			<div class="flex gap-4">
+				<div class="custom-select-wrapper">
+					<Select
+						placeholder={loading.repositories
+							? 'Loading repositories ...'
+							: 'Please select a repository'}
+						id="repository"
+						on:select={loadBranches}
+						items={reposSelectOptions}
+						isDisabled={loading.repositories}
+					/>
+				</div>
+				<input class="hidden" bind:value={selected.projectId} name="projectId" />
+				<div class="custom-select-wrapper">
+					<Select
+						placeholder={loading.branches
+							? 'Loading branches ...'
+							: !selected.repository
+							? 'Please select a repository first'
+							: 'Please select a branch'}
+						id="repository"
+						on:select={isBranchAlreadyUsed}
+						items={branchSelectOptions}
+						isDisabled={loading.branches || !selected.repository}
+					/>
+				</div>
+			</div>
 		</div>
 		<div class="pt-5 flex-col flex justify-center items-center space-y-4">
 			<button
diff --git a/src/tailwind.css b/src/tailwind.css
index 1a30a3ac0..f5f83fdfe 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -37,6 +37,26 @@ textarea {
 	@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
 }
 
+#svelte .custom-select-wrapper .selectContainer.disabled input {
+	@apply placeholder:text-stone-600;
+}
+
+#svelte .custom-select-wrapper .selectContainer input {
+	@apply text-white;
+}
+
+#svelte .custom-select-wrapper .selectContainer {
+	@apply h-12 w-96 rounded border-none bg-coolgray-200  p-2 text-xs font-bold tracking-tight  placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
+}
+
+#svelte .listContainer {
+	@apply bg-coolgray-200 text-white;
+}
+
+#svelte .item.hover {
+	@apply bg-coolgray-100 text-white;
+}
+
 select {
 	@apply h-12 w-96 rounded bg-coolgray-200  p-2 text-xs font-bold tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:text-stone-600 md:text-sm;
 }

From 27431f779d4d30d5e190e614c65b0732420a7d27 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sun, 27 Mar 2022 21:50:28 +0200
Subject: [PATCH 2/3] clean css

---
 src/tailwind.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index f5f83fdfe..0c8f973b3 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -46,7 +46,7 @@ textarea {
 }
 
 #svelte .custom-select-wrapper .selectContainer {
-	@apply h-12 w-96 rounded border-none bg-coolgray-200  p-2 text-xs font-bold tracking-tight  placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
+	@apply h-12 w-96 rounded border-none bg-coolgray-200 p-2 text-xs font-bold tracking-tight  outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm;
 }
 
 #svelte .listContainer {

From cd15e68adcbece7941376d885e44919df260ab90 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sun, 27 Mar 2022 21:56:23 +0200
Subject: [PATCH 3/3] remove console.log

---
 .../applications/[id]/configuration/_GithubRepositories.svelte  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/applications/[id]/configuration/_GithubRepositories.svelte b/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
index 99be47d10..06e58be58 100644
--- a/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
+++ b/src/routes/applications/[id]/configuration/_GithubRepositories.svelte
@@ -156,8 +156,6 @@
 			return errorNotification(error);
 		}
 	}
-
-	console.log(reposSelectOptions, repositories);
 </script>
 
 {#if repositories.length === 0 && loading.repositories === false}