windmill/frontend/src/lib/components/SchemaViewer.svelte

<script lang="ts">
	import type { Schema } from '$lib/common'
	import { copyToClipboard, emptySchema } from '$lib/utils'

	import Highlight from 'svelte-highlight'
	import json from 'svelte-highlight/languages/json'
	import TableCustom from './TableCustom.svelte'
	import Tab from './common/tabs/Tab.svelte'
	import TabContent from './common/tabs/TabContent.svelte'
	import Tabs from './common/tabs/Tabs.svelte'
	import { Badge } from './common'
	import HighlightTheme from './HighlightTheme.svelte'
	import Button from './common/button/Button.svelte'
	import { ClipboardCopy } from 'lucide-svelte'

	export let schema: Schema | undefined | any = emptySchema()

	function getProperties(schema: Schema) {
		if (schema.properties) {
			return Object.entries(schema.properties)
		}
		return []
	}
</script>

<HighlightTheme />

<div class="w-full">
	<Tabs selected="arguments">
		<Tab value="arguments">Arguments</Tab>
		<Tab value="advanced">Advanced</Tab>
		<svelte:fragment slot="content">
			<div class="overflow-auto pt-2">
				<TabContent value="arguments">
					{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
						<div class="flex flex-row">
							<TableCustom>
								<tr slot="header-row" class="underline">
									<th>name</th>
									<th>type</th>
									<th>description</th>
									<th>default</th>
									<th>format</th>
									<th>required</th>
								</tr>
								<tbody slot="body">
									{#each getProperties(schema) as [name, property] (name)}
										<tr>
											<td class="font-semibold pl-1">{name}</td>
											<td
												><Badge color="blue"
													>{#if !property.type} any {:else} {property.type} {/if}</Badge
												></td
											>
											<td>{property.description ?? ''}</td>
											<td
												>{property.default == '<function call>'
													? '<function call>'
													: property.default
													? JSON.stringify(property.default)
													: ''}</td
											>
											<td
												>{property.format ?? ''}
												{property.contentEncoding
													? `(encoding: ${property.contentEncoding})`
													: ''}</td
											>
											<td
												>{#if schema.required.includes(name)}
													<span class="text-red-600 font-bold text-lg">*</span>
												{/if}</td
											>
										</tr>
									{/each}
								</tbody>
							</TableCustom>
						</div>
					{:else}
						<div class="text-secondary text-xs italic m-1">No arguments</div>
					{/if}
				</TabContent>
				<TabContent value="advanced">
					<div class="h-full relative">
						<Button
							wrapperClasses="absolute top-2 right-2 z-20"
							on:click={() => copyToClipboard(JSON.stringify(schema, null, 4))}
							color="light"
							size="xs2"
							startIcon={{
								icon: ClipboardCopy
							}}
							iconOnly
						/>
						<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
					</div>
				</TabContent>
			</div>
		</svelte:fragment>
	</Tabs>
</div>