windmill-components 1.504.0 → 1.504.2

package/package/components/S3FilePicker.svelte

@@ -4,7 +4,7 @@ import { File as FileIcon, FolderClosed, FolderOpen, RotateCw, Loader2, Download
 import { workspaceStore } from '../stores';
 import { HelpersService, SettingService } from '../gen';
 import { base } from '../base';
-import { displayDate, displaySize, emptyString, sendUserToast } from '../utils';
+import { displayDate, displaySize, emptyString, parseS3Object, sendUserToast } from '../utils';
 import { Alert, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Section from './Section.svelte';
@@ -46,7 +46,10 @@ let displayedCount = $state(0);
 let filter = $state('');
 let timeout = undefined;
 let firstLoad = true;
-let secondaryStorageNames = usePromise(() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }));
+let secondaryStorageNames = usePromise(() => SettingService.getSecondaryStorageNames({ workspace: $workspaceStore }), { loadInit: false });
+$effect(() => {
+    $workspaceStore && untrack(() => secondaryStorageNames.refresh());
+});
 function onFilterChange() {
     if (!firstLoad) {
         timeout && clearTimeout(timeout);
@@ -290,7 +293,8 @@ async function moveS3File(srcFileKey, destFileKey) {
     await loadFileMetadataPlusPreviewAsync(selectedFileKey.s3);
 }
 let storage = $state(undefined);
-export async function open(preSelectedFileKey = undefined) {
+export async function open(_preSelectedFileKey = undefined) {
+    const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey);
     storage = preSelectedFileKey?.storage;
     if (preSelectedFileKey !== undefined) {
         initialFileKey = { ...preSelectedFileKey };
@@ -328,6 +332,9 @@ async function reloadContent() {
     }
 }
 async function selectAndClose() {
+    if (selectedFileKey?.s3) {
+        dispatch('selectAndClose', { s3: selectedFileKey.s3, storage });
+    }
     drawer?.closeDrawer?.();
 }
 async function exit() {

package/package/components/S3FilePicker.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type S3Object } from '../utils';
 interface Props {
     fromWorkspaceSettings?: boolean;
     readOnlyMode: boolean;
@@ -30,13 +31,14 @@ declare const S3FilePicker: $$__sveltets_2_IsomorphicComponent<Props, {
         s3: string;
         storage: string | undefined;
     } | undefined>;
+    selectAndClose: CustomEvent<{
+        s3: string;
+        storage: string | undefined;
+    }>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    open: (preSelectedFileKey?: {
-        s3: string;
-        storage?: string;
-    } | undefined) => Promise<void>;
+    open: (_preSelectedFileKey?: S3Object | undefined) => Promise<void>;
 }, "initialFileKey" | "selectedFileKey">;
 type S3FilePicker = InstanceType<typeof S3FilePicker>;
 export default S3FilePicker;

package/package/components/ScriptBuilder.svelte

@@ -360,7 +360,8 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
                 no_main_func: script.no_main_func,
                 has_preprocessor: script.has_preprocessor,
                 deployment_message: deploymentMsg || undefined,
-                on_behalf_of_email: script.on_behalf_of_email
+                on_behalf_of_email: script.on_behalf_of_email,
+                fallback_access_types: script.fallback_access_types
             }
         });
         if (!initialPath) {
@@ -1556,6 +1557,7 @@ async function loadWorkerTags() {
 			kind={script.kind}
 			{template}
 			tag={script.tag}
+			bind:fallbackAccessTypes={script.fallback_access_types}
 			lastSavedCode={savedScript?.draft?.content}
 			lastDeployedCode={savedScript?.draft_only ? undefined : savedScript?.content}
 			bind:args

package/package/components/ScriptEditor.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { JobService } from '../gen';
+import { AssetService, JobService } from '../gen';
 import { copilotInfo, enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { copyToClipboard, emptySchema, sendUserToast } from '../utils';
 import Editor from './Editor.svelte';
-import { inferArgs } from '../infer';
+import { inferArgs, inferAssets } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SchemaForm from './SchemaForm.svelte';
 import LogPanel from './scriptEditor/LogPanel.svelte';
@@ -33,7 +33,10 @@ import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core';
 import { getStringError } from './copilot/chat/utils';
 import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, editor_bar_right } = $props();
+import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
+import { usePromise } from '../svelte5Utils.svelte';
+import { assetEq } from './assets/lib';
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, editor_bar_right, fallbackAccessTypes = $bindable() } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
         schema = emptySchema();
@@ -55,6 +58,27 @@ $effect(() => {
         (code != undefined || schema != undefined) &&
         dispatch('change', { code, schema });
 });
+let parsedAssets = usePromise(() => inferAssets(lang, code), { clearValueOnRefresh: false });
+$effect(() => {
+    untrack(() => parsedAssets.refresh()), [lang, code];
+});
+// Load initial fallbackAccessTypes
+if (edit && path) {
+    AssetService.listAssetsByUsage({
+        workspace: $workspaceStore,
+        requestBody: { usages: [{ path, kind: 'script' }] }
+    }).then((arr) => {
+        const v = arr[0];
+        setTimeout(() => {
+            for (const a of parsedAssets.value ?? []) {
+                const fallback = v.find((a2) => assetEq(a2, a))?.access_type;
+                if (!a.access_type && fallback) {
+                    fallbackAccessTypes = [...(fallbackAccessTypes ?? []), { ...a, access_type: fallback }];
+                }
+            }
+        }, 200);
+    });
+}
 let width = $state(1200);
 let testJobLoader = $state(undefined);
 let isValid = $state(true);
@@ -377,6 +401,9 @@ $effect(() => {
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
 			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
+					{#if parsedAssets.value?.length}
+						<AssetsDropdownButton assets={parsedAssets.value} bind:fallbackAccessTypes />
+					{/if}
 					{#if testPanelSize === 0}
 						<HideButton
 							hidden={true}
@@ -426,6 +453,7 @@ $effect(() => {
 						{/if}
 					{/if}
 				</div>
+
 				{#key lang}
 					<Editor
 						lineNumbersMinChars={4}

package/package/components/ScriptEditor.svelte.d.ts

@@ -4,6 +4,7 @@ import Editor from './Editor.svelte';
 import DiffEditor from './DiffEditor.svelte';
 import type { ScriptEditorWhitelabelCustomUi } from './custom_ui';
 import CaptureTable from './triggers/CaptureTable.svelte';
+import { type AssetWithAccessType } from './assets/lib';
 interface Props {
     schema?: Schema | any;
     code: string;
@@ -33,6 +34,7 @@ interface Props {
     lastDeployedCode?: string | undefined;
     disableAi?: boolean;
     editor_bar_right?: import('svelte').Snippet;
+    fallbackAccessTypes?: AssetWithAccessType[];
 }
 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> & {
@@ -72,6 +74,6 @@ declare const ScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     setCollaborationMode: () => Promise<void>;
     disableCollaboration: () => void;
     updateArgs: (newArgs: Record<string, any>) => Promise<void>;
-}, "args" | "code" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "captureTable">;
+}, "args" | "code" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "fallbackAccessTypes" | "captureTable">;
 type ScriptEditor = InstanceType<typeof ScriptEditor>;
 export default ScriptEditor;

package/package/components/ScriptWrapper.svelte

@@ -2,9 +2,6 @@
 import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 let { script: oldScript, disableAi, ...props } = $props();
 let script = $state(oldScript);
-$effect(() => {
-    script = oldScript;
-});
 </script>
 
 <AiChatLayout noPadding {disableAi}>

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/apps/editor/AppEditor.svelte

@@ -19,7 +19,7 @@ import ContextPanel from './contextPanel/ContextPanel.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { VariableService } from '../../../gen';
-import { initHistory } from '../../../history';
+import { initHistory } from '../../../history.svelte';
 import { Component, Minus, Paintbrush, Plus, Smartphone, Scan, Hand, Grab } from 'lucide-svelte';
 import { animateTo, findGridItem, findGridItemParentGrid } from './appUtils';
 import ComponentNavigation from './component/ComponentNavigation.svelte';

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

@@ -5,7 +5,7 @@ import Button from '../../common/button/Button.svelte';
 import Path from '../../Path.svelte';
 import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
-import { redo, undo } from '../../../history';
+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 { getContext, untrack } from 'svelte';

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

@@ -3,7 +3,7 @@ import { gridColumns, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
-import { push } from '../../../history';
+import { push } from '../../../history.svelte';
 import { dfs, expandGriditem, findGridItem, findGridItemParentGrid, insertNewGridItem, isContainer, subGridIndexKey } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
 import { deepEqual } from 'fast-equals';

package/package/components/apps/editor/SubGridEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { push } from '../../../history';
+import { push } from '../../../history.svelte';
 import { classNames } from '../../../utils';
 import { createEventDispatcher, getContext, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';

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

@@ -1,6 +1,6 @@
 // import { getContext } from 'svelte'
 import { copyComponent, findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
-import { push } from '../../../../history';
+import { push } from '../../../../history.svelte';
 import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
 import { copyToClipboard } from '../../../../utils';

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -2,7 +2,7 @@
 import { components as componentsRecord, presets as presetsRecord, COMPONENT_SETS, DEPRECATED_COMPONENTS, processDimension } from '../component';
 import ListItem from './ListItem.svelte';
 import { appComponentFromType, copyComponent, insertNewGridItem, setUpTopBarComponentContent } from '../appUtils';
-import { push } from '../../../../history';
+import { push } from '../../../../history.svelte';
 import { ClearableInput, Drawer, DrawerContent } from '../../../common';
 import { enterpriseLicense, workspaceStore } from '../../../../stores';
 import { getGroup, listGroups } from './groupUtils';

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

@@ -18,7 +18,7 @@ import GridTab from './GridTab.svelte';
 import { deleteGridItem, isTableAction } from '../appUtils';
 import GridPane from './GridPane.svelte';
 import { slide } from 'svelte/transition';
-import { push } from '../../../../history';
+import { push } from '../../../../history.svelte';
 import StylePanel from './StylePanel.svelte';
 import { ChevronLeft, ArrowBigUp, ArrowLeft } from 'lucide-svelte';
 import GridCondition from './GridCondition.svelte';

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { deleteGridItem, findComponentSettings } from '../appUtils';
-import { push } from '../../../../history';
+import { push } from '../../../../history.svelte';
 let { onDelete = undefined, noGrid = false } = $props();
 const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, errorByComponent, componentControl } = getContext('AppViewerContext');
 const { history, movingcomponents } = getContext('AppEditorContext');

package/package/components/apps/types.d.ts

@@ -1,6 +1,6 @@
 import type { Schema } from '../../common';
 import type { Policy, Preview } from '../../gen';
-import type { History } from '../../history';
+import type { History } from '../../history.svelte';
 import type { Writable } from 'svelte/store';
 import type { AppComponent, PresetComponentConfig, RecomputeOthersSource, components } from './editor/component/components';
 import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, EvalV2AppInput, InputConnection, ResultAppInput, RowAppInput, Runnable, StaticAppInput, TemplateV2AppInput, UploadAppInput, UploadS3AppInput, UserAppInput } from './inputType';
@@ -94,7 +94,7 @@ export type AppTheme = {
     type: 'inlined';
     css: string;
 };
-import type { DiffDrawerI } from "../diff_drawer";
+import type { DiffDrawerI } from '../diff_drawer';
 export interface AppEditorProps {
     app: App;
     path: string;

package/package/components/assets/AssetsDropdownButton.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">import { clone, pluralize } from '../../utils';
+import { deepEqual } from 'fast-equals';
+import { AlertTriangle, Edit2, Pyramid } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import { Popover } from '../meltComponents';
+import S3FilePicker from '../S3FilePicker.svelte';
+import ExploreAssetButton, { assetCanBeExplored } from '../../../routes/(root)/(logged)/assets/ExploreAssetButton.svelte';
+import { assetEq, formatAssetKind } from './lib';
+import DbManagerDrawer from '../DBManagerDrawer.svelte';
+import { tick, untrack } from 'svelte';
+import { ResourceService } from '../../gen';
+import { workspaceStore } from '../../stores';
+import Button from '../common/button/Button.svelte';
+import Tooltip from '../meltComponents/Tooltip.svelte';
+import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+let { assets, enableChangeAnimation = true, size = 'xs', noBtnText = false, popoverPlacement = 'bottom-end', disableLiTooltip = false, fallbackAccessTypes = $bindable(), onHoverLi, liSubtitle } = $props();
+let prevAssets = $state([]);
+let blueBgDiv = $state();
+let s3FilePicker = $state();
+let dbManagerDrawer = $state();
+let resourceEditorDrawer = $state();
+let isOpen = $state(false);
+let resourceDataCache = $state({});
+$effect(() => {
+    if (!enableChangeAnimation) {
+        if (blueBgDiv) {
+            blueBgDiv.classList.remove('animate-fade-out');
+        }
+    }
+});
+$effect(() => {
+    assets;
+    untrack(() => {
+        if (deepEqual(assets, prevAssets))
+            return;
+        prevAssets = clone(assets);
+        // Replay animation
+        if (blueBgDiv && enableChangeAnimation) {
+            blueBgDiv.classList.add('animate-fade-out');
+            blueBgDiv.style.animation = 'none';
+            blueBgDiv.offsetHeight; /* trigger reflow */
+            blueBgDiv.style.animation = '';
+        }
+        for (const asset of assets) {
+            if (asset.kind !== 'resource' || asset.path in resourceDataCache)
+                continue;
+            ResourceService.getResource({ path: asset.path, workspace: $workspaceStore })
+                .then((resource) => (resourceDataCache[asset.path] = resource.resource_type))
+                .catch((err) => (resourceDataCache[asset.path] = undefined));
+        }
+    });
+});
+</script>
+
+<Popover
+	floatingConfig={{ strategy: 'absolute', placement: popoverPlacement }}
+	usePointerDownOutside
+	closeOnOtherPopoverOpen
+	bind:isOpen
+	escapeBehavior="ignore"
+>
+	<svelte:fragment slot="trigger">
+		<div
+			class={twMerge(
+				size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
+				'text-xs flex items-center gap-1.5 px-2 rounded-md relative',
+				'border border-tertiary/30',
+				'bg-surface hover:bg-surface-hover active:bg-surface',
+				'transition-all hover:text-primary cursor-pointer'
+			)}
+		>
+			<div
+				bind:this={blueBgDiv}
+				class="absolute pointer-events-none bg-slate-300 dark:bg-[#576278] inset-0 rounded-md opacity-0"
+			></div>
+			<Pyramid size={size === '3xs' ? 13 : 16} class="z-10" />
+			<span
+				class={twMerge('z-10 font-normal', size === '3xs' ? 'text-3xs mt-[0.08rem]' : 'text-xs')}
+			>
+				{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
+			</span>
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<ul class="divide-y rounded-md">
+			{#each assets as asset}
+				{@const fallbackAccessType = fallbackAccessTypes?.find((a) =>
+					assetEq(a, asset)
+				)?.access_type}
+				{@const hasWarning = !asset.access_type && !fallbackAccessType}
+				<li
+					class="text-sm px-4 h-12 flex gap-4 items-center justify-between hover:bg-surface-hover"
+					onmouseenter={() => onHoverLi?.(asset, 'enter')}
+					onmouseleave={() => onHoverLi?.(asset, 'leave')}
+				>
+					<div class="flex flex-col">
+						<Tooltip class="select-none max-w-48 truncate" disablePopup={disableLiTooltip}>
+							{asset.path}
+							<svelte:fragment slot="text">
+								{asset.path}
+							</svelte:fragment>
+						</Tooltip>
+						<span class="text-xs text-tertiary select-none">
+							{liSubtitle?.(asset) ??
+								formatAssetKind({
+									...asset,
+									metadata: { resource_type: resourceDataCache[asset.path] }
+								})}
+						</span>
+					</div>
+
+					<div class="flex gap-2 items-center">
+						{#if asset.kind === 'resource' && resourceDataCache[asset.path] !== undefined}
+							<Button
+								startIcon={{ icon: Edit2 }}
+								size="xs"
+								variant="border"
+								spacingSize="xs2"
+								iconOnly
+								on:click={() => (resourceEditorDrawer?.initEdit(asset.path), (isOpen = false))}
+							/>
+						{/if}
+						{#if asset.kind === 'resource' && resourceDataCache[asset.path] === undefined}
+							<Tooltip class="mr-2.5">
+								<AlertTriangle size={16} class="text-orange-600 dark:text-orange-500" />
+								<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+							</Tooltip>
+						{/if}
+						{#if assetCanBeExplored(asset, { resource_type: resourceDataCache[asset.path] })}
+							<ExploreAssetButton
+								{asset}
+								{s3FilePicker}
+								{dbManagerDrawer}
+								onClick={() => (isOpen = false)}
+								noText
+								_resourceMetadata={{ resource_type: resourceDataCache[asset.path] }}
+							/>
+						{/if}
+
+						<ToggleButtonGroup
+							disabled={!!asset.access_type}
+							tabListClass={hasWarning ? 'bg-red-200 dark:bg-red-300' : ''}
+							bind:selected={
+								() => asset.access_type ?? fallbackAccessType,
+								async (access_type) => {
+									fallbackAccessTypes ??= []
+									await tick()
+									let val = fallbackAccessTypes?.filter((a) => !assetEq(a, asset))
+									val.push({ ...asset, access_type })
+									fallbackAccessTypes = val
+								}
+							}
+						>
+							{#snippet children({ item })}
+								{#each ['r', 'w', 'rw'] as v}
+									<ToggleButton
+										class={hasWarning
+											? 'bg-transparent hover:bg-red-100 dark:text-primary-inverse'
+											: ''}
+										value={v}
+										label={v}
+										{item}
+										tooltip={'Could not infer access type from code, please select manually'}
+									/>
+								{/each}
+							{/snippet}
+						</ToggleButtonGroup>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</svelte:fragment>
+</Popover>
+<S3FilePicker bind:this={s3FilePicker} readOnlyMode />
+<DbManagerDrawer bind:this={dbManagerDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditorDrawer} />

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

@@ -0,0 +1,16 @@
+import { type Asset, type AssetWithAccessType } from './lib';
+import type { Placement } from '@floating-ui/core';
+type $$ComponentProps = {
+    assets: AssetWithAccessType[];
+    enableChangeAnimation?: boolean;
+    size?: 'xs' | '3xs';
+    noBtnText?: boolean;
+    popoverPlacement?: Placement;
+    disableLiTooltip?: boolean;
+    fallbackAccessTypes?: AssetWithAccessType[];
+    onHoverLi?: (asset: Asset, eventType: 'enter' | 'leave') => void;
+    liSubtitle?: (asset: Asset) => string;
+};
+declare const AssetsDropdownButton: import("svelte").Component<$$ComponentProps, {}, "fallbackAccessTypes">;
+type AssetsDropdownButton = ReturnType<typeof AssetsDropdownButton>;
+export default AssetsDropdownButton;

package/package/components/assets/AssetsUsageDrawer.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">import { Drawer, DrawerContent } from '../common';
+import RowIcon from '../common/table/RowIcon.svelte';
+import { assetDisplaysAsInputInFlowGraph, assetDisplaysAsOutputInFlowGraph } from '../graph/renderers/nodes/AssetNode.svelte';
+import { getAssetUsagePageUri } from './lib';
+let usagesDrawerData = $state();
+export function open(data) {
+    usagesDrawerData = data;
+}
+</script>
+
+<Drawer
+	open={usagesDrawerData !== undefined}
+	size="900px"
+	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-sm text-primary 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">{u.path}</span>
+							<span class="text-xs text-tertiary">{u.kind}</span>
+						</div>
+						<div class="flex gap-2">
+							{#if assetDisplaysAsInputInFlowGraph(u)}
+								<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Read</div>
+							{/if}
+							{#if assetDisplaysAsOutputInFlowGraph(u)}
+								<div class="text-xs border text-tertiary max-w-fit p-1 rounded-md">Write</div>
+							{/if}
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</DrawerContent>
+</Drawer>

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

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

package/package/components/assets/lib.d.ts

@@ -0,0 +1,16 @@
+import type { AssetKind as _AssetKind, Asset as _Asset, ListAssetsResponse, AssetUsageAccessType } from '../../gen';
+export type Asset = _Asset;
+export type AssetKind = _AssetKind;
+export type AssetWithAccessType = Asset & {
+    access_type?: AssetUsageAccessType;
+};
+export declare function formatAsset(asset: Asset): string;
+export declare function getAssetUsagePageUri(usage: ListAssetsResponse[number]['usages'][number]): string | undefined;
+export declare function assetEq(a: Asset | undefined, b: Asset | undefined): boolean;
+export declare function parseAssetFromString(s: string): Asset | undefined;
+export declare function formatAssetKind(asset: {
+    kind: AssetKind;
+    metadata?: {
+        resource_type?: string;
+    };
+}): string;

package/package/components/assets/lib.js

@@ -0,0 +1,60 @@
+import { capitalize } from '../../utils';
+export function formatAsset(asset) {
+    switch (asset.kind) {
+        case 'resource':
+            return `res://${asset.path}`;
+        case 's3object':
+            return `s3://${asset.path}`;
+        case 'variable':
+            return `var://${asset.path}`;
+    }
+}
+export function getAssetUsagePageUri(usage) {
+    if (usage.kind === 'script') {
+        return `/scripts/get/${usage.path}`;
+    }
+    else if (usage.kind === 'flow') {
+        return `/flows/get/${usage.path}`;
+    }
+}
+export function assetEq(a, b) {
+    if (!a || !b)
+        return a === b;
+    return a.kind === b.kind && a.path === b.path;
+}
+export function parseAssetFromString(s) {
+    if (s.startsWith('res://')) {
+        return { kind: 'resource', path: s.slice(6) };
+    }
+    else if (s.startsWith('$res:')) {
+        return { kind: 'resource', path: s.slice(5) };
+    }
+    else if (s.startsWith('s3://')) {
+        return { kind: 's3object', path: s.slice(5) };
+    }
+    else if (s.startsWith('var://')) {
+        return { kind: 'variable', path: s.slice(6) };
+    }
+    return undefined;
+}
+export function formatAssetKind(asset) {
+    switch (asset.kind) {
+        case 'resource':
+            if (asset.metadata?.resource_type) {
+                if (asset.metadata.resource_type === 'state')
+                    return 'State';
+                if (asset.metadata.resource_type === 'cache')
+                    return 'Cache';
+                if (asset.metadata.resource_type === 'app_theme')
+                    return 'App Theme';
+                return `${capitalize(asset.metadata.resource_type)} resource`;
+            }
+            else {
+                return 'metadata' in asset ? 'Invalid resource' : 'Resource';
+            }
+        case 's3object':
+            return 'S3 Object';
+        case 'variable':
+            return 'Variable';
+    }
+}

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -13,6 +13,6 @@ interface Props {
     actionKind?: ActionKind | 'all';
     scope?: undefined | 'all_workspaces' | 'instance';
 }
-declare const AuditLogsFilters: import("svelte").Component<Props, {}, "username" | "operation" | "resource" | "before" | "after" | "perPage" | "hasMore" | "logs" | "pageIndex" | "actionKind" | "scope">;
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "before" | "after" | "perPage" | "hasMore" | "logs" | "pageIndex" | "actionKind" | "scope">;
 type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;