windmill-components 1.542.5 → 1.555.0

package/package/components/apps/components/layout/AppTabs.svelte

@@ -11,7 +11,7 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { deepEqual } from 'fast-equals';
-let { id, configuration, componentContainerHeight, tabs, customCss = undefined, render, disabledTabs, onTabChange = undefined } = $props();
+let { id, configuration, componentContainerHeight, tabs, customCss = undefined, render, disabledTabs, hiddenTabs, onTabChange = undefined } = $props();
 let resolvedConfig = $state(initConfig(components['tabscomponent'].initialData.configuration, configuration));
 let everRender = $state(render);
 $effect.pre(() => {
@@ -51,18 +51,28 @@ $componentControl[id] = {
         }
     },
     left: () => {
-        const index = tabs.indexOf(selected);
-        if (index > 0) {
-            selected = tabs[index - 1];
-            return true;
+        const currentIndex = tabs.indexOf(selected);
+        if (currentIndex > 0) {
+            // Find the next visible tab to the left
+            for (let i = currentIndex - 1; i >= 0; i--) {
+                if (!resolvedHiddenTabs[i]) {
+                    selected = tabs[i];
+                    return true;
+                }
+            }
         }
         return false;
     },
     right: () => {
-        const index = tabs.indexOf(selected);
-        if (index < tabs.length - 1) {
-            selected = tabs[index + 1];
-            return true;
+        const currentIndex = tabs.indexOf(selected);
+        if (currentIndex < tabs.length - 1) {
+            // Find the next visible tab to the right
+            for (let i = currentIndex + 1; i < tabs.length; i++) {
+                if (!resolvedHiddenTabs[i]) {
+                    selected = tabs[i];
+                    return true;
+                }
+            }
         }
         return false;
     },
@@ -88,6 +98,26 @@ $effect.pre(() => {
     selected != undefined && untrack(() => handleTabSelection());
 });
 let resolvedDisabledTabs = $state([]);
+let resolvedHiddenTabs = $state([]);
+// Filter visible tabs based on hiddenTabs configuration
+let visibleTabsIndices = $derived((tabs ?? []).map((_, index) => index).filter((index) => !resolvedHiddenTabs[index]));
+// Auto-select first visible tab if current selection is hidden or invalid
+$effect(() => {
+    if (visibleTabsIndices.length === 0) {
+        // Handle case where all tabs are hidden
+        selected = '';
+        selectedIndex = -1;
+        return;
+    }
+    const currentIndex = tabs?.indexOf(selected) ?? -1;
+    if (currentIndex === -1 || resolvedHiddenTabs[currentIndex]) {
+        const firstVisibleTab = tabs[visibleTabsIndices[0]];
+        if (selected !== firstVisibleTab) {
+            // Current selection is hidden or invalid, select first visible tab
+            selected = firstVisibleTab;
+        }
+    }
+});
 </script>
 
 <InputValue key="kind" {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
@@ -113,6 +143,15 @@ let resolvedDisabledTabs = $state([]);
 	/>
 {/each}
 
+{#each hiddenTabs ?? [] as hideTab, index}
+	<InputValue
+		key="tabHidden {index}"
+		{id}
+		input={hideTab}
+		bind:value={resolvedHiddenTabs[index]}
+	/>
+{/each}
+
 {#if everRender}
 	<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full h-full' : 'w-full'}>
 		{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
@@ -123,16 +162,18 @@ let resolvedDisabledTabs = $state([]);
 					style={css?.tabRow?.style}
 				>
 					{#each tabs ?? [] as res, index}
-						<Tab
-							value={res}
-							class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
-							style={css?.allTabs?.style}
-							selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
-							selectedStyle={css?.selectedTab?.style}
-							disabled={resolvedDisabledTabs[index]}
-						>
-							<span class="font-semibold">{res}</span>
-						</Tab>
+						{#if !resolvedHiddenTabs[index]}
+							<Tab
+								value={res}
+								class={twMerge(css?.allTabs?.class, 'wm-tabs-alltabs')}
+								style={css?.allTabs?.style}
+								selectedClass={twMerge(css?.selectedTab?.class, 'wm-tabs-selectedTab')}
+								selectedStyle={css?.selectedTab?.style}
+								disabled={resolvedDisabledTabs[index]}
+							>
+								<span class="font-semibold">{res}</span>
+							</Tab>
+						{/if}
 					{/each}
 				</Tabs>
 			</div>
@@ -146,78 +187,82 @@ let resolvedDisabledTabs = $state([]);
 				style={css?.tabRow?.style}
 			>
 				{#each tabs ?? [] as res, index}
-					<button
-						onpointerdown={stopPropagation(bubble('pointerdown'))}
-						onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
-						disabled={resolvedDisabledTabs[index]}
-						class={twMerge(
-							'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
-							css?.allTabs?.class,
-							'wm-tabs-alltabs',
-							selected == res
-								? twMerge(
-										'border-r  border-primary border-l bg-surface text-primary',
-										css?.selectedTab?.class,
-										'wm-tabs-selectedTab'
-									)
-								: '',
-							resolvedDisabledTabs[index]
-								? 'opacity-50 cursor-not-allowed hover:text-secondary'
-								: ''
-						)}
-						style={selected == res
-							? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
-							: css?.allTabs?.style}
-					>
-						{res}
-					</button>
-				{/each}
-			</div>
-		{/if}
-		{#if resolvedConfig.tabsKind == 'accordion'}
-			<div class="flex flex-col w-full">
-				{#each tabs ?? [] as res, index}
-					<div class="border-b">
+					{#if !resolvedHiddenTabs[index]}
 						<button
 							onpointerdown={stopPropagation(bubble('pointerdown'))}
 							onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
 							disabled={resolvedDisabledTabs[index]}
 							class={twMerge(
-								'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+								'rounded-sm !truncate text-sm  hover:text-primary px-1 py-2',
 								css?.allTabs?.class,
 								'wm-tabs-alltabs',
 								selected == res
 									? twMerge(
-											'bg-surface text-primary ',
+											'border-r  border-primary border-l bg-surface text-primary',
 											css?.selectedTab?.class,
 											'wm-tabs-selectedTab'
 										)
-									: 'text-secondary',
+									: '',
 								resolvedDisabledTabs[index]
 									? 'opacity-50 cursor-not-allowed hover:text-secondary'
 									: ''
 							)}
+							style={selected == res
+								? [css?.allTabs?.style, css?.selectedTab?.style].filter(Boolean).join(';')
+								: css?.allTabs?.style}
 						>
-							<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
 							{res}
 						</button>
-						<div class={selected == res ? 'border-t' : ''}>
-							<SubGridEditor
-								{id}
-								visible={render && index === selectedIndex}
-								subGridId={`${id}-${index}`}
-								class={twMerge(css?.container?.class, 'wm-tabs-container')}
-								style={css?.container?.style}
-								containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
-								onFocus={() => {
-									if (!$connectingInput.opened) {
-										$selectedComponent = [id]
-										handleTabSelection()
-									}
-								}}
-							/>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+		{#if resolvedConfig.tabsKind == 'accordion'}
+			<div class="flex flex-col w-full">
+				{#each tabs ?? [] as res, index}
+					{#if !resolvedHiddenTabs[index]}
+						<div class="border-b">
+							<button
+								onpointerdown={stopPropagation(bubble('pointerdown'))}
+								onclick={() => !resolvedDisabledTabs[index] && (selected = res)}
+								disabled={resolvedDisabledTabs[index]}
+								class={twMerge(
+									'w-full text-left bg-surface !truncate text-sm hover:text-primary px-1 py-2',
+									css?.allTabs?.class,
+									'wm-tabs-alltabs',
+									selected == res
+										? twMerge(
+												'bg-surface text-primary ',
+												css?.selectedTab?.class,
+												'wm-tabs-selectedTab'
+											)
+										: 'text-secondary',
+									resolvedDisabledTabs[index]
+										? 'opacity-50 cursor-not-allowed hover:text-secondary'
+										: ''
+								)}
+							>
+								<span class="mr-2 w-8 font-mono">{selected == res ? '-' : '+'}</span>
+								{res}
+							</button>
+							<div class={selected == res ? 'border-t' : ''}>
+								<SubGridEditor
+									{id}
+									visible={render && index === selectedIndex}
+									subGridId={`${id}-${index}`}
+									class={twMerge(css?.container?.class, 'wm-tabs-container')}
+									style={css?.container?.style}
+									containerHeight={componentContainerHeight - (titleBarHeight * tabs.length + 40)}
+									onFocus={() => {
+										if (!$connectingInput.opened) {
+											$selectedComponent = [id]
+											handleTabSelection()
+										}
+									}}
+								/>
+							</div>
 						</div>
-					</div>
+					{/if}
 				{/each}
 			</div>
 		{:else}

package/package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     customCss?: ComponentCustomCSS<'tabscomponent'> | undefined;
     render: boolean;
     disabledTabs: RichConfiguration[];
+    hiddenTabs: RichConfiguration[];
     onTabChange?: string[] | undefined;
 }
 declare const AppTabs: import("svelte").Component<Props, {}, "">;

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>