From c49397b95caaf20c3823f744511a3f632ffd4cff Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 5 Nov 2023 12:54:25 +0100
Subject: [PATCH] settings refactor

---
 .../components/FlowStatusViewerInner.svelte   |  2 +-
 .../lib/components/SuperadminSettings.svelte  | 11 +++-
 .../src/lib/components/UserSettings.svelte    |  5 +-
 .../components/sidebar/SidebarContent.svelte  | 61 +++++++++++++++----
 .../lib/components/sidebar/UserMenu.svelte    | 41 +------------
 .../src/routes/(root)/(logged)/+layout.svelte |  3 -
 .../user/(user)/workspaces/+page.svelte       |  2 +-
 .../(logged)/workspace_settings/+page.svelte  |  5 +-
 8 files changed, 69 insertions(+), 61 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 0d7188ed7c..c9341be3e8 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -457,7 +457,7 @@
 			{:else if innerModules.length > 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
-						Step-by-step results
+						Step-by-step
 					</h3>
 
 					{#each innerModules as mod, i}
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index bac7c58933..9900e7afcb 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -2,7 +2,7 @@
 	import { UserService, GlobalUserInfo } from '$lib/gen'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import InviteGlobalUser from '$lib/components/InviteGlobalUser.svelte'
-	import { Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
+	import { Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
 	import { sendUserToast } from '$lib/toast'
 	import SearchItems from './SearchItems.svelte'
 	import { page } from '$app/stores'
@@ -15,6 +15,8 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import { userStore } from '$lib/stores'
+	import { switchWorkspace } from '$lib/storeUtils'
+	import { ExternalLink } from 'lucide-svelte'
 
 	let drawer: Drawer
 	let filter = ''
@@ -56,7 +58,7 @@
 />
 
 <Drawer bind:this={drawer} on:open={listUsers} size="1200px" on:clickAway={removeHash}>
-	<DrawerContent overflow_y={true} title="Superadmin Settings" on:close={closeDrawer}>
+	<DrawerContent overflow_y={true} title="Instance Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
 				<div class="flex justify-between">
@@ -66,6 +68,11 @@
 					<div><Uptodate /></div></div
 				>
 			</div>
+			<div class="flex flex-row-reverse">
+				<Button variant="border" color="dark" target="_blank" href="/?workspace=admins"
+					>Admins workspace&nbsp;<ExternalLink /></Button
+				>
+			</div>
 			<div class="pt-4 h-full">
 				<Tabs bind:selected={tab}>
 					<Tab value="users">Global Users</Tab>
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index d812dbe014..375eb97c0f 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -26,6 +26,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import Tooltip from './Tooltip.svelte'
 	import Version from './Version.svelte'
+	import DarkModeToggle from './sidebar/DarkModeToggle.svelte'
 
 	let drawer: Drawer
 
@@ -95,7 +96,9 @@
 				<div class="text-xs pt-1 pb-2 text-tertiary flex-col flex">
 					Windmill <Version />
 				</div>
-
+				<div class="font-semibold flex items-baseline">
+					Theme: <DarkModeToggle forcedDarkMode={false} />
+				</div>
 				{#if scopes == undefined}
 					<h2 class="border-b mt-4">User info</h2>
 					<div class="">
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index ae76da9123..ed099abf46 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import MenuLink from './MenuLink.svelte'
-	import { userStore } from '$lib/stores'
+	import { superadmin, userStore } from '$lib/stores'
 	import { SIDEBAR_SHOW_SCHEDULES } from '$lib/consts'
 	import {
 		BookOpen,
@@ -10,10 +10,13 @@
 		Cog,
 		DollarSign,
 		Eye,
+		FolderCog,
 		FolderOpen,
 		HelpCircle,
 		Home,
 		Play,
+		ServerCog,
+		Settings,
 		UserCog
 	} from 'lucide-svelte'
 	import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
@@ -21,6 +24,7 @@
 	import MenuButton from './MenuButton.svelte'
 	import { Icon } from 'svelte-awesome'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
+	import UserMenu from './UserMenu.svelte'
 
 	$: mainMenuLinks = [
 		{ label: 'Home', href: '/', icon: Home },
@@ -36,11 +40,44 @@
 	]
 
 	$: secondaryMenuLinks = [
+		// {
+		// 	label: 'Workspace',
+		// 	href: '/workspace_settings',
+		// 	icon: Cog,
+		// 	disabled: !$userStore?.is_admin && !$userStore?.is_super_admin
+		// },
 		{
-			label: 'Workspace',
-			href: '/workspace_settings',
-			icon: Cog,
-			disabled: !$userStore?.is_admin && !$userStore?.is_super_admin
+			label: 'Settings',
+			icon: Settings,
+			subItems: [
+				{
+					label: 'Account',
+					href: '#account-settings',
+					icon: UserCog,
+					faIcon: undefined
+				},
+				...($userStore?.is_admin || $superadmin
+					? [
+							{
+								label: 'Workspace',
+								href: '/workspace_settings',
+								icon: FolderCog,
+								faIcon: undefined
+							}
+					  ]
+					: []),
+				...($superadmin
+					? [
+							{
+								label: 'Instance',
+								href: '#superadmin-settings',
+								icon: ServerCog,
+								faIcon: undefined
+							}
+					  ]
+					: [])
+			],
+			disabled: $userStore?.operator
 		},
 		{ label: 'Workers', href: '/workers', icon: Bot, disabled: $userStore?.operator },
 		{
@@ -61,7 +98,8 @@
 					disabled: $userStore?.operator,
 					faIcon: undefined
 				}
-			]
+			],
+			disabled: $userStore?.operator
 		},
 		{ label: 'Audit Logs', href: '/audit_logs', icon: Eye, disabled: $userStore?.operator }
 	]
@@ -93,20 +131,21 @@
 	class="grow flex flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-2 gap-16 justify-between"
 >
 	<div class="space-y-1 pt-4 mb-6 md:mb-10">
-		{#each mainMenuLinks as menuLink (menuLink.href)}
+		{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 			<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 		{/each}
 	</div>
 	<div class="flex flex-col h-full justify-end">
 		<div class="space-y-0.5 mb-6 md:mb-10">
-			{#each secondaryMenuLinks as menuLink (menuLink.href)}
+			<UserMenu {isCollapsed} />
+			{#each secondaryMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
 				{#if menuLink.subItems}
 					<Menu>
 						<div slot="trigger">
 							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} />
 						</div>
-						{#each menuLink.subItems as subItem (subItem.href)}
-							<MenuItem>
+						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
+							<MenuItem disabled={subItem.disabled}>
 								<div class="py-1" role="none">
 									<a
 										href={subItem.href}
@@ -140,7 +179,7 @@
 						<div slot="trigger">
 							<MenuButton class="!text-2xs" {...menuLink} {isCollapsed} />
 						</div>
-						{#each menuLink.subItems as subItem (subItem.href)}
+						{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
 							<MenuItem>
 								<div class="py-1" role="none">
 									<a
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index c76edacfc1..e197af95f7 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/frontend/src/lib/components/sidebar/UserMenu.svelte
@@ -1,20 +1,12 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import { logout } from '$lib/logout'
-	import {
-		userStore,
-		usersWorkspaceStore,
-		superadmin,
-		usageStore,
-		premiumStore,
-		workspaceStore
-	} from '$lib/stores'
+	import { userStore, usersWorkspaceStore, superadmin, usageStore, premiumStore } from '$lib/stores'
 	import { faCog, faCrown, faHardHat, faSignOut } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import Menu from '../common/menu/MenuV2.svelte'
-	import { SUPERADMIN_SETTINGS_HASH, USER_SETTINGS_HASH } from './settings'
+	import { USER_SETTINGS_HASH } from './settings'
 	import { isCloudHosted } from '$lib/cloud'
-	import { switchWorkspace } from '$lib/storeUtils'
 	import { twMerge } from 'tailwind-merge'
 	import { Moon, Sun, User } from 'lucide-svelte'
 	import DarkModeObserver from '../DarkModeObserver.svelte'
@@ -67,35 +59,6 @@
 				</a>
 			</MenuItem>
 		</div>
-		{#if $superadmin}
-			<div class="py-1" role="none">
-				<MenuItem>
-					<a
-						href={SUPERADMIN_SETTINGS_HASH}
-						class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
-						role="menuitem"
-						tabindex="-1"
-					>
-						<Icon class="pr-0.5" data={faCog} /> Superadmin settings
-					</a>
-				</MenuItem>
-			</div>
-			<div class="py-1" role="none">
-				<button
-					on:click={() => {
-						if ($workspaceStore === 'admins') {
-							return
-						}
-						switchWorkspace('admins')
-					}}
-					class="text-secondary block text-left px-4 py-2 font-normal text-sm hover:bg-surface-hover hover:text-primary w-full"
-					role="menuitem"
-					tabindex="-1"
-				>
-					<Icon class="pr-0.5" data={faCog} /> Superadmin workspace
-				</button>
-			</div>
-		{/if}
 
 		<div class="py-1" role="none">
 			<button
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 47e894587b..1ac0086a5f 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -3,7 +3,6 @@
 	import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 
-	import UserMenu from '$lib/components/sidebar/UserMenu.svelte'
 	import {
 		AppService,
 		FlowService,
@@ -222,7 +221,6 @@
 
 						<div class="px-2 py-4 space-y-2 border-y border-gray-500">
 							<WorkspaceMenu />
-							<UserMenu />
 							<FavoriteMenu {favoriteLinks} />
 						</div>
 
@@ -261,7 +259,6 @@
 				</button>
 				<div class="px-2 py-4 space-y-2 border-y border-gray-700">
 					<WorkspaceMenu {isCollapsed} />
-					<UserMenu {isCollapsed} />
 					<FavoriteMenu {favoriteLinks} {isCollapsed} />
 				</div>
 
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index 9ecab95f57..d0f07bd18d 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -215,7 +215,7 @@
 		{#if $superadmin}
 			<Button variant="border" size="sm" on:click={superadminSettings.openDrawer}>
 				<Icon data={faCrown} class="mr-1" scale={1} />
-				Superadmin settings
+				Instance settings
 			</Button>
 		{/if}
 		<Button variant="border" size="sm" on:click={userSettings.openDrawer}>
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index 1311fc76f0..41341d15f8 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -26,13 +26,12 @@
 	import { sendUserToast } from '$lib/toast'
 	import { setQueryWithoutLoad, emptyString } from '$lib/utils'
 	import { faSlack } from '@fortawesome/free-brands-svg-icons'
-	import { faBarsStaggered, faCrown, faScroll } from '@fortawesome/free-solid-svg-icons'
+	import { faBarsStaggered, 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'
 
@@ -218,7 +217,7 @@
 					size="sm"
 					on:click={() => goto('#superadmin-settings')}
 				>
-					Superadmin settings
+					Instance settings
 				</Button>
 			{/if}</PageHeader
 		>