kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX improvements

Browse Source
This commit is contained in:
Ruben Fiszel
2022-11-27 00:07:44 +01:00
parent 2585fff8da
commit b0ccbe22ee
18 changed files with 128 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/InputTransformForm.svelte
View File

@@ -151,7 +151,9 @@
}}
>
{#if isStaticTemplate(inputCat)}
<ToggleButton light position="left" value="static" size="xs">Template</ToggleButton>
<ToggleButton light position="left" value="static" size="xs">
{'${} '}Templatable</ToggleButton
>
{:else}
<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
{/if}

38
frontend/src/lib/components/ObjectResourceInput.svelte
View File

@@ -60,27 +60,23 @@
$: value && valueToPath()
</script>
<div class="flex flex-col w-full flex-wrap gap-x-2 gap-y-0.5">
<div class="shrink flex flex-row justify-center">
<div>
<ToggleButtonGroup
bind:selected={option}
on:selected={(e) => {
if (e.detail === 'resource') {
resourceToValue()
} else {
argToValue()
}
}}
>
<ToggleButton light position="left" value="resource" size="xs"
>Resource ({resourceTypeName})</ToggleButton
>
<ToggleButton light position="right" value="raw" size="xs">Raw</ToggleButton>
</ToggleButtonGroup>
</div>
</div>
<div>
<div class="flex flex-row w-full flex-wrap gap-x-2 gap-y-0.5">
<ToggleButtonGroup
col
bind:selected={option}
on:selected={(e) => {
if (e.detail === 'resource') {
resourceToValue()
} else {
argToValue()
}
}}
>
<ToggleButton light position="center" value="resource" size="xs">Resource</ToggleButton>
<ToggleButton light position="center" value="raw" size="xs">Raw</ToggleButton>
</ToggleButtonGroup>
<div class="grow flex items-center">
{#if option == 'resource'}
<ResourcePicker
on:refresh={() => loadSchema(format)}

5
frontend/src/lib/components/ResourceEditor.svelte
View File

@@ -16,6 +16,7 @@
import autosize from 'svelte-autosize'
import SimpleEditor from './SimpleEditor.svelte'
import AppConnect from './AppConnect.svelte'
import { faSave } from '@fortawesome/free-solid-svg-icons'
let path = ''
let initialPath = ''
@@ -240,7 +241,9 @@
</Button>
{:else}
<Button variant="border" on:click={() => (step = 1)}>Back</Button>
<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
<Button startIcon={{ icon: faSave }} on:click={resourceAction} disabled={!isValid}
>Save</Button
>
{/if}
</span>
</DrawerContent>

2
frontend/src/lib/components/ResourcePicker.svelte
View File

@@ -36,7 +36,7 @@
</script>
<ResourceEditor bind:this={resourceEditor} on:refresh={() => loadResources(resourceType)} />
<div class="flex flex-row gap-x-1">
<div class="flex flex-row gap-x-1 w-full">
<Select
bind:justValue={value}
items={collection}

2
frontend/src/lib/components/ScriptEditor.svelte
View File

@@ -194,7 +194,7 @@
classes: 'animate-none'
}}
>
{#if testIsLoading}Running{:else}Test <Kbd class="ml-4">Ctrl+Enter</Kbd>{/if}
{#if testIsLoading}Running{:else}Test <Kbd class="ml-4 text-5xs">Ctrl+Enter</Kbd>{/if}
</Button>
{/if}
</div>

3
frontend/src/lib/components/common/toggleButton/ToggleButtonGroup.svelte
View File

@@ -11,6 +11,7 @@
export let selected: any
const dispatch = createEventDispatcher()
export let col = false
$: setSelected(selected)
@@ -30,6 +31,6 @@
})
</script>
<div class="flex w-full rounded-md shadow-sm" role="group">
<div class:flex-col={col} class="flex rounded-md shadow-sm" role="group">
<slot />
</div>

2
frontend/src/lib/components/flows/CreateActions.svelte
View File

@@ -48,7 +48,7 @@
<!-- Buttons -->
<div class="flex flex-row gap-2">
<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/flows/add">
<ButtonPopup size="md" startIcon={{ icon: faPlus }} href="/flows/add">
<svelte:fragment slot="main">New Flow</svelte:fragment>
<ButtonPopupItem on:click={() => drawers.hub?.openDrawer()}>
Import flow from WindmillHub

132
frontend/src/lib/components/flows/content/FlowInputs.svelte
View File

@@ -17,7 +17,7 @@
let pick_existing: 'workspace' | 'hub' = 'hub'
</script>
<div class="space-y-4 p-4 h-full flex flex-col">
<div class="p-4 h-full flex flex-col">
{#if !failureModule}
<div class="center-center">
<div class="max-w-min">
@@ -46,89 +46,93 @@
</div>
</div>
{/if}
<h3>
<h3 class="pb-2">
Inline new
<Tooltip>
Embed a script directly inside a flow instead of saving the script into your workspace for
reuse. You can always save an inline script later.
</Tooltip>
</h3>
<div class="flex flex-row flex-wrap gap-2">
<FlowScriptPicker
label="Typescript"
lang={Script.language.DENO}
on:click={() => {
dispatch('new', {
language: RawScript.language.DENO,
kind,
subkind: 'flow'
})
}}
/>
<FlowScriptPicker
label="Python"
lang={Script.language.PYTHON3}
on:click={() => {
dispatch('new', {
language: RawScript.language.PYTHON3,
kind,
subkind: kind
})
}}
/>
{#if kind != 'approval'}
<div class="flex flex-row">
<div class="flex flex-row flex-wrap gap-2">
<FlowScriptPicker
label="Go"
lang={Script.language.GO}
label="Typescript"
lang={Script.language.DENO}
on:click={() => {
dispatch('new', {
language: RawScript.language.GO,
kind,
subkind: 'flow'
})
}}
/>
{/if}
{#if kind == 'script'}
<FlowScriptPicker
label="Bash"
lang={Script.language.BASH}
on:click={() => {
dispatch('new', {
language: RawScript.language.BASH,
language: RawScript.language.DENO,
kind,
subkind: 'flow'
})
}}
/>
{#if !failureModule}
<FlowScriptPicker
label="Python"
lang={Script.language.PYTHON3}
on:click={() => {
dispatch('new', {
language: RawScript.language.PYTHON3,
kind,
subkind: kind
})
}}
/>
{#if kind != 'approval'}
<FlowScriptPicker
label={`PostgreSQL`}
lang="pgsql"
on:click={() =>
dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
label="Go"
lang={Script.language.GO}
on:click={() => {
dispatch('new', {
language: RawScript.language.GO,
kind,
subkind: 'flow'
})
}}
/>
{/if}
{/if}
{#if kind == 'script'}
<FlowScriptPicker
label="Bash"
lang={Script.language.BASH}
on:click={() => {
dispatch('new', {
language: RawScript.language.BASH,
kind,
subkind: 'flow'
})
}}
/>
{#if !failureModule}
<FlowScriptPicker
label={`PostgreSQL`}
lang="pgsql"
on:click={() =>
dispatch('new', { language: RawScript.language.DENO, kind, subkind: 'pgsql' })}
/>
{/if}
{/if}
</div>
</div>
<h3 class="pt-4">Use pre-made</h3>
<div class="max-w-min">
<ToggleButtonGroup bind:selected={pick_existing}>
<ToggleButton position="left" value="hub" size="xs">
<WindmillIcon white={pick_existing == 'hub'} height="16px" width="16px" /><div
class="mr-1"
/>Hub
</ToggleButton>
<ToggleButton position="right" value="workspace" size="xs" startIcon={{ icon: faBuilding }}>
Workspace
</ToggleButton>
</ToggleButtonGroup>
</div>
<div class="flex flex-row gap-x-2 mt-8 mb-2"
><h3>Use pre-made</h3>
<div class="max-w-min">
<ToggleButtonGroup bind:selected={pick_existing}>
<ToggleButton position="left" value="hub" size="xs">
<WindmillIcon white={pick_existing == 'hub'} height="16px" width="16px" /><div
class="mr-1"
/>Hub
</ToggleButton>
<ToggleButton position="right" value="workspace" size="xs" startIcon={{ icon: faBuilding }}>
Workspace
</ToggleButton>
</ToggleButtonGroup>
</div></div
>
{#if pick_existing == 'hub'}
<PickHubScript {kind} on:pick />
{:else}

4
frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
View File

@@ -163,7 +163,7 @@
style="max-height: calc(100% - {totalTopGap}px) !important;"
>
<Splitpanes horizontal>
<Pane size={50} minSize={20}>
<Pane size={flowModule.value.type === 'script' ? 30 : 50} minSize={20}>
{#if flowModule.value.type === 'rawscript'}
<div class="h-full">
<Editor
@@ -192,7 +192,7 @@
<FlowModuleScript path={flowModule.value.path} />
{/if}
</Pane>
<Pane size={50} minSize={20}>
<Pane size={flowModule.value.type === 'script' ? 70 : 30} minSize={20}>
<Tabs bind:selected>
<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>

4
frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
View File

@@ -32,7 +32,7 @@
previewOpen = !previewOpen
}}
size="sm"
endIcon={{ icon: faPlay }}
startIcon={{ icon: faPlay }}
>
Test flow
</Button>
@@ -46,7 +46,7 @@
previewMode = 'upTo'
previewOpen = !previewOpen
}}
endIcon={{ icon: faPlay }}
startIcon={{ icon: faPlay }}
>
Test up to
<Badge baseClass="ml-1" color="indigo">

2
frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
View File

@@ -13,7 +13,7 @@
<Button
{disabled}
btnClasses="h-24 w-24 truncate"
btnClasses="w-24 truncate"
on:click
size="sm"
spacingSize="md"

16
frontend/src/lib/components/flows/pickers/PickHubScript.svelte
View File

@@ -37,11 +37,11 @@
</script>
<div class="flex flex-col min-h-0">
<div class="w-12/12 pb-4">
<div class="w-12/12 pb-2">
<input type="text" placeholder="Search script" bind:value={itemsFilter} class="search-item" />
</div>
<div class="gap-2 w-full flex flex-wrap pb-4">
<div class="gap-2 w-full flex flex-wrap pb-2">
{#each apps as app}
<Badge
class="cursor-pointer"
@@ -67,18 +67,10 @@
dispatch('pick', obj)
}}
>
<div class="mr-2 text-sm text-left truncate w-24 shrink-0">
<div class="mr-2 text-sm text-left truncate w-36 shrink-0">
<IconedResourceType after={true} silent={false} name={obj['app']} />
</div>
<div class="flex flex-col">
<div class="text-sm font-semibold flex flex-col">
<span class="mr-2 text-left">{obj['summary'] ?? ''}</span>
<span class="font-normal text-xs text-left italic overflow-hidden"
>{obj['path'] ?? ''}</span
>
</div>
<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</div>
</div>
<div class="mr-2 text-left">{obj['summary'] ?? ''}</div>
</button>
</li>
{/each}

2
frontend/src/lib/components/scripts/CreateActions.svelte
View File

@@ -46,7 +46,7 @@
<!-- Buttons -->
<div class="flex flex-row gap-2">
<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/scripts/add">
<ButtonPopup size="md" startIcon={{ icon: faPlus }} href="/scripts/add">
<svelte:fragment slot="main">New Script</svelte:fragment>
<ButtonPopupItem on:click={() => drawers.hub?.openDrawer()}>
Import script from WindmillHub

2
frontend/src/routes/groups.svelte
View File

@@ -79,7 +79,7 @@
placeholder="New group name"
bind:value={newGroupName}
/>
<Button size="sm" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
<Button size="md" startIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
New&nbsp;group
</Button>
</div>

14
frontend/src/routes/index.svelte
View File

@@ -8,7 +8,7 @@
import ScriptGettingStarted from '$lib/components/landing/ScriptGettingStarted.svelte'
import { FlowService, Job, JobService, Script, ScriptService, type Flow } from '$lib/gen'
import { userStore, workspaceStore } from '$lib/stores'
import { Skeleton } from '$lib/components/common'
import { Alert, Skeleton } from '$lib/components/common'
let scripts: Script[] = []
let flows: Flow[] = []
@@ -57,7 +57,17 @@
<CenteredPage>
<h1 class="flex items-center min-h-[48px] font-black my-4">Home</h1>
<div class="space-y-12">
<div class="space-y-8">
{#if $workspaceStore == 'demo'}
<Alert title="Demo workspace">The demo workspace shared in which all users get invited.</Alert
>
{:else if $workspaceStore == 'starter'}
<Alert title="Demo workspace"
>The starter workspace has all its elements (variables, resources, scripts, flows) shared
across all other workspaces. Useful to seed workspace with common elements within your
organization.</Alert
>
{/if}
<div>
<h2 class="border-b mb-4 py-2">
<span class="text-black-gradient">Scripts</span>

11
frontend/src/routes/resources.svelte
View File

@@ -30,7 +30,8 @@
faShare,
faTrash,
faCircle,
faChain
faChain,
faSave
} from '@fortawesome/free-solid-svg-icons'
import CenteredPage from '$lib/components/CenteredPage.svelte'
import Icon from 'svelte-awesome'
@@ -202,7 +203,7 @@
</div>
<div slot="submission">
{#if typeDrawerMode === 'create'}
<Button on:click={addResourceType}>Save</Button>
<Button startIcon={{ icon: faSave }} on:click={addResourceType}>Save</Button>
{/if}
</div>
</DrawerContent>
@@ -214,10 +215,10 @@
tooltip="Save and permission rich objects (JSON) including credentials obtained through OAuth."
>
<div class="flex flex-row space-x-4">
<Button size="sm" startIcon={{ icon: faChain }} on:click={() => appConnect.open()}>
<Button size="md" startIcon={{ icon: faChain }} on:click={() => appConnect.open()}>
Connect an API
</Button>
<Button size="sm" startIcon={{ icon: faPlus }} on:click={() => resourceEditor?.initNew()}>
<Button size="md" startIcon={{ icon: faPlus }} on:click={() => resourceEditor?.initNew()}>
Add a resource
</Button>
</div>
@@ -335,7 +336,7 @@
primary={false}
tooltip="Schema and label to filter resources by type"
>
<Button size="sm" startIcon={{ icon: faPlus }} on:click={startNewType}>Add a type</Button>
<Button size="md" startIcon={{ icon: faPlus }} on:click={startNewType}>Add a type</Button>
</PageHeader>
{#if loading.types}

2
frontend/src/routes/schedules.svelte
View File

@@ -65,7 +65,7 @@
<CenteredPage>
<PageHeader title="Schedules" tooltip="Trigger Scripts and Flows according to a cron schedule">
<Button size="sm" startIcon={{ icon: faPlus }} href="/schedule/add">New&nbsp;schedule</Button>
<Button size="md" startIcon={{ icon: faPlus }} href="/schedule/add">New&nbsp;schedule</Button>
</PageHeader>
<div class="mt-10 mb-40">
{#if loading}

2
frontend/src/routes/variables.svelte
View File

@@ -79,7 +79,7 @@
title="Variables"
tooltip="Save and permission strings to be reused in Scripts and Flows."
>
<Button size="sm" startIcon={{ icon: faPlus }} on:click={() => variableEditor.initNew()}>
<Button size="md" startIcon={{ icon: faPlus }} on:click={() => variableEditor.initNew()}>
New&nbsp;variable
</Button>
</PageHeader>