From 4269f9467f303a16fca5e10396f472f5d59ca301 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 5 Nov 2023 11:18:12 +0100
Subject: [PATCH] minor UX improvements

---
 .../lib/components/InviteGlobalUser.svelte    |  1 +
 .../lib/components/SuperadminSettings.svelte  | 13 +++-
 .../src/lib/components/home/ItemsList.svelte  | 59 +++++++++++--------
 .../src/lib/components/home/TreeView.svelte   |  6 +-
 .../settings/WorkspaceUserSettings.svelte     | 10 +++-
 .../(logged)/workspace_settings/+page.svelte  | 16 ++++-
 6 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index c062191464..a703af5a0a 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -31,6 +31,7 @@
 	}
 </script>
 
+<h3 class="mb-4">Add new user to instance</h3>
 <div class="flex flex-row flex-wrap gap-2 mb-2 items-end">
 	<label class="block shrink min-w-0">
 		<span class="text-secondary text-sm">Email</span>
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index 6a1fc0d0a9..bac7c58933 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -44,6 +44,8 @@
 	}
 
 	let tab: 'users' | 'settings' = 'users'
+
+	let nbDisplayed = 50
 </script>
 
 <SearchItems
@@ -75,6 +77,8 @@
 								<div class="py-2 mb-4">
 									<InviteGlobalUser on:new={listUsers} />
 								</div>
+
+								<h3>All instance users</h3>
 								<div class="pb-1" />
 								<div>
 									<input placeholder="Search users" bind:value={filter} class="input mt-1" />
@@ -90,7 +94,7 @@
 										</tr>
 										<tbody slot="body" class="overflow-y-auto w-full h-full max-h-full">
 											{#if filteredUsers && users}
-												{#each filteredUsers as { email, super_admin, login_type, name } (email)}
+												{#each filteredUsers.slice(0, nbDisplayed) as { email, super_admin, login_type, name } (email)}
 													<tr class="border">
 														<td>{email}</td>
 														<td>{login_type}</td>
@@ -136,6 +140,13 @@
 										</tbody>
 									</TableCustom>
 								</div>
+								{#if filteredUsers && filteredUsers?.length > 50 && nbDisplayed < filteredUsers.length}
+									<span class="text-xs"
+										>{nbDisplayed} users out of {filteredUsers.length}
+										<button class="ml-4" on:click={() => (nbDisplayed += 50)}>load 50 more</button
+										></span
+									>
+								{/if}
 							</div>
 						</TabContent>
 						<TabContent value="settings">
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 7c90e5cefe..856f69ee42 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -387,30 +387,12 @@
 			{/each}
 		{:else if filteredItems.length === 0}
 			<NoItemFound />
-		{:else}
+		{:else if treeView}
+			{@const groupedItems = groupItems(items)}
 			<div class="border rounded-md">
-				{#if treeView}
-					{#each (groupItems(items) ?? []).slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
-						{#if item}
-							<TreeView
-								{item}
-								on:scriptChanged={loadScripts}
-								on:flowChanged={loadFlows}
-								on:appChanged={loadApps}
-								on:rawAppChanged={loadRawApps}
-								on:reload={() => {
-									loadScripts()
-									loadFlows()
-									loadApps()
-									loadRawApps()
-								}}
-								{showCode}
-							/>
-						{/if}
-					{/each}
-				{:else}
-					{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
-						<Item
+				{#each groupedItems.slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
+					{#if item}
+						<TreeView
 							{item}
 							on:scriptChanged={loadScripts}
 							on:flowChanged={loadFlows}
@@ -424,10 +406,35 @@
 							}}
 							{showCode}
 						/>
-					{/each}
-				{/if}
+					{/if}
+				{/each}
 			</div>
-			{#if items && items?.length > 30 && !treeView && nbDisplayed < items.length}
+			{#if groupedItems.length > 30 && nbDisplayed < groupedItems.length}
+				<span class="text-xs"
+					>{nbDisplayed} root nodes out of {groupedItems.length}
+					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
+				>
+			{/if}
+		{:else}
+			<div class="border rounded-md">
+				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
+					<Item
+						{item}
+						on:scriptChanged={loadScripts}
+						on:flowChanged={loadFlows}
+						on:appChanged={loadApps}
+						on:rawAppChanged={loadRawApps}
+						on:reload={() => {
+							loadScripts()
+							loadFlows()
+							loadApps()
+							loadRawApps()
+						}}
+						{showCode}
+					/>
+				{/each}
+			</div>
+			{#if items && items?.length > 30 && nbDisplayed < items.length}
 				<span class="text-xs"
 					>{nbDisplayed} items out of {items.length}
 					<button class="ml-4" on:click={() => (nbDisplayed += 30)}>load 30 more</button></span
diff --git a/frontend/src/lib/components/home/TreeView.svelte b/frontend/src/lib/components/home/TreeView.svelte
index 4188d59e2e..4155f09ca9 100644
--- a/frontend/src/lib/components/home/TreeView.svelte
+++ b/frontend/src/lib/components/home/TreeView.svelte
@@ -59,7 +59,7 @@
 		</div>
 		{#if opened}
 			<div transition:slide>
-				{#each item.items.slice(0, showMax) as subItem (subItem['path'] ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
 					<svelte:self
 						item={subItem}
 						on:scriptChanged
@@ -71,6 +71,8 @@
 					/>
 				{/each}
 				{#if showMax < item.items.length}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
 					<div
 						class="text-center text-sm text-secondary cursor-pointer hover:text-primary"
 						on:click={() => {
@@ -117,7 +119,7 @@
 		</div>
 		{#if opened}
 			<div transition:slide>
-				{#each item.items.slice(0, showMax) as subItem (subItem['path'] ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
 					<svelte:self
 						item={subItem}
 						on:scriptChanged
diff --git a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
index ff20f4ef00..0e980c5c5b 100644
--- a/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
+++ b/frontend/src/lib/components/settings/WorkspaceUserSettings.svelte
@@ -78,6 +78,8 @@
 				)
 		)
 	}
+
+	let nbInviteDisplayed = 50
 </script>
 
 <SearchItems
@@ -273,7 +275,7 @@
 		</Head>
 		<tbody class="divide-y bg-surface">
 			{#if invites?.length > 0}
-				{#each invites as { email, is_admin, operator }}
+				{#each invites.slice(0, nbInviteDisplayed) as { email, is_admin, operator }}
 					<Row>
 						<Cell first>{email}</Cell>
 						<Cell>
@@ -314,6 +316,12 @@
 			{/if}
 		</tbody>
 	</DataTable>
+	{#if invites && invites?.length > 50 && nbInviteDisplayed < invites.length}
+		<span class="text-xs"
+			>{nbInviteDisplayed} invites out of {invites.length}
+			<button class="ml-4" on:click={() => (nbInviteDisplayed += 50)}>load 50 more</button></span
+		>
+	{/if}
 </div>
 
 <PageHeader
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index bc481841e8..1311fc76f0 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -26,12 +26,13 @@
 	import { sendUserToast } from '$lib/toast'
 	import { setQueryWithoutLoad, emptyString } from '$lib/utils'
 	import { faSlack } from '@fortawesome/free-brands-svg-icons'
-	import { faBarsStaggered, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faBarsStaggered, faCrown, faScroll } from '@fortawesome/free-solid-svg-icons'
 	import { Slack } from 'lucide-svelte'
 
 	import PremiumInfo from '$lib/components/settings/PremiumInfo.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import TestOpenaiKey from '$lib/components/copilot/TestOpenaiKey.svelte'
+	import { Icon } from 'svelte-awesome'
 
 	const slackErrorHandler = 'hub/5792/workspace-or-schedule-error-handler-slack'
 
@@ -209,7 +210,18 @@
 
 <CenteredPage>
 	{#if $userStore?.is_admin || $superadmin}
-		<PageHeader title="Workspace settings: {$workspaceStore}" />
+		<PageHeader title="Workspace settings: {$workspaceStore}"
+			>{#if $superadmin}
+				<Button
+					variant="border"
+					color="dark"
+					size="sm"
+					on:click={() => goto('#superadmin-settings')}
+				>
+					Superadmin settings
+				</Button>
+			{/if}</PageHeader
+		>
 
 		<div class="overflow-x-auto scrollbar-hidden">
 			<Tabs