diff --git a/frontend/src/lib/components/S3FilePicker.svelte b/frontend/src/lib/components/S3FilePicker.svelte index 2a174dcd54..47e2b21dc8 100644 --- a/frontend/src/lib/components/S3FilePicker.svelte +++ b/frontend/src/lib/components/S3FilePicker.svelte @@ -16,7 +16,14 @@ import { workspaceStore } from '$lib/stores' import { HelpersService } from '$lib/gen' import { base } from '$lib/base' - import { displayDate, displaySize, emptyString, sendUserToast } from '$lib/utils' + import { + displayDate, + displaySize, + emptyString, + parseS3Object, + sendUserToast, + type S3Object + } from '$lib/utils' import { Alert, Button, Drawer } from './common' import DrawerContent from './common/drawer/DrawerContent.svelte' import Section from './Section.svelte' @@ -377,9 +384,8 @@ } let storage: string | undefined = $state(undefined) - export async function open( - preSelectedFileKey: { s3: string; storage?: string } | undefined = undefined - ) { + export async function open(_preSelectedFileKey: S3Object | undefined = undefined) { + const preSelectedFileKey = _preSelectedFileKey && parseS3Object(_preSelectedFileKey) storage = preSelectedFileKey?.storage if (preSelectedFileKey !== undefined) { initialFileKey = { ...preSelectedFileKey } diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index f232bd4b95..1b4e663661 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -1433,3 +1433,22 @@ export function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeede } export const editorPositionMap: Record = {} + +export type S3Uri = `s3://${string}/${string}` +export type S3Object = + | S3Uri + | { + s3: string + storage?: string + } + +export function parseS3Object(s3Object: S3Object): { s3: string; storage?: string } { + if (typeof s3Object === 'object') return s3Object + const match = s3Object.match(/^s3:\/\/([^/]*)\/(.*)$/) + return { storage: match?.[1] || undefined, s3: match?.[2] ?? '' } +} + +export function isS3Uri(uri: string): uri is S3Uri { + const match = uri.match(/^s3:\/\/([^/]*)\/(.*)$/) + return !!match && match.length === 3 +} diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte index e37420a8a6..e96cd63580 100644 --- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte @@ -4,13 +4,14 @@ import { Button, DrawerContent } from '$lib/components/common' import Drawer from '$lib/components/common/drawer/Drawer.svelte' import PageHeader from '$lib/components/PageHeader.svelte' + import S3FilePicker from '$lib/components/S3FilePicker.svelte' import { Cell, DataTable } from '$lib/components/table' import Head from '$lib/components/table/Head.svelte' import { AssetService } from '$lib/gen' import { userStore, workspaceStore, userWorkspaces } from '$lib/stores' import { usePaginated } from '$lib/svelte5Utils.svelte' - import { pluralize } from '$lib/utils' - import { RefreshCw } from 'lucide-svelte' + import { isS3Uri, pluralize } from '$lib/utils' + import { File, RefreshCw } from 'lucide-svelte' let assets = usePaginated(async (page) => { return { @@ -23,6 +24,7 @@ }) let viewOccurences: (typeof assets)['items'][number] | undefined = $state() + let s3FilePicker: S3FilePicker | undefined = $state() {#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.resources} @@ -42,6 +44,7 @@ Asset name + @@ -54,6 +57,19 @@ {pluralize(item.usages.length, 'occurrence')} + + {#if item.kind === 's3object'} + + {/if} + {/each} @@ -81,10 +97,10 @@ > (viewOccurences = undefined)}> {#each viewOccurences?.usages ?? [] as u} -
-

{u.usage_kind}

-

{u.usage_path}

-
+ {/each}
+