starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-10 08:07:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve run page UX

Browse Source
This commit is contained in:
Ruben Fiszel
2022-11-19 09:15:03 +01:00
parent 1d6a62fe00
commit eefe9d6383
3 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/flows/run/[...path].svelte
+14 -10
View File
@@ -86,16 +86,10 @@
<div class="flex flex-row flex-wrap justify-between gap-4 mb-6">
<div class="w-full">
<div class="flex flex-col mt-6 mb-2 w-full">
<div class="flex flex-row flex-wrap w-full justify-between "
><div class="flex flex-col">
<h1 class="break-words py-2 mr-2">
{defaultIfEmptyString(flow.summary, flow.path)}
</h1>
{#if !emptyString(flow.summary)}
<h2 class="font-bold pb-4">{flow.path}</h2>
{/if}
</div>
<div class="flex-row hidden lg:flex">
<div
class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1"
>
<div class="flex flex-row">
<div>
<Button
startIcon={{ icon: faScroll }}
@@ -104,12 +98,22 @@
variant="border"
href="/flows/get/{flow?.path}">View flow</Button
>
</div>
<div>
<Button
startIcon={{ icon: faPlay }}
disabled={runForm == undefined || !isValid}
on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
>
</div>
</div>
<div class="flex flex-col">
<h1 class="break-words py-2 mr-2">
{defaultIfEmptyString(flow.summary, flow.path)}
</h1>
{#if !emptyString(flow.summary)}
<h2 class="font-bold pb-4">{flow.path}</h2>
{/if}
</div></div
>
<div class="flex items-center gap-2">
frontend/src/routes/scripts/get/[...hash].svelte
+7 -16
View File
@@ -42,7 +42,7 @@
import CenteredPage from '$lib/components/CenteredPage.svelte'
import { onDestroy } from 'svelte'
import HighlightCode from '$lib/components/HighlightCode.svelte'
import { Badge, Tabs, Tab, TabContent, Button, ActionRow } from '$lib/components/common'
import { Badge, Tabs, Tab, TabContent, Button, ActionRow, Alert } from '$lib/components/common'
import Skeleton from '../../../lib/components/common/skeleton/Skeleton.svelte'
import UserSettings from '$lib/components/UserSettings.svelte'
import Icon from 'svelte-awesome'
@@ -336,22 +336,13 @@
</div>
{/if}
{#if topHash}
<div
class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
role="alert"
>
<p class="font-bold">Not HEAD</p>
<p>
This hash is not HEAD (latest non-archived version at this path) :
<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
</p>
</div>
<Alert type="warning" title="Not HEAD">
This hash is not HEAD (latest non-archived version at this path) :
<a href="/scripts/get/{topHash}">Go to the HEAD of this path</a>
</Alert>
{/if}
{#if script.archived}
<div class="bg-red-100 border-l-4 border-red-500 text-orange-700 p-4" role="alert">
<p class="font-bold">Archived</p>
<p>This version was archived</p>
</div>
{#if script.archived && !topHash}
<Alert type="error" title="Archived">This version was archived</Alert>
{/if}
{#if script.deleted}
<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4" role="alert">
frontend/src/routes/scripts/run/[...hash].svelte
+36 -16
View File
@@ -23,16 +23,17 @@
import { inferArgs } from '$lib/infer'
import CenteredPage from '$lib/components/CenteredPage.svelte'
import RunForm from '$lib/components/RunForm.svelte'
import { Badge, Button } from '$lib/components/common'
import { Alert, Badge, Button } from '$lib/components/common'
import SharedBadge from '$lib/components/SharedBadge.svelte'
import SvelteMarkdown from 'svelte-markdown'
import { faPlay, faScroll } from '@fortawesome/free-solid-svg-icons'
const hash = $page.params.hash
$: hash = $page.params.hash
let script: Script | undefined
let runForm: RunForm | undefined
let isValid = true
let can_write = false
let topHash: string | undefined
async function loadScript() {
if (hash) {
@@ -42,6 +43,15 @@
inferArgs(script.language, script.content, script.schema)
script = script
}
if (script.path && script.archived) {
const script_by_path = await ScriptService.getScriptByPath({
workspace: $workspaceStore!,
path: script.path
}).catch((_) => console.error('this script has no non-archived version'))
topHash = script_by_path?.hash
} else {
topHash = undefined
}
can_write =
script.workspace_id == $workspaceStore &&
canWrite(script.path, script.extra_perms!, $userStore)
@@ -67,7 +77,7 @@
}
$: {
if ($workspaceStore) {
if ($workspaceStore && hash) {
loadScript()
}
}
@@ -92,19 +102,19 @@
<CenteredPage>
{#if script}
<div class="flex flex-row flex-wrap justify-between gap-4 mb-6">
<div class="flex flex-col justify-between gap-4 mb-6">
{#if topHash}
<Alert type="warning" title="Not HEAD">
This hash is not HEAD (latest non-archived version at this path) :
<a href="/scripts/run/{topHash}">Go to the HEAD of this path</a>
</Alert>
{/if}
<div class="w-full">
<div class="flex flex-col mt-6 mb-2 w-full">
<div class="flex flex-row flex-wrap w-full justify-between "
><div class="flex flex-col">
<h1 class="break-words py-2 mr-2">
{defaultIfEmptyString(script.summary, script.path)}
</h1>
{#if !emptyString(script.summary)}
<h2 class="font-bold pb-4">{script.path}</h2>
{/if}
</div>
<div class="flex-row hidden lg:flex">
<div
class="flex flex-row-reverse w-full flex-wrap md:flex-nowrap justify-between gap-x-1"
>
<div class="flex flex-row">
<div>
<Button
startIcon={{ icon: faScroll }}
@@ -113,14 +123,24 @@
variant="border"
href="/scripts/get/{script?.hash}">View script</Button
>
</div>
<div>
<Button
startIcon={{ icon: faPlay }}
disabled={runForm == undefined || !isValid}
on:click={() => runForm?.run()}>Run (Ctrl+Enter)</Button
>
</div>
</div></div
>
</div>
<div class="flex flex-col grow">
<h1 class="break-words py-2 mr-2">
{defaultIfEmptyString(script.summary, script.path)}
</h1>
{#if !emptyString(script.summary)}
<h2 class="font-bold pb-4">{script.path}</h2>
{/if}
</div>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-500">
{#if script}