b39f486c91
* feat(frontend): wip * wip * wip * wip * wip * add toggle * correctly handle monaco theme * wip * wip * wip * wip * wip * feat(frontend): Dark mode v0 * feat(frontend): Adap AI gen poppup * feat(frontend): Adap script metadata labels * feat(frontend): Fix unreadable texts * feat(frontend): Fix unreadable texts * feat(frontend): Fix unreadable texts * feat(frontend): Fix ressource picker * feat(frontend): Fix unreadable texts * feat(frontend): Fix unreadable texts * feat(frontend): Fix unreadable texts * feat(frontend): Add theme toggle in the login page * feat(frontend): Fix unreadable texts * feat(frontend): Fix language selection * feat(frontend): Fix FlowStatusViewer colors * feat(frontend): Fix divide colors * feat(frontend): Fix flow graph buttons * feat(frontend): add theme toggle in login modal * feat(frontend): small ui fix * feat(frontend): fix graph dark mode toggle
84 lines
2.6 KiB
Svelte
84 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
|
import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte'
|
|
import { classNames } from '$lib/utils'
|
|
import { ScriptService } from '$lib/gen'
|
|
import { workspaceStore } from '$lib/stores'
|
|
import { Skeleton } from '$lib/components/common'
|
|
import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
|
|
import { createEventDispatcher } from 'svelte'
|
|
import Button from './common/button/Button.svelte'
|
|
import { ExternalLink } from 'lucide-svelte'
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
export let openDetails: boolean = false
|
|
export let scriptPath: string
|
|
|
|
let selectedVersion: string | undefined = undefined
|
|
let versions: string[] | undefined = undefined
|
|
|
|
async function loadVersions() {
|
|
versions = (
|
|
await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: scriptPath })
|
|
).parent_hashes
|
|
}
|
|
|
|
loadVersions()
|
|
</script>
|
|
|
|
<Splitpanes class="!overflow-visible">
|
|
<Pane size={20}>
|
|
<PanelSection title="Past Versions">
|
|
<div class="flex flex-col gap-2 w-full">
|
|
{#if versions}
|
|
{#if versions.length > 0}
|
|
<div class="flex gap-2 flex-col">
|
|
{#each versions ?? [] as version}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div
|
|
class={classNames(
|
|
'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
|
|
selectedVersion == version ? 'bg-blue-100 text-blue-600' : ''
|
|
)}
|
|
on:click={() => (selectedVersion = version)}
|
|
>
|
|
<span class="text-xs truncate">{version}</span>
|
|
{#if openDetails}
|
|
<Button
|
|
on:click={() => {
|
|
dispatch('openDetails', { version })
|
|
}}
|
|
class="ml-2 inline-flex gap-1 text-xs items-center"
|
|
size="xs"
|
|
color="light"
|
|
variant="border"
|
|
>
|
|
Run page<ExternalLink size={14} />
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="text-sm text-tertiary">No items</div>
|
|
{/if}
|
|
{:else}
|
|
<Skeleton layout={[[40], [40], [40], [40], [40]]} />
|
|
{/if}
|
|
</div>
|
|
</PanelSection>
|
|
</Pane>
|
|
<Pane size={80}>
|
|
<div class="h-full w-full overflow-auto">
|
|
{#if selectedVersion}
|
|
{#key selectedVersion}
|
|
<FlowModuleScript path={scriptPath} hash={selectedVersion} />
|
|
{/key}
|
|
{:else}
|
|
<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
|
|
{/if}
|
|
</div>
|
|
</Pane>
|
|
</Splitpanes>
|