mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-23 16:03:33 +00:00
Faton Ramadani
381191442f
* feature(frontend): Various UI fix + restore removed features * feature(frontend): WIP Prop picker panel * feature(frontend): Advanced flow module tab * feature(frontend): Add import/export flow menu * feature(frontend): Remove summary edition + add a enable/disable button for suspend
84 lines
2.7 KiB
Svelte
84 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
|
|
import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
|
|
|
|
import Menu from '$lib/components/common/menu/Menu.svelte'
|
|
import MenuItem from '$lib/components/common/menu/MenuItem.svelte'
|
|
import FlowViewer from '$lib/components/FlowViewer.svelte'
|
|
import SimpleEditor from '$lib/components/SimpleEditor.svelte'
|
|
import { sendUserToast } from '$lib/utils'
|
|
import { faCloudscale } from '@fortawesome/free-brands-svg-icons'
|
|
import {
|
|
faCloud,
|
|
faCloudUpload,
|
|
faFileExport,
|
|
faFileImport,
|
|
faGlobe,
|
|
faUpload
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
import Icon from 'svelte-awesome'
|
|
import { flowStore, initFlow } from '../flowStore'
|
|
import { cleanInputs } from '../utils'
|
|
|
|
let jsonSetterDrawer: Drawer
|
|
let jsonViewerDrawer: Drawer
|
|
let pendingJson: string
|
|
|
|
function importJson() {
|
|
Object.assign($flowStore, JSON.parse(pendingJson))
|
|
|
|
initFlow($flowStore)
|
|
sendUserToast('OpenFlow imported from JSON')
|
|
jsonSetterDrawer.toggleDrawer()
|
|
}
|
|
</script>
|
|
|
|
<Menu placement="bottom-end">
|
|
<button
|
|
slot="trigger"
|
|
class="flex items-center text-gray-900 h-8 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-4 py-2"
|
|
>
|
|
Import/Export flow
|
|
</button>
|
|
<div class="divide-y divide-gray-200">
|
|
<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
|
|
<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
|
|
Import from a JSON OpenFlow
|
|
</MenuItem>
|
|
<MenuItem on:click={() => jsonViewerDrawer.toggleDrawer()}>
|
|
<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
|
|
Export to a JSON OpenFlow
|
|
</MenuItem>
|
|
<MenuItem
|
|
on:click={() => {
|
|
const url = new URL('https://hub.windmill.dev/flows/add')
|
|
const openFlow = {
|
|
value: $flowStore.value,
|
|
summary: $flowStore.summary,
|
|
description: $flowStore.description,
|
|
schema: $flowStore.schema
|
|
}
|
|
url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
|
|
window.open(url, '_blank')?.focus()
|
|
}}
|
|
>
|
|
<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
|
|
Publish to Hub
|
|
</MenuItem>
|
|
</div>
|
|
</Menu>
|
|
|
|
<Drawer bind:this={jsonSetterDrawer} size="800px">
|
|
<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
|
|
<button class="default-button px-4 py-2 font-semibold" on:click={() => importJson()}>
|
|
Import
|
|
</button>
|
|
<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
|
|
</DrawerContent>
|
|
</Drawer>
|
|
<Drawer bind:this={jsonViewerDrawer} size="800px">
|
|
<DrawerContent title="See JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
|
|
<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
|
|
</DrawerContent>
|
|
</Drawer>
|