searchable resource and variables

frontend/src/routes/resources.svelte

@@ -46,6 +46,8 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import { Building } from 'svelte-lucide'
+	import ListFilters from '$lib/components/home/ListFilters.svelte'
+	import SearchItems from '$lib/components/SearchItems.svelte'
 
 	type ResourceW = ListableResource & { canWrite: boolean }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
@@ -53,6 +55,8 @@
 	let resources: ResourceW[] | undefined
 	let resourceTypes: ResourceTypeW[] | undefined
 
+	let filteredItems: (ResourceW & { marked?: string })[] | undefined = undefined
+
 	let resourceTypeViewer: Drawer
 	let resourceTypeViewerObj = {
 		rt: '',
@@ -77,6 +81,26 @@
 
 	$: open = Boolean(deleteConfirmedCallback)
 
+	$: owners = Array.from(
+		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+	).sort()
+
+	$: types = Array.from(new Set(filteredItems?.map((x) => x.resource_type))).sort()
+
+	let filter = ''
+	let ownerFilter: string | undefined = undefined
+	let typeFilter: string | undefined = undefined
+
+	$: preFilteredItemsOwners =
+		ownerFilter == undefined
+			? resources
+			: resources?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
+
+	$: preFilteredType =
+		typeFilter == undefined
+			? preFilteredItemsOwners
+			: preFilteredItemsOwners?.filter((x) => x.resource_type == typeFilter)
+
 	async function loadResources(): Promise<void> {
 		resources = (await ResourceService.listResource({ workspace: $workspaceStore! })).map((x) => {
 			return {
@@ -231,6 +255,13 @@
 	</DrawerContent>
 </Drawer>
 
+<SearchItems
+	{filter}
+	items={preFilteredType}
+	bind:filteredItems
+	f={(x) => x.path + ' ' + x.resource_type + ' ' + x.description + ' '}
+/>
+
 <CenteredPage>
 	<PageHeader
 		title="Resources"
@@ -262,6 +293,12 @@
 		</Tab>
 	</Tabs>
 	{#if tab == 'workspace'}
+		<div class="pt-2">
+			<input placeholder="Search Resource" bind:value={filter} class="input mt-1" />
+		</div>
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+		<ListFilters bind:selectedFilter={typeFilter} filters={types} />
+
 		<div class="overflow-x-auto pb-40">
 			{#if loading.resources}
 				<Skeleton layout={[0.5, [2], 1]} />
@@ -279,14 +316,15 @@
 						<th />
 					</tr>
 					<tbody slot="body">
-						{#if resources}
-							{#each resources as { path, description, resource_type, extra_perms, canWrite, is_oauth, is_linked, account, refresh_error, is_expired }}
+						{#if filteredItems}
+							{#each filteredItems as { path, description, resource_type, extra_perms, canWrite, is_oauth, is_linked, account, refresh_error, is_expired, marked }}
 								<tr>
 									<td>
 										<a
 											class="break-words"
 											href="#{path}"
-											on:click={() => resourceEditor?.initEdit?.(path)}>{path}</a
+											on:click={() => resourceEditor?.initEdit?.(path)}
+											>{#if marked}{@html marked}{:else}{path}{/if}</a
 										>
 									</td>
 									<td><SharedBadge {canWrite} extraPerms={extra_perms} /></td>

frontend/src/routes/variables.svelte

@@ -37,23 +37,34 @@
 	import { Building, DollarSign } from 'svelte-lucide'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
+	import ListFilters from '$lib/components/home/ListFilters.svelte'
 
 	type ListableVariableW = ListableVariable & { canWrite: boolean }
 
 	let filter = ''
-	let variables: ListableVariableW[] = []
-	let filteredItems: ListableVariableW[] = []
+	let variables: ListableVariableW[] | undefined = undefined
+	let filteredItems: (ListableVariableW & { marked?: string })[] | undefined = undefined
 	let contextualVariables: ContextualVariable[] = []
 	let shareModal: ShareModal
 	let variableEditor: VariableEditor
 	let loading = {
-		variables: true,
 		contextual: true
 	}
 
 	let deleteConfirmedCallback: (() => void) | undefined = undefined
 	$: open = Boolean(deleteConfirmedCallback)
 
+	$: owners = Array.from(
+		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+	).sort()
+
+	let ownerFilter: string | undefined = undefined
+
+	$: preFilteredItems =
+		ownerFilter == undefined
+			? variables
+			: variables?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
+
 	// If relative, the dropdown is positioned relative to its button
 	async function loadVariables(): Promise<void> {
 		variables = (await VariableService.listVariable({ workspace: $workspaceStore! })).map((x) => {
@@ -62,8 +73,8 @@
 				...x
 			}
 		})
-		loading.variables = false
 	}
+
 	async function loadContextualVariables(): Promise<void> {
 		contextualVariables = await VariableService.listContextualVariables({
 			workspace: $workspaceStore!
@@ -91,7 +102,7 @@
 
 <SearchItems
 	{filter}
-	items={variables}
+	items={preFilteredItems}
 	bind:filteredItems
 	f={(x) => x.path + ' ' + x.description}
 />
@@ -136,8 +147,10 @@
 		<div class="pt-2">
 			<input placeholder="Search Variable" bind:value={filter} class="input mt-1" />
 		</div>
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+
 		<div class="relative overflow-x-auto pb-40 pr-4">
-			{#if loading.variables}
+			{#if !filteredItems}
 				<Skeleton layout={[0.5, [2], 1]} />
 				{#each new Array(3) as _}
 					<Skeleton layout={[[3.5], 0.5]} />
@@ -153,14 +166,15 @@
 						<th />
 					</tr>
 					<tbody slot="body">
-						{#each filteredItems as { path, value, is_secret, description, extra_perms, canWrite, account, is_oauth, is_expired, refresh_error, is_linked }}
+						{#each filteredItems as { path, value, is_secret, description, extra_perms, canWrite, account, is_oauth, is_expired, refresh_error, is_linked, marked }}
 							<tr>
 								<td
 									><a
 										class="break-words"
 										id="edit-{path}"
 										on:click={() => variableEditor.editVariable(path)}
-										href="#{path}">{path}</a
+										href="#{path}"
+										>{#if marked}{@html marked}{:else}{path}{/if}</a
 									>
 									<div><SharedBadge {canWrite} extraPerms={extra_perms} /></div>
 								</td>