Files
windmill/frontend/src/lib/components/settings/WorkspaceOperatorSettings.svelte
T
Diego Imbert 20ecd904e7 feat(operators): allow operators to access assets page (#9095)
* feat(operators): allow operators to access assets page

Adds the "assets" key to workspace operator_settings (defaulting to true
for existing and new workspaces) and toggles the frontend default so the
assets page is visible to operators by default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* nit: remove settings btn when not available

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 18:36:34 +00:00

160 lines
5.1 KiB
Svelte

<script lang="ts">
import { Button } from '$lib/components/common'
import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
import DataTable from '$lib/components/table/DataTable.svelte'
import Section from '$lib/components/Section.svelte'
import Head from '$lib/components/table/Head.svelte'
import Cell from '$lib/components/table/Cell.svelte'
import { WorkspaceService } from '$lib/gen'
import { workspaceStore } from '$lib/stores'
import { sendUserToast } from '$lib/toast'
import { SaveIcon, EyeIcon, EyeOffIcon } from 'lucide-svelte'
import { untrack } from 'svelte'
let operatorWorkspaceSettings = $state({
runs: true,
schedules: true,
resources: true,
variables: true,
assets: true,
triggers: true,
audit_logs: true,
groups: true,
folders: true,
workers: true
})
let originalSettings = $state({ ...untrack(() => operatorWorkspaceSettings) })
let isChanged = $state(false)
let currentWorkspace: string | null = $state(null)
async function saveSettings() {
console.log('Saving operator settings:', operatorWorkspaceSettings)
try {
await WorkspaceService.updateOperatorSettings({
workspace: $workspaceStore!,
requestBody: operatorWorkspaceSettings
})
originalSettings = { ...operatorWorkspaceSettings }
isChanged = false
sendUserToast('Operator settings saved successfully!', false)
} catch (error) {
console.error('Error updating operator settings:', error)
sendUserToast('Failed to save operator settings.', true)
}
}
const descriptions = {
runs: { title: 'Runs', description: 'View runs' },
schedules: { title: 'Schedules', description: 'View schedules' },
resources: { title: 'Resources', description: 'View resources' },
variables: { title: 'Variables', description: 'View variables' },
assets: { title: 'Assets', description: 'View assets' },
triggers: { title: 'Triggers', description: 'View all triggers (HTTP, Websocket, Kafka)' },
audit_logs: { title: 'Audit Logs', description: 'View audit logs' },
groups: { title: 'Groups', description: 'View groups and group members' },
folders: { title: 'Folders', description: 'View folders' },
workers: { title: 'Workers', description: 'View workers and worker groups' }
}
$effect(() => {
if ($workspaceStore && $workspaceStore !== currentWorkspace) {
;(async () => {
currentWorkspace = $workspaceStore
const settings = await WorkspaceService.getSettings({
workspace: $workspaceStore
})
if (settings.operator_settings !== null) {
operatorWorkspaceSettings = {
...operatorWorkspaceSettings,
...(settings.operator_settings ?? {})
}
originalSettings = { ...operatorWorkspaceSettings }
}
})()
}
})
$effect(() => {
isChanged = JSON.stringify(operatorWorkspaceSettings) !== JSON.stringify(originalSettings)
})
const allDisabled = $derived(
Object.values(operatorWorkspaceSettings).every((value) => value === false)
)
const allEnabled = $derived(
Object.values(operatorWorkspaceSettings).every((value) => value === true)
)
</script>
<Section
label="Operator settings"
collapsable={true}
tooltip="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
description="Configure the operator visibility settings for your workspace. Toggle the settings you want to enable."
>
{#snippet action()}
<Button
on:click={saveSettings}
startIcon={{ icon: SaveIcon }}
disabled={!isChanged}
variant="accent"
>
Save operator settings
</Button>
{/snippet}
<DataTable tableFixed={true} size="xs">
<Head>
<tr>
<Cell head first>Section</Cell>
<Cell head>Description</Cell>
<Cell head last>
<ToggleButtonGroup
bind:selected={
() => (allDisabled ? 'false' : allEnabled ? 'true' : ''),
(v) => {
Object.keys(operatorWorkspaceSettings).forEach((key) => {
if (v === 'true') operatorWorkspaceSettings[key] = true
if (v === 'false') operatorWorkspaceSettings[key] = false
})
}
}
>
{#snippet children({ item })}
<ToggleButton icon={EyeIcon} small={true} value={'true'} label="Enable All" {item} />
<ToggleButton
icon={EyeOffIcon}
small={true}
value={'false'}
label="Disable All"
{item}
/>
{/snippet}
</ToggleButtonGroup>
</Cell>
</tr>
</Head>
<tbody class="divide-y bg-surface">
{#each Object.entries(descriptions) as [key, { title, description }]}
<tr>
<Cell first>{title}</Cell>
<Cell>{description}</Cell>
<Cell last class="pl-8">
<ToggleButtonGroup
selected={operatorWorkspaceSettings[key] ? 'on' : 'off'}
on:selected={({ detail }) => (operatorWorkspaceSettings[key] = detail === 'on')}
>
{#snippet children({ item })}
<ToggleButton icon={EyeIcon} small={true} value={'on'} label="On" {item} />
<ToggleButton icon={EyeOffIcon} small={true} value={'off'} label="Off" {item} />
{/snippet}
</ToggleButtonGroup>
</Cell>
</tr>
{/each}
</tbody>
</DataTable>
</Section>