windmill-components 1.623.1 → 1.642.0

package/package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../../../../common';
-import { type AppInputs, type RunnableByName } from '../../inputType';
+import { type AppInputs, type RunnableByName, type CtxInput } from '../../inputType';
 import type { GridItem, HiddenRunnable } from '../../types';
 export interface AppScriptsList {
     inline: {
@@ -13,6 +13,6 @@ export interface AppScriptsList {
         transformer: boolean;
     }[];
 }
-export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): {};
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs | Record<string, CtxInput | AppInputs[string]>): {};
 export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;
 export declare function createScriptFromInlineScript(id: string, runnable: HiddenRunnable | RunnableByName, workspace: string, appPath: string): Promise<void>;

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -4,6 +4,7 @@ import { isRunnableByName, isRunnableByPath } from '../../inputType';
 import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
+// Note: fields can include CtxInput for raw apps
 export function computeFields(schema, defaultUserInput, fields) {
     let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
@@ -19,7 +20,15 @@ export function computeFields(schema, defaultUserInput, fields) {
             result[key] = newInput;
         }
         else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+            // Preserve ctx inputs (used in raw apps) - they have { type: 'ctx', ctx: 'property' } syntax
+            if (oldInput.type === 'ctx') {
+                result[key] = oldInput;
+            }
+            else if (oldInput.fieldType === undefined) {
+                // For raw app inputs without fieldType, preserve the input but add the fieldType from schema
+                result[key] = Object.assign({}, oldInput, { fieldType: newInput.fieldType });
+            }
+            else if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
                 newInput.format !== oldInput.format ||
                 newInput.subFieldType !== oldInput.subFieldType ||
                 // An input became a select

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

@@ -278,7 +278,7 @@ const rnd = generateRandomString();
 					}}
 					checked={items.some((x) => typeof x.value != 'string')}
 				/>
-			{:else if subFieldType === 'ag-grid' || subFieldType === 'table-column'}
+			{:else if subFieldType === 'ag-grid' || subFieldType === 'table-column' || subFieldType === 'db-explorer'}
 				<Toggle
 					options={{
 						right: 'Raw'

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

@@ -31,7 +31,7 @@ $effect.pre(() => {
         oneOf = {
             ...oneOf,
             configuration: {
-                [oneOf.selected]: cleanseOneOfConfiguration(inputSpecsConfiguration)?.[oneOf.selected]
+                [oneOf.selected]: oneOf.configuration[oneOf.selected]
             }
         };
     }

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { Tab, TabContent } from '../../../common';
 import { sendUserToast } from '../../../../toast';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { ccomponents, components } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
@@ -14,28 +14,52 @@ import { customisationByComponent, hasStyleValue } from '../componentsPanel/cssU
 import CssMigrationModal from './CSSMigrationModal.svelte';
 import CssPropertyWrapper from './CssPropertyWrapper.svelte';
 import { onMount } from 'svelte';
-import { findComponentSettings } from '../appUtils';
+import { findGridItemWithLocation } from '../appUtils';
 const { app, cssEditorOpen, selectedComponent } = getContext('AppViewerContext');
-let component;
-$: {
-    const newComponent = findComponentSettings($app, $selectedComponent?.[0])?.item?.data;
-    if (component != newComponent) {
-        component = newComponent;
+let tab = $state('local');
+let overrideGlobalCSS = $state(undefined);
+let overrideLocalCSS = $state(undefined);
+let componentWithLocation = $derived(findGridItemWithLocation($app, $selectedComponent?.[0] ?? ''));
+let component = $derived(componentWithLocation?.item.data);
+let type = $derived(component?.type);
+function updateComponentData(loc, updater) {
+    const { location } = loc;
+    if (location.type === 'subgrid') {
+        const item = $app.subgrids?.[location.subgridKey]?.[location.subgridItemIndex];
+        if (item) {
+            item.data = updater(item.data);
+        }
+    }
+    else {
+        const item = $app.grid[location.gridItemIndex];
+        if (item) {
+            item.data = updater(item.data);
+        }
     }
+    app.set($app);
 }
-let tab = 'local';
-let overrideGlobalCSS = undefined;
-let overrideLocalCSS = undefined;
-$: type = component?.type;
-let migrationModal = undefined;
-$: customCssByComponentType =
-    component?.type && $app.css
-        ? Object.entries($app.css[component.type] || {}).map(([id, v]) => ({
-            id,
-            forceStyle: v?.style != undefined,
-            forceClass: v?.['class'] != undefined
-        }))
-        : undefined;
+$effect.pre(() => {
+    if ((componentWithLocation && component?.customCss === undefined) ||
+        (Object.keys(component?.customCss ?? {}).length === 0 &&
+            Object.keys(ccomponents[component?.type ?? '']?.customCss ?? {}).length > 0)) {
+        untrack(() => {
+            if (componentWithLocation) {
+                updateComponentData(componentWithLocation, (data) => ({
+                    ...data,
+                    customCss: structuredClone(ccomponents[component?.type ?? '']?.customCss ?? {})
+                }));
+            }
+        });
+    }
+});
+let migrationModal = $state(undefined);
+let customCssByComponentType = $derived(component?.type && $app.css
+    ? Object.entries($app.css[component.type] || {}).map(([id, v]) => ({
+        id,
+        forceStyle: v?.style != undefined,
+        forceClass: v?.['class'] != undefined
+    }))
+    : undefined);
 function copyLocalToGlobal(name, value) {
     if (!value) {
         sendUserToast('No local CSS to copy');
@@ -46,7 +70,7 @@ function copyLocalToGlobal(name, value) {
             return;
         if (hasStyleValue($app.css?.[type]?.[name])) {
             overrideGlobalCSS = () => {
-                $app.css[type][name] = JSON.parse(JSON.stringify(value));
+                $app.css[type][name] = structuredClone(value);
                 app.set($app);
             };
         }
@@ -54,7 +78,7 @@ function copyLocalToGlobal(name, value) {
             if (!$app.css[type]) {
                 initGlobalCss();
             }
-            $app.css[type][name] = JSON.parse(JSON.stringify(value));
+            $app.css[type][name] = structuredClone(value);
             app.set($app);
             sendUserToast('Global CSS copied');
         }
@@ -67,13 +91,11 @@ function copyGlobalToLocal(id, value) {
     else {
         if (hasStyleValue(value)) {
             overrideLocalCSS = () => {
-                component.customCss[id] = JSON.parse(JSON.stringify(value));
-                app.set($app);
+                updateCssProperty(id, structuredClone(value));
             };
         }
         else {
-            component.customCss[id] = JSON.parse(JSON.stringify(value));
-            app.set($app);
+            updateCssProperty(id, structuredClone(value));
             sendUserToast('Local CSS copied');
         }
     }
@@ -91,10 +113,21 @@ function initGlobalCss() {
         !$app.css[component.type]?.style &&
         components[component.type] &&
         $app.css[component.type] === undefined) {
-        $app.css[component.type] = JSON.parse(JSON.stringify(components[component.type].customCss));
+        $app.css[component.type] = structuredClone(components[component.type].customCss);
         app.set($app);
     }
 }
+function updateCssProperty(name, cssValue) {
+    if (!componentWithLocation || !cssValue)
+        return;
+    updateComponentData(componentWithLocation, (data) => ({
+        ...data,
+        customCss: {
+            ...(data?.customCss ?? {}),
+            [name]: cssValue
+        }
+    }));
+}
 function getSelector(key) {
     return customisationByComponent
         .find((c) => c.components.includes(component?.type ?? ''))
@@ -185,8 +218,10 @@ onMount(() => {
 										{name}
 										wmClass={getSelector(name)}
 										componentType={component.type}
-										bind:value={component.customCss[name]}
-										on:change={() => app.set($app)}
+										value={component.customCss[name]}
+										on:change={(e) => {
+											updateCssProperty(name, e.detail)
+										}}
 										shouldDisplayRight={hasStyleValue(component.customCss[name])}
 										on:right={() => {
 											copyLocalToGlobal(name, component?.customCss?.[name])
@@ -198,6 +233,8 @@ onMount(() => {
 								</div>
 							{/each}
 						</div>
+					{:else}
+						<div class="text-sm text-secondary mx-2">No local CSS to display</div>
 					{/if}
 				</TabContent>
 				<TabContent value="global">

package/package/components/apps/editor/settingsPanel/StylePanel.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const StylePanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StylePanel = InstanceType<typeof StylePanel>;
+declare const StylePanel: import("svelte").Component<Record<string, never>, {}, "">;
+type StylePanel = ReturnType<typeof StylePanel>;
 export default StylePanel;

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -25,6 +25,7 @@ import JsonEditor from '../../../../JsonEditor.svelte';
 import S3FilePicker from '../../../../S3FilePicker.svelte';
 import FileUpload from '../../../../common/fileUpload/FileUpload.svelte';
 import DucklakePicker from '../../../../DucklakePicker.svelte';
+import DatatablePicker from '../../../../DatatablePicker.svelte';
 let { componentInput = $bindable(), fieldType = undefined, subFieldType = undefined, selectOptions = undefined, placeholder = undefined, format = undefined, id } = $props();
 const appContext = getContext('AppViewerContext');
 $effect(() => {
@@ -130,6 +131,15 @@ let s3JsonEditor = $state();
 				}
 				showSchemaExplorer
 			/>
+		{:else if fieldType === 'datatable'}
+			<DatatablePicker
+				class="w-full"
+				bind:value={
+					() => componentInput?.value?.split('datatable://')?.[1],
+					(v) => componentInput && (componentInput.value = v ? `datatable://${v}` : undefined)
+				}
+				showSchemaExplorer
+			/>
 		{:else if fieldType === 'labeledresource'}
 			{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value && (componentInput.value?.['value'] == undefined || typeof componentInput.value?.['value'] == 'string')}
 				<div class="flex flex-col gap-1 w-full">

package/package/components/apps/inputType.d.ts

@@ -2,7 +2,7 @@ import type { ReadFileAs } from '../common/fileInput/model';
 import type { DecisionTreeNode, TypedComponent } from './editor/component';
 import type { InlineScript } from './sharedTypes';
 export type { InlineScript } from './sharedTypes';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'oracledb' | 'ducklake' | 'app-path';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema' | 'ag-grid' | 'table-column' | 'plotly' | 'chartjs' | 'DecisionTreeNode' | 'ag-chart' | 'resource' | 'db-explorer' | 'db-table' | 's3' | 'number-tuple' | 'postgres' | 'mysql' | 'ms_sql_server' | 'snowflake' | 'snowflake_oauth' | 'bigquery' | 'oracledb' | 'ducklake' | 'datatable' | 'app-path';
 export type InputConnection = {
     componentType?: TypedComponent['type'];
     componentId: string;
@@ -50,6 +50,10 @@ export type EvalInputV2 = {
     onDemandOnly?: boolean;
     allowUserResources?: boolean;
 };
+export type CtxInput = {
+    type: 'ctx';
+    ctx: 'username' | 'email' | 'groups' | 'workspace' | 'author';
+};
 export type RowInput = {
     type: 'row';
     column: string;
@@ -83,7 +87,7 @@ export type RunnableByName = {
 };
 export type Runnable = RunnableByPath | RunnableByName | undefined;
 export type RunnableWithFields = Runnable & {
-    fields?: Record<string, StaticAppInput | UserAppInput>;
+    fields?: Record<string, StaticAppInput | UserAppInput | CtxInput>;
 };
 export type ResultInput = {
     runnable: Runnable;
@@ -132,7 +136,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'resource', string, 'oracledb'> | AppInputSpec<'ducklake', string, 'ducklake'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string, 'db-table'> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', (object | string)[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object> | AppInputSpec<'array', object[], 'ag-grid'> | AppInputSpec<'array', object[], 'db-explorer'> | AppInputSpec<'array', object[], 'table-column'> | AppInputSpec<'array', object[], 'plotly'> | AppInputSpec<'array', object[], 'chartjs'> | AppInputSpec<'array', DecisionTreeNode, 'DecisionTreeNode'> | AppInputSpec<'array', object[], 'ag-chart'> | AppInputSpec<'resource', string> | AppInputSpec<'resource', string, 's3'> | AppInputSpec<'resource', string, 'postgres'> | AppInputSpec<'resource', string, 'mysql'> | AppInputSpec<'resource', string, 'ms_sql_server'> | AppInputSpec<'resource', string, 'snowflake'> | AppInputSpec<'resource', string, 'snowflake_oauth'> | AppInputSpec<'resource', string, 'bigquery'> | AppInputSpec<'resource', string, 'oracledb'> | AppInputSpec<'ducklake', string, 'ducklake'> | AppInputSpec<'datatable', string, 'datatable'> | AppInputSpec<'array', object[], 'number-tuple'> | AppInputSpec<'app-path', string>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;
@@ -166,6 +170,7 @@ export type UploadAppInput = Extract<AppInput, {
 export type UploadS3AppInput = Extract<AppInput, {
     type: 'uploadS3';
 }>;
+export type CtxAppInput = CtxInput;
 export type RichAppInput = AppInput | {
     type: 'oneOf';
     oneOf: string[];

package/package/components/assets/AssetButtons.svelte

@@ -1,15 +1,11 @@
 <script lang="ts">import { AlertTriangle, Edit2 } from 'lucide-svelte';
 import { Button } from '../common';
 import ExploreAssetButton, { assetCanBeExplored } from '../ExploreAssetButton.svelte';
-import S3FilePicker from '../S3FilePicker.svelte';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import Popover from '../meltComponents/Popover.svelte';
 let { s3FilePicker, dbManagerDrawer, resourceEditorDrawer, resourceDataCache, asset, ducklakeNotFound = false, datatableNotFound = false, onClick } = $props();
-let resourceDataCacheValue = $derived.by(() => {
-    let truncatedPath = asset.path.split('/').slice(0, 3).join('/');
-    return resourceDataCache[truncatedPath];
-});
+let truncatedPath = asset.path.split('?table=')[0];
+let resourceDataCacheValue = $derived(resourceDataCache[truncatedPath]);
 </script>
 
 <div class="flex gap-2 items-center">
@@ -19,7 +15,7 @@ let resourceDataCacheValue = $derived.by(() => {
 			variant="default"
 			unifiedSize="md"
 			iconOnly
-			on:click={() => (resourceEditorDrawer?.initEdit(asset.path), onClick?.())}
+			on:click={() => (resourceEditorDrawer?.initEdit(truncatedPath), onClick?.())}
 		/>
 	{/if}
 	{#if (asset.kind === 'resource' && resourceDataCacheValue === undefined) || ducklakeNotFound || datatableNotFound}

package/package/components/assets/AssetButtons.svelte.d.ts

@@ -1,10 +1,8 @@
-import S3FilePicker from '../S3FilePicker.svelte';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { Asset } from '../../gen';
 type Props = {
-    s3FilePicker?: S3FilePicker | undefined;
-    dbManagerDrawer?: DbManagerDrawer | undefined;
+    s3FilePicker?: any | undefined;
+    dbManagerDrawer?: any | undefined;
     resourceEditorDrawer?: ResourceEditorDrawer | undefined;
     resourceDataCache: Record<string, string | undefined>;
     asset: Asset;

package/package/components/assets/AssetColumnBadges.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import {} from '../../gen';
+import { formatAssetAccessType } from './lib';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import { twMerge } from 'tailwind-merge';
+let { columns, disableTooltip, badgeClasses, disableWrap } = $props();
+let entries = $derived(columns && Object.entries(columns));
+</script>
+
+{#if entries?.length}
+	<div class={twMerge('flex gap-1', disableWrap ? '' : 'flex-wrap')}>
+		{#each entries as [columnName, accessType]}
+			{@const accessType2 = formatAssetAccessType(accessType)}
+			{#snippet badge()}
+				<div
+					class={twMerge(
+						'text-xs text-secondary border rounded-md px-1 bg-surface-tertiary dark:bg-surface-secondary',
+						badgeClasses
+					)}
+				>
+					{columnName}
+				</div>
+			{/snippet}
+			{#if disableTooltip}
+				{@render badge()}
+			{:else}
+				<Tooltip>
+					{@render badge()}
+					<svelte:fragment slot="text">
+						{accessType2} access to column "{columnName}"
+					</svelte:fragment>
+				</Tooltip>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/package/components/assets/AssetColumnBadges.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type AssetUsageAccessType } from '../../gen';
+type Props = {
+    columns: Record<string, AssetUsageAccessType> | undefined;
+    disableTooltip?: boolean;
+    badgeClasses?: string;
+    disableWrap?: boolean;
+};
+declare const AssetColumnBadges: import("svelte").Component<Props, {}, "">;
+type AssetColumnBadges = ReturnType<typeof AssetColumnBadges>;
+export default AssetColumnBadges;

package/package/components/assets/AssetsDropdownButton.svelte

@@ -4,10 +4,9 @@ import { twMerge } from 'tailwind-merge';
 import { Popover } from '../meltComponents';
 import S3FilePicker from '../S3FilePicker.svelte';
 import { assetsEq, formatAssetAccessType, formatAssetKind, getAccessType } from './lib';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import { untrack } from 'svelte';
 import { ResourceService, WorkspaceService } from '../../gen';
-import { workspaceStore } from '../../stores';
+import { globalDbManagerDrawer, workspaceStore } from '../../stores';
 import Tooltip from '../meltComponents/Tooltip.svelte';
 import Tooltip2 from '../Tooltip.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
@@ -19,7 +18,7 @@ let { assets, enableChangeAnimation = true, size = 'xs', noBtnText = false, popo
 let prevAssets = $state([]);
 let blueBgDiv = $state();
 let s3FilePicker = $state();
-let dbManagerDrawer = $state();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let resourceEditorDrawer = $state();
 let isOpen = $state(false);
 let resourceDataCache = $state({});
@@ -47,7 +46,7 @@ $effect(() => {
         }
         for (const asset of assets) {
             if (asset.kind == 'resource') {
-                let truncatedPath = asset.path.split('/').slice(0, 3).join('/');
+                let truncatedPath = asset.path.split('?table=')[0];
                 if (truncatedPath in resourceDataCache)
                     continue;
                 resourceDataCache[truncatedPath] = undefined; // avoid fetching multiple times because of async
@@ -117,7 +116,7 @@ $effect(() => {
 									!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
 								)}
 							>
-								{formatAssetAccessType(getAccessType(asset))}
+								{formatAssetAccessType(getAccessType(asset)) ?? '?'}
 							</div>
 						</svelte:fragment>
 						<svelte:fragment slot="content">
@@ -159,7 +158,11 @@ $effect(() => {
 								formatAssetKind({
 									...asset,
 									...(asset.kind === 'resource'
-										? { metadata: { resource_type: resourceDataCache[asset.path] } }
+										? {
+												metadata: {
+													resource_type: resourceDataCache[asset.path.split('?table=')[0]]
+												}
+											}
 										: {})
 								})}
 						</span>
@@ -181,5 +184,4 @@ $effect(() => {
 	</svelte:fragment>
 </Popover>
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
-<DbManagerDrawer bind:this={dbManagerDrawer} />
 <ResourceEditorDrawer bind:this={resourceEditorDrawer} />

package/package/components/assets/AssetsUsageDrawer.svelte

@@ -1,11 +1,18 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
-import { Drawer, DrawerContent } from '../common';
+<script lang="ts">import { Drawer, DrawerContent } from '../common';
 import RowIcon from '../common/table/RowIcon.svelte';
 import { formatAssetAccessType, getAssetUsagePageUri } from './lib';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import Tooltip2 from '../Tooltip.svelte';
+import { twMerge } from 'tailwind-merge';
+import { capitalize, displayDate } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import AssetColumnBadges from './AssetColumnBadges.svelte';
 let usagesDrawerData = $state();
 export function open(data) {
     usagesDrawerData = data;
 }
+let staticUsages = $derived(usagesDrawerData?.usages.filter((u) => u.kind !== 'job') ?? []);
+let runtimeUsages = $derived(usagesDrawerData?.usages.filter((u) => u.kind === 'job') ?? []);
 </script>
 
 <Drawer
@@ -14,30 +21,96 @@ export function open(data) {
 	on:close={() => (usagesDrawerData = undefined)}
 >
 	<DrawerContent title="Asset usage" on:close={() => (usagesDrawerData = undefined)}>
-		<ul class="flex flex-col border rounded-md divide-y">
-			{#each usagesDrawerData?.usages ?? [] as u}
-				<li>
-					<a
-						href={getAssetUsagePageUri(u)}
-						aria-label={`${u.kind}/${u.path}`}
-						class="text-xs text-primary font-normal flex items-center py-3 px-4 gap-3 hover:bg-surface-hover cursor-pointer"
-					>
-						<RowIcon kind={u.kind} />
-						<div class="flex flex-col justify-center flex-1">
-							<span class="font-semibold text-emphasis">{u.path}</span>
-							<span class="text-2xs text-secondary">{u.kind}</span>
-						</div>
-						<div
-							class={twMerge(
-								'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
-								!u.access_type ? 'hover:bg-surface active:opacity-80' : ''
-							)}
-						>
-							{formatAssetAccessType(u.access_type)}
-						</div>
-					</a>
-				</li>
-			{/each}
-		</ul>
+		<div class="flex flex-col gap-6">
+			<!-- Static/Declared Usages -->
+			<section>
+				<h3 class="text-sm font-semibold mb-2">
+					Scripts & Flows
+					<Tooltip2>Assets detected statically during code analysis</Tooltip2>
+				</h3>
+				{@render list(staticUsages)}
+			</section>
+
+			<!-- Runtime Job Usage -->
+			<section>
+				<h3 class="text-sm font-semibold mb-2">
+					Latest Job Executions
+					<Tooltip2>
+						Assets can be detected during job execution either via Windmill's SDK (Data tables, S3
+						objects ...) or by being passed as inputs to a script or flow (arbitrary resources).
+					</Tooltip2>
+				</h3>
+				<Alert
+					type="info"
+					class="mb-2"
+					title="Assets are processed asynchronously after job completion"
+				>
+					It may take a few minutes for jobs to show up here.
+				</Alert>
+
+				{@render list(runtimeUsages)}
+			</section>
+		</div>
 	</DrawerContent>
 </Drawer>
+
+{#snippet rightBadge(text: string | undefined, tooltip?: string)}
+	{#if text}
+		<Tooltip disablePopup={!tooltip}>
+			<div class={twMerge('text-xs 	font-normal text-primary min-w-12 p-1 text-center rounded-md')}>
+				{text}
+			</div>
+			<svelte:fragment slot="text">
+				{#if tooltip}
+					{tooltip}
+				{/if}
+			</svelte:fragment>
+		</Tooltip>
+	{/if}
+{/snippet}
+
+{#snippet list(items: AssetUsage[])}
+	<ul class="flex flex-col border rounded-md divide-y">
+		{#each items as u}
+			{@const accessType = formatAssetAccessType(u.access_type)}
+
+			<li>
+				<a
+					href={getAssetUsagePageUri(u)}
+					aria-label={`${u.kind}/${u.path}`}
+					class="text-xs min-h-14 text-primary font-normal flex items-center py-2 px-4 gap-2 hover:bg-surface-hover cursor-pointer"
+				>
+					<RowIcon
+						kind={!u.metadata?.job_kind
+							? u.kind != 'job'
+								? u.kind
+								: 'script'
+							: ((
+									{
+										script: 'script',
+										preview: 'script',
+										flow: 'flow',
+										flowpreview: 'flow',
+										singlestepflow: 'flow',
+										flownode: 'flow'
+									} as const
+								)[u.metadata.job_kind] ?? 'script')}
+					/>
+					<div class="flex flex-col justify-center flex-1 ml-2">
+						<span>
+							<span class="font-semibold text-emphasis">
+								{u.kind == 'job' ? (u.metadata?.runnable_path ?? 'Unknown job') : u.path}
+							</span>
+						</span>
+						<span class="text-2xs text-secondary">
+							{u.kind == 'job' ? u.path : capitalize(u.kind)}
+						</span>
+						<AssetColumnBadges columns={u.columns} badgeClasses="mt-0.5" />
+					</div>
+					{@render rightBadge(displayDate(u.created_at), 'Asset detection time')}
+					{@render rightBadge(accessType)}
+				</a>
+			</li>
+		{/each}
+	</ul>
+{/snippet}

package/package/components/assets/AssetsUsageDrawer.svelte.d.ts

@@ -1,11 +1,10 @@
-import type { AssetUsageAccessType, AssetUsageKind } from '../../gen';
+import type { AssetKind } from '../../gen';
+import { type AssetUsage } from './lib';
 declare const AssetsUsageDrawer: import("svelte").Component<Record<string, never>, {
     open: (data: {
-        usages: {
-            path: string;
-            kind: AssetUsageKind;
-            access_type?: AssetUsageAccessType;
-        }[];
+        path: string;
+        kind: AssetKind;
+        usages: AssetUsage[];
     } | undefined) => void;
 }, "">;
 type AssetsUsageDrawer = ReturnType<typeof AssetsUsageDrawer>;