User item filters in Resource and Variables page (#6971)

* Only f/* and u/username toggle in Variables page

* Only f/* and u/username toggle in Resources page
This commit is contained in:
Diego Imbert
2025-10-28 12:32:10 +01:00
committed by GitHub
parent 1f194b8dfc
commit 145d02461c
2 changed files with 90 additions and 31 deletions

View File

@@ -383,32 +383,41 @@
? currentResources
: currentResources?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
)
let preFilteredType = $derived(
typeFilter == undefined
? preFilteredItemsOwners?.filter((x) => {
return tab === 'workspace'
? x.resource_type !== 'app_theme' &&
x.resource_type !== 'state' &&
x.resource_type !== 'cache'
: tab === 'states'
? x.resource_type === 'state'
: tab === 'cache'
? x.resource_type === 'cache'
: tab === 'theme'
? x.resource_type === 'app_theme'
: true
})
: preFilteredItemsOwners?.filter((x) => {
return (
x.resource_type === typeFilter &&
(tab === 'workspace'
let preFilteredType = $derived.by(() => {
let l =
typeFilter == undefined
? preFilteredItemsOwners?.filter((x) => {
return tab === 'workspace'
? x.resource_type !== 'app_theme' &&
x.resource_type !== 'state' &&
x.resource_type !== 'cache'
: true)
)
})
)
x.resource_type !== 'state' &&
x.resource_type !== 'cache'
: tab === 'states'
? x.resource_type === 'state'
: tab === 'cache'
? x.resource_type === 'cache'
: tab === 'theme'
? x.resource_type === 'app_theme'
: true
})
: preFilteredItemsOwners?.filter((x) => {
return (
x.resource_type === typeFilter &&
(tab === 'workspace'
? x.resource_type !== 'app_theme' &&
x.resource_type !== 'state' &&
x.resource_type !== 'cache'
: true)
)
})
if (filterUserFolders) {
l = l?.filter((item) => {
if (filterUserFoldersType === 'only f/*') return item.path.startsWith('f/')
if (filterUserFoldersType === 'u/username and f/*')
return item.path.startsWith('f/') || item.path.startsWith(`u/${$userStore?.username}/`)
})
}
return l
})
$effect(() => {
if ($workspaceStore && $userStore) {
untrack(() => {
@@ -428,6 +437,15 @@
})
let dbManagerDrawer: DbManagerDrawer | undefined = $state()
let filterUserFolders = $state(false)
let filterUserFoldersType: 'only f/*' | 'u/username and f/*' | undefined = $derived(
$userStore?.is_super_admin && $userStore.username.includes('@')
? 'only f/*'
: $userStore?.is_admin || $userStore?.is_super_admin
? 'u/username and f/*'
: undefined
)
</script>
<ConfirmationModal
@@ -755,7 +773,18 @@
<div class="h-4"></div>
{/if}
<div class="overflow-x-auto pb-40 mt-4">
<div class="overflow-x-auto pb-40 mt-4"
><div class="flex flex-row items-center justify-end gap-4 pb-2">
{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
{:else if $userStore?.is_admin || $userStore?.is_super_admin}
<Toggle
size="xs"
bind:checked={filterUserFolders}
options={{ right: `Only u/${$userStore.username} and f/*` }}
/>
{/if}
</div>
{#if loading.resources}
<Skeleton layout={[0.5, [2], 1]} />
{#each new Array(6) as _}

View File

@@ -16,6 +16,7 @@
import Head from '$lib/components/table/Head.svelte'
import Row from '$lib/components/table/Row.svelte'
import TableSimple from '$lib/components/TableSimple.svelte'
import Toggle from '$lib/components/Toggle.svelte'
import Tooltip from '$lib/components/Tooltip.svelte'
import VariableEditor from '$lib/components/VariableEditor.svelte'
import type { ContextualVariable, ListableVariable, WorkspaceDeployUISettings } from '$lib/gen'
@@ -69,11 +70,20 @@
}
})
let preFilteredItems = $derived(
ownerFilter == undefined
? variables
: variables?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
)
let preFilteredItems = $derived.by(() => {
let l =
ownerFilter == undefined
? variables
: variables?.filter((x) => x.path.startsWith(ownerFilter ?? ''))
if (filterUserFolders) {
l = l?.filter((item) => {
if (filterUserFoldersType === 'only f/*') return item.path.startsWith('f/')
if (filterUserFoldersType === 'u/username and f/*')
return item.path.startsWith('f/') || item.path.startsWith(`u/${$userStore?.username}/`)
})
}
return l
})
// If relative, the dropdown is positioned relative to its button
async function loadVariables(): Promise<void> {
@@ -141,6 +151,15 @@
loadContextualVariables()
}, 5000)
}
let filterUserFolders = $state(false)
let filterUserFoldersType: 'only f/*' | 'u/username and f/*' | undefined = $derived(
$userStore?.is_super_admin && $userStore.username.includes('@')
? 'only f/*'
: $userStore?.is_admin || $userStore?.is_super_admin
? 'u/username and f/*'
: undefined
)
</script>
<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
@@ -220,6 +239,17 @@
<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
</div>
<div class="relative overflow-x-auto pb-40 pr-4">
<div class="flex flex-row items-center justify-end gap-4 pb-2">
{#if $userStore?.is_super_admin && $userStore.username.includes('@')}
<Toggle size="xs" bind:checked={filterUserFolders} options={{ right: 'Only f/*' }} />
{:else if $userStore?.is_admin || $userStore?.is_super_admin}
<Toggle
size="xs"
bind:checked={filterUserFolders}
options={{ right: `Only u/${$userStore.username} and f/*` }}
/>
{/if}
</div>
{#if !filteredItems}
<Skeleton layout={[0.5, [2], 1]} />
{#each new Array(3) as _}