From 8a45891c960ed42b3b775e7f80d98aa08cbb9a40 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Wed, 4 Oct 2023 14:36:18 +0200 Subject: [PATCH] App polish (#2385) * wip * feat(frontend): polish script settings --- frontend/src/lib/components/Popover.svelte | 15 +- .../src/lib/components/ScriptBuilder.svelte | 674 +++++++++--------- frontend/src/lib/components/Section.svelte | 15 + frontend/src/lib/components/Tooltip.svelte | 2 +- .../common/drawer/DrawerContent.svelte | 11 +- .../src/lib/components/common/tabs/Tab.svelte | 2 +- .../toggleButton-v2/ToggleButton.svelte | 2 + 7 files changed, 392 insertions(+), 329 deletions(-) create mode 100644 frontend/src/lib/components/Section.svelte diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte index 92ae0e1003..6188ce04d7 100644 --- a/frontend/src/lib/components/Popover.svelte +++ b/frontend/src/lib/components/Popover.svelte @@ -2,6 +2,7 @@ import { createPopperActions, type PopperOptions } from 'svelte-popperjs' import type { PopoverPlacement } from './Popover.model' import Portal from 'svelte-portal' + import { ExternalLink } from 'lucide-svelte' export let placement: PopoverPlacement = 'auto' export let notClickable = false @@ -9,6 +10,7 @@ export let disablePopup = false export let disappearTimeout = 100 export let appearTimeout = 300 + export let documentationLink: string | undefined = undefined const [popperRef, popperContent] = createPopperActions({ placement }) @@ -46,6 +48,7 @@ {#if notClickable} + @@ -56,15 +59,23 @@ {/if} {#if showTooltip && !disablePopup} +
+ {#if documentationLink} + +
+ See documentation + +
+ + {/if}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 34cac291ec..46826bb94b 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -10,12 +10,24 @@ import ScriptEditor from './ScriptEditor.svelte' import { dirtyStore } from './common/confirmationModal/dirtyStore' import { Alert, Badge, Button, Drawer, Kbd, SecondsInput, Tab, TabContent, Tabs } from './common' - import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons' + import { faSave } from '@fortawesome/free-solid-svg-icons' import LanguageIcon from './common/languageIcons/LanguageIcon.svelte' import type { SupportedLanguage } from '$lib/common' import Tooltip from './Tooltip.svelte' import DrawerContent from './common/drawer/DrawerContent.svelte' - import { Loader2, Pen, X } from 'lucide-svelte' + import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte' + import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte' + import { + Bug, + CheckCircle, + Code, + ExternalLink, + Loader2, + Pen, + Plus, + Rocket, + X + } from 'lucide-svelte' import autosize from 'svelte-autosize' import type Editor from './Editor.svelte' import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO } from '$lib/consts' @@ -23,11 +35,11 @@ import { sendUserToast } from '$lib/toast' import { isCloudHosted } from '$lib/cloud' import Awareness from './Awareness.svelte' - import { Icon } from 'svelte-awesome' import { fade } from 'svelte/transition' import Popover from './Popover.svelte' import Toggle from './Toggle.svelte' import ScriptSchema from './ScriptSchema.svelte' + import Section from './Section.svelte' export let script: NewScript export let initialPath: string = '' @@ -77,33 +89,39 @@ langs.push(['Snowflake', Script.language.SNOWFLAKE]) langs.push(['GraphQL', Script.language.GRAPHQL]) langs.push(['PowerShell', Script.language.POWERSHELL]) + const scriptKindOptions: { value: Script.kind title: string + Icon: any desc?: string documentationLink?: string }[] = [ { value: Script.kind.SCRIPT, - title: 'Action' + title: 'Action', + Icon: Code }, { value: Script.kind.TRIGGER, title: 'Trigger', desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.', - documentationLink: 'https://www.windmill.dev/docs/flows/flow_trigger' + documentationLink: 'https://www.windmill.dev/docs/flows/flow_trigger', + Icon: Rocket }, { value: Script.kind.APPROVAL, title: 'Approval', desc: 'Send notifications externally to ask for approval to continue a flow.', - documentationLink: 'https://www.windmill.dev/docs/flows/flow_approval' + documentationLink: 'https://www.windmill.dev/docs/flows/flow_approval', + Icon: CheckCircle }, { value: Script.kind.FAILURE, title: 'Error Handler', desc: 'Handle errors in flows after all retry attempts have been exhausted.', - documentationLink: 'https://www.windmill.dev/docs/flows/flow_error_handler' + documentationLink: 'https://www.windmill.dev/docs/flows/flow_error_handler', + Icon: Bug } ] @@ -277,339 +295,353 @@ + {#if !$userStore?.operator} (metadataOpen = false)}> Metadata Runtime - Generated UI + Generated UI + The arguments are synced with the main signature but you may refine the parts that - cannot be inferred from the type directly. + > + The arguments are synced with the main signature but you may refine the parts that + cannot be inferred from the type directly. + + -
+
-
Summary
+
+
+
+
+ Summary + { + if (initialPath == '' && script.summary?.length > 0 && !dirtyPath) { + path?.setName( + script.summary + .toLowerCase() + .replace(/[^a-z0-9_]/g, '_') + .replace(/-+/g, '_') + .replace(/^-|-$/g, '') + ) + } + }} + /> +
+
+ Description +