From 622ea4ab1232eb7441d093bac2d67112b5135eea Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 9 Jul 2025 17:23:30 +0200
Subject: [PATCH] move assets usage dropdown to component

---
 .../assets/AssetsUsageDropdown.svelte         | 58 ++++++++++++++++++
 .../(root)/(logged)/assets/+page.svelte       | 59 ++-----------------
 2 files changed, 64 insertions(+), 53 deletions(-)
 create mode 100644 frontend/src/lib/components/assets/AssetsUsageDropdown.svelte

diff --git a/frontend/src/lib/components/assets/AssetsUsageDropdown.svelte b/frontend/src/lib/components/assets/AssetsUsageDropdown.svelte
new file mode 100644
index 0000000000..c51133f207
--- /dev/null
+++ b/frontend/src/lib/components/assets/AssetsUsageDropdown.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { AssetUsageAccessType, AssetUsageKind } from '$lib/gen'
+	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:
+		| {
+				usages: {
+					path: string
+					kind: AssetUsageKind
+					access_type?: AssetUsageAccessType
+				}[]
+		  }
+		| undefined = $state()
+
+	export function open(data: typeof usagesDrawerData) {
+		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>
diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
index 669d0c2321..84a620fbfa 100644
--- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
@@ -1,32 +1,16 @@
 <script lang="ts">
-	import { getAssetUsagePageUri } from '$lib/components/assets/lib'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
-	import { DrawerContent, Tab, Tabs } from '$lib/components/common'
-	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
-	import RowIcon from '$lib/components/common/table/RowIcon.svelte'
+	import { Tab, Tabs } from '$lib/components/common'
 	import PageHeader from '$lib/components/PageHeader.svelte'
-	import { type AssetUsageAccessType, type AssetUsageKind } from '$lib/gen'
 	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
-	import {
-		assetDisplaysAsInputInFlowGraph,
-		assetDisplaysAsOutputInFlowGraph
-	} from '$lib/components/graph/renderers/nodes/AssetNode.svelte'
 	import { Boxes, DollarSign } from 'lucide-svelte'
 	import S3Icon from '$lib/components/icons/S3Icon.svelte'
 	import ResourceListPage from '$lib/components/assets/ResourceListPage.svelte'
 	import VariablesListPage from '$lib/components/assets/VariablesListPage.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import S3ObjectsListPage from '$lib/components/assets/S3ObjectsListPage.svelte'
+	import AssetsUsageDropdown from '$lib/components/assets/AssetsUsageDropdown.svelte'
 
-	let usagesDrawerData:
-		| {
-				usages: {
-					path: string
-					kind: AssetUsageKind
-					access_type?: AssetUsageAccessType
-				}[]
-		  }
-		| undefined = $state()
 	let selectedTab: 'resources' | 'variables' | 's3objects' = $state('resources')
 
 	let resourceListPage: ResourceListPage | undefined = $state()
@@ -41,6 +25,7 @@
 				return undefined
 		}
 	})
+	let assetsUsageDropdown: AssetsUsageDropdown | undefined = $state()
 </script>
 
 {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.resources}
@@ -95,12 +80,12 @@
 		{#if selectedTab === 'resources'}
 			<ResourceListPage
 				bind:this={resourceListPage}
-				onOpenUsages={(usages) => (usagesDrawerData = { usages })}
+				onOpenUsages={(usages) => assetsUsageDropdown?.open({ usages })}
 			/>
 		{:else if selectedTab === 'variables'}
 			<VariablesListPage
 				bind:this={variablesListPage}
-				onOpenUsages={(usages) => (usagesDrawerData = { usages })}
+				onOpenUsages={(usages) => assetsUsageDropdown?.open({ usages })}
 			/>
 		{:else if selectedTab === 's3objects'}
 			<S3ObjectsListPage />
@@ -108,36 +93,4 @@
 	</CenteredPage>
 {/if}
 
-<Drawer
-	open={usagesDrawerData !== undefined}
-	size="900px"
-	on:close={() => (usagesDrawerData = undefined)}
->
-	<DrawerContent title="Asset occurrences" 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>
+<AssetsUsageDropdown bind:this={assetsUsageDropdown} />