fix: show workspace color if superadmin and not in workspace + change workspace name when switching workspace (#5625)

* fix: show workspace color if superadmin and not in workspace

* svelte 5

* move local workspace color to store

* fix: changing name not reactive when swtiching workspace

frontend/src/lib/components/ApiConnectForm.svelte

@@ -5,7 +5,13 @@
 		type ResourceType,
 		type GetGlobalConnectedRepositoriesResponse
 	} from '$lib/gen'
-	import { workspaceStore, enterpriseLicense, userWorkspaces, userStore } from '$lib/stores'
+	import {
+		workspaceStore,
+		enterpriseLicense,
+		userWorkspaces,
+		userStore,
+		workspaceColor
+	} from '$lib/stores'
 	import { base } from '$lib/base'
 	import { emptySchema, emptyString } from '$lib/utils'
 	import SchemaForm from './SchemaForm.svelte'
@@ -516,14 +522,10 @@
 																<tr class="border-t border-gray-200 dark:border-gray-700">
 																	<td class="py-2">{installation.account_id}</td>
 																	<td class="py-2">
-																		{#if $userWorkspaces.find((w) => w.id === installation.workspace_id)?.color}
+																		{#if $workspaceColor}
 																			<span
 																				class="inline-flex items-center px-2 py-0.5 rounded text-xs"
-																				style="background-color: {$userWorkspaces.find(
-																					(w) => w.id === installation.workspace_id
-																				)?.color}20; color: {$userWorkspaces.find(
-																					(w) => w.id === installation.workspace_id
-																				)?.color}"
+																				style="background-color: {$workspaceColor}20; color: {$workspaceColor}"
 																			>
 																				{installation.workspace_id}
 																			</span>

frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { workspaceStore, usersWorkspaceStore } from '$lib/stores'
+	import { workspaceStore, usersWorkspaceStore, workspaceColor } from '$lib/stores'
 	import Button from '../common/button/Button.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { WorkspaceService } from '$lib/gen'
@@ -7,25 +7,25 @@
 	import { Pen } from 'lucide-svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
-	let colorEnabled = false
-	let workspaceColor: string | undefined = undefined
-	let savedWorkspaceColor: string | undefined = undefined
-	let lastWorkspace: string | undefined = undefined
+	let { open = false } = $props<{ open?: boolean }>()
 
-	export let open = false
+	let colorEnabled = $state(false)
+	let editingColor = $state<string | undefined>(undefined)
+	let lastWorkspace = $state<string | undefined>(undefined)
 
-	$: $usersWorkspaceStore && $workspaceStore !== lastWorkspace && onWorkspaceChange()
+	$effect(() => {
+		if ($workspaceStore !== lastWorkspace) {
+			lastWorkspace = $workspaceStore
+			editingColor = $workspaceColor ?? undefined
+			colorEnabled = !!$workspaceColor
+		}
+	})
 
-	function onWorkspaceChange() {
-		lastWorkspace = $workspaceStore
-		savedWorkspaceColor = $usersWorkspaceStore?.workspaces.find(
-			(w) => w.id === $workspaceStore
-		)?.color
-		workspaceColor = savedWorkspaceColor
-	}
-
-	$: colorEnabled = !!workspaceColor
-	$: if (colorEnabled && !workspaceColor) generateRandomColor()
+	$effect(() => {
+		if (colorEnabled && !editingColor) {
+			generateRandomColor()
+		}
+	})
 
 	function generateRandomColor() {
 		const randomColor =
@@ -33,11 +33,11 @@
 			Math.floor(Math.random() * 16777215)
 				.toString(16)
 				.padStart(6, '0')
-		workspaceColor = randomColor
+		editingColor = randomColor
 	}
 
 	async function changeWorkspaceColor() {
-		const colorToSave = colorEnabled && workspaceColor ? workspaceColor : undefined
+		const colorToSave = colorEnabled && editingColor ? editingColor : undefined
 		open = false
 		await WorkspaceService.changeWorkspaceColor({
 			workspace: $workspaceStore!,
@@ -47,7 +47,6 @@
 		})
 
 		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
-		savedWorkspaceColor = colorToSave
 		sendUserToast(`Workspace color updated.`)
 	}
 </script>
@@ -55,10 +54,10 @@
 <div>
 	<p class="font-semibold text-sm">Workspace color</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		{#if savedWorkspaceColor}
+		{#if $workspaceColor}
 			<div
 				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
-				style="background-color: {savedWorkspaceColor}"
+				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
 			<span class="text-xs text-secondary">No color set</span>
@@ -76,9 +75,7 @@
 			}}
 		/>
 	</div>
-	<p class="italic text-xs">
-		Color to identify the current workspace in the list of workspaces
-	</p>
+	<p class="italic text-xs"> Color to identify the current workspace in the list of workspaces </p>
 </div>
 
 <Modal bind:open title="Change Workspace Color">
@@ -88,12 +85,12 @@
 			<div class="flex items-center gap-2">
 				<Toggle bind:checked={colorEnabled} options={{ right: 'Enable' }} />
 				{#if colorEnabled}
-					<input class="w-10" type="color" bind:value={workspaceColor} disabled={!colorEnabled} />
+					<input class="w-10" type="color" bind:value={editingColor} disabled={!colorEnabled} />
 				{/if}
 				<input
 					type="text"
 					class="w-24 text-sm"
-					bind:value={workspaceColor}
+					bind:value={editingColor}
 					disabled={!colorEnabled}
 				/>
 				<Button on:click={generateRandomColor} size="xs" disabled={!colorEnabled}>Random</Button>

frontend/src/lib/components/settings/ChangeWorkspaceName.svelte

@@ -6,15 +6,21 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import { Pen } from 'lucide-svelte'
 
-	let newName = ''
-	let currentName = ''
+	let { open = false } = $props<{ open?: boolean }>()
+
+	let newName = $state('')
+	let currentName = $state('')
+
+	$effect(() => {
+		if ($workspaceStore) {
+			getWorkspaceName()
+		}
+	})
 
 	async function getWorkspaceName() {
 		currentName = await WorkspaceService.getWorkspaceName({ workspace: $workspaceStore! })
 	}
 
-	getWorkspaceName()
-
 	async function renameWorkspace() {
 		open = false
 		await WorkspaceService.changeWorkspaceName({
@@ -28,8 +34,6 @@
 		newName = ''
 		getWorkspaceName()
 	}
-
-	export let open = false
 </script>
 
 <div>
@@ -50,9 +54,7 @@
 		/>
 	</div>
 
-	<p class="italic text-xs">
-		Displayable name
-	</p>
+	<p class="italic text-xs"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">

frontend/src/lib/components/sidebar/WorkspaceMenu.svelte

@@ -5,7 +5,8 @@
 		userStore,
 		userWorkspaces,
 		workspaceStore,
-		workspaceUsageStore
+		workspaceUsageStore,
+		workspaceColor
 	} from '$lib/stores'
 	import { Building, Plus, Settings } from 'lucide-svelte'
 	import MenuButton from '$lib/components/sidebar/MenuButton.svelte'
@@ -61,7 +62,7 @@
 			icon={Building}
 			label={$workspaceStore ?? ''}
 			{isCollapsed}
-			color={$userWorkspaces.find((w) => w.id === $workspaceStore)?.color}
+			color={$workspaceColor}
 			{trigger}
 		/>
 	</svelte:fragment>
@@ -153,9 +154,7 @@
 					>{$workspaceUsageStore}/1000 free workspace execs</span
 				>
 				<div class="w-full bg-gray-200 h-1">
-					<div
-						class="bg-blue-400 h-1"
-						style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
+					<div class="bg-blue-400 h-1" style="width: {Math.min($workspaceUsageStore, 1000) / 10}%"
 					></div>
 				</div>
 			{/if}

frontend/src/lib/stores.ts

@@ -9,7 +9,8 @@ import {
 	type OperatorSettings,
 	type TokenResponse,
 	type UserWorkspaceList,
-	type WorkspaceDefaultScripts
+	type WorkspaceDefaultScripts,
+	WorkspaceService
 } from './gen'
 import { getLocalSetting } from './utils'
 
@@ -202,3 +203,32 @@ export const dbSchemas = writable<DBSchemas>({})
 export const instanceSettingsSelectedTab = writable('Core')
 
 export const isCriticalAlertsUIOpen = writable(false)
+
+export const workspaceColor: Readable<string | null | undefined> = derived(
+	[workspaceStore, usersWorkspaceStore, superadmin],
+	([workspaceStore, usersWorkspaceStore, superadmin], set: (value: string | undefined) => void) => {
+		if (!workspaceStore) {
+			set(undefined)
+			return
+		}
+
+		// First try to get the color from usersWorkspaceStore
+		const color = usersWorkspaceStore?.workspaces.find((w) => w.id === workspaceStore)?.color
+
+		if (color) {
+			set(color)
+			return
+		}
+
+		// If not found and user is superadmin, try to get it from superadmin list
+		if (!superadmin) {
+			set(undefined)
+			return
+		}
+
+		WorkspaceService.listWorkspacesAsSuperAdmin().then((workspaces) => {
+			const superadminColor = workspaces.find((w) => w.id === workspaceStore)?.color
+			set(superadminColor)
+		})
+	}
+)