windmill-components 1.35.42 → 1.35.43

package/components/landing/ScriptBox.svelte

@@ -1,5 +1,7 @@
 <script>import { goto } from '$app/navigation';
 import { truncateHash } from '../../utils';
+import { faPencil, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { Button, Badge, ActionRow } from '../common';
 export let script;
 </script>
 
@@ -12,70 +14,41 @@ export let script;
 	<div class="inline-flex justify-between w-full">
 		<div class="text-xs">{script.path}</div>
 
-		<span class="bg-gray-100 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ">
+		<Badge color="gray">
 			{truncateHash(script.hash)}
-		</span>
+		</Badge>
 	</div>
 	<div class="inline-flex space-x-1 w-full">
-		<span class="bg-blue-100 text-blue-800 text-xs font-semibold  px-2.5 py-0.5 rounded ">
-			{String(script.language).toUpperCase()}
-		</span>
-		{#if script.is_trigger}
-			<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">
-				TRIGGER
-			</span>
+		<Badge color="blue" capitalize>
+			{script.language}
+		</Badge>
+		{#if script.kind !== 'script'}
+			<Badge color="green" capitalize>
+				{script.kind}
+			</Badge>
 		{/if}
 	</div>
-	<div class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full">
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/edit/${script.hash}?step=2`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-				/>
-			</svg>
-			Edit
-		</button>
+	<ActionRow>
+		<svelte:fragment slot="right">
+			<Button
+				on:click={() => goto(`/scripts/edit/${script.hash}?step=2`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPencil }}
+			>
+				Edit
+			</Button>
 
-		<button
-			on:click|stopPropagation={() => goto(`/scripts/run/${script.hash}`)}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
-		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
-			Run
-		</button>
-	</div>
+			<Button
+				on:click={() => goto(`/scripts/run/${script.hash}`)}
+				color="dark"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faPlay }}
+			>
+				Run
+			</Button>
+		</svelte:fragment>
+	</ActionRow>
 </div>

package/components/landing/ScriptGettingStarted.svelte

@@ -1,93 +1,47 @@
 <script>
 	import { goto } from '$app/navigation'
+	import { faExternalLink, faFile, faPlus } from '@fortawesome/free-solid-svg-icons'
+	import Button from '../common/button/Button.svelte'
+	import HatIcon from '../icons/HatIcon.svelte'
 </script>
 
 <div class="p-4 border border-gray-300 rounded-md bg-gray-50 ">
 	<div class="flex items-center">
 		<h3 class="inline-flex items-center text-lg font-medium text-gray-700 ">
-			<svg
-				class="w-6 h-6 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
-					d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
-				/><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
-				/>
-			</svg>
+			<HatIcon class="w-6 h-6 mr-2" />
 			Getting started
 		</h3>
 	</div>
 	<div class="mt-2 mb-4 text-sm text-gray-700 ">
 		Create a new script or find inspiration on the Hub!
 	</div>
-	<div class="inline-flex flex-wrap gap-y-2">
-		<button
+	<div class="inline-flex flex-wrap gap-y-2 ">
+		<Button
 			on:click={() => goto('scripts/add')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="dark"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faPlus }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/></svg
-			>
 			Create script
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://docs.windmill.dev/docs/getting_started/scripts')}
-			type="button"
-			class="mr-2 inline-flex items-center text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
+			color="blue"
+			size="xs"
+			btnClasses="mr-2"
+			startIcon={{ icon: faFile }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-				/>
-			</svg>
 			Script documentation
-		</button>
-		<button
+		</Button>
+		<Button
 			on:click={() => goto('https://hub.windmill.dev/')}
-			type="button"
-			class="inline-flex items-center text-gray-700 bg-transparent border border-gray-700 hover:bg-gray-800 hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center"
-			data-dismiss-target="#alert-additional-content-5"
-			aria-label="Close"
+			color="light"
+			variant="border"
+			size="xs"
+			startIcon={{ icon: faExternalLink }}
 		>
-			<svg
-				class="w-4 h-4 mr-2"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-				/>
-			</svg>
 			Explore community scripts on WindmillHub
-		</button>
+		</Button>
 	</div>
 </div>

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,5 +1,6 @@
 <script>import { truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
+import { NEVER_TESTED_THIS_FAR } from '../flows/flowStateUtils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
 import WarningMessage from './WarningMessage.svelte';
@@ -31,15 +32,19 @@ function selectProp(key) {
 
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
-		{#if level != 0}<span class="cursor-pointer hover:bg-slate-200 px-1 rounded" on:click={collapse}
-				>(-)</span
-			>{/if}
+		{#if level != 0}<span
+				class="cursor-pointer hover:bg-slate-200 px-1 rounded"
+				on:click={collapse}
+			>
+				(-)
+			</span>
+		{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100"
-						>{!isArray ? key : index}:</button
-					>
+					<button on:click={() => selectProp(key)} class="key rounded px-1 hover:bg-sky-100">
+						{!isArray ? key : index}:
+					</button>
 
 					{#if getTypeAsString(json[key]) === 'object'}
 						<svelte:self
@@ -55,8 +60,10 @@ function selectProp(key) {
 							class="val rounded px-1 hover:bg-sky-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
-							{#if json[key] === undefined}
+							{#if json[key] === NEVER_TESTED_THIS_FAR}
 								<WarningMessage />
+							{:else if json[key] == undefined}
+								<span>undefined</span>
 							{:else}
 								<span>{truncate(JSON.stringify(json[key]), 40)}</span>
 							{/if}
@@ -83,6 +90,8 @@ function selectProp(key) {
 		border-left: 1px dotted lightgray;
 		--tw-text-opacity: 1;
 		color: rgb(0 0 0 / var(--tw-text-opacity));
+		font-size: 0.875rem;
+		line-height: 1.25rem;
 	}
 
 	.val {

package/components/propertyPicker/PropPicker.svelte

@@ -1,22 +1,48 @@
-<script>import ObjectViewer from './ObjectViewer.svelte';
+<script>import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import ObjectViewer from './ObjectViewer.svelte';
 import { keepByKey } from './utils';
 export let pickableProperties = {};
 const EMPTY_STRING = '';
 let search = '';
+const { propPickerConfig, clearFocus } = getContext('PropPickerWrapper');
 $: propsFiltered =
     search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search);
 </script>
 
-<div
-	class="relative p-3  bg-white rounded-lg border border-gray-200 shadow-md max-h-max overflow-y-scroll"
->
-	<div class="overflow-y-auto max-h-96">
-		<input
-			type="text"
-			bind:value={search}
-			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
-			placeholder="Search prop..."
-		/>
-		<ObjectViewer json={propsFiltered} on:select />
+<div class="px-4 pt-4">
+	<div class="flex justify-between items-center h-8">
+		<span class="font-bold text-sm">Context</span>
+		<div class="flex space-x-2 items-center">
+			{#if $propPickerConfig}
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Selected input: ${$propPickerConfig?.propName}`}
+				</span>
+				<span
+					class="flex items-center bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded dark:bg-green-200 dark:text-green-900"
+				>
+					{`Mode: ${$propPickerConfig?.insertionMode}`}
+				</span>
+				<button
+					class="border px-2 py-1 text-xs rounded-md flex items-center hover:bg-gray-50 hover:text-gray-900"
+					on:click={() => clearFocus()}
+				>
+					<Icon data={faClose} class="mr-2" scale={0.8} />
+					Deselect
+				</button>
+			{/if}
+		</div>
 	</div>
+	<input
+		type="text"
+		bind:value={search}
+		class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
+		placeholder="Search prop..."
+	/>
+</div>
+<div class="overflow-y-auto mb-8">
+	<ObjectViewer json={propsFiltered} on:select />
 </div>

package/components/propertyPicker/WarningMessage.svelte

@@ -1,16 +1,3 @@
-<div class="flex px-4 pt-1 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<svg
-		class="flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800"
-		fill="currentColor"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-		><path
-			fill-rule="evenodd"
-			d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-			clip-rule="evenodd"
-		/></svg
-	>
-	<div class="ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800">
-		Previous results are not available unless a preview is run on the previous step.
-	</div>
+<div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
+	<div class="text-sm font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>

package/components/script_editor/LogPanel.svelte

@@ -11,8 +11,11 @@ import DisplayResult from '../DisplayResult.svelte';
 import TableCustom from '../TableCustom.svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import { Highlight } from 'svelte-highlight';
-import { json, python, typescript } from 'svelte-highlight/languages';
+import { json } from 'svelte-highlight/languages';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import HighlightCode from '../HighlightCode.svelte';
+import { VSplitPane } from 'svelte-split-pane';
+import LogViewer from '../LogViewer.svelte';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -22,6 +25,9 @@ export let lastSave;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
+export function setFocusToLogs() {
+    selectedTab = 'logs';
+}
 function openDrawer(newContent) {
     drawerContent = newContent;
     drawerOpen = true;
@@ -39,134 +45,117 @@ function closeDrawer() {
 			<pre class="overflow-x-auto break-all relative h-full m-2 text-xs bg-white shadow-inner p-2">
 				{drawerContent?.content}
 			</pre>
-		{:else if drawerContent?.mode === 'deno'}
-			<Highlight language={typescript} code={drawerContent?.content} />
-		{:else if drawerContent?.mode === 'python3'}
-			<Highlight language={python} code={drawerContent?.content} />
+		{:else if drawerContent?.mode === 'deno' || drawerContent?.mode === 'python3' || drawerContent?.mode === 'go'}
+			<HighlightCode language={drawerContent?.mode} code={drawerContent?.content} />
 		{/if}
 	</DrawerContent>
 </Drawer>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="logs"><span class="text-xs">Logs</span></Tab>
-	<Tab value="results"><span class="text-xs">Results</span></Tab>
+	<Tab value="logs"><span class="text-xs">Logs/Result</span></Tab>
 	<Tab value="history"><span class="text-xs">History</span></Tab>
 	<Tab value="last_save"><span class="text-xs">Last save</span></Tab>
 
 	<svelte:fragment slot="content">
-		<div class="px-4">
-			<TabContent value="logs">
-				<pre class="whitespace-pre-wrap break-all relative h-full bg-gray-50 text-xs p-2">
-          {#if previewJob && previewJob.logs}
-						{previewJob.logs}
-					{:else if previewIsLoading}
-						Starting preview ...
-					{:else}
-						No preview is available yet
-					{/if}
-        </pre>
-			</TabContent>
-			<TabContent value="results">
-				<pre class="overflow-x-auto break-all relative h-full">
-          {#if previewJob && 'result' in previewJob && previewJob.result}
-						<DisplayResult result={previewJob.result} />
-					{:else if previewIsLoading}
-						Running...
-					{:else}
-						No output is available yet
-					{/if}
+		<TabContent value="logs" class="h-full w-full relative">
+			<VSplitPane topPanelSize="50%" downPanelSize="50%">
+				<top slot="top">
+					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
+				</top>
+				<down slot="down">
+					<pre
+						class="overflow-x-auto break-all relative h-full p-2 text-sm">{#if previewJob && 'result' in previewJob && previewJob.result}<DisplayResult
+								result={previewJob.result}
+							/>
+						{:else if previewIsLoading}Waiting for Result...
+						{:else}Test to see result here
+						{/if}
         </pre>
-			</TabContent>
-			<TabContent value="history">
-				<TableCustom>
-					<tr slot="header-row">
-						<th class="text-xs">Id</th>
-						<th class="text-xs">Created at</th>
-						<th class="text-xs">Success</th>
-						<th class="text-xs">Result</th>
-						<th class="text-xs">Code</th>
-						<th class="text-xs">Logs</th>
-					</tr>
-					<tbody slot="body">
-						{#each pastPreviews as { id, created_at, success, result }}
-							<tr class="">
-								<td class="text-xs">
-									<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
-								</td>
-								<td class="text-xs">{displayDate(created_at)}</td>
-								<td class="text-xs">
-									{#if success}
-										<Icon class="text-green-600" data={check} scale={0.6} />
-									{:else}
-										<Icon class="text-red-700" data={faTimes} scale={0.6} />
-									{/if}
-								</td>
-								<td class="text-xs">
-									<a
-										href="#result"
-										class="text-xs"
-										on:click={() => {
-											openDrawer({ mode: 'json', content: result, title: 'Result' })
-										}}
-									>
-										{JSON.stringify(result).substring(0, 30)}...
-									</a>
-								</td>
-								<td class="text-xs">
-									<a
-										href="#code"
-										class="text-xs"
-										on:click={async () => {
-											const code = (
-												await JobService.getCompletedJob({
-													workspace: $workspaceStore ?? 'NO_W',
-													id
-												})
-											).raw_code
+				</down>
+			</VSplitPane>
+		</TabContent>
+		<TabContent value="history" class="p-2">
+			<TableCustom>
+				<tr slot="header-row">
+					<th class="text-xs">Id</th>
+					<th class="text-xs">Created at</th>
+					<th class="text-xs">Success</th>
+					<th class="text-xs">Result</th>
+					<th class="text-xs">Code</th>
+					<th class="text-xs">Logs</th>
+				</tr>
+				<tbody slot="body">
+					{#each pastPreviews as { id, created_at, success, result }}
+						<tr class="">
+							<td class="text-xs">
+								<a class="pr-3" href="/run/{id}" target="_blank">{id.substring(30)}</a>
+							</td>
+							<td class="text-xs">{displayDate(created_at)}</td>
+							<td class="text-xs">
+								{#if success}
+									<Icon class="text-green-600" data={check} scale={0.6} />
+								{:else}
+									<Icon class="text-red-700" data={faTimes} scale={0.6} />
+								{/if}
+							</td>
+							<td class="text-xs">
+								<a
+									href="#result"
+									class="text-xs"
+									on:click={() => {
+										openDrawer({ mode: 'json', content: result, title: 'Result' })
+									}}
+								>
+									{JSON.stringify(result).substring(0, 30)}...
+								</a>
+							</td>
+							<td class="text-xs">
+								<a
+									href="#code"
+									class="text-xs"
+									on:click={async () => {
+										const code = (
+											await JobService.getCompletedJob({
+												workspace: $workspaceStore ?? 'NO_W',
+												id
+											})
+										).raw_code
 
-											openDrawer({ mode: lang, content: String(code), title: `Code ${lang}` })
-										}}
-									>
-										View code
-									</a>
-								</td>
-								<td>
-									<a
-										href="#logs"
-										class="text-xs"
-										on:click={async () => {
-											const logs = (
-												await JobService.getCompletedJob({
-													workspace: $workspaceStore ?? 'NO_W',
-													id
-												})
-											).logs
-											openDrawer({ mode: 'plain', content: String(logs), title: `Code ${lang}` })
-										}}
-									>
-										View logs
-									</a>
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</TableCustom>
-			</TabContent>
-			<TabContent value="last_save">
-				{#if lastSave}
-					<a
-						href="#last_save"
-						class="text-xs"
-						on:click={() => {
-							openDrawer({ mode: lang, content: String(lastSave), title: `Code ${lang}` })
-						}}
-					>
-						View last local save for path {path}
-					</a>
-				{:else}
-					No local save
-				{/if}
-			</TabContent>
-		</div>
+										openDrawer({ mode: lang, content: String(code), title: `Code ${lang}` })
+									}}
+								>
+									View code
+								</a>
+							</td>
+							<td>
+								<a
+									href="#logs"
+									class="text-xs"
+									on:click={async () => {
+										const logs = (
+											await JobService.getCompletedJob({
+												workspace: $workspaceStore ?? 'NO_W',
+												id
+											})
+										).logs
+										openDrawer({ mode: 'plain', content: String(logs), title: `Code ${lang}` })
+									}}
+								>
+									View logs
+								</a>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</TableCustom>
+		</TabContent>
+		<TabContent value="last_save" class="p-2">
+			{#if lastSave}
+				<h2>last local save for path {path}</h2>
+				<HighlightCode language={lang} code={lastSave} />
+			{:else}
+				No local save
+			{/if}
+		</TabContent>
 	</svelte:fragment>
 </Tabs>

package/components/script_editor/LogPanel.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         previewJob: Job | undefined;
         pastPreviews?: CompletedJob[] | undefined;
         lastSave: string | null;
+        setFocusToLogs?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +19,6 @@ export declare type LogPanelProps = typeof __propDef.props;
 export declare type LogPanelEvents = typeof __propDef.events;
 export declare type LogPanelSlots = typeof __propDef.slots;
 export default class LogPanel extends SvelteComponentTyped<LogPanelProps, LogPanelEvents, LogPanelSlots> {
+    get setFocusToLogs(): () => void;
 }
 export {};

package/components/sidebar/SidebarContent.svelte

@@ -12,7 +12,6 @@ const mainMenuLinks = [
     { label: 'Resources', href: '/resources', icon: faCubes }
 ];
 $: secondaryMenuLinks = [
-    { label: 'Workers', href: '/workers', icon: faRobot },
     { label: 'Groups', href: '/groups', icon: faUsersCog },
     { label: 'Audit Logs', href: '/audit_logs', icon: faEye },
     {
@@ -20,7 +19,8 @@ $: secondaryMenuLinks = [
         href: '/workspace_settings',
         icon: faCog,
         disabled: !$userStore?.is_admin
-    }
+    },
+    { label: 'Workers', href: '/workers', icon: faRobot }
 ];
 const thirdMenuLinks = [
     { label: 'Documentation', href: 'https://docs.windmill.dev/docs/intro/', icon: faBookOpen },