internal fix to improve exportability of code in react-sdk (#3978)

* all * all * all * all * fix * remove vite config * remove uncessary app.css * all * all * all * all * all
2026-08-18 16:02:10 +00:00 · 2024-06-26 01:31:24 +02:00
parent ec673ac6b4
commit 8166330fc5
33 changed files with 654 additions and 328 deletions
@@ -244,6 +244,16 @@
 			"svelte": "./package/components/SchemaForm.svelte",
 			"default": "./package/components/SchemaForm.svelte"
 		},
+		"./components/EditableSchemaWrapper.svelte": {
+			"types": "./package/components/schema/EditableSchemaWrapper.svelte.d.ts",
+			"svelte": "./package/components/schema/EditableSchemaWrapper.svelte",
+			"default": "./package/components/schema/EditableSchemaWrapper.svelte"
+		},
+		"./components/ResourceEditor.svelte": {
+			"types": "./package/components/ResourceEditor.svelte.d.ts",
+			"svelte": "./package/components/ResourceEditor.svelte",
+			"default": "./package/components/ResourceEditor.svelte"
+		},
 		"./components/SchemaEditor.svelte": {
 			"types": "./package/components/EditableSchemaForm.svelte.d.ts",
 			"svelte": "./package/components/EditableSchemaForm.svelte",
@@ -384,6 +394,9 @@
 			"components/SchemaEditor.svelte": [
 				"./package/components/SchemaEditor.svelte.d.ts"
 			],
+			"components/EditableSchemaWrapper.svelte": [
+				"./package/components/schema/EditableSchemaWrapper.svelte.d.ts"
+			],
 			"utils": [
 				"./package/utils.d.ts"
 			],
@@ -28,33 +28,7 @@
 		list-style-type: '- ';
 		padding-left: 3rem;
 	}
-	.splitpanes--vertical > .splitpanes__pane {
-		transition: none !important;
-	}

-	.splitpanes--horizontal > .splitpanes__pane {
-		transition: none !important;
-	}
-
-	.monaco-workbench > .notifications-toasts.visible {
-		display: none !important;
-	}
-
-	.monaco-editor .suggest-widget {
-		z-index: 10001 !important;
-	}
-
-	.nowrap pre code.hljs {
-		whitespace: normal !important;
-	}
-
-	.z5000 {
-		z-index: 5000 !important;
-	}
-
-	.foo {
-		color: red !important;
-	}
 	.autocomplete-list-item-create {
 		@apply !text-primary-inverse !bg-surface-inverse;
 	}
@@ -74,34 +48,8 @@
 	.autocomplete-list {
 		@apply !bg-surface;
 	}
-	pre code.hljs {
-		overflow: visible !important;
-	}
-
-	svelte-virtual-list-row {
-		overflow: visible !important;
-	}
-
-	svelte-virtual-list-contents > * + * {
-		border-top-width: 1px !important;
-		border-bottom-width: 0px !important;
-	}
-
-	.monaco-editor textarea:focus {
-		box-shadow: none !important;
-	}
-
-	.Template-editor span.mtk20 {
-		color: black !important;
-	}
 }

-@layer components {
-	/* Flow graph viewer -> Svelvet library internal class overwrite */
-	.Node {
-		display: flex !important;
-	}
-}
@layer utilities {
 	@variants responsive {
 		/* Hide scrollbar for Chrome, Safari and Opera */
@@ -117,28 +65,35 @@
 	}
 }

-.grid-cell-centered {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.grid-cell-centered .svelte-select {
-	height: 32px !important;
+.splitpanes--vertical > .splitpanes__pane {
+	transition: none !important;
 }

-.grid-cell-centered .selected-item {
-	margin-top: -4px;
+.splitpanes--horizontal > .splitpanes__pane {
+	transition: none !important;
 }

-.ol-overlaycontainer-stopevent {
-	@apply flex flex-col justify-start items-end;
-}
-.ol-control button {
-	@apply w-7 h-7 center-center bg-surface border text-secondary 
-	rounded mt-1 mr-1 shadow duration-200 hover:bg-surface-hover focus:bg-surface-hover;
+.monaco-workbench > .notifications-toasts.visible {
+	display: none !important;
+}
+
+.monaco-editor .suggest-widget {
+	z-index: 10001 !important;
+}
+
+svelte-virtual-list-row {
+	overflow: visible !important;
+}
+
+svelte-virtual-list-contents > * + * {
+	border-top-width: 1px !important;
+	border-bottom-width: 0px !important;
+}
+
+.monaco-editor textarea:focus {
+	box-shadow: none !important;
 }

-/* Components */
 .component-wrapper {
 	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
 }
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte'
-	import DarkModeObserver from './DarkModeObserver.svelte'
-	import github from 'svelte-highlight/styles/github'
-	import nord from 'svelte-highlight/styles/nord'
-	import { each } from 'chart.js/helpers'
-	import { Chart } from 'chart.js'
-
-	let darkMode: boolean = false
-
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-			each(Chart.instances, (instance) => {
-				if (instance.options.scales?.y?.ticks?.color !== undefined) {
-					instance.options.scales.y.ticks.color = '#e0e7ed'
-				}
-				if (instance.options.scales?.y?.grid?.color !== undefined) {
-					instance.options.scales.y.grid.color = '#4a5568'
-				}
-				if (instance.options.scales?.x?.ticks?.color !== undefined) {
-					instance.options.scales.x.ticks.color = '#e0e7ed'
-				}
-				if (instance.options.scales?.x?.grid?.color !== undefined) {
-					instance.options.scales.x.grid.color = '#4a5568'
-				}
-				if (instance.options.plugins?.legend?.labels?.color !== undefined) {
-					instance.options.plugins.legend.labels.color = '#e0e7ed'
-				}
-				instance.update()
-			})
-		} else {
-			darkMode = false
-			each(Chart.instances, (instance) => {
-				if (instance.options.scales?.y?.ticks?.color !== undefined) {
-					instance.options.scales.y.ticks.color = '#4a5568'
-				}
-				if (instance.options.scales?.y?.grid?.color !== undefined) {
-					instance.options.scales.y.grid.color = '#e0e7ed'
-				}
-				if (instance.options.scales?.x?.ticks?.color !== undefined) {
-					instance.options.scales.x.ticks.color = '#4a5568'
-				}
-				if (instance.options.scales?.x?.grid?.color !== undefined) {
-					instance.options.scales.x.grid.color = '#e0e7ed'
-				}
-				if (instance.options.plugins?.legend?.labels?.color !== undefined) {
-					instance.options.plugins.legend.labels.color = '#4a5568'
-				}
-				instance.update()
-			})
-		}
-	}
-
-	onMount(() => {
-		onThemeChange()
-	})
-</script>
-
-<DarkModeObserver on:change={onThemeChange} />
-
-<svelte:head>
-	{#if darkMode}
-		{@html nord}
-	{:else}
-		{@html github}
-	{/if}
-</svelte:head>
@@ -31,6 +31,7 @@
 	import DownloadCsv from './table/DownloadCsv.svelte'
 	import { convertJsonToCsv } from './table/tableUtils'
 	import Tooltip from './Tooltip.svelte'
+	import HighlightTheme from './HighlightTheme.svelte'

 	export let result: any
 	export let requireHtmlApproval = false
@@ -341,6 +342,7 @@
 	let seeS3PreviewFileFromList = ''
 </script>

+<HighlightTheme />
 {#if is_render_all}
 	<div class="flex flex-col w-full gap-6">
 		{#if !noControls}
@@ -8,7 +8,6 @@
 	import { workspaceStore } from '$lib/stores'
 	import type Editor from './Editor.svelte'
 	import ItemPicker from './ItemPicker.svelte'
-	import ResourceEditor from './ResourceEditor.svelte'
 	import VariableEditor from './VariableEditor.svelte'
 	import Button from './common/button/Button.svelte'
 	import HighlightCode from './HighlightCode.svelte'
@@ -44,6 +43,7 @@
 	import { getResetCode } from '$lib/script_helpers'
 	import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
 	import Popover from './Popover.svelte'
+	import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'

 	export let lang: SupportedLanguage | undefined
 	export let editor: Editor | undefined
@@ -72,7 +72,7 @@
 	let resourcePicker: ItemPicker
 	let resourceTypePicker: ItemPicker
 	let variableEditor: VariableEditor
-	let resourceEditor: ResourceEditor
+	let resourceEditor: ResourceEditorDrawer
 	let showContextVarPicker = false
 	let showVarPicker = false
 	let showResourcePicker = false
@@ -498,7 +498,7 @@ $res = json_decode(curl_exec($ch));`)
 			await ResourceService.listResourceType({ workspace: $workspaceStore ?? 'NO_W' })}
 	/>
 {/if}
-<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />

 <div class="flex justify-between items-center overflow-y-auto w-full p-0.5">
@@ -16,6 +16,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
 	import { Copy } from 'lucide-svelte'
+	import HighlightTheme from './HighlightTheme.svelte'

 	export let schema: any | undefined = undefined

@@ -23,6 +24,8 @@
 	let codeViewer: Drawer
 </script>

+<HighlightTheme />
+
 <Drawer bind:this={codeViewer} size="900px">
 	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
 		{#if stepDetail && typeof stepDetail != 'string'}
@@ -11,6 +11,7 @@
 	import { Clipboard } from 'lucide-svelte'
 	import YAML from 'yaml'
 	import { yaml } from 'svelte-highlight/languages'
+	import HighlightTheme from './HighlightTheme.svelte'

 	export let flow: {
 		summary: string
@@ -45,6 +46,8 @@
 	}
 </script>

+<HighlightTheme />
+
 <Tabs bind:selected={tab}>
 	{#if !noGraph}
 		<Tab value="ui">Graph</Tab>
@@ -13,6 +13,7 @@
 	import { Button } from './common'
 	import { copyToClipboard } from '$lib/utils'
 	import { ClipboardCopy } from 'lucide-svelte'
+	import HighlightTheme from './HighlightTheme.svelte'

 	export let code: string = ''
 	export let language: Script['language'] | 'frontend' | undefined
@@ -57,6 +58,8 @@
 	$: lang = getLang(language)
 </script>

+<HighlightTheme />
+
 <div class="relative overflow-x-auto">
 	<Button
 		wrapperClasses="absolute top-2 right-2 z-20"
@@ -0,0 +1,319 @@
+<script lang="ts">
+</script>
+
+<style global lang="postcss">
+	pre code.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 1em;
+		overflow: visible !important;
+	}
+
+	code.hljs {
+		padding: 3px 5px;
+	}
+
+	.dark .hljs {
+		background: #2e3440;
+	}
+	.dark .hljs,
+	.dark .hljs-subst {
+		color: #d8dee9;
+	}
+	.dark .hljs-selector-tag {
+		color: #81a1c1;
+	}
+	.dark .hljs-selector-id {
+		color: #8fbcbb;
+		font-weight: bold;
+	}
+	.dark .hljs-selector-class {
+		color: #8fbcbb;
+	}
+	.dark .hljs-selector-attr {
+		color: #8fbcbb;
+	}
+	.dark .hljs-property {
+		color: #88c0d0;
+	}
+	.dark .hljs-selector-pseudo {
+		color: #88c0d0;
+	}
+	.dark .hljs-addition {
+		background-color: rgba(163, 190, 140, 0.5);
+	}
+	.dark .hljs-deletion {
+		background-color: rgba(191, 97, 106, 0.5);
+	}
+	.dark .hljs-built_in,
+	.dark .hljs-type {
+		color: #8fbcbb;
+	}
+	.dark .hljs-class {
+		color: #8fbcbb;
+	}
+	.dark .hljs-function {
+		color: #88c0d0;
+	}
+	.dark .hljs-title.hljs-function,
+	.dark .hljs-function > .hljs-title {
+		color: #88c0d0;
+	}
+	.dark .hljs-keyword,
+	.dark .hljs-literal,
+	.dark .hljs-symbol {
+		color: #81a1c1;
+	}
+	.dark .hljs-number {
+		color: #b48ead;
+	}
+	.dark .hljs-regexp {
+		color: #ebcb8b;
+	}
+	.dark .hljs-string {
+		color: #a3be8c;
+	}
+	.dark .hljs-title {
+		color: #8fbcbb;
+	}
+	.dark .hljs-params {
+		color: #d8dee9;
+	}
+	.dark .hljs-bullet {
+		color: #81a1c1;
+	}
+	.dark .hljs-code {
+		color: #8fbcbb;
+	}
+	.dark .hljs-emphasis {
+		font-style: italic;
+	}
+	.dark .hljs-formula {
+		color: #8fbcbb;
+	}
+	.dark .hljs-strong {
+		font-weight: bold;
+	}
+	.dark .hljs-link:hover {
+		-webkit-text-decoration: underline;
+		text-decoration: underline;
+	}
+	.dark .hljs-quote {
+		color: #4c566a;
+	}
+	.dark .hljs-comment {
+		color: #4c566a;
+	}
+	.dark .hljs-doctag {
+		color: #8fbcbb;
+	}
+	.dark .hljs-meta,
+	.dark .hljs-meta .hljs-keyword {
+		color: #5e81ac;
+	}
+	.dark .hljs-meta .hljs-string {
+		color: #a3be8c;
+	}
+	.dark .hljs-attr {
+		color: #8fbcbb;
+	}
+	.dark .hljs-attribute {
+		color: #d8dee9;
+	}
+	.dark .hljs-name {
+		color: #81a1c1;
+	}
+	.dark .hljs-section {
+		color: #88c0d0;
+	}
+	.dark .hljs-tag {
+		color: #81a1c1;
+	}
+	.dark .hljs-variable {
+		color: #d8dee9;
+	}
+	.dark .hljs-template-variable {
+		color: #d8dee9;
+	}
+	.dark .hljs-template-tag {
+		color: #5e81ac;
+	}
+	.dark .language-abnf .hljs-attribute {
+		color: #88c0d0;
+	}
+	.dark .language-abnf .hljs-symbol {
+		color: #ebcb8b;
+	}
+	.dark .language-apache .hljs-attribute {
+		color: #88c0d0;
+	}
+	.dark .language-apache .hljs-section {
+		color: #81a1c1;
+	}
+	.dark .language-arduino .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-aspectj .hljs-meta {
+		color: #d08770;
+	}
+	.dark .language-aspectj > .hljs-title {
+		color: #88c0d0;
+	}
+	.dark .language-bnf .hljs-attribute {
+		color: #8fbcbb;
+	}
+	.dark .language-clojure .hljs-name {
+		color: #88c0d0;
+	}
+	.dark .language-clojure .hljs-symbol {
+		color: #ebcb8b;
+	}
+	.dark .language-coq .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-cpp .hljs-meta .hljs-string {
+		color: #8fbcbb;
+	}
+	.dark .language-css .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-css .hljs-keyword {
+		color: #d08770;
+	}
+	.dark .language-diff .hljs-meta {
+		color: #8fbcbb;
+	}
+	.dark .language-ebnf .hljs-attribute {
+		color: #8fbcbb;
+	}
+	.dark .language-glsl .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-groovy .hljs-meta:not(:first-child) {
+		color: #d08770;
+	}
+	.dark .language-haxe .hljs-meta {
+		color: #d08770;
+	}
+	.dark .language-java .hljs-meta {
+		color: #d08770;
+	}
+	.dark .language-ldif .hljs-attribute {
+		color: #8fbcbb;
+	}
+	.dark .language-lisp .hljs-name {
+		color: #88c0d0;
+	}
+	.dark .language-lua .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-moonscript .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-nginx .hljs-attribute {
+		color: #88c0d0;
+	}
+	.dark .language-nginx .hljs-section {
+		color: #5e81ac;
+	}
+	.dark .language-pf .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-processing .hljs-built_in {
+		color: #88c0d0;
+	}
+	.dark .language-scss .hljs-keyword {
+		color: #81a1c1;
+	}
+	.dark .language-stylus .hljs-keyword {
+		color: #81a1c1;
+	}
+	.dark .language-swift .hljs-meta {
+		color: #d08770;
+	}
+	.dark .language-vim .hljs-built_in {
+		color: #88c0d0;
+		font-style: italic;
+	}
+	.dark .language-yaml .hljs-meta {
+		color: #d08770;
+	}
+
+	.hljs {
+		color: #24292e;
+		background: #ffffff;
+	}
+	.hljs-doctag,
+	.hljs-keyword,
+	.hljs-meta .hljs-keyword,
+	.hljs-template-tag,
+	.hljs-template-variable,
+	.hljs-type,
+	.hljs-variable.language_ {
+		color: #d73a49;
+	}
+	.hljs-title,
+	.hljs-title.class_,
+	.hljs-title.class_.inherited__,
+	.hljs-title.function_ {
+		color: #6f42c1;
+	}
+	.hljs-attr,
+	.hljs-attribute,
+	.hljs-literal,
+	.hljs-meta,
+	.hljs-number,
+	.hljs-operator,
+	.hljs-variable,
+	.hljs-selector-attr,
+	.hljs-selector-class,
+	.hljs-selector-id {
+		color: #005cc5;
+	}
+	.hljs-regexp,
+	.hljs-string,
+	.hljs-meta .hljs-string {
+		color: #032f62;
+	}
+	.hljs-built_in,
+	.hljs-symbol {
+		color: #e36209;
+	}
+	.hljs-comment,
+	.hljs-code,
+	.hljs-formula {
+		color: #6a737d;
+	}
+	.hljs-name,
+	.hljs-quote,
+	.hljs-selector-tag,
+	.hljs-selector-pseudo {
+		color: #22863a;
+	}
+	.hljs-subst {
+		color: #24292e;
+	}
+	.hljs-section {
+		color: #005cc5;
+		font-weight: bold;
+	}
+	.hljs-bullet {
+		color: #735c0f;
+	}
+	.hljs-emphasis {
+		color: #24292e;
+		font-style: italic;
+	}
+	.hljs-strong {
+		color: #24292e;
+		font-weight: bold;
+	}
+	.hljs-addition {
+		color: #22863a;
+		background-color: #f0fff4;
+	}
+	.hljs-deletion {
+		color: #b31d28;
+		background-color: #ffeef0;
+	}
+</style>
@@ -10,6 +10,7 @@
 	import Cell from './table/Cell.svelte'
 	import Head from './table/Head.svelte'
 	import Row from './table/Row.svelte'
+	import HighlightTheme from './HighlightTheme.svelte'

 	export let args: any
 	export let argLabel: string | undefined = undefined
@@ -91,6 +92,8 @@ ${Object.entries(args)
 	</DataTable>
 </div>

+<HighlightTheme />
+
 <Drawer bind:this={jsonViewer} size="900px">
 	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
@@ -3,66 +3,80 @@
 	import { ResourceService, type Resource, type ResourceType } from '$lib/gen'
 	import { canWrite, emptyString, isOwner, urlize } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
-	import { Alert, Button, Drawer, Skeleton } from './common'
+	import { Alert, Skeleton } from './common'
 	import Path from './Path.svelte'
 	import Required from './Required.svelte'

 	import { userStore, workspaceStore } from '$lib/stores'
-	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import SchemaForm from './SchemaForm.svelte'
 	import SimpleEditor from './SimpleEditor.svelte'
 	import Toggle from './Toggle.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import TestConnection from './TestConnection.svelte'
-	import { Pen, Save } from 'lucide-svelte'
+	import { Pen } from 'lucide-svelte'
 	import Markdown from 'svelte-exmarkdown'
 	import autosize from '$lib/autosize'
 	import GfmMarkdown from './GfmMarkdown.svelte'

-	let path = ''
-	let initialPath = ''
+	export let canSave = true
+	export let resource_type: string | undefined = undefined
+	export let path: string = ''
+	export let newResource: boolean = false
+	export let hidePath: boolean = false
+	export let watchChanges: boolean = false

-	let resourceToEdit: Resource | undefined
+	let isValid = true
+	let jsonError = ''
+	let can_write = true
+
+	$: canSave = can_write && isValid && jsonError == ''
+
+	let initialPath = path
+
+	let resourceToEdit: Resource | undefined = undefined

 	let description: string = ''
 	let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`
-	let selectedResourceType: string | undefined
-	let resourceSchema: Schema | undefined
+	let resourceSchema: Schema | undefined = undefined
 	let args: Record<string, any> = {}
-	let can_write = true
-	let loadingSchema = false
+	let loadingSchema = true
 	let linkedVars: string[] = []
-	let drawer: Drawer
 	let resourceTypeInfo: ResourceType | undefined = undefined
-	let renderDescription = true
-
-	let rawCode: string | undefined = undefined
+	let editDescription = false
+	let viewJsonSchema = false

 	const dispatch = createEventDispatcher()

-	export async function initEdit(p: string): Promise<void> {
-		initialPath = p
-		path = p
-		resourceToEdit = undefined
-		resourceSchema = undefined
-		viewJsonSchema = false
-		loadingSchema = true
-		drawer.openDrawer?.()
-		resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore!, path: p })
+	$: watchChanges && dispatch('change', { path, args, description })
+
+	let rawCode: string | undefined = undefined
+
+	async function initEdit() {
+		resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore!, path })
 		description = resourceToEdit!.description ?? ''
-		selectedResourceType = resourceToEdit!.resource_type
+		resource_type = resourceToEdit!.resource_type
+		args = resourceToEdit?.value ?? ({} as any)
 		loadResourceType()
-		args = resourceToEdit!.value as any
 		can_write =
 			resourceToEdit.workspace_id == $workspaceStore &&
-			canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore)
+			canWrite(path, resourceToEdit.extra_perms ?? {}, $userStore)
 		linkedVars = Object.entries(args)
 			.filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
 			.map(([k, _]) => k)
-		renderDescription = false
 	}

-	async function editResource(): Promise<void> {
+	if (!newResource) {
+		initEdit()
+	} else if (resource_type) {
+		loadResourceType()
+	} else {
+		sendUserToast('Resource type cannot be undefined for new resource creation', true)
+	}
+
+	$: rawCode && parseJson()
+	$: linkedVars.length > 0 && path && updateArgsFromLinkedVars()
+
+	export async function editResource(): Promise<void> {
 		if (resourceToEdit) {
 			await ResourceService.updateResource({
 				workspace: $workspaceStore!,
@@ -71,18 +85,26 @@
 			})
 			sendUserToast(`Updated resource at ${path}`)
 			dispatch('refresh', path)
-			drawer.closeDrawer?.()
 		} else {
 			throw Error('Cannot edit undefined resourceToEdit')
 		}
 	}

+	export async function createResource(): Promise<void> {
+		await ResourceService.createResource({
+			workspace: $workspaceStore!,
+			requestBody: { path, value: args, description, resource_type: resource_type! }
+		})
+		sendUserToast(`Updated resource at ${path}`)
+		dispatch('refresh', path)
+	}
+
 	async function loadResourceType(): Promise<void> {
-		if (selectedResourceType) {
+		if (resource_type) {
 			try {
 				const resourceType = await ResourceService.getResourceType({
 					workspace: $workspaceStore!,
-					path: selectedResourceType
+					path: resource_type
 				})

 				resourceTypeInfo = resourceType
@@ -100,11 +122,6 @@
 		loadingSchema = false
 	}

-	let isValid = true
-	let jsonError = ''
-
-	$: rawCode && parseJson()
-
 	function parseJson() {
 		try {
 			args = JSON.parse(rawCode ?? '')
@@ -114,14 +131,11 @@
 		}
 	}

-	$: linkedVars.length > 0 && path && updateArgsFromLinkedVars()
-
 	function updateArgsFromLinkedVars() {
 		linkedVars.forEach((k) => {
 			args[k] = `$var:${path}`
 		})
 	}
-	let viewJsonSchema = false

 	function switchTab(asJson: boolean) {
 		viewJsonSchema = asJson
@@ -133,118 +147,106 @@
 	}
 </script>

-<Drawer bind:this={drawer} size="800px">
-	<DrawerContent
-		title={resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}
-		on:close={drawer.closeDrawer}
-	>
-		<div>
-			<div class="flex flex-col gap-3 py-3">
-				<div>
-					{#if !can_write}
-						<div class="m-2">
-							<Alert type="warning" title="Only read access">
-								You only have read access to this resource and cannot edit it
-							</Alert>
-						</div>
-					{/if}
-					<Path
-						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-						bind:path
-						{initialPath}
-						namePlaceholder="resource"
-						kind="resource"
-					/>
-				</div>
-				{#if !emptyString(resourceTypeInfo?.description)}
-					<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
-					<div class="text-sm">
-						<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+<div>
+	<div class="flex flex-col gap-3 py-3">
+		{#if !hidePath}
+			<div>
+				{#if !can_write}
+					<div class="m-2">
+						<Alert type="warning" title="Only read access">
+							You only have read access to this resource and cannot edit it
+						</Alert>
 					</div>
 				{/if}
-				<h4 class="mt-4 inline-flex items-center gap-4"
-					>Resource description <Required required={false} />
-					{#if can_write}
-						<div class="flex gap-1 items-center">
-							<Toggle size="xs" bind:checked={renderDescription} />
-							<Pen size={14} />
-						</div>
-					{/if}</h4
-				>
-
-				{#if can_write && renderDescription}
-					<div>
-						<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
-						<textarea
-							disabled={!can_write}
-							use:autosize
-							bind:value={description}
-							placeholder={DESCRIPTION_PLACEHOLDER}
-						/>
-					</div>
-				{:else if description == undefined || description == ''}
-					<div class="text-sm text-tertiary">No description provided</div>
-				{:else}
-					<div class="mt-2" />
-
-					<GfmMarkdown md={description} />
-				{/if}
-				<div class="flex w-full justify-between max-w-lg items-center mt-4">
-					<Toggle
-						on:change={(e) => switchTab(e.detail)}
-						options={{
-							right: 'As JSON'
-						}}
-					/>
-					<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
-				</div>
-				<div class="text-sm">
-					{#if loadingSchema}
-						<Skeleton layout={[[4]]} />
-					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
-						<SchemaForm
-							onlyMaskPassword
-							noDelete
-							disabled={!can_write}
-							compact
-							schema={resourceSchema}
-							bind:args
-							bind:isValid
-						/>
-					{:else if !can_write}
-						<input type="text" disabled value={rawCode} />
-					{:else}
-						{#if !viewJsonSchema}
-							<p class="italic text-secondary text-xs mb-4">
-								No corresponding resource type found in your workspace for {selectedResourceType}.
-								Define the value in JSON directly
-							</p>
-						{/if}
-
-						{#if !emptyString(jsonError)}<span
-								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
-							>{:else}<div class="py-2" />{/if}
-						<div class="h-full w-full border p-1 rounded">
-							<SimpleEditor
-								autoHeight
-								class="editor"
-								lang="json"
-								bind:code={rawCode}
-								fixedOverflowWidgets={false}
-							/>
-						</div>
-					{/if}
-				</div>
+				<Path
+					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+					bind:path
+					{initialPath}
+					namePlaceholder="resource"
+					kind="resource"
+				/>
 			</div>
+		{/if}
+
+		{#if !emptyString(resourceTypeInfo?.description)}
+			<h4 class="mt-4 mb-2">{resourceTypeInfo?.name} description</h4>
+			<div class="text-sm">
+				<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
+			</div>
+		{/if}
+		<h4 class="mt-4 inline-flex items-center gap-4"
+			>Resource description <Required required={false} />
+			{#if can_write}
+				<div class="flex gap-1 items-center">
+					<Toggle size="xs" bind:checked={editDescription} />
+					<Pen size={14} />
+				</div>
+			{/if}</h4
+		>
+
+		{#if can_write && editDescription}
+			<div>
+				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
+				<textarea
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
+			</div>
+		{:else if description == undefined || description == ''}
+			<div class="text-sm text-tertiary">No description provided</div>
+		{:else}
+			<div class="mt-2" />
+
+			<GfmMarkdown md={description} />
+		{/if}
+		<div class="flex w-full justify-between items-center mt-4">
+			<div />
+			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+			<Toggle
+				on:change={(e) => switchTab(e.detail)}
+				options={{
+					right: 'As JSON'
+				}}
+			/>
 		</div>
-		<svelte:fragment slot="actions">
-			<Button
-				startIcon={{ icon: Save }}
-				on:click={editResource}
-				disabled={!can_write || !isValid || jsonError != ''}
-			>
-				Save
-			</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
+		<div class="text-sm">
+			{#if loadingSchema}
+				<Skeleton layout={[[4]]} />
+			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+				<SchemaForm
+					onlyMaskPassword
+					noDelete
+					disabled={!can_write}
+					compact
+					schema={resourceSchema}
+					bind:args
+					bind:isValid
+				/>
+			{:else if !can_write}
+				<input type="text" disabled value={rawCode} />
+			{:else}
+				{#if !viewJsonSchema}
+					<p class="italic text-secondary text-xs mb-4">
+						No corresponding resource type found in your workspace for {resource_type}. Define the
+						value in JSON directly
+					</p>
+				{/if}
+
+				{#if !emptyString(jsonError)}<span class="text-red-400 text-xs mb-1 flex flex-row-reverse"
+						>{jsonError}</span
+					>{:else}<div class="py-2" />{/if}
+				<div class="h-full w-full border p-1 rounded">
+					<SimpleEditor
+						autoHeight
+						class="editor"
+						lang="json"
+						bind:code={rawCode}
+						fixedOverflowWidgets={false}
+					/>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import ResourceEditor from './ResourceEditor.svelte'
+	import { Button, Drawer } from './common'
+
+	import DrawerContent from './common/drawer/DrawerContent.svelte'
+
+	import { Save } from 'lucide-svelte'
+
+	let drawer: Drawer
+	let canSave = true
+	let resource_type: string | undefined = undefined
+
+	let resourceEditor: ResourceEditor | undefined = undefined
+
+	let path: string | undefined = undefined
+
+	let newResource = false
+	export async function initEdit(p: string): Promise<void> {
+		resource_type = undefined
+		newResource = false
+		path = p
+		drawer.openDrawer?.()
+	}
+
+	export async function initNew(resourceType: string): Promise<void> {
+		newResource = true
+		path = undefined
+		resource_type = resourceType
+		drawer.openDrawer?.()
+	}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
+		<ResourceEditor
+			{newResource}
+			{path}
+			{resource_type}
+			on:refresh
+			bind:this={resourceEditor}
+			bind:canSave
+		/>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: Save }}
+				on:click={() => {
+					resourceEditor?.editResource()
+					drawer.closeDrawer()
+				}}
+				disabled={!canSave}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>
@@ -6,10 +6,10 @@
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import AppConnect from './AppConnectDrawer.svelte'
 	import { Button } from './common'
-	import ResourceEditor from './ResourceEditor.svelte'
 	import DBSchemaExplorer from './DBSchemaExplorer.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import { Pen, Plus, RotateCw } from 'lucide-svelte'
+	import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'

 	const dispatch = createEventDispatcher()

@@ -67,7 +67,7 @@
 	$: dispatch('change', value)

 	let appConnect: AppConnect
-	let resourceEditor: ResourceEditor
+	let resourceEditor: ResourceEditorDrawer

 	let darkMode: boolean = false
 </script>
@@ -88,7 +88,7 @@
 	bind:this={appConnect}
 />

-<ResourceEditor
+<ResourceEditorDrawer
 	bind:this={resourceEditor}
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
@@ -126,6 +126,7 @@

 		{#if value && value != ''}
 			<Button
+				color="light"
 				variant="border"
 				size="xs"
 				on:click={() => resourceEditor?.initEdit?.(value ?? '')}
@@ -104,10 +104,15 @@
 		}
 	}

-	function getBackgorundColor(): string {
-		const isDark = document.documentElement.classList.contains('dark')
+	function isDark(): boolean {
+		return document.documentElement.classList.contains('dark')
+	}

-		return isDark ? '#2e3440' : '#ffffff'
+	ChartJS.defaults.color = isDark() ? '#ccc' : '#666'
+	ChartJS.defaults.borderColor = isDark() ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+
+	function getBackgorundColor(): string {
+		return isDark() ? '#2e3440' : '#ffffff'
 	}
 	function hexToRgb(hexColor: string): number[] {
 		hexColor = hexColor.replace(/^#/, '')
@@ -9,6 +9,7 @@
 	import TabContent from './common/tabs/TabContent.svelte'
 	import Tabs from './common/tabs/Tabs.svelte'
 	import { Badge } from './common'
+	import HighlightTheme from './HighlightTheme.svelte'

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

@@ -20,6 +21,8 @@
 	}
 </script>

+<HighlightTheme />
+
 <div class="w-full">
 	<Tabs selected="arguments">
 		<Tab value="arguments">Arguments</Tab>
@@ -41,6 +41,7 @@
 	export let edit = true
 	export let noHistory = false
 	export let saveToWorkspace = false
+	export let watchChanges = false

 	let websocketAlive = {
 		pyright: false,
@@ -50,6 +51,12 @@
 		shellcheck: false
 	}

+	const dispatch = createEventDispatcher()
+
+	$: watchChanges &&
+		(code != undefined || schema != undefined) &&
+		dispatch('change', { code, schema })
+
 	let width = 1200

 	let testJobLoader: TestJobLoader
@@ -191,8 +198,6 @@
 		disableCollaboration()
 	})

-	const dispatch = createEventDispatcher()
-
 	function asKind(str: string | undefined) {
 		return str as 'script' | 'approval' | 'trigger' | undefined
 	}
@@ -13,6 +13,7 @@
 	import { oauthStore, workspaceStore } from '$lib/stores'
 	import Password from './Password.svelte'
 	import { createEventDispatcher } from 'svelte'
+	import HighlightTheme from './HighlightTheme.svelte'

 	let drawer: Drawer
 	let token: undefined | string = undefined
@@ -98,6 +99,8 @@
 	}
 </script>

+<HighlightTheme />
+
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="Add a Supabase Database" on:close={drawer.closeDrawer}>
 		{#if step === 'init' || selectedDatabase == undefined}
@@ -441,18 +441,3 @@
 		{/if}
 	</div>
 </SyncColumnDefs>
-
-<style>
-	.ag-theme-alpine {
-		--ag-row-border-style: solid;
-		--ag-border-color: rgb(209 213 219);
-		--ag-header-border-style: solid;
-		--ag-border-radius: 0;
-		--ag-alpine-active-color: #d1d5db;
-	}
-
-	.ag-theme-alpine-dark {
-		--ag-border-color: #4b5563;
-		--ag-alpine-active-color: #64748b;
-	}
-</style>
@@ -586,7 +586,7 @@
 	</SyncColumnDefs>
 </RunnableWrapper>

-<style>
+<style global>
 	.ag-theme-alpine {
 		--ag-row-border-style: solid;
 		--ag-border-color: rgb(209 213 219);
@@ -599,4 +599,17 @@
 		--ag-border-color: #4b5563;
 		--ag-alpine-active-color: #64748b;
 	}
+
+	.grid-cell-centered {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.grid-cell-centered .svelte-select {
+		height: 32px !important;
+	}
+
+	.grid-cell-centered .selected-item {
+		margin-top: -4px;
+	}
 </style>
@@ -13,6 +13,7 @@
 	import YAML from 'yaml'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'

 	let jsonViewerDrawer: Drawer

@@ -26,6 +27,8 @@
 	}
 </script>

+<HighlightTheme />
+
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div>
@@ -843,3 +843,4 @@
 		class="absolute inset-0 center-center flex-col bg- border animate-skeleton"
 	/>
 {/if}
+
@@ -5,6 +5,7 @@
 	import css from 'svelte-highlight/languages/css'
 	import { resolveTheme } from './themeUtils'
 	import { workspaceStore } from '$lib/stores'
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'

 	export let theme: AppTheme

@@ -17,6 +18,8 @@
 	}
 </script>

+<HighlightTheme />
+
 <Drawer bind:this={codeDrawer}>
 	<DrawerContent title="Theme viewer" on:close={codeDrawer.closeDrawer}>
 		<div class="p-2 border rounded-sm">
@@ -14,6 +14,7 @@
 	import { customisationByComponent } from '../componentsPanel/cssUtils'
 	import { sendUserToast } from '$lib/toast'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 	export let component: AppComponent | undefined

 	const { app } = getContext<AppViewerContext>('AppViewerContext')
@@ -126,6 +127,8 @@
 	let type: string | undefined = component?.type
 </script>

+<HighlightTheme />
+
 {#if migrationModalOpen}
 	<div
 		transition:fadeFast|local
@@ -6,6 +6,7 @@
 	import { Highlight } from 'svelte-highlight'
 	import typescript from 'svelte-highlight/languages/typescript'
 	import { Button } from '$lib/components/common'
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 	export let type: keyof typeof components

 	const componentControls = getComponentControl(type)
@@ -13,6 +14,8 @@
 	let collapsed: boolean = true
 </script>

+<HighlightTheme />
+
 {#if componentControls?.length > 0}
 	<PanelSection title="Controls">
 		<div slot="action" class="flex justify-end flex-wrap gap-1">
@@ -7,6 +7,7 @@
 	import json from 'svelte-highlight/languages/json'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import YAML from 'yaml'
+	import HighlightTheme from '../HighlightTheme.svelte'

 	export let triggerSelected: 'webhooks' | 'schedule' | 'cli' = 'webhooks'
 	export let flow_json: any | undefined = undefined
@@ -26,6 +27,8 @@
 	$: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs')
 </script>

+<HighlightTheme />
+
 <Splitpanes horizontal class="h-full">
 	<Pane size={100}>
 		<Tabs bind:selected>
@@ -17,6 +17,7 @@
 	import { typescript } from 'svelte-highlight/languages'
 	import ClipboardPanel from './ClipboardPanel.svelte'
 	import { copyToClipboard, generateRandomString } from '$lib/utils'
+	import HighlightTheme from '../HighlightTheme.svelte'

 	let userSettings: UserSettings

@@ -182,6 +183,8 @@ done`
 	}
 </script>

+<HighlightTheme />
+
 <UserSettings
 	bind:this={userSettings}
 	on:tokenCreated={(e) => {
@@ -3,6 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import EditableSchemaForm from '../EditableSchemaForm.svelte'
 	import AddProperty from './AddProperty.svelte'
+	import { createEventDispatcher } from 'svelte'

 	export let schema: Schema | undefined | any
 	export let offset: number = 0
@@ -10,6 +11,11 @@
 	export let noPreview: boolean = false
 	export let fullHeight: boolean = true
 	export let lightweightMode: boolean = false
+	export let watchChanges: boolean = false
+
+	const dispatch = createEventDispatcher()
+
+	$: watchChanges && dispatch('change', { schema })

 	let addProperty: AddProperty | undefined = undefined
 </script>
@@ -2,5 +2,5 @@ export const SELECT_INPUT_DEFAULT_STYLE = {
 	inputStyles: 'border-radius: 0;',
 	containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
 	containerStylesDark:
-		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
+		'--height: 34px; --padding: 0 0 0 8px; border-color: #4b5563; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
 } as const
@@ -14,7 +14,6 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import Required from '$lib/components/Required.svelte'
-	import ResourceEditor from '$lib/components/ResourceEditor.svelte'
 	import { resourceTypesStore } from '$lib/components/resourceTypesStore'
 	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
@@ -50,6 +49,7 @@
 	import { onMount } from 'svelte'
 	import autosize from '$lib/autosize'
 	import EditableSchemaWrapper from '$lib/components/schema/EditableSchemaWrapper.svelte'
+	import ResourceEditorDrawer from '$lib/components/ResourceEditorDrawer.svelte'

 	type ResourceW = ListableResource & { canWrite: boolean; marked?: string }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
@@ -80,7 +80,7 @@
 		schema: emptySchema(),
 		description: ''
 	}
-	let resourceEditor: ResourceEditor | undefined
+	let resourceEditor: ResourceEditorDrawer | undefined
 	let shareModal: ShareModal
 	let appConnect: AppConnect
 	let supabaseConnect: SupabaseConnect
@@ -895,7 +895,7 @@

 <SupabaseConnect bind:this={supabaseConnect} on:refresh={loadResources} />
 <AppConnect bind:this={appConnect} on:refresh={loadResources} />
-<ResourceEditor bind:this={resourceEditor} on:refresh={loadResources} />
+<ResourceEditorDrawer bind:this={resourceEditor} on:refresh={loadResources} />

 <ShareModal
 	bind:this={shareModal}
@@ -83,6 +83,7 @@
 	import WorkflowTimeline from '$lib/components/WorkflowTimeline.svelte'
 	import ScheduleEditor from '$lib/components/ScheduleEditor.svelte'
 	import Popover from '$lib/components/Popover.svelte'
+	import HighlightTheme from '$lib/components/HighlightTheme.svelte'

 	let job: Job | undefined
 	let jobUpdateLastFetch: Date | undefined
@@ -275,6 +276,8 @@
 	let scheduleEditor: ScheduleEditor
 </script>

+<HighlightTheme />
+
 <ScheduleEditor bind:this={scheduleEditor} />

 {#if (job?.job_kind == 'flow' || job?.job_kind == 'flowpreview') && job?.['running'] && job?.parent_job == undefined}
@@ -11,7 +11,6 @@
 	import { refreshSuperadmin } from '$lib/refreshUser'
 	// import EditorTheme from '$lib/components/EditorTheme.svelte'
 	import { computeDrift } from '$lib/forLater'
-	import ChartHighlightTheme from '$lib/components/ChartHighlightTheme.svelte'
 	import { setLicense } from '$lib/enterpriseUtils'

 	const monacoEditorUnhandledErrors = [
@@ -169,6 +168,4 @@
 	}
 </script>

-<ChartHighlightTheme />
-
 <slot />
@@ -11,14 +11,12 @@
 	import { twMerge } from 'tailwind-merge'

 	import { setContext } from 'svelte'
-	import github from 'svelte-highlight/styles/github'
 	import { writable } from 'svelte/store'
 	import { setLicense } from '$lib/enterpriseUtils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Login from '$lib/components/Login.svelte'
 	import { getUserExt } from '$lib/user'
 	import { User, UserRoundX } from 'lucide-svelte'
-	import ChartHighlightTheme from '$lib/components/ChartHighlightTheme.svelte'

 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined
 	let notExists = false
@@ -67,12 +65,6 @@
 	}
 </script>

-<svelte:head>
-	{@html github}
-</svelte:head>
-
-<ChartHighlightTheme />
-
 <div
 	class="z-50 text-xs fixed bottom-1 right-2 {$enterpriseLicense && !isCloudHosted()
 		? 'transition-opacity delay-1000 duration-1000 opacity-20 hover:delay-0 hover:opacity-100'
@@ -888,6 +888,9 @@ const config = {
 				'.dark .inner-border': {
 					boxShadow: `inset 0 0 0 1px ${darkTheme.border}`
 				},
+				'.z5000': {
+					zIndex: '5000 !important'
+				},
 				'.ellipsize': {
 					overflow: 'hidden',
 					whiteSpace: 'nowrap',