windmill-components 1.434.1 → 1.444.1

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

@@ -10,11 +10,11 @@ import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
-import { enterpriseLicense, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, Clipboard, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon } from 'lucide-svelte';
+import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, cleanValueProperties, copyToClipboard, truncateRev, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
+import { classNames, cleanValueProperties, truncateRev, orderedJsonStringify, replaceFalseWithUndefined, isFlowPreview } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
@@ -22,7 +22,7 @@ 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 UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte'
+//	import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte'
 import Tooltip from '../../Tooltip.svelte';
 import { Sha256 } from '@aws-crypto/sha256-js';
 import { sendUserToast } from '../../../toast';
@@ -48,6 +48,9 @@ import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
 import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy } from './appUtilsS3';
+import { isCloudHosted } from '../../../cloud';
+import { base } from '../../../base';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -260,14 +263,16 @@ async function createApp(path) {
                 path,
                 summary: $summary,
                 policy,
-                deployment_message: deploymentMsg
+                deployment_message: deploymentMsg,
+                custom_path: customPath
             }
         });
         savedApp = {
             summary: $summary,
             value: structuredClone($app),
             path: path,
-            policy: policy
+            policy: policy,
+            custom_path: customPath
         };
         closeSaveDrawer();
         sendUserToast('App deployed successfully');
@@ -303,7 +308,8 @@ async function handleUpdateApp(npath) {
                     summary: $summary,
                     value: $app,
                     path: newEditedPath || savedApp.draft?.path || savedApp.path,
-                    policy
+                    policy,
+                    custom_path: customPath
                 }))) {
             await updateApp(npath);
         }
@@ -344,14 +350,18 @@ async function updateApp(npath) {
             summary: $summary,
             policy,
             path: npath,
-            deployment_message: deploymentMsg
+            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
         }
     });
     savedApp = {
         summary: $summary,
         value: structuredClone($app),
         path: npath,
-        policy
+        policy,
+        custom_path: customPath
     };
     const appHistory = await AppService.getAppHistoryByPath({
         workspace: $workspaceStore,
@@ -408,7 +418,8 @@ async function saveInitialDraft() {
                 path: newEditedPath,
                 summary: $summary,
                 policy,
-                draft_only: true
+                draft_only: true,
+                custom_path: customPath
             }
         });
         await DraftService.createDraft({
@@ -420,7 +431,8 @@ async function saveInitialDraft() {
                     value: $app,
                     path: newEditedPath,
                     summary: $summary,
-                    policy
+                    policy,
+                    custom_path: customPath
                 }
             }
         });
@@ -434,8 +446,10 @@ async function saveInitialDraft() {
                 summary: $summary,
                 value: structuredClone($app),
                 path: newEditedPath,
-                policy
-            }
+                policy,
+                custom_path: customPath
+            },
+            custom_path: customPath
         };
         draftDrawerOpen = false;
         dispatch('savedNewAppPath', newEditedPath);
@@ -488,7 +502,8 @@ async function saveDraft(forceSave = false) {
                     summary: $summary,
                     policy,
                     path: newEditedPath || path,
-                    draft_only: true
+                    draft_only: true,
+                    custom_path: customPath
                 }
             });
         }
@@ -512,14 +527,16 @@ async function saveDraft(forceSave = false) {
                     value: structuredClone($app),
                     path: savedApp.draft_only ? newEditedPath || path : path,
                     policy,
-                    draft_only: true
+                    draft_only: true,
+                    custom_path: customPath
                 }
                 : savedApp),
             draft: {
                 summary: $summary,
                 value: structuredClone($app),
                 path: newEditedPath || path,
-                policy
+                policy,
+                custom_path: customPath
             }
         };
         sendUserToast('Draft saved');
@@ -620,7 +637,7 @@ let dirtyPath = false;
 let path = undefined;
 let moreItems = [
     {
-        displayName: 'Deployment History',
+        displayName: 'Deployment history',
         icon: History,
         action: () => {
             historyBrowserDrawerOpen = true;
@@ -650,14 +667,14 @@ let moreItems = [
         }
     },
     {
-        displayName: 'App Inputs',
+        displayName: 'App inputs',
         icon: FormInput,
         action: () => {
             inputsDrawerOpen = true;
         }
     },
     {
-        displayName: 'Schedule Reports',
+        displayName: 'Schedule reports',
         icon: FileClock,
         action: () => {
             appReportingDrawerOpen = true;
@@ -682,7 +699,8 @@ let moreItems = [
                     summary: $summary,
                     value: $app,
                     path: newEditedPath || savedApp.draft?.path || savedApp.path,
-                    policy
+                    policy,
+                    custom_path: customPath
                 }
             });
         },
@@ -721,24 +739,55 @@ function setTheme(newDarkMode) {
 }
 let priorDarkMode = document.documentElement.classList.contains('dark');
 setTheme($app?.darkMode);
+let customPath = savedApp?.custom_path;
+let dirtyCustomPath = false;
+let customPathError = '';
+$: fullCustomUrl = `${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`;
+async function appExists(customPath) {
+    return await AppService.customPathExists({
+        workspace: $workspaceStore,
+        customPath
+    });
+}
+let validateTimeout = undefined;
+async function validateCustomPath(customPath) {
+    customPathError = '';
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if (!/^[\w-]+(\/[\w-]+)*$/.test(customPath)) {
+            customPathError = 'Invalid path';
+        }
+        else if (customPath !== savedApp?.custom_path && (await appExists(customPath))) {
+            customPathError = 'Path already taken';
+        }
+        else {
+            customPathError = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+$: customPath !== undefined && validateCustomPath(customPath);
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-<!-- <UnsavedConfirmationModal
-	{diffDrawer}
-	savedValue={savedApp}
-	modifiedValue={{
-		summary: $summary,
-		value: $app,
-		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
-		policy
-	}}
-	additionalExitAction={() => {
-		setTheme(priorDarkMode)
-	}}
-/> -->
+<!-- <UnsavedConfirmationModal -->
+<!-- 	{diffDrawer} -->
+<!-- 	savedValue={savedApp} -->
+<!-- 	modifiedValue={{ -->
+<!-- 		summary: $summary, -->
+<!-- 		value: $app, -->
+<!-- 		path: newEditedPath || savedApp?.draft?.path || savedApp?.path, -->
+<!-- 		policy, -->
+<!-- 		custom_path: customPath -->
+<!-- 	}} -->
+<!-- 	additionalExitAction={() => { -->
+<!-- 		setTheme(priorDarkMode) -->
+<!-- 	}} -->
+<!-- /> -->
 
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -750,7 +799,8 @@ setTheme($app?.darkMode);
 		summary: $summary,
 		value: $app,
 		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
-		policy
+		policy,
+		custom_path: customPath
 	}}
 />
 
@@ -885,7 +935,8 @@ setTheme($app?.darkMode);
 							summary: $summary,
 							value: $app,
 							path: newEditedPath || savedApp.draft?.path || savedApp.path,
-							policy
+							policy,
+							custom_path: customPath
 						},
 						button: {
 							text: 'Looks good, deploy',
@@ -907,7 +958,7 @@ setTheme($app?.darkMode);
 			</Button>
 			<Button
 				startIcon={{ icon: Save }}
-				disabled={pathError != ''}
+				disabled={pathError != '' || customPathError != ''}
 				on:click={() => {
 					if ($appPath == '') {
 						createApp(newEditedPath)
@@ -957,29 +1008,68 @@ setTheme($app?.darkMode);
 			</div>
 
 			<div class="my-6 box">
-				Public url:
+				<div class="text-secondary">
+					<div>Public URL</div>
+				</div>
 				{#if secretUrl}
-					{@const url = `${window.location.hostname}/public/${$workspaceStore}/${secretUrl}`}
-					{@const href = window.location.protocol + '//' + url}
-					<a
-						on:click={(e) => {
-							e.preventDefault()
-							copyToClipboard(href)
-						}}
-						{href}
-						class="whitespace-nowrap text-ellipsis overflow-hidden mr-1 inline-flex gap-2"
-					>
-						{url}
-						<span class="text-gray-700 ml-2">
-							<Clipboard />
-						</span>
-					</a>
+					{@const href = `${window.location.origin}${base}/public/${$workspaceStore}/${secretUrl}`}
+					<ClipboardPanel content={href} size="md" />
 				{:else}<Loader2 class="animate-spin" />
 				{/if}
-				<div class="text-xs text-secondary"
-					>Share this url directly or embed it using an iframe (if requiring login, top-level domain
-					of embedding app must be the same as the one of Windmill)</div
-				>
+				<div class="text-xs text-secondary mt-1">
+					Share this url directly or embed it using an iframe (if requiring login, top-level domain
+					of embedding app must be the same as the one of Windmill)
+				</div>
+
+				<div class="mt-4">
+					{#if !$enterpriseLicense}
+						<Alert title="EE Only" type="warning" size="xs">
+							Custom path is an enterprise only feature.
+						</Alert>
+						<div class="mb-2" />
+					{: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" />
+					{/if}
+					<Toggle
+						on:change={({ detail }) => {
+							customPath = detail ? '' : undefined
+						}}
+						checked={customPath !== undefined}
+						options={{
+							right: 'Use a custom URL'
+						}}
+						disabled={!$enterpriseLicense || !($userStore?.is_admin || $userStore?.is_super_admin)}
+					/>
+
+					{#if customPath !== undefined}
+						<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+							<div>Custom path</div>
+						</div>
+						<input
+							disabled={!($userStore?.is_admin || $userStore?.is_super_admin)}
+							type="text"
+							autocomplete="off"
+							bind:value={customPath}
+							class={customPathError === ''
+								? ''
+								: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+							on:input={() => {
+								dirtyCustomPath = true
+							}}
+						/>
+						<div class="text-secondary text-sm flex items-center gap-1 mt-2 w-full justify-between">
+							<div>Custom public URL</div>
+						</div>
+						<ClipboardPanel content={fullCustomUrl} size="md" />
+
+						<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+							>{dirtyCustomPath ? customPathError : ''}
+						</div>
+					{/if}
+				</div>
 			</div>
 			<Alert type="info" title="Only latest deployed app is publicly available">
 				You will still need to deploy the app to make visible the latest changes
@@ -1149,7 +1239,7 @@ setTheme($app?.darkMode);
 											</div>
 										{/if}
 
-										{#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview'}
+										{#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}>
@@ -1208,7 +1298,7 @@ setTheme($app?.darkMode);
 											<FlowProgressBar {job} class="py-4" />
 											<div class="w-full mt-10 mb-20">
 												<FlowStatusViewer
-													jobId={job.id}
+													jobId={job?.id ?? ''}
 													on:jobsLoaded={({ detail }) => {
 														job = detail
 													}}

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

@@ -14,6 +14,7 @@ declare const __propDef: {
             summary: string;
             policy: any;
             draft_only?: boolean | undefined;
+            custom_path?: string | undefined;
         } | undefined;
         version?: number | undefined;
         leftPanelHidden?: boolean | undefined;

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

@@ -113,7 +113,7 @@ loadVersions();
 										color="blue"
 										buttonType="button"
 										btnClasses="!p-1 !w-[34px] !ml-1"
-										aria-label="Save Deployment Message"
+										aria-label="Save deployment message"
 										on:click={() => {
 											updateDeploymentMsg(selected?.id, selectedVersion?.version)
 										}}

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -5,10 +5,11 @@ export let float = true;
 export let hidden = false;
 export let testJob = undefined;
 export let jobToWatch = undefined;
+export let width = undefined;
 const { runnableJobEditorPanel, selectedComponentInEditor } = getContext('AppEditorContext');
 let testIsLoading = false;
 let testJobLoader;
-$: $runnableJobEditorPanel.focused &&
+$: ($runnableJobEditorPanel.focused || !float) &&
     $selectedComponentInEditor &&
     $runnableJobEditorPanel.jobs &&
     updateSelectedJob();
@@ -49,7 +50,10 @@ let resultDrawerOpen = false;
 			<RunnableJobPanelInner {testIsLoading} {frontendJob} {testJob} />
 		</div>
 	{:else}
-		<div class="flex flex-col w-full">
+		<div
+			class="flex flex-col min-w-0 grow h-full"
+			style={width !== undefined ? `width:${width}px;` : ''}
+		>
 			{#if $selectedComponentInEditor}
 				<RunnableJobPanelInner {testIsLoading} {frontendJob} {testJob} />
 			{:else if !hidden}

package/package/components/apps/editor/RunnableJobPanel.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
             componentId: string;
             job: string;
         } | undefined;
+        width?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/appUtils.d.ts

@@ -107,4 +107,5 @@ export type GridShadow = {
     h: number;
 };
 export declare function areShadowsTheSame(shadow1: GridShadow | undefined, shadow2: GridShadow | undefined): boolean;
+export declare function animateTo(start: number, end: number, onUpdate: (newValue: number) => void): void;
 export {};

package/package/components/apps/editor/appUtils.js

@@ -887,3 +887,20 @@ export function areShadowsTheSame(shadow1, shadow2) {
         shadow1.w === shadow2.w &&
         shadow1.h === shadow2.h);
 }
+export function animateTo(start, end, onUpdate) {
+    const duration = 400;
+    const startTime = performance.now();
+    function animate(time) {
+        const elapsed = time - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const currentValue = start + (end - start) * easeInOut(progress);
+        onUpdate(currentValue);
+        if (progress < 1) {
+            requestAnimationFrame(animate);
+        }
+    }
+    requestAnimationFrame(animate);
+}
+function easeInOut(t) {
+    return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}