windmill-components 1.550.0 → 1.555.0

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

@@ -1,13 +1,10 @@
-<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
-const bubble = createBubbler();
-import { Alert, Drawer, DrawerContent, UndoRedo } from '../../common';
+<script lang="ts">import { Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
-import Path from '../../Path.svelte';
 import Toggle from '../../Toggle.svelte';
-import { AppService, DraftService, SettingService } from '../../../gen';
+import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history.svelte';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe, AlertTriangle } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe } from 'lucide-svelte';
 import { getContext, untrack } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
@@ -16,7 +13,6 @@ import AppInputs from './AppInputs.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 { sendUserToast } from '../../../toast';
 import DeploymentHistory from './DeploymentHistory.svelte';
 import Awareness from '../../Awareness.svelte';
@@ -36,13 +32,13 @@ import Summary from '../../Summary.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
 import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 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';
+import AppEditorHeaderDeploy from './AppEditorHeaderDeploy.svelte';
+import AppEditorHeaderDeployInitialDraft from './AppEditorHeaderDeployInitialDraft.svelte';
+import { computeSecretUrl } from './appDeploy.svelte';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -66,6 +62,7 @@ let deployedValue = $state(undefined); // Value to diff against
 let deployedBy = $state(undefined); // Author
 let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
 let open = $state(false); // Is confirmation modal open
+let customPathError = $state('');
 const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode, darkMode } = getContext('AppViewerContext');
 const { history, jobsDrawerOpen, refreshComponents } = getContext('AppEditorContext');
 const loading = $state({
@@ -74,7 +71,7 @@ const loading = $state({
     saveDraft: false
 });
 let selectedJobId = $state(undefined);
-let pathError = $state(undefined);
+let pathError = $state('');
 let appExport = $state();
 let draftDrawerOpen = $state(false);
 let saveDrawerOpen = $state(false);
@@ -82,7 +79,7 @@ let inputsDrawerOpen = $state(fromHub);
 let historyBrowserDrawerOpen = $state(false);
 let debugAppDrawerOpen = $state(false);
 let lazyDrawerOpen = $state(false);
-let deploymentMsg = $state(undefined);
+let deploymentMsg = $state('');
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
@@ -366,13 +363,6 @@ async function updateApp(npath) {
         onSavedNewAppPath?.(npath);
     }
 }
-let secretUrl = $state(undefined);
-async function getSecretUrl() {
-    secretUrl = await AppService.getPublicSecretOfApp({
-        workspace: $workspaceStore,
-        path: $appPath
-    });
-}
 async function setPublishState() {
     await computeTriggerables();
     await AppService.updateApp({
@@ -614,11 +604,6 @@ function onKeyDown(event) {
     }
     lock = false;
 }
-let dirtyPath = $state(false);
-let path = $state(undefined);
-let secretUrlHref = $derived(secretUrl
-    ? `${window.location.origin}${base}/public/${$workspaceStore}/${secretUrl}`
-    : undefined);
 let moreItems = $derived([
     {
         displayName: 'Deployment history',
@@ -638,9 +623,13 @@ let moreItems = $derived([
     {
         displayName: 'Public URL',
         icon: Globe,
-        disabled: !secretUrlHref,
-        href: secretUrlHref,
-        hrefTarget: '_blank'
+        action: async () => {
+            const secretUrl = await AppService.getPublicSecretOfApp({
+                workspace: $workspaceStore,
+                path: $appPath
+            });
+            window.open(computeSecretUrl(secretUrl), '_blank');
+        }
     },
     // {
     // 	displayName: 'Publish to Hub',
@@ -736,43 +725,6 @@ function setTheme(newDarkMode) {
 let priorDarkMode = document.documentElement.classList.contains('dark');
 setTheme($app?.darkMode);
 let customPath = $state(savedApp?.custom_path);
-let dirtyCustomPath = $state(false);
-let customPathError = $state('');
-let globalWorkspacedRoute = $state(false);
-async function loadGlobalWorkspacedRouteSetting() {
-    try {
-        const setting = await SettingService.getGlobal({ key: 'app_workspaced_route' });
-        globalWorkspacedRoute = setting ?? false;
-    }
-    catch (error) {
-        globalWorkspacedRoute = false;
-    }
-}
-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);
-}
 $effect(() => {
     if ($openDebugRun == undefined) {
         $openDebugRun = (jobId) => {
@@ -781,20 +733,10 @@ $effect(() => {
         };
     }
 });
-$effect(() => {
-    $appPath && $appPath != '' && secretUrl == undefined && untrack(() => getSecretUrl());
-});
 $effect(() => {
     saveDrawerOpen && untrack(() => compareVersions());
 });
 let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
-let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() || globalWorkspacedRoute ? $workspaceStore + '/' : ''}${customPath}`);
-$effect(() => {
-    ;
-    [customPath];
-    untrack(() => customPath !== undefined && validateCustomPath(customPath));
-});
-loadGlobalWorkspacedRouteSetting();
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -835,45 +777,6 @@ loadGlobalWorkspacedRouteSetting();
 {#if $appPath == ''}
 	<Drawer bind:open={draftDrawerOpen} size="800px">
 		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
-			<Alert bgClass="mb-4" title="Require path" type="info">
-				Choose a path to save the initial draft of the app.
-			</Alert>
-			<h3>Summary</h3>
-			<div class="w-full pt-2">
-				<!-- svelte-ignore a11y_autofocus -->
-				<input
-					autofocus
-					type="text"
-					placeholder="App summary"
-					class="text-sm w-full font-semibold"
-					onkeydown={stopPropagation(bubble('keydown'))}
-					bind:value={$summary}
-					onkeyup={() => {
-						if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
-							path?.setName(
-								$summary
-									.toLowerCase()
-									.replace(/[^a-z0-9_]/g, '_')
-									.replace(/-+/g, '_')
-									.replace(/^-|-$/g, '')
-							)
-						}
-					}}
-				/>
-			</div>
-			<div class="py-2"></div>
-			<Path
-				autofocus={false}
-				bind:this={path}
-				bind:error={pathError}
-				bind:path={newEditedPath}
-				bind:dirty={dirtyPath}
-				initialPath=""
-				namePlaceholder="app"
-				kind="app"
-			/>
-			<div class="py-4"></div>
-
 			{#snippet actions()}
 				<div>
 					<Button
@@ -885,6 +788,8 @@ loadGlobalWorkspacedRouteSetting();
 					</Button>
 				</div>
 			{/snippet}
+
+			<AppEditorHeaderDeployInitialDraft {summary} {appPath} bind:pathError bind:newEditedPath />
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -907,59 +812,6 @@ loadGlobalWorkspacedRouteSetting();
 />
 <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>
-		{/if}
-		<span class="text-secondary text-sm font-bold">Summary</span>
-		<div class="w-full pt-2">
-			<!-- svelte-ignore a11y_autofocus -->
-			<input
-				autofocus
-				type="text"
-				placeholder="App summary"
-				class="text-sm w-full"
-				bind:value={$summary}
-				onkeydown={stopPropagation(bubble('keydown'))}
-				onkeyup={() => {
-					if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
-						path?.setName(
-							$summary
-								.toLowerCase()
-								.replace(/[^a-z0-9_]/g, '_')
-								.replace(/-+/g, '_')
-								.replace(/^-|-$/g, '')
-						)
-					}
-				}}
-			/>
-		</div>
-		<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 -->
-			<input
-				type="text"
-				placeholder="Optional deployment message"
-				class="text-sm w-full"
-				bind:value={deploymentMsg}
-			/>
-		</div>
-		<div class="py-4"></div>
-		<span class="text-secondary text-sm font-bold">Path</span>
-		<Path
-			bind:this={path}
-			bind:dirty={dirtyPath}
-			bind:error={pathError}
-			bind:path={newEditedPath}
-			initialPath={newPath}
-			namePlaceholder="app"
-			kind="app"
-			autofocus={false}
-		/>
-
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
@@ -1019,111 +871,21 @@ loadGlobalWorkspacedRouteSetting();
 				</Button>
 			</div>
 		{/snippet}
-		<div class="py-2"></div>
-		<Alert title="App executed on behalf of you">
-			A viewer of the app will execute the runnables of the app on behalf of the publisher (you)
-			<Tooltip>
-				It ensures that all required resources/runnable visible for publisher but not for viewer at
-				time of creating the app would prevent the execution of the app. To guarantee tight
-				security, a policy is computed at time of deployment of the app which only allow the
-				scripts/flows referred to in the app to be called on behalf of. Furthermore, static
-				parameters are not overridable. Hence, users will only be able to use the app as intended by
-				the publisher without risk for leaking resources not used in the app.
-			</Tooltip>
-		</Alert>
-
-		<div class="mt-10"></div>
-
-		<h2>Public URL</h2>
-
-		<div class="my-6">
-			<div class="flex gap-2 items-center mb-2">
-				<Toggle
-					options={{
-						left: `Require login and read-access`,
-						right: `No login required`
-					}}
-					checked={policy.execution_mode == 'anonymous'}
-					on:change={(e) => {
-						policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
-						setPublishState()
-					}}
-					disabled={$appPath == ''}
-				/>
-			</div>
-			{#if $appPath == ''}
-				<ClipboardPanel content={`Save this app once to get the public secret URL`} size="md" />
-			{:else if secretUrlHref}
-				<ClipboardPanel content={secretUrlHref} size="md" />
-			{:else}<Loader2 class="animate-spin" />
-			{/if}
-			<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 !($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>
-				{/if}
-				{#if !$enterpriseLicense}
-					<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap mb-2">
-						<AlertTriangle size={16} />
-						EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-					</div>
-				{/if}
-				<Toggle
-					on:change={({ detail }) => {
-						customPath = detail ? '' : undefined
-						if (customPath === undefined) {
-							customPathError = ''
-						}
-					}}
-					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'}
-						oninput={() => {
-							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
-		</Alert>
-
-		<a
-			href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
-			class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
-		>
+		<AppEditorHeaderDeploy
+			{newPath}
+			{policy}
+			{setPublishState}
+			appPath={$appPath}
+			{onLatest}
+			{savedApp}
+			bind:summary={$summary}
+			bind:customPath
+			bind:deploymentMsg
+			bind:customPathError
+			bind:pathError
+			bind:newEditedPath
+			hideSecretUrl={false}
+		/>
 	</DrawerContent>
 </Drawer>
 

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">import { Alert } from '../../common';
+import Toggle from '../../Toggle.svelte';
+import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { Loader2, AlertTriangle } from 'lucide-svelte';
+import Tooltip from '../../Tooltip.svelte';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import { untrack } from 'svelte';
+import { AppService, SettingService } from '../../../gen';
+import Path from '../../Path.svelte';
+import { computeSecretUrl } from './appDeploy.svelte';
+import { base } from '../../../base';
+import { isCloudHosted } from '../../../cloud';
+let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false } = $props();
+let dirtyCustomPath = $state(false);
+let path = $state(undefined);
+let dirtyPath = $state(false);
+async function appExists(customPath) {
+    return await AppService.customPathExists({
+        workspace: $workspaceStore,
+        customPath
+    });
+}
+let globalWorkspacedRoute = $state(false);
+async function loadGlobalWorkspacedRouteSetting() {
+    try {
+        const setting = await SettingService.getGlobal({ key: 'app_workspaced_route' });
+        globalWorkspacedRoute = setting ?? false;
+    }
+    catch (error) {
+        globalWorkspacedRoute = false;
+    }
+}
+loadGlobalWorkspacedRouteSetting();
+let secretUrl = $state(undefined);
+let secretUrlHref = $derived(secretUrl ? computeSecretUrl(secretUrl) : undefined);
+let fullCustomUrl = $derived(`${window.location.origin}${base}/a/${isCloudHosted() || globalWorkspacedRoute ? $workspaceStore + '/' : ''}${customPath}`);
+async function getSecretUrl() {
+    secretUrl = await AppService.getPublicSecretOfApp({
+        workspace: $workspaceStore,
+        path: appPath
+    });
+}
+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);
+}
+$effect(() => {
+    ;
+    [customPath];
+    untrack(() => customPath !== undefined && validateCustomPath(customPath));
+});
+$effect(() => {
+    appPath && appPath != '' && secretUrl == undefined && untrack(() => getSecretUrl());
+});
+</script>
+
+{#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>
+{/if}
+<span class="text-secondary text-sm font-bold">Summary</span>
+<div class="w-full pt-2">
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		autofocus
+		type="text"
+		placeholder="App summary"
+		class="text-sm w-full"
+		bind:value={summary}
+		onkeydown={(e) => {
+			e.stopPropagation()
+		}}
+		onkeyup={() => {
+			if (appPath == '' && summary?.length > 0 && !dirtyPath) {
+				path?.setName(
+					summary
+						.toLowerCase()
+						.replace(/[^a-z0-9_]/g, '_')
+						.replace(/-+/g, '_')
+						.replace(/^-|-$/g, '')
+				)
+			}
+		}}
+	/>
+</div>
+<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 -->
+	<input
+		type="text"
+		placeholder="Optional deployment message"
+		class="text-sm w-full"
+		bind:value={deploymentMsg}
+	/>
+</div>
+<div class="py-4"></div>
+<span class="text-secondary text-sm font-bold">Path</span>
+<Path
+	bind:this={path}
+	bind:dirty={dirtyPath}
+	bind:error={pathError}
+	bind:path={newEditedPath}
+	initialPath={newPath}
+	namePlaceholder="app"
+	kind="app"
+	autofocus={false}
+/>
+
+<div class="py-2"></div>
+<Alert title="App executed on behalf of you">
+	A viewer of the app will execute the runnables of the app on behalf of the publisher (you)
+	<Tooltip>
+		It ensures that all required resources/runnable visible for publisher but not for viewer at time
+		of creating the app would prevent the execution of the app. To guarantee tight security, a
+		policy is computed at time of deployment of the app which only allow the scripts/flows referred
+		to in the app to be called on behalf of. Furthermore, static parameters are not overridable.
+		Hence, users will only be able to use the app as intended by the publisher without risk for
+		leaking resources not used in the app.
+	</Tooltip>
+</Alert>
+
+<div class="mt-10"></div>
+
+{#if !hideSecretUrl}
+	<h2>Public URL</h2>
+
+	<div class="my-6">
+		<div class="flex gap-2 items-center mb-2">
+			<Toggle
+				options={{
+					left: `Require login and read-access`,
+					right: `No login required`
+				}}
+				checked={policy.execution_mode == 'anonymous'}
+				on:change={(e) => {
+					policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
+					setPublishState()
+				}}
+				disabled={appPath == ''}
+			/>
+		</div>
+		{#if appPath == ''}
+			<ClipboardPanel content={`Save this app once to get the public secret URL`} size="md" />
+		{:else if secretUrlHref}
+			<ClipboardPanel content={secretUrlHref} size="md" />
+		{:else}<Loader2 class="animate-spin" />
+		{/if}
+		<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 !($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>
+			{/if}
+			{#if !$enterpriseLicense}
+				<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap mb-2">
+					<AlertTriangle size={16} />
+					EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+				</div>
+			{/if}
+			<Toggle
+				on:change={({ detail }) => {
+					customPath = detail ? '' : undefined
+					if (customPath === undefined) {
+						customPathError = ''
+					}
+				}}
+				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'}
+					oninput={() => {
+						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
+	</Alert>
+
+	<a
+		href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
+		class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
+	>
+{/if}

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

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    policy: any;
+    setPublishState: () => void;
+    appPath: string;
+    customPath: string | undefined;
+    onLatest: boolean;
+    savedApp: any;
+    summary: string;
+    deploymentMsg: string | undefined;
+    customPathError: string;
+    pathError: string;
+    newEditedPath: string;
+    newPath: string;
+    hideSecretUrl: boolean;
+};
+declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "customPath" | "deploymentMsg" | "customPathError" | "pathError" | "newEditedPath">;
+type AppEditorHeaderDeploy = ReturnType<typeof AppEditorHeaderDeploy>;
+export default AppEditorHeaderDeploy;