windmill-components 1.542.5 → 1.555.0

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;

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { Alert } from '../../common';
+import Path from '../../Path.svelte';
+let { summary, appPath, pathError = $bindable(), newEditedPath = $bindable() } = $props();
+let path = $state(undefined);
+let dirtyPath = $state(false);
+</script>
+
+<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={(e) => {
+			e.stopPropagation()
+		}}
+		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>

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

@@ -0,0 +1,8 @@
+declare const AppEditorHeaderDeployInitialDraft: import("svelte").Component<{
+    summary: any;
+    appPath: any;
+    pathError?: any;
+    newEditedPath?: any;
+}, {}, "pathError" | "newEditedPath">;
+type AppEditorHeaderDeployInitialDraft = ReturnType<typeof AppEditorHeaderDeployInitialDraft>;
+export default AppEditorHeaderDeployInitialDraft;

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

@@ -74,7 +74,6 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 }
 </script>
 
-<input />
 <div class="w-full z-[1000] overflow-visible h-full">
 	<div class={$app.hideLegacyTopBar ? 'hidden' : ''}>
 		<div
@@ -113,7 +112,13 @@ export function moveComponentBetweenSubgrids(componentId, subgrid, position) {
 			<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} />
+					<Toggle
+						size="xs"
+						bind:checked={
+							() => $app.norefreshbar ?? false,
+							(v) => ($app.norefreshbar !== undefined || v) && ($app.norefreshbar = v)
+						}
+					/>
 				</div>
 				<div>
 					{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}

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

@@ -0,0 +1 @@
+export declare function computeSecretUrl(secretUrl: string): string;

package/package/components/apps/editor/appDeploy.svelte.js

@@ -0,0 +1,6 @@
+import { base } from "../../../base";
+import { workspaceStore } from "../../../stores";
+import { get } from "svelte/store";
+export function computeSecretUrl(secretUrl) {
+    return `${window.location.origin}${base}/public/${get(workspaceStore)}/${secretUrl}`;
+}

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

@@ -124,4 +124,5 @@ export type GridShadow = {
 };
 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 declare function emptyApp(): App;
 export {};

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

@@ -1,4 +1,4 @@
-import { ccomponents, components, getRecommendedDimensionsByComponent } from './component';
+import { ccomponents, components, getRecommendedDimensionsByComponent, presets, processDimension } from './component';
 import { gridColumns } from '../gridUtils';
 import { allItems, processSubcomponents } from '../utils';
 import { get } from 'svelte/store';
@@ -7,6 +7,7 @@ import { sendUserToast } from '../../../toast';
 import { getNextId } from '../../flows/idUtils';
 import { enterpriseLicense } from '../../../stores';
 import gridHelp from '../svelte-grid/utils/helper';
+import { DEFAULT_THEME } from './componentsPanel/themeUtils';
 export function allItemsWithLocation(grid, subgrids) {
     const gridItems = grid.map((x, i) => ({
         location: {
@@ -968,3 +969,31 @@ export function animateTo(start, end, onUpdate) {
 function easeInOut(t) {
     return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
 }
+export function emptyApp() {
+    let value = {
+        grid: [],
+        fullscreen: false,
+        unusedInlineScripts: [],
+        hiddenInlineScripts: [],
+        theme: {
+            type: 'path',
+            path: DEFAULT_THEME
+        }
+    };
+    const preset = presets['topbarcomponent'];
+    const id = insertNewGridItem(value, appComponentFromType(preset.targetComponent, preset.configuration, undefined, {
+        customCss: {
+            container: {
+                class: '!p-0',
+                style: ''
+            }
+        }
+    }), undefined, undefined, 'topbar', { x: 0, y: 0 }, {
+        3: processDimension(preset.dims, 3),
+        12: processDimension(preset.dims, 12)
+    }, true, true);
+    setUpTopBarComponentContent(id, value);
+    value.hideLegacyTopBar = true;
+    value.mobileViewOnSmallerScreens = false;
+    return value;
+}

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

@@ -833,6 +833,7 @@ const chunk9Components = new Set(['verticalsplitpanescomponent']);
 				id={component.id}
 				tabs={component.tabs}
 				disabledTabs={component.disabledTabs}
+				hiddenTabs={component.hiddenTabs}
 				onTabChange={component.onTabChange}
 				customCss={component.customCss}
 				{componentContainerHeight}

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

@@ -1,5 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { handleEscape, handlePaste, handleArrowUp, handleCut, handleCopy, down, right, left } from './componentCallbacks.svelte';
+import { isCurrentlyInTutorial } from '../../../../stores';
 const { history, movingcomponents, jobsDrawerOpen, runnableJobEditorPanel } = getContext('AppEditorContext');
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const ctx = {
@@ -17,7 +18,8 @@ function keydown(event) {
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
         ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
-        $runnableJobEditorPanel.focused) {
+        $runnableJobEditorPanel.focused ||
+        isCurrentlyInTutorial.val) {
         return;
     }
     switch (event.key) {

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

@@ -150,6 +150,7 @@ export type FileInputComponent = BaseComponent<'fileinputcomponent'> & {
 export type TabsComponent = BaseComponent<'tabscomponent'> & {
     tabs: string[];
     disabledTabs: RichConfiguration[];
+    hiddenTabs: RichConfiguration[];
     onTabChange?: string[];
 };
 export type ListComponent = BaseComponent<'listcomponent'>;
@@ -706,11 +707,23 @@ export declare const components: {
                     readonly value: undefined;
                     readonly fieldType: "icon-select";
                 };
+                readonly tooltip: {
+                    readonly type: "static";
+                    readonly value: "";
+                    readonly fieldType: "text";
+                    readonly tooltip: "Tooltip text to show on hover";
+                };
                 readonly triggerOnAppLoad: {
                     readonly type: "static";
                     readonly value: false;
                     readonly fieldType: "boolean";
                 };
+                readonly runInBackground: {
+                    readonly type: "static";
+                    readonly value: false;
+                    readonly fieldType: "boolean";
+                    readonly tooltip: "Run the job in the background without blocking the button. Multiple clicks will trigger multiple jobs.";
+                };
                 readonly onSuccess: {
                     readonly type: "oneOf";
                     readonly tooltip: "Action to perform on success";
@@ -866,7 +879,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };
@@ -1197,7 +1210,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };
@@ -1435,7 +1448,7 @@ export declare const components: {
                                 readonly tooltip: "The message of the toast to display";
                                 readonly fieldType: "text";
                                 readonly type: "static";
-                                readonly value: "An error occured";
+                                readonly value: "An error occurred";
                                 readonly placeholder: "Hello there";
                                 readonly onDemandOnly: true;
                             };
@@ -3276,6 +3289,8 @@ export declare const components: {
             readonly componentInput: undefined;
             readonly numberOfSubgrids: 2;
             readonly tabs: string[];
+            readonly disabledTabs: RichConfiguration[];
+            readonly hiddenTabs: RichConfiguration[];
         };
     };
     readonly steppercomponent: {
@@ -3857,7 +3872,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly fieldType: "object";
                     readonly value: {};
-                    readonly tooltip: "This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings.";
+                    readonly tooltip: "This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings or { \"label\": \"myLabel\", \"value\": \"myValue\" }.";
                 };
                 readonly displayType: {
                     readonly fieldType: "boolean";

package/package/components/apps/editor/component/components.js

@@ -199,7 +199,7 @@ const onErrorClick = {
                 tooltip: 'The message of the toast to display',
                 fieldType: 'text',
                 type: 'static',
-                value: 'An error occured',
+                value: 'An error occurred',
                 placeholder: 'Hello there',
                 onDemandOnly: true
             },
@@ -879,11 +879,23 @@ export const components = {
                     value: undefined,
                     fieldType: 'icon-select'
                 },
+                tooltip: {
+                    type: 'static',
+                    value: '',
+                    fieldType: 'text',
+                    tooltip: 'Tooltip text to show on hover'
+                },
                 triggerOnAppLoad: {
                     type: 'static',
                     value: false,
                     fieldType: 'boolean'
                 },
+                runInBackground: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    tooltip: 'Run the job in the background without blocking the button. Multiple clicks will trigger multiple jobs.'
+                },
                 onSuccess: onSuccessClick,
                 onError: onErrorClick,
                 confirmationModal: {
@@ -2456,7 +2468,15 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
             },
             componentInput: undefined,
             numberOfSubgrids: 2,
-            tabs: ['First tab', 'Second tab']
+            tabs: ['First tab', 'Second tab'],
+            disabledTabs: [
+                { type: 'static', value: false, fieldType: 'boolean' },
+                { type: 'static', value: false, fieldType: 'boolean' }
+            ],
+            hiddenTabs: [
+                { type: 'static', value: false, fieldType: 'boolean' },
+                { type: 'static', value: false, fieldType: 'boolean' }
+            ]
         }
     },
     steppercomponent: {
@@ -2994,7 +3014,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     type: 'static',
                     fieldType: 'object',
                     value: {},
-                    tooltip: 'This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings.'
+                    tooltip: 'This enables setting form enum values dynamically using an object: keys are field names, and values are arrays of strings or { "label": "myLabel", "value": "myValue" }.'
                 },
                 displayType: {
                     fieldType: 'boolean',

package/package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -35,7 +35,7 @@ $effect(() => {
 
 {#if render && object != undefined && Object.keys(object).length > 0}
 	{#if $hasResult[componentId] || $search == ''}
-		<div class="pl-2 !cursor-pointer" data-connection-button>
+		<div class="pl-2 !cursor-pointer component-output-viewer-{componentId}" data-connection-button>
 			<ObjectViewer
 				json={filtered}
 				on:select

package/package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -8,12 +8,12 @@ import { emptySchema } from '../../../../utils';
 import { defaultScriptLanguages, getScriptByPath, processLangs } from '../../../../scripts';
 import { Building, GitFork, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-import { fly } from 'svelte/transition';
 import { defaultCode } from '../component';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 import RunnableSelector from '../settingsPanel/mainInput/RunnableSelector.svelte';
-import { defaultScripts } from '../../../../stores';
+import { defaultScripts, isCurrentlyInTutorial } from '../../../../stores';
 import DefaultScripts from '../../../DefaultScripts.svelte';
+import { twMerge } from 'tailwind-merge';
 let { componentType = undefined, showScriptPicker = false, rawApps = false, unusedInlineScripts } = $props();
 let tab = $state('workspacescripts');
 let filter = $state('');
@@ -92,8 +92,10 @@ let langs = $derived(processLangs(undefined, $defaultScripts?.order ?? Object.ke
 </Drawer>
 
 <div
-	class="flex flex-col px-4 gap-2 text-sm"
-	in:fly={{ duration: 50 }}
+	class={twMerge(
+		'flex flex-col px-4 gap-2 text-sm',
+		isCurrentlyInTutorial.val ? 'h-full overflow-y-clip' : ''
+	)}
 	id="app-editor-empty-runnable"
 >
 	<div class="mt-2 flex justify-between gap-4" id="app-editor-runnable-header">

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
+}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "isOpen" | "inlineScript">;
+}, "inlineScript" | "isOpen">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "fields" | "runnable">;
+}, {}, {}, "runnable" | "fields">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -337,8 +337,10 @@ function onTemplateChange(e) {
 			<GridTab
 				bind:tabs={item.data.tabs}
 				bind:disabledTabs={item.data.disabledTabs}
+				bind:hiddenTabs={item.data.hiddenTabs}
 				bind:component={item.data}
 				canDisableTabs
+				canHideTabs
 			/>
 		{:else if item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={item.data.license} />