windmill-components 1.473.1 → 1.493.3

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

@@ -1,38 +1,27 @@
-<script>import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '../../common';
+<script lang="ts">import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
-import DisplayResult from '../../DisplayResult.svelte';
-import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
-import FlowStatusViewer from '../../FlowStatusViewer.svelte';
-import JobArgs from '../../JobArgs.svelte';
-import LogViewer from '../../LogViewer.svelte';
 import Path from '../../Path.svelte';
-import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, cleanValueProperties, truncateRev, orderedJsonStringify, replaceFalseWithUndefined, isFlowPreview } from '../../../utils';
+import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
-import PanelSection from './settingsPanel/common/PanelSection.svelte';
 import PreviewToggle from './PreviewToggle.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import Tooltip from '../../Tooltip.svelte';
-import { Sha256 } from '@aws-crypto/sha256-js';
 import { sendUserToast } from '../../../toast';
 import DeploymentHistory from './DeploymentHistory.svelte';
 import Awareness from '../../Awareness.svelte';
 import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
 import Dropdown from '../../DropdownV2.svelte';
 import AppEditorTutorial from './AppEditorTutorial.svelte';
-import AppTimeline from './AppTimeline.svelte';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
-import HighlightCode from '../../HighlightCode.svelte';
 import { getPrimaryKeys } from '../components/display/dbtable/utils';
 import DebugPanel from './contextPanel/DebugPanel.svelte';
 import { getCountInput } from '../components/display/dbtable/queries/count';
@@ -44,11 +33,14 @@ import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
 import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
-import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy } from './appUtilsS3';
+import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy, computeS3ImageViewerPolicy } from './appUtilsS3';
 import { isCloudHosted } from '../../../cloud';
 import { base } from '../../../base';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import AppJobsDrawer from './AppJobsDrawer.svelte';
+import { collectStaticFields } from './commonAppUtils';
 import LazyModePanel from './contextPanel/LazyModePanel.svelte';
+import { Sha256 } from '@aws-crypto/sha256-js';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -94,6 +86,7 @@ $: if ($openDebugRun == undefined) {
         selectedJobId = jobId;
     };
 }
+let selectedJobId = undefined;
 let pathError = undefined;
 let appExport;
 let draftDrawerOpen = false;
@@ -109,13 +102,6 @@ function closeSaveDrawer() {
 function closeDraftDrawer() {
     draftDrawerOpen = false;
 }
-function collectStaticFields(fields) {
-    return Object.fromEntries(Object.entries(fields ?? {})
-        .filter(([k, v]) => v.type == 'static')
-        .map(([k, v]) => {
-        return [k, v['value']];
-    }));
-}
 async function computeTriggerables() {
     const items = allItems($app.grid, $app.subgrids);
     console.debug('items', items);
@@ -219,6 +205,15 @@ async function computeTriggerables() {
         s3_inputs.push(computeWorkspaceS3FileInputPolicy());
     }
     policy.s3_inputs = s3_inputs;
+    const s3FileKeys = items
+        .filter((x) => x.data.type === 'imagecomponent')
+        .map((x) => {
+        const c = x.data;
+        const config = c.configuration;
+        return computeS3ImageViewerPolicy(config);
+    })
+        .filter(Boolean);
+    policy.allowed_s3_keys = s3FileKeys;
 }
 async function processRunnable(id, runnable, fields) {
     const staticInputs = collectStaticFields(fields);
@@ -352,7 +347,7 @@ async function updateApp(npath) {
             deployment_message: deploymentMsg,
             // custom_path requires admin so to accept update without it, we need to send as undefined when non-admin (when undefined, it will be ignored)
             // it also means that customPath needs to be set to '' instead of undefined to unset it (when admin)
-            custom_path: $userStore?.is_admin || $userStore?.is_super_admin ? customPath ?? '' : undefined
+            custom_path: $userStore?.is_admin || $userStore?.is_super_admin ? (customPath ?? '') : undefined
         }
     });
     savedApp = {
@@ -573,14 +568,6 @@ async function compareVersions() {
     }
 }
 $: saveDrawerOpen && compareVersions();
-let selectedJobId = undefined;
-let testJobLoader;
-let job = undefined;
-let testIsLoading = false;
-$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId);
-$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
-    job = undefined;
-}
 $: hasErrors = Object.keys($errorByComponent).length > 0;
 let lock = false;
 function onKeyDown(event) {
@@ -725,7 +712,6 @@ let appEditorTutorial = undefined;
 export function toggleTutorial() {
     appEditorTutorial?.toggleTutorial();
 }
-let rightColumnSelect = 'timeline';
 let appReportingDrawerOpen = false;
 export function openTroubleshootPanel() {
     debugAppDrawerOpen = true;
@@ -779,8 +765,6 @@ $: customPath !== undefined && validateCustomPath(customPath);
 
 <svelte:window on:keydown={onKeyDown} />
 
-<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-
 {#if $$slots.unsavedConfirmationModal}
 	<slot
 		name="unsavedConfirmationModal"
@@ -818,7 +802,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 {#if $appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
 		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
-			<Alert title="Require path" type="info">
+			<Alert bgClass="mb-4" title="Require path" type="info">
 				Choose a path to save the initial draft of the app.
 			</Alert>
 			<h3>Summary</h3>
@@ -844,7 +828,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 					}}
 				/>
 			</div>
-			<div class="py-2" />
+			<div class="py-2"></div>
 			<Path
 				autofocus={false}
 				bind:this={path}
@@ -855,7 +839,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				namePlaceholder="app"
 				kind="app"
 			/>
-			<div class="py-4" />
+			<div class="py-4"></div>
 
 			<div slot="actions">
 				<Button
@@ -869,13 +853,30 @@ $: customPath !== undefined && validateCustomPath(customPath);
 		</DrawerContent>
 	</Drawer>
 {/if}
+
+<AppJobsDrawer
+	bind:open={$jobsDrawerOpen}
+	jobs={$jobs}
+	on:clear={() => {
+		$jobs = []
+		$errorByComponent = {}
+	}}
+	on:clearErrors={() => {
+		$errorByComponent = {}
+	}}
+	{hasErrors}
+	{selectedJobId}
+	refreshComponents={$refreshComponents}
+	jobsById={$jobsById}
+	errorByComponent={$errorByComponent}
+/>
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
 		{#if !onLatest}
 			<Alert title="You're not on the latest app version. " type="warning">
 				By deploying, you may overwrite changes made by other users. Press 'Deploy' to see diff.
 			</Alert>
-			<div class="py-2" />
+			<div class="py-2"></div>
 		{/if}
 		<span class="text-secondary text-sm font-bold">Summary</span>
 		<div class="w-full pt-2">
@@ -900,7 +901,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				}}
 			/>
 		</div>
-		<div class="py-4" />
+		<div class="py-4"></div>
 		<span class="text-secondary text-sm font-bold">Deployment message</span>
 		<div class="w-full pt-2">
 			<!-- svelte-ignore a11y-autofocus -->
@@ -911,7 +912,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				bind:value={deploymentMsg}
 			/>
 		</div>
-		<div class="py-4" />
+		<div class="py-4"></div>
 		<span class="text-secondary text-sm font-bold">Path</span>
 		<Path
 			bind:this={path}
@@ -981,7 +982,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				Deploy
 			</Button>
 		</div>
-		<div class="py-2" />
+		<div class="py-2"></div>
 		{#if $appPath == ''}
 			<Alert title="Require saving" type="error">
 				Save this app once before you can publish it
@@ -999,10 +1000,10 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				</Tooltip>
 			</Alert>
 
-			<div class="mt-10" />
+			<div class="mt-10"></div>
 
 			<h2>Public URL</h2>
-			<div class="mt-4" />
+			<div class="mt-4"></div>
 
 			<div class="flex gap-2 items-center">
 				<Toggle
@@ -1037,16 +1038,19 @@ $: customPath !== undefined && validateCustomPath(customPath);
 						<Alert title="EE Only" type="warning" size="xs">
 							Custom path is an enterprise only feature.
 						</Alert>
-						<div class="mb-2" />
+						<div class="mb-2"></div>
 					{:else if !($userStore?.is_admin || $userStore?.is_super_admin)}
 						<Alert type="warning" title="Admin only" size="xs">
 							Custom path can only be set by workspace admins
 						</Alert>
-						<div class="mb-2" />
+						<div class="mb-2"></div>
 					{/if}
 					<Toggle
 						on:change={({ detail }) => {
 							customPath = detail ? '' : undefined
+							if (customPath === undefined) {
+								customPathError = ''
+							}
 						}}
 						checked={customPath !== undefined}
 						options={{
@@ -1117,251 +1121,6 @@ $: customPath !== undefined && validateCustomPath(customPath);
 		<LazyModePanel />
 	</DrawerContent>
 </Drawer>
-<Drawer bind:open={$jobsDrawerOpen} size="900px">
-	<DrawerContent
-		noPadding
-		title="Debug Runs"
-		on:close={() => {
-			$jobsDrawerOpen = false
-		}}
-		tooltip="Look at latests runs to spot potential bugs."
-		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
-	>
-		<Splitpanes class="!overflow-visible">
-			<Pane size={25}>
-				<PanelSection title="Past Runs">
-					<div class="flex flex-col gap-2 w-full">
-						{#if $jobs.length > 0}
-							<div class="flex gap-2 flex-col-reverse">
-								{#each $jobs ?? [] as id}
-									{@const selectedJob = $jobsById[id]}
-									{#if selectedJob}
-										<!-- svelte-ignore a11y-click-events-have-key-events -->
-										<!-- svelte-ignore a11y-no-static-element-interactions -->
-										<div
-											class={classNames(
-												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-secondary hover:text-blue-400',
-												selectedJob.error ? 'border border-red-500 text-primary' : '',
-												selectedJob.error && $errorByComponent[selectedJob.component]?.id == id
-													? selectedJobId == id
-														? 'bg-red-600 !border-blue-600'
-														: 'bg-red-400'
-													: selectedJobId == id
-													? 'text-blue-600'
-													: ''
-											)}
-											on:click={() => {
-												selectedJobId = id
-												rightColumnSelect = 'detail'
-											}}
-										>
-											<span class="text-xs truncate">{truncateRev(selectedJob.job, 20)}</span>
-											<Badge color="indigo">{selectedJob.component}</Badge>
-										</div>
-									{/if}
-								{/each}
-							</div>
-						{:else}
-							<div class="text-sm text-tertiary">No items</div>
-						{/if}
-					</div>
-				</PanelSection>
-			</Pane>
-			<Pane size={75}>
-				<div class="w-full h-full flex flex-col">
-					<div>
-						<Tabs bind:selected={rightColumnSelect}>
-							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
-							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
-						</Tabs>
-					</div>
-					{#if rightColumnSelect == 'timeline'}
-						<div class="p-2 grow overflow-auto">
-							<AppTimeline />
-						</div>
-					{:else if rightColumnSelect == 'detail'}
-						<div class="grow flex flex-col w-full overflow-auto">
-							{#if selectedJobId}
-								{#if selectedJobId?.includes('Frontend')}
-									{@const jobResult = $jobsById[selectedJobId]}
-									{#if jobResult?.error !== undefined}
-										<Splitpanes horizontal class="grow border w-full">
-											<Pane size={10} minSize={10}>
-												<LogViewer
-													content={`Logs are avaiable in the browser console directly`}
-													isLoading={false}
-													tag={undefined}
-												/>
-											</Pane>
-											<Pane size={90} minSize={10} class="text-sm text-secondary">
-												<div class="relative h-full px-2">
-													<DisplayResult
-														result={{
-															error: { name: 'Frontend execution error', message: jobResult.error }
-														}}
-													/>
-												</div>
-											</Pane>
-										</Splitpanes>
-									{:else if jobResult !== undefined}
-										<Splitpanes horizontal class="grow border w-full">
-											<Pane size={10} minSize={10}>
-												<LogViewer
-													content={`Logs are avaiable in the browser console directly`}
-													isLoading={false}
-													tag={undefined}
-												/>
-											</Pane>
-											<Pane size={90} minSize={10} class="text-sm text-secondary">
-												<div class="relative h-full px-2">
-													<DisplayResult
-														workspaceId={$workspaceStore}
-														jobId={selectedJobId}
-														result={jobResult.result}
-													/>
-												</div>
-											</Pane>
-										</Splitpanes>
-									{:else}
-										<Loader2 class="animate-spin" />
-									{/if}
-								{:else}
-									<div class="flex flex-col h-full w-full mb-4">
-										{#if job?.['running']}
-											<div class="flex flex-row-reverse w-full">
-												<Button
-													color="red"
-													variant="border"
-													on:click={() => testJobLoader?.cancelJob()}
-												>
-													<Loader2 size={14} class="animate-spin mr-2" />
-
-													Cancel
-												</Button>
-											</div>
-										{/if}
-										{#if job?.args}
-											<div class="p-2">
-												<JobArgs
-													id={job.id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-													args={job?.args}
-												/>
-											</div>
-										{/if}
-										{#if job?.raw_code}
-											<div class="pb-2 pl-2 pr-2 w-full overflow-auto h-full max-h-[80px]">
-												<HighlightCode language={job?.language} code={job?.raw_code} />
-											</div>
-										{/if}
-
-										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
-											{@const jobResult = $jobsById[selectedJobId]}
-											<Splitpanes horizontal class="grow border w-full">
-												<Pane size={50} minSize={10}>
-													<LogViewer
-														duration={job?.['duration_ms']}
-														jobId={job?.id}
-														content={job?.logs}
-														isLoading={testIsLoading && job?.['running'] == false}
-														tag={job?.tag}
-													/>
-												</Pane>
-												<Pane size={50} minSize={10} class="text-sm text-secondary">
-													{#if job != undefined && 'result' in job && job.result != undefined}<div
-															class="relative h-full px-2"
-															><DisplayResult
-																workspaceId={$workspaceStore}
-																jobId={selectedJobId}
-																result={job.result}
-															/></div
-														>
-													{: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-tertiary">Result is undefined</div>
-													{:else}
-														<div class="p-2 text-tertiary">
-															<Loader2 size={14} class="animate-spin mr-2" />
-														</div>
-													{/if}
-												</Pane>
-												{#if jobResult?.transformer}
-													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
-														<div class="font-bold">Transformer results</div>
-														{#if job != undefined && 'result' in job && job.result != undefined}
-															<div class="relative h-full px-2">
-																<DisplayResult
-																	workspaceId={$workspaceStore}
-																	jobId={selectedJobId}
-																	result={jobResult?.transformer}
-																/>
-															</div>
-														{: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-tertiary">Result is undefined</div>
-														{:else}
-															<div class="p-2 text-tertiary">
-																<Loader2 size={14} class="animate-spin mr-2" />
-															</div>
-														{/if}
-													</Pane>
-												{/if}
-											</Splitpanes>
-										{:else}
-											<div class="mt-10" />
-											<FlowProgressBar {job} class="py-4" />
-											<div class="w-full mt-10 mb-20">
-												<FlowStatusViewer
-													jobId={job?.id ?? ''}
-													on:jobsLoaded={({ detail }) => {
-														job = detail
-													}}
-												/>
-											</div>
-										{/if}
-									</div>
-								{/if}
-							{:else}
-								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			</Pane>
-		</Splitpanes>
-		<svelte:fragment slot="actions">
-			<Button
-				size="md"
-				color="light"
-				variant="border"
-				on:click={() => {
-					$refreshComponents?.()
-				}}
-				title="Refresh App"
-			>
-				Refresh app&nbsp;<RefreshCw size={16} />
-			</Button>
-
-			<Button
-				size="md"
-				color="light"
-				variant="border"
-				on:click={() => {
-					errorByComponent.set({})
-					jobs.set([])
-				}}
-				>Clear jobs
-			</Button>
-			{#if hasErrors}
-				<Button size="md" color="light" variant="border" on:click={() => errorByComponent.set({})}
-					>Clear Errors &nbsp;<BellOff size={14} />
-				</Button>
-			{/if}
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
 
 <AppReportsDrawer bind:open={appReportingDrawerOpen} appPath={$appPath ?? ''} />
 
@@ -1411,9 +1170,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 				<ToggleButtonGroup
 					class="h-[30px]"
 					on:selected={({ detail }) => {
-						console.log('dbg detail', detail)
 						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
-						console.log('dbg settheme', theme)
 						setTheme(theme)
 					}}
 					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
@@ -1524,10 +1281,9 @@ $: customPath !== undefined && validateCustomPath(customPath);
 			{#if hasErrors}
 				<span
 					class="animate-ping absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
-				/>
-				<span
-					class=" absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
-				/>
+				></span>
+				<span class=" absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
+				></span>
 			{/if}
 			<Button
 				on:click={() => {
@@ -1545,7 +1301,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 					<Bug size={14} />
 					<div>Debug runs</div>
 					<div class="text-2xs text-tertiary"
-						>({$jobs?.length > 99 ? '99+' : $jobs?.length ?? 0})</div
+						>({$jobs?.length > 99 ? '99+' : ($jobs?.length ?? 0)})</div
 					>
 					{#if hasErrors}
 						<Button
@@ -1585,7 +1341,7 @@ $: customPath !== undefined && validateCustomPath(customPath);
 								window.open(`/apps/add?template=${appPath}`)
 							}
 						}
-				  ]
+					]
 				: undefined}
 		>
 			Deploy