windmill-components 1.122.0 → 1.138.2

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -17,7 +17,7 @@ import { AppService, DraftService, Job, Policy } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, workspaceStore } from '../../../stores';
 import { faClipboard, faFileExport, faHistory, faSave, faSlidersH } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Bug, Expand, Laptop2, Loader2, Smartphone } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, Expand, Laptop2, Loader2, Smartphone } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -140,6 +140,7 @@ async function createApp(path) {
         $dirtyStore = false;
         closeSaveDrawer();
         sendUserToast('App deployed successfully');
+        localStorage.removeItem(`app-${path}`);
         goto(`/apps/edit/${appId}`);
     }
     catch (e) {
@@ -162,6 +163,7 @@ async function updateApp(npath) {
     closeSaveDrawer();
     sendUserToast('App deployed successfully');
     if (appPath !== npath) {
+        localStorage.removeItem(`app-${appPath}`);
         await goto(`/apps/edit/${npath}?nodraft=true`);
         window.location.reload();
     }
@@ -232,15 +234,17 @@ async function saveDraft() {
     try {
         await computeTriggerables();
         $dirtyStore = false;
+        let path = $page.params.path;
         await DraftService.createDraft({
             workspace: $workspaceStore,
             requestBody: {
-                path: $page.params.path,
+                path: path,
                 typ: 'app',
                 value: $app
             }
         });
         sendUserToast('Draft saved');
+        localStorage.removeItem(`app-${path}`);
         loading.saveDraft = false;
     }
     catch (e) {
@@ -307,6 +311,16 @@ function onKeyDown(event) {
     }
     lock = false;
 }
+let path = undefined;
+$: {
+    if (appPath == '' && $summary?.length > 0) {
+        path?.setName($summary
+            .toLowerCase()
+            .replace(/[^a-z0-9_]/g, '_')
+            .replace(/-+/g, '_')
+            .replace(/^-|-$/g, ''));
+    }
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -321,16 +335,6 @@ function onKeyDown(event) {
 			<Alert title="Require path" type="info">
 				Choose a path to save the initial draft of the app.
 			</Alert>
-			<div class="py-2" />
-			<Path
-				bind:error={pathError}
-				bind:path={newPath}
-				initialPath=""
-				namePlaceholder="app"
-				kind="app"
-			/>
-			<div class="py-4" />
-
 			<h3>Summary</h3>
 			<div class="w-full pt-2">
 				<input
@@ -341,6 +345,17 @@ function onKeyDown(event) {
 				/>
 			</div>
 
+			<div class="py-2" />
+			<Path
+				bind:this={path}
+				bind:error={pathError}
+				bind:path={newPath}
+				initialPath=""
+				namePlaceholder="app"
+				kind="app"
+			/>
+			<div class="py-4" />
+
 			<div slot="actions">
 				<Button
 					startIcon={{ icon: faSave }}
@@ -355,7 +370,14 @@ function onKeyDown(event) {
 {/if}
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
+		<span class="text-secondary text-sm font-bold">Summary</span>
+		<div class="w-full pt-2">
+			<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
+		</div>
+		<div class="py-4" />
+		<span class="text-secondary text-sm font-bold">Path</span>
 		<Path
+			bind:this={path}
 			bind:error={pathError}
 			bind:path={newPath}
 			initialPath={appPath}
@@ -363,18 +385,6 @@ function onKeyDown(event) {
 			kind="app"
 		/>
 
-		<div class="py-4" />
-
-		<h3>Summary</h3>
-		<div class="w-full pt-2">
-			<input
-				type="text"
-				placeholder="App summary"
-				class="text-sm w-full font-semibold"
-				bind:value={$summary}
-			/>
-		</div>
-
 		<div slot="actions">
 			<Button
 				startIcon={{ icon: faSave }}
@@ -463,11 +473,13 @@ function onKeyDown(event) {
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={$jobsDrawerOpen} size="900px">
+<Drawer bind:open={$jobsDrawerOpen} size="900px" --zIndex={1003}>
 	<DrawerContent
 		noPadding
 		title="Debug Runs"
-		on:close={() => ($jobsDrawerOpen = false)}
+		on:close={() => {
+			$jobsDrawerOpen = false
+		}}
 		tooltip="Look at latests runs to spot potential bugs."
 		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
 	>
@@ -495,7 +507,7 @@ function onKeyDown(event) {
 								{/each}
 							</div>
 						{:else}
-							<div class="text-sm text-gray-500">No items</div>
+							<div class="text-sm text-tertiary">No items</div>
 						{/if}
 					</div>
 				</PanelSection>
@@ -514,13 +526,17 @@ function onKeyDown(event) {
 											isLoading={false}
 										/>
 									</Pane>
-									<Pane size={50} minSize={10} class="text-sm text-gray-600">
+									<Pane size={50} minSize={10} class="text-sm text-secondary">
 										<pre class="overflow-x-auto break-words relative h-full px-2">
-											<DisplayResult result={{ error: { name: 'Frontend execution error', message: jobResult.error } }} />
+											<DisplayResult
+												result={{
+													error: { name: 'Frontend execution error', message: jobResult.error }
+												}}
+											/>
 										</pre>
 									</Pane>
 								</Splitpanes>
-							{:else if jobResult?.result !== undefined}
+							{:else if jobResult !== undefined}
 								<Splitpanes horizontal class="grow border w-full">
 									<Pane size={50} minSize={10}>
 										<LogViewer
@@ -528,9 +544,9 @@ function onKeyDown(event) {
 											isLoading={false}
 										/>
 									</Pane>
-									<Pane size={50} minSize={10} class="text-sm text-gray-600">
+									<Pane size={50} minSize={10} class="text-sm text-secondary">
 										<pre class="overflow-x-auto break-words relative h-full px-2">
-											<DisplayResult result={jobResult.result} />
+											<DisplayResult workspaceId={$workspaceStore} jobId={selectedJobId} result={jobResult.result} />
 										</pre>
 									</Pane>
 								</Splitpanes>
@@ -560,17 +576,21 @@ function onKeyDown(event) {
 										<Pane size={50} minSize={10}>
 											<LogViewer jobId={job?.id} content={job?.logs} isLoading={testIsLoading} />
 										</Pane>
-										<Pane size={50} minSize={10} class="text-sm text-gray-600">
+										<Pane size={50} minSize={10} class="text-sm text-secondary">
 											{#if job != undefined && 'result' in job && job.result != undefined}
 												<pre class="overflow-x-auto break-words relative h-full px-2"
-													><DisplayResult result={job.result} /></pre
+													><DisplayResult
+														workspaceId={$workspaceStore}
+														jobId={selectedJobId}
+														result={job.result}
+													/></pre
 												>
 											{:else if testIsLoading}
 												<div class="p-2"><Loader2 class="animate-spin" /> </div>
 											{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
-												<div class="p-2 text-gray-500">Result is undefined</div>
+												<div class="p-2 text-tertiary">Result is undefined</div>
 											{:else}
-												<div class="p-2 text-gray-500">
+												<div class="p-2 text-tertiary">
 													<Loader2 size={14} class="animate-spin mr-2" />
 												</div>
 											{/if}
@@ -591,7 +611,7 @@ function onKeyDown(event) {
 							</div>
 						{/if}
 					{:else}
-						<div class="text-sm p-2 text-gray-500">Select a job to see its details</div>
+						<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
 					{/if}
 				</div>
 			</Pane>
@@ -624,8 +644,8 @@ function onKeyDown(event) {
 
 		<div>
 			<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
-				<ToggleButton icon={Smartphone} value="sm" />
-				<ToggleButton icon={Laptop2} value="lg" />
+				<ToggleButton tooltip="Mobile View" icon={Smartphone} value="sm" />
+				<ToggleButton tooltip="Computer View" icon={Laptop2} value="lg" />
 			</ToggleButtonGroup>
 		</div>
 		{#if $app}
@@ -635,7 +655,11 @@ function onKeyDown(event) {
 					value={false}
 					tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
 				/>
-				<ToggleButton icon={Expand} value={true} />
+				<ToggleButton
+					tooltip="The width is of the app if the full width of its container"
+					icon={Expand}
+					value={true}
+				/>
 			</ToggleButtonGroup>
 		{/if}
 	</div>
@@ -709,7 +733,20 @@ function onKeyDown(event) {
 			>
 				<div class="flex flex-row gap-1 items-center">
 					<Bug size={14} />
-					<div> Debug runs </div>
+					<div> Debug runs</div>
+					<div class="text-2xs text-tertiary"
+						>({$jobs?.length > 99 ? '99+' : $jobs?.length ?? 0})</div
+					>
+					{#if hasErrors}
+						<Button
+							size="xs"
+							btnClasses="-my-2 !px-1 !py-0"
+							color="light"
+							variant="border"
+							on:click={() => errorByComponent.set({})}
+							><BellOff size={12} />
+						</Button>
+					{/if}
 				</div>
 			</Button>
 		</div>

package/package/components/apps/editor/AppInputs.svelte

@@ -43,7 +43,7 @@ let resourceOnly = true;
 						const field = fields[fieldKey]
 						return field.fieldType === 'object' && field.format?.startsWith('resource-')
 					}).length === 0}
-					<span class="text-sm text-gray-600">No resource input</span>
+					<span class="text-sm text-secondary">No resource input</span>
 				{:else}
 					<InputsSpecsEditor
 						id={BG_PREFIX + index}

package/package/components/apps/editor/AppPreview.svelte

@@ -14,6 +14,7 @@ import { deepEqual } from 'fast-equals';
 import { dfs } from './appUtils';
 import { BG_PREFIX, migrateApp } from '../utils';
 import { workspaceStore } from '../../../stores';
+import DarkModeObserver from '../../DarkModeObserver.svelte';
 export let app;
 export let appPath = '';
 export let breakpoint = writable('lg');
@@ -44,6 +45,7 @@ function resizeWindow() {
 }
 resizeWindow();
 const parentWidth = writable(0);
+const darkMode = writable(document.documentElement.classList.contains('dark'));
 const state = writable({});
 setContext('AppViewerContext', {
     worldStore: buildWorld(ncontext),
@@ -70,7 +72,8 @@ setContext('AppViewerContext', {
     state: state,
     componentControl: writable({}),
     hoverStore: writable(undefined),
-    allIdsInPath
+    allIdsInPath,
+    darkMode
 });
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
@@ -81,15 +84,21 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 }
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full min-w-[768px]';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
+function onThemeChange() {
+    $darkMode = document.documentElement.classList.contains('dark');
+}
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative">
+<div class="relative h-full">
 	<div id="app-editor-top-level-drawer" />
+	<div id="app-editor-select" />
 
 	<div
-		class="{$$props.class} {lockedClasses} {width} h-full {app.fullscreen
+		class="{$$props.class} {lockedClasses} {width} h-full bg-surface {app.fullscreen
 			? ''
 			: 'max-w-6xl'} mx-auto"
 	>
@@ -101,11 +110,11 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				)}
 			>
 				<div
-					class="w-full sticky top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+					class="w-full sticky top-0 flex justify-between border-b bg-surface-secondary px-4 py-1 items-center gap-4"
 				>
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />
-					<div class="text-2xs text-gray-600">
+					<div class="text-2xs text-secondary">
 						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
 					</div>
 				</div>

package/package/components/apps/editor/ComponentHeader.svelte

@@ -46,7 +46,7 @@ function openDebugRuns() {
 	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
 		{#if hasInlineEditor}
 			<button
-				title="Expand"
+				title="Edit"
 				class={classNames(
 					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
 					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
@@ -117,14 +117,14 @@ function openDebugRuns() {
 			'bg-red-100/80'
 		)}
 	>
-		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+		<Popover notClickable placement="bottom" popupClass="!bg-surface border w-96">
 			<Bug size={14} />
 			<span slot="text">
-				<div class="bg-white">
+				<div class="bg-surface">
 					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
 						<div class="flex flex-col gap-2">
 							<div>
-								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
+								<pre class=" whitespace-pre-wrap text-primary bg-surface border w-full p-4 text-xs">
 									{json?.stack ?? ''}	
 								</pre>
 							</div>

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -39,7 +39,7 @@ const dispatch = createEventDispatcher();
 						{/each}
 					</div>
 				{:else}
-					<div class="text-sm text-gray-500">No items</div>
+					<div class="text-sm text-tertiary">No items</div>
 				{/if}
 			</div>
 		</PanelSection>
@@ -52,10 +52,12 @@ const dispatch = createEventDispatcher();
 						<h3 class="p-1">Deployed {displayDate(selected.created_at)} by {selected.created_by}</h3
 						>
 						<div class="flex gap-2">
-							<Button on:click={() => window.open(`/apps/add?template_id=${selectedVersion}`)}
-								>Restore as fork</Button
-							>
-							<Button on:click={() => dispatch('restore', selected)}>Restore here</Button>
+							<Button on:click={() => window.open(`/apps/add?template_id=${selectedVersion}`)}>
+								Restore as fork
+							</Button>
+							<Button on:click={() => dispatch('restore', selected)}
+								>Redeploy with that version
+							</Button>
 						</div>
 					</div>
 					<AppPreview noBackend app={selected.value} context={{}} />
@@ -63,7 +65,7 @@ const dispatch = createEventDispatcher();
 					<Skeleton layout={[[40]]} />
 				{/if}
 			{:else}
-				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>

package/package/components/apps/editor/GridEditor.svelte

@@ -29,15 +29,15 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 	<div
 		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+			: 'bg-surface'} px-4 py-1 items-center gap-4"
 		style="z-index: 1000;"
 	>
-		<h2 class="truncate">{$summary}</h2>
+		<h3 class="truncate">{$summary}</h3>
 		{#if !$connectingInput.opened}
 			<RecomputeAllComponents />
 		{/if}
-		<div class="flex text-2xs text-gray-600 gap-8 items-center">
-			<div class="py-2 pr-2 text-gray-600 flex gap-1 items-center">
+		<div class="flex text-2xs gap-8 items-center">
+			<div class="py-2 pr-2 text-secondary flex gap-1 items-center">
 				Hide bar on view
 				<Toggle size="xs" bind:checked={$app.norefreshbar} />
 			</div>

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -109,7 +109,7 @@ let items = [
 	<ButtonDropdown hasPadding={true}>
 		<svelte:fragment slot="label">
 			<span
-				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-gray-600')}
+				class={classNames('text-xs min-w-[2rem]', interval ? 'text-blue-500' : 'text-tertiary')}
 			>
 				{interval ? `${interval / 1000}s` : 'once'}
 			</span>
@@ -127,7 +127,7 @@ let items = [
 				>
 					<div
 						class={classNames(
-							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
 						{#if index === 0}

package/package/components/apps/editor/SettingsPanel.svelte

@@ -55,7 +55,6 @@ function findComponentSettings(app, id) {
 	{#key tableActionSettings?.item?.data?.id}
 		<ComponentPanel
 			noGrid
-			rowColumns
 			bind:componentSettings={tableActionSettings}
 			duplicateMoveAllowed={false}
 			onDelete={() => {
@@ -76,8 +75,8 @@ function findComponentSettings(app, id) {
 	{@const id = BG_PREFIX + hiddenInlineScript.index}
 	<BackgroundScriptSettings bind:runnable={hiddenInlineScript.script} {id} />
 
-	<div class="mb-8">
-		{#if Object.keys(hiddenInlineScript.script.fields ?? {}).length > 0}
+	{#if Object.keys(hiddenInlineScript.script.fields ?? {}).length > 0}
+		<div class="mb-8">
 			<PanelSection title={`Inputs`}>
 				{#key $stateId}
 					<InputsSpecsEditor
@@ -89,8 +88,8 @@ function findComponentSettings(app, id) {
 					/>
 				{/key}
 			</PanelSection>
-		{/if}
-	</div>
+		</div>
+	{/if}
 	<Recompute bind:recomputeIds={hiddenInlineScript.script.recomputeIds} ownId={id} />
 	<div class="grow shrink" />
 {/if}

package/package/components/apps/editor/TabsDebug.svelte

@@ -32,7 +32,7 @@ const dispatch = createEventDispatcher();
 				>
 					<div
 						class={classNames(
-							'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
 						{#if index === tabs.length - 1}

package/package/components/apps/editor/component/Component.svelte

@@ -15,6 +15,8 @@ import AppFlowStatusComponent from '../../components/display/AppFlowStatusCompon
 import AppChartJs from '../../components/display/AppChartJs.svelte';
 import AppQuillEditor from '../../components/inputs/AppQuillEditor.svelte';
 import AppList from '../../components/layout/AppList.svelte';
+import AppJobIdLogComponent from '../../components/display/AppJobIdLogComponent.svelte';
+import AppJobIdFlowStatus from '../../components/display/AppJobIdFlowStatus.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -78,7 +80,7 @@ let inlineEditorOpened = false;
 	{/if}
 	<div
 		class={twMerge(
-			'h-full bg-white/40 outline-1',
+			'h-full bg-surface/40 outline-1',
 			$hoverStore === component.id && $mode !== 'preview'
 				? $connectingInput.opened
 					? 'outline outline-orange-600'
@@ -109,6 +111,15 @@ let inlineEditorOpened = false;
 				componentInput={component.componentInput}
 				{render}
 			/>
+		{:else if component.type === 'jobidlogcomponent'}
+			<AppJobIdLogComponent
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				configuration={component.configuration}
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{:else if component.type === 'flowstatuscomponent'}
 			<AppFlowStatusComponent
 				id={component.id}
@@ -117,6 +128,15 @@ let inlineEditorOpened = false;
 				componentInput={component.componentInput}
 				{render}
 			/>
+		{:else if component.type === 'jobidflowstatuscomponent'}
+			<AppJobIdFlowStatus
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				configuration={component.configuration}
+				componentInput={component.componentInput}
+				{render}
+			/>
 		{:else if component.type === 'barchartcomponent'}
 			<AppBarChart
 				configuration={component.configuration}

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -194,7 +194,21 @@ function copyComponent(item, parentGrid, subgrids, alreadyVisited) {
     else {
         alreadyVisited.push(item.id);
     }
-    const newItem = insertNewGridItem($app, (id) => ({ ...item.data, id }), parentGrid, Object.fromEntries(gridColumns.map((column) => [column, item[column]])));
+    const newItem = insertNewGridItem($app, (id) => {
+        if (item.data.type === 'tablecomponent') {
+            return {
+                ...item.data,
+                id,
+                actionButtons: item.data.actionButtons.map((x) => ({
+                    ...x,
+                    id: x.id.replace(`${item.id}_`, `${id}_`)
+                })) ?? []
+            };
+        }
+        else {
+            return { ...item.data, id };
+        }
+    }, parentGrid, Object.fromEntries(gridColumns.map((column) => [column, item[column]])));
     for (let i = 0; i < (item?.data?.numberOfSubgrids ?? 0); i++) {
         subgrids[`${item.id}-${i}`].forEach((subgridItem) => {
             copyComponent(subgridItem, { parentComponentId: newItem, subGridIndex: i }, subgrids, alreadyVisited);