windmill-components 1.642.0 → 1.655.0

package/package/components/triggers/websocket/WebsocketCapture.svelte

@@ -17,22 +17,24 @@ let { captureInfo = undefined, isValid = undefined, hasPreprocessor = false, isF
 		{isFlow}
 		{captureLoading}
 	>
-		<svelte:fragment slot="description">
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listenning to websocket events...
-					</p>
+		{#snippet description()}
+			
+				{#if captureInfo.active}
+					{#if captureInfo.connectionInfo?.connected}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Listenning to websocket events...
+						</p>
+					{:else}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Connecting to websocket...
+						</p>
+					{/if}
 				{:else}
 					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to websocket...
+						Start capturing to listen to websocket events.
 					</p>
 				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to websocket events.
-				</p>
-			{/if}
-		</svelte:fragment>
+			
+			{/snippet}
 	</CaptureSection>
 {/if}

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -22,6 +22,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -61,7 +62,7 @@ let suspendedJobsModal = $state(null);
 let originalConfig = $state(undefined);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const websocketCfg = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived.by(() => {
     const invalidInitialMessages = initial_messages.some((v) => {
         if ('runnable_result' in v) {
@@ -595,10 +596,14 @@ $effect(() => {
 				</div>
 			</Section>
 
-			<TriggerFilters bind:filters disabled={!can_write} />
-
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Filters', active: filters.length > 0 }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
+					<TriggerFilters bind:filters disabled={!can_write} />
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -618,6 +623,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/tutorials/Tutorial.svelte

@@ -6,13 +6,9 @@ import SkipTutorials from './SkipTutorials.svelte';
 import TutorialControls from './TutorialControls.svelte';
 import TutorialInner from './TutorialInner.svelte';
 import { isCurrentlyInTutorial } from '../../stores';
-export let index = 0;
-export let name = 'action';
-export let tainted = false;
-export let onDestroyed = undefined;
-export let getSteps = () => [];
+let { index = 0, name = 'action', tainted = false, onDestroyed = undefined, getSteps = () => [] } = $props();
 let totalSteps = 0;
-let tutorial = undefined;
+let tutorial = $state(undefined);
 const dispatch = createEventDispatcher();
 // Render controls needs to be exposed so steps that have a custom render can call it
 export function renderControls({ config, state }) {

package/package/components/tutorials/Tutorial.svelte.d.ts

@@ -1,4 +1,15 @@
 import { type Driver, type DriveStep } from 'driver.js';
+type Options = {
+    indexToInsertAt?: number;
+    skipStepsCount?: number;
+};
+interface Props {
+    index?: number;
+    name?: string;
+    tainted?: boolean;
+    onDestroyed?: (() => void) | undefined;
+    getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[];
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,24 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
-    index?: number;
-    name?: string;
-    tainted?: boolean;
-    onDestroyed?: (() => void) | undefined;
-    getSteps?: (driver: Driver, options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => DriveStep[];
-    renderControls?: ({ config, state }: {
-        config: any;
-        state: any;
-    }) => void;
-    runTutorial?: (options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => void;
-}, {
+declare const Tutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     skipAll: CustomEvent<any>;
     error: CustomEvent<any>;
 } & {
@@ -39,10 +33,7 @@ declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
         config: any;
         state: any;
     }) => void;
-    runTutorial: (options?: {
-        indexToInsertAt?: number;
-        skipStepsCount?: number;
-    } | undefined) => void;
-}, string>;
+    runTutorial: (options?: Options | undefined) => void;
+}, "">;
 type Tutorial = InstanceType<typeof Tutorial>;
 export default Tutorial;

package/package/components/tutorials/TutorialControls.svelte

@@ -2,8 +2,7 @@
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher } from 'svelte';
 import Alert from '../common/alert/Alert.svelte';
-export let activeIndex = undefined;
-export let totalSteps = undefined;
+let { activeIndex = undefined, totalSteps = undefined } = $props();
 const dispatch = createEventDispatcher();
 </script>
 

package/package/components/tutorials/TutorialControls.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    activeIndex?: number | undefined;
+    totalSteps?: number | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,14 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TutorialControls: $$__sveltets_2_IsomorphicComponent<{
-    activeIndex?: number | undefined;
-    totalSteps?: number | undefined;
-}, {
+declare const TutorialControls: $$__sveltets_2_IsomorphicComponent<Props, {
     previous: CustomEvent<any>;
     next: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TutorialControls = InstanceType<typeof TutorialControls>;
 export default TutorialControls;

package/package/components/tutorials/TutorialWrapper.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { getTutorialIndex } from '../../tutorials/config';
+<script lang="ts">import { untrack } from 'svelte';
+import { getTutorialIndex } from '../../tutorials/config';
 let { id, component: Component, name, onInstanceReady, onSkipAll } = $props();
 let instance = $state(undefined);
-const index = getTutorialIndex(id);
+const index = getTutorialIndex(untrack(() => id));
 $effect(() => {
     if (instance) {
         onInstanceReady(id, instance);

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte

@@ -2,9 +2,8 @@
 import {} from 'driver.js';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 export function runTutorial(skipStepsCount = undefined) {
     tutorial?.runTutorial({ skipStepsCount });
 }

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    name: string;
+    index: number;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,17 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const BackgroundRunnablesTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: (skipStepsCount?: number | undefined) => void;
-}, {
+declare const BackgroundRunnablesTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: (skipStepsCount?: number | undefined) => void;
-}, string>;
+}, "">;
 type BackgroundRunnablesTutorial = InstanceType<typeof BackgroundRunnablesTutorial>;
 export default BackgroundRunnablesTutorial;

package/package/components/tutorials/app/ConnectionTutorial.svelte

@@ -4,9 +4,8 @@ import { getContext } from 'svelte';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
 import { updateProgress } from '../../../tutorialUtils';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 export function runTutorial() {

package/package/components/tutorials/app/ConnectionTutorial.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    name: string;
+    index: number;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,17 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ConnectionTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: () => void;
-}, {
+declare const ConnectionTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: () => void;
-}, string>;
+}, "">;
 type ConnectionTutorial = InstanceType<typeof ConnectionTutorial>;
 export default ConnectionTutorial;

package/package/components/tutorials/app/ExpressionEvaluationTutorial.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import Tutorial from '../Tutorial.svelte';
-export let name;
-export let index;
-let tutorial = undefined;
+let { name, index } = $props();
+let tutorial = $state(undefined);
 export function runTutorial() {
     tutorial?.runTutorial();
 }

package/package/components/tutorials/app/ExpressionEvaluationTutorial.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    name: string;
+    index: number;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,17 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ExpressionEvaluationTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: () => void;
-}, {
+declare const ExpressionEvaluationTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: () => void;
-}, string>;
+}, "">;
 type ExpressionEvaluationTutorial = InstanceType<typeof ExpressionEvaluationTutorial>;
 export default ExpressionEvaluationTutorial;

package/package/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte

@@ -2,14 +2,14 @@
 import Tutorial from '../Tutorial.svelte';
 import { goto } from '$app/navigation';
 import { base } from '../../../base';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { wait } from '../../../utils';
 import { DELAY_MEDIUM } from '../utils';
 let { index } = $props();
 let tutorial = $state(undefined);
 export function runTutorial() {
     // Check if we're on the homepage
-    if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+    if (page.url.pathname !== `${base}/` && page.url.pathname !== `${base}`) {
         // Redirect to homepage with a tutorial parameter
         goto(`${base}/?tutorial=workspace-onboarding-operator`);
     }
@@ -119,7 +119,7 @@ export function runTutorial() {
 						driver.destroy()
 
 						// Clean up URL parameter if present
-						if ($page.url.searchParams.has('tutorial')) {
+						if (page.url.searchParams.has('tutorial')) {
 							goto(`${base}/`, { replaceState: true })
 						}
 					}

package/package/components/tutorials/workspace/WorkspaceOnboardingTutorial.svelte

@@ -2,12 +2,12 @@
 import Tutorial from '../Tutorial.svelte';
 import { goto } from '$app/navigation';
 import { base } from '../../../base';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 let { index } = $props();
 let tutorial = $state(undefined);
 export function runTutorial() {
     // Check if we're on the homepage
-    if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+    if (page.url.pathname !== `${base}/` && page.url.pathname !== `${base}`) {
         // Redirect to homepage with a tutorial parameter
         goto(`${base}/?tutorial=workspace-onboarding`);
     }
@@ -92,7 +92,7 @@ export function runTutorial() {
 						driver.destroy()
 
 						// Clean up URL parameter if present
-						if ($page.url.searchParams.has('tutorial')) {
+						if (page.url.searchParams.has('tutorial')) {
 							goto(`${base}/`, { replaceState: true })
 						}
 					}

package/package/components/variables/variablesFilter.d.ts

@@ -11,6 +11,10 @@ export declare function buildVariablesFilterSchema({ paths, owners, showUserFold
         icon: typeof Users;
         description: string;
     } | undefined;
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
     owner: {
         type: "oneof";
         options: {

package/package/components/variables/variablesFilter.js

@@ -1,6 +1,10 @@
 import { FileCode, FileText, FolderIcon, Key, Users } from 'lucide-svelte';
 export function buildVariablesFilterSchema({ paths, owners, showUserFoldersFilter, userFoldersLabel }) {
     return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
         owner: {
             type: 'oneof',
             options: owners.map((s) => ({ label: s, value: s })),

package/package/components/wizards/AppPicker.svelte

@@ -5,10 +5,10 @@ import { AppService } from '../../gen';
 import { canWrite } from '../../utils';
 import Alert from '../common/alert/Alert.svelte';
 import Select from '../select/Select.svelte';
-export let value = '';
-let darkMode = false;
+let { value = $bindable('') } = $props();
+let darkMode = $state(false);
 const { appPath } = getContext('AppViewerContext');
-let apps = [];
+let apps = $state([]);
 async function loadApps() {
     apps = (await AppService.listApps({ workspace: $workspaceStore, includeDraftOnly: true })).map((app) => {
         return {

package/package/components/wizards/AppPicker.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppPicker: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppPicker = InstanceType<typeof AppPicker>;
+}
+declare const AppPicker: import("svelte").Component<Props, {}, "value">;
+type AppPicker = ReturnType<typeof AppPicker>;
 export default AppPicker;

package/package/components/wizards/DBExplorerWizard.svelte

@@ -245,6 +245,7 @@ let warning = $derived(computeWarning(value, value));
 			</Section>
 
 			<Section label="AG Grid configuration">
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
 					class={twMerge('flex flex-col gap-4', value.ignored ? 'opacity-50 cursor-none ' : '')}
 					onpointerdown={(e) => {

package/package/components/workspace/WorkspaceCard.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { GitFork, ChevronUp, ArchiveRestore } from 'lucide-svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import { GitFork, ChevronUp, ArchiveRestore } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
 import { Badge, Button } from '../common';
 import { superadmin } from '../../stores';
@@ -8,7 +9,7 @@ import WorkspaceIcon from './WorkspaceIcon.svelte';
 import WorkspaceCard from './WorkspaceCard.svelte';
 import { twMerge } from 'tailwind-merge';
 let { workspace, isForked = false, depth = 0, children = [], isExpanded = false, expansionStates = {}, onEnterWorkspace, onUnarchive, onToggleExpand, selectedWorkspaceId, onMouseEnter, onMouseClick, onKeyboardNavigation } = $props();
-const paddingLeft = depth * 24;
+const paddingLeft = untrack(() => depth) * 24;
 const isSelected = $derived(selectedWorkspaceId === workspace.id);
 // Helper functions
 function isWorkspaceArchived(workspace) {

package/package/components/workspaceSettings/CreateWorkspace.svelte

@@ -4,7 +4,7 @@ import { base } from '../../base';
 import { JobService, ResourceService, SettingService, UserService, VariableService, WorkspaceService } from '../../gen';
 import { validateUsername } from '../../utils';
 import { logoutWithRedirect } from '../../logoutKit';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { usersWorkspaceStore, workspaceStore } from '../../stores';
 import CenteredModal from '../CenteredModal.svelte';
 import { Button } from '../common';
@@ -24,7 +24,7 @@ import TextInput from '../text_input/TextInput.svelte';
 import { jobManager } from '../../services/JobManager';
 import Alert from '../common/alert/Alert.svelte';
 let { isFork = false } = $props();
-const rd = $page.url.searchParams.get('rd');
+const rd = page.url.searchParams.get('rd');
 let id = $state('');
 let name = $state('');
 let username = $state('');
@@ -241,7 +241,7 @@ async function loadWorkspaces() {
         catch { }
     }
     if (!$usersWorkspaceStore) {
-        const url = $page.url;
+        const url = page.url;
         console.log('logout 2');
         await logoutWithRedirect(url.href.replace(url.origin, ''));
     }

package/package/components/workspaceSettings/CustomInstanceDbSelect.svelte

@@ -4,8 +4,7 @@ import { isCustomInstanceDbEnabled } from './utils.svelte';
 import Button from '../common/button/Button.svelte';
 import CustomInstanceDbWizardModal from './CustomInstanceDbWizardModal.svelte';
 import { ArrowRight, TriangleAlert } from 'lucide-svelte';
-import DBManagerDrawer from '../DBManagerDrawer.svelte';
-let { value = $bindable(), customInstanceDbs, confirmationModal, dbManagerDrawer, wizardBottomHint, class: className, tag } = $props();
+let { value = $bindable(), customInstanceDbs, confirmationModal, wizardBottomHint, class: className, tag } = $props();
 let openedDbNameWizard = $state(false);
 let status = $derived(customInstanceDbs.current?.[value ?? '']);
 let onlySelectedTags = $derived(safeSelectItems(Object.entries(customInstanceDbs.current ?? {})
@@ -60,7 +59,6 @@ let currentIsAlreadyUsedElsewhere = $derived(tag && status && status.tag !== tag
 <CustomInstanceDbWizardModal
 	{customInstanceDbs}
 	{confirmationModal}
-	{dbManagerDrawer}
 	{tag}
 	bottomHint={wizardBottomHint}
 	bind:opened={

package/package/components/workspaceSettings/CustomInstanceDbSelect.svelte.d.ts

@@ -1,13 +1,11 @@
 import type { CustomInstanceDbTag, ListCustomInstanceDbsResponse } from '../../gen';
 import type { ResourceReturn } from 'runed';
 import type { ConfirmationModalHandle } from '../common/confirmationModal/asyncConfirmationModal.svelte';
-import DBManagerDrawer from '../DBManagerDrawer.svelte';
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | undefined;
     customInstanceDbs: ResourceReturn<ListCustomInstanceDbsResponse>;
     confirmationModal: ConfirmationModalHandle;
-    dbManagerDrawer: DBManagerDrawer | undefined;
     wizardBottomHint?: Snippet | undefined;
     class?: string;
     tag?: CustomInstanceDbTag;

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte

@@ -11,7 +11,7 @@ import { ArrowRight, InfoIcon } from 'lucide-svelte';
 import { truncate } from '../../utils';
 import Tooltip from '../meltComponents/Tooltip.svelte';
 import { superadmin } from '../../stores';
-let { customInstanceDbs, confirmationModal, dbManagerDrawer, bottomHint, opened = $bindable(), tag } = $props();
+let { customInstanceDbs, confirmationModal, bottomHint, opened = $bindable(), tag } = $props();
 let customInstanceDbSetupIsRunning = $state(false);
 let preventClose = false;
 </script>
@@ -49,7 +49,6 @@ let preventClose = false;
 						class="flex-1"
 						asset={{ kind: 'resource', path: 'CUSTOM_INSTANCE_DB/' + dbname }}
 						_resourceMetadata={{ resource_type: 'postgresql' }}
-						{dbManagerDrawer}
 						disabled={!$isCustomInstanceDbEnabled || !enableManageButton}
 						onClick={() => (opened = undefined)}
 					/>
@@ -110,7 +109,8 @@ let preventClose = false;
 										`GRANT CREATE ON DATABASE "${dbname}" TO custom_instance_user;\n` +
 										'ALTER DEFAULT PRIVILEGES IN SCHEMA public \n' +
 										'  	GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES\n    TO custom_instance_user;\n' +
-										'ALTER ROLE custom_instance_user CREATEROLE;'
+										'ALTER ROLE custom_instance_user CREATEROLE;\n' +
+										'ALTER ROLE custom_instance_user REPLICATION;'
 								}
 							],
 							status?.error ?? undefined

package/package/components/workspaceSettings/CustomInstanceDbWizardModal.svelte.d.ts

@@ -5,7 +5,6 @@ import type { Snippet } from 'svelte';
 type Props = {
     customInstanceDbs: ResourceReturn<ListCustomInstanceDbsResponse>;
     confirmationModal: ConfirmationModalHandle;
-    dbManagerDrawer: any | undefined;
     bottomHint?: Snippet | undefined;
     opened: {
         status: CustomInstanceDb | undefined;

package/package/components/workspaceSettings/DataTableSettings.svelte

@@ -42,7 +42,7 @@ import { isCustomInstanceDbEnabled } from './utils.svelte';
 import { random_adj } from '../random_positive_adjetive';
 import { sendUserToast } from '../../toast';
 import { SettingService, WorkspaceService } from '../../gen';
-import { globalDbManagerDrawer, workspaceStore } from '../../stores';
+import { workspaceStore } from '../../stores';
 import { createAsyncConfirmationModal } from '../common/confirmationModal/asyncConfirmationModal.svelte';
 import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 import { resource } from 'runed';
@@ -106,7 +106,6 @@ async function onSave() {
     }
 }
 let confirmationModal = createAsyncConfirmationModal();
-let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let dirtyMap = $derived.by(() => {
     const map = {};
     for (let i = 0; i < tempSettings.dataTables.length; i++) {
@@ -206,7 +205,6 @@ let hasUnsavedChanges = $derived.by(() => {
 								<CustomInstanceDbSelect
 									class="flex-1"
 									{confirmationModal}
-									{dbManagerDrawer}
 									{customInstanceDbs}
 									bind:value={dataTable.database.resource_path}
 									tag="datatable"
@@ -222,22 +220,19 @@ let hasUnsavedChanges = $derived.by(() => {
 							contentClasses="p-2 text-sm text-secondary italic"
 							class="cursor-not-allowed"
 						>
-							<svelte:fragment slot="trigger">
+							{#snippet trigger()}
 								<ExploreAssetButton
 									class="h-9"
 									asset={{ kind: 'datatable', path: dataTable.name }}
-									{dbManagerDrawer}
 									disabled
 								/>
-							</svelte:fragment>
-							<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+							{/snippet}
+							{#snippet content()}
+								Please save settings first
+							{/snippet}
 						</Popover>
 					{:else}
-						<ExploreAssetButton
-							class="h-9"
-							asset={{ kind: 'datatable', path: dataTable.name }}
-							{dbManagerDrawer}
-						/>
+						<ExploreAssetButton class="h-9" asset={{ kind: 'datatable', path: dataTable.name }} />
 					{/if}
 				</Cell>
 				<Cell class="w-12">