From d709053202565ecad288a086dcfd4eec356d345f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 19 Oct 2024 12:11:29 +0200
Subject: [PATCH] various nits

---
 .../lib/components/InstanceGroupEditor.svelte |   8 +-
 frontend/src/lib/components/PageHeader.svelte |   4 +-
 .../settings/WorkspaceUserSettings.svelte     |  10 +-
 .../lib/components/sidebar/MenuLink.svelte    |   2 +-
 .../(logged)/workspace_settings/+page.svelte  | 118 ++++++------------
 5 files changed, 58 insertions(+), 84 deletions(-)

diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index 9b2ebf30fd..a5f90dd969 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/frontend/src/lib/components/InstanceGroupEditor.svelte
@@ -6,6 +6,7 @@
 	import Skeleton from './common/skeleton/Skeleton.svelte'
 	import TableCustom from './TableCustom.svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let name: string
 
@@ -57,7 +58,12 @@
 				>
 			</div>
 		</div>
-		<h2>Members ({members?.length ?? 0})</h2>
+		<h2
+			>Members ({#if members?.length != undefined}{members?.length ?? 0}{:else}<Loader2
+					class="animate-spin"
+					size={10}
+				/>{/if})</h2
+		>
 		<div class="flex items-start">
 			<input type="text" placeholder="john@acme.com" bind:value={email} />
 			<Button
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index a8ecc28d00..b3c9e10004 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -7,10 +7,10 @@
 	export let primary: boolean = true
 </script>
 
-<div class="flex flex-row flex-wrap justify-between pt-6 pb-2 my-4">
+<div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
 	{#if primary}
 		<span class="flex items-center gap-2">
-			<h1 class="!text-2xl font-semibold leading-6 tracking-tight">{title}</h1>
+			<h1 class="!text-2xl font-semibold whitespace-nowrap leading-6 tracking-tight">{title}</h1>
 			{#if tooltip != '' || documentationLink}
 				<Tooltip {documentationLink}>
 					{tooltip}
diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
index 0ee008b11b..43aa4af06c 100644
--- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
@@ -98,7 +98,9 @@
 	async function removeAllInvitesFromDomain() {
 		await Promise.all(
 			invites
-				.filter((x) => (isCloudHosted() ? x.email.endsWith('@' + auto_invite_domain ?? '') : true))
+				.filter((x) =>
+					isCloudHosted() ? x.email.endsWith('@' + (auto_invite_domain ?? '')) : true
+				)
 				.map(({ email, is_admin, operator }) =>
 					WorkspaceService.deleteInvite({
 						workspace: $workspaceStore ?? '',
@@ -137,9 +139,11 @@
 		</div>
 	</div>
 </div>
-<div class="flex flex-row justify-between items-center">
+<div class="flex flex-row justify-between items-center pt-2">
 	<PageHeader
-		title="Members ({filteredUsers?.length ?? users?.length ?? ''})"
+		title="Members {(filteredUsers?.length ?? users?.length) != undefined
+			? `(${filteredUsers?.length ?? users?.length})`
+			: ''}"
 		primary={true}
 		tooltip="Manage users manually or enable SSO authentication."
 		documentationLink="https://www.windmill.dev/docs/core_concepts/authentification"
diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte
index eba95b1313..0c6d1cd2dc 100644
--- a/frontend/src/lib/components/sidebar/MenuLink.svelte
+++ b/frontend/src/lib/components/sidebar/MenuLink.svelte
@@ -17,7 +17,7 @@
 		if (href === `${base}/`) {
 			isSelected = $page.url.pathname === href
 		} else {
-			isSelected = $page.url.pathname.includes(href)
+			isSelected = $page.url.pathname.startsWith(href)
 		}
 	})
 </script>
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 24beda13ed..dcef769e29 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { replaceState } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { isCloudHosted } from '$lib/cloud'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
@@ -37,7 +36,8 @@
 		X,
 		Plus,
 		Loader2,
-		Save
+		Save,
+		ExternalLink
 	} from 'lucide-svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 
@@ -136,34 +136,10 @@
 			| 'general'
 			| 'webhook'
 			| 'deploy_to'
-			| 'error_handler') ?? 'users'
+			| 'error_handler') ?? 'userss'
 	let usingOpenaiClientCredentialsOauth = false
 
 	const latestGitSyncHubScript = hubPaths.gitSync
-	// function getDropDownItems(username: string): DropdownItem[] {
-	// 	return [
-	// 		{
-	// 			displayName: 'Manage user',
-	// 			href: `/admin/user/manage/${username}`
-	// 		},
-	// 		{
-	// 			displayName: 'Delete',
-	// 			action: () => deleteUser(username)
-	// 		}
-	// 	];
-	// }
-
-	// async function deleteUser(username: string): Promise<void> {
-	// 	try {
-	// 		await UserService.deleteUser({ workspace: $workspaceStore!, username });
-	// 		users = await UserService.listUsers({ workspace: $workspaceStore! });
-	// 		fuse?.setCollection(users);
-	// 		sendUserToast(`User ${username} has been removed`);
-	// 	} catch (err) {
-	// 		console.error(err);
-	// 		sendUserToast(`Cannot delete user: ${err}`, true);
-	// 	}
-	// }
 
 	async function editSlackCommand(): Promise<void> {
 		initialPath = scriptPath
@@ -520,11 +496,7 @@
 		}
 	}
 
-	$: {
-		if ($workspaceStore) {
-			loadSettings()
-		}
-	}
+	$: $workspaceStore && loadSettings()
 
 	async function editErrorHandler() {
 		if (errorHandlerScriptPath) {
@@ -602,31 +574,6 @@
 			timeout: 5000
 		})
 	}
-
-	let debounced: NodeJS.Timeout | undefined = undefined
-	export function setQueryWithoutLoad(
-		url: URL,
-		args: { key: string; value: string | null | undefined }[],
-		bounceTime?: number
-	): void {
-		debounced && clearTimeout(debounced)
-		debounced = setTimeout(() => {
-			const nurl = new URL(url.toString())
-			for (const { key, value } of args) {
-				if (value) {
-					nurl.searchParams.set(key, value)
-				} else {
-					nurl.searchParams.delete(key)
-				}
-			}
-
-			try {
-				replaceState(nurl.toString(), $page.state)
-			} catch (e) {
-				console.error(e)
-			}
-		}, bounceTime ?? 200)
-	}
 </script>
 
 <Portal name="workspace-settings">
@@ -652,7 +599,9 @@
 			<Tabs
 				bind:selected={tab}
 				on:selected={() => {
-					setQueryWithoutLoad($page.url, [{ key: 'tab', value: tab }], 0)
+					// setQueryWithoutLoad($page.url, [{ key: 'tab', value: tab }], 0)
+					$page.url.searchParams.set('tab', tab)
+					goto(`?${$page.url.searchParams.toString()}`)
 				}}
 			>
 				<Tab size="xs" value="users">
@@ -933,6 +882,7 @@
 					Workspace error handler is a Windmill EE feature. It enables using your current Slack
 					connection or a custom script to send notifications anytime any job would fail.
 				</Alert>
+				<div class="pb-2" />
 			{/if}
 			<div class="flex flex-col gap-4 my-8">
 				<div class="flex flex-col gap-1">
@@ -1261,26 +1211,33 @@
 				<div class="mb-2" />
 			{/if}
 			{#if gitSyncSettings != undefined}
-				{#if $enterpriseLicense}
-					<div class="flex mt-5 mb-5 gap-1">
-						<Button
-							color="blue"
-							disabled={gitSyncSettings?.repositories?.some((elmt) =>
+				<div class="flex mt-5 mb-5 gap-8">
+					<Button
+						color="blue"
+						disabled={!$enterpriseLicense ||
+							gitSyncSettings?.repositories?.some((elmt) =>
 								emptyString(elmt.git_repo_resource_path)
 							)}
-							on:click={() => {
-								editWindmillGitSyncSettings()
-								console.log('Saving git sync settings', gitSyncSettings)
-							}}>Save Git sync settings</Button
-						>
-					</div>
-				{/if}
+						on:click={() => {
+							editWindmillGitSyncSettings()
+							console.log('Saving git sync settings', gitSyncSettings)
+						}}>Save git sync settings {!$enterpriseLicense ? '(ee only)' : ''}</Button
+					>
+
+					<Button
+						color="dark"
+						target="_blank"
+						endIcon={{ icon: ExternalLink }}
+						href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
+						>See sync jobs</Button
+					>
+				</div>
 
 				<div class="flex flex-wrap gap-20">
 					<div class="max-w-md w-full">
 						{#if Array.isArray(gitSyncSettings?.include_path)}
 							<h4 class="flex gap-2 mb-4"
-								>Filter on path<Tooltip>
+								>Path filters<Tooltip>
 									Only scripts, flows and apps with their path matching one of those filters will be
 									synced to the Git repositories below. The filters allow '*'' and '**' characters,
 									with '*'' matching any character allowed in paths until the next slash (/) and
@@ -1320,11 +1277,16 @@
 								Add filter
 							</Button>
 						</div>
+						<div class="pt-2" />
+						<Alert type="info" title="Only new updates trigger git sync">
+							Only new changes matching the filters will trigger a git sync. You still need to
+							initalize the repo to the desired state first.
+						</Alert>
 					</div>
 
 					<div class="max-w-md w-full">
 						<h4 class="flex gap-2 mb-4"
-							>Filter on type<Tooltip>
+							>Type filters<Tooltip>
 								On top of the filter path above, you can include only certain type of object to be
 								synced with the Git repository.
 								<br />By default everything is synced.
@@ -1645,13 +1607,15 @@
 
 						<br />
 
-						. For the git repo to be representative of the entire workspace, it is recommended to
-						set it up using the Windmill CLI before turning this option on.
+						For the git repo to be representative of the entire workspace, it is recommended to set
+						it up using the Windmill CLI before turning this option on.
 
 						<br /><br />
 
 						Not familiar with Windmill CLI?
-						<a href="https://www.windmill.dev/docs/advanced/cli">Check out the docs</a>
+						<a href="https://www.windmill.dev/docs/advanced/cli" class="text-primary"
+							>Check out the docs</a
+						>
 
 						<br /><br />
 
@@ -1663,8 +1627,8 @@
 						<pre class="overflow-auto max-h-screen"
 							><code
 								>wmill workspace add  {$workspaceStore} {$workspaceStore} {`${$page.url.protocol}//${$page.url.hostname}/`}
-echo 'includes: ["f/**"]' > wmill.yaml
-wmill sync pull --raw --skip-variables --skip-secrets --skip-resources
+wmill init
+wmill sync pull
 git add -A
 git commit -m 'Initial commit'
 git push</code