diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 38dbe9b3ab..3781bfc640 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -37,6 +37,7 @@ }, "devDependencies": { "@playwright/test": "^1.31.1", + "@rgossiaux/svelte-headlessui": "^1.0.2", "@sveltejs/adapter-static": "^2.0.1", "@sveltejs/kit": "^1.0.0-next.589", "@sveltejs/package": "^1.0.2", @@ -902,6 +903,15 @@ "resolved": "https://registry.npmjs.org/@redocly/json-to-json-schema/-/json-to-json-schema-0.0.1.tgz", "integrity": "sha512-dSMyuNPN2k+tFeNZ0+QJ7S1zDJ0UeNL+lpnPFR9K5avj2V4uG4m6FdjrApQ9Zi35AIocaDp/KGfBD9gR5MLUbQ==" }, + "node_modules/@rgossiaux/svelte-headlessui": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-1.0.2.tgz", + "integrity": "sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==", + "dev": true, + "peerDependencies": { + "svelte": "^3.44.0" + } + }, "node_modules/@sveltejs/adapter-static": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-2.0.1.tgz", @@ -7846,6 +7856,13 @@ "resolved": "https://registry.npmjs.org/@redocly/json-to-json-schema/-/json-to-json-schema-0.0.1.tgz", "integrity": "sha512-dSMyuNPN2k+tFeNZ0+QJ7S1zDJ0UeNL+lpnPFR9K5avj2V4uG4m6FdjrApQ9Zi35AIocaDp/KGfBD9gR5MLUbQ==" }, + "@rgossiaux/svelte-headlessui": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@rgossiaux/svelte-headlessui/-/svelte-headlessui-1.0.2.tgz", + "integrity": "sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==", + "dev": true, + "requires": {} + }, "@sveltejs/adapter-static": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-2.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 73dab5a5af..381ddbaa99 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ }, "devDependencies": { "@playwright/test": "^1.31.1", + "@rgossiaux/svelte-headlessui": "^1.0.2", "@sveltejs/adapter-static": "^2.0.1", "@sveltejs/kit": "^1.0.0-next.589", "@sveltejs/package": "^1.0.2", diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 8ed12f29a7..55702f055a 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -8,7 +8,7 @@ import { setContext } from 'svelte' import { writable, type Writable } from 'svelte/store' import CenteredPage from './CenteredPage.svelte' - import { Badge, Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common' + import { Badge, Button, UndoRedo } from './common' import { dirtyStore } from './common/confirmationModal/dirtyStore' import FlowEditor from './flows/FlowEditor.svelte' import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte' @@ -263,6 +263,23 @@ ...dfs($flowStore.value.modules, (module) => module.id) ] } + + const dropdownItems: Array<{ + label: string + onClick: () => void + }> = [ + { + label: 'Save and exit', + onClick: () => saveFlow(true) + } + ] + + if (initialPath != '') { + dropdownItems.push({ + label: 'Fork', + onClick: () => window.open(`/flows/add?template=${initialPath}`) + }) + } @@ -273,7 +290,7 @@
@@ -297,7 +314,7 @@ />
-
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index 8f557462ab..0f54864aed 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -10,7 +10,7 @@ import ScriptEditor from './ScriptEditor.svelte' import ScriptSchema from './ScriptSchema.svelte' import { dirtyStore } from './common/confirmationModal/dirtyStore' - import { Badge, Button, ButtonPopup, ButtonPopupItem, Drawer } from './common' + import { Badge, Button, Drawer } from './common' import { faSave } from '@fortawesome/free-solid-svg-icons' import LanguageIcon from './common/languageIcons/LanguageIcon.svelte' import type { SupportedLanguage } from '$lib/common' @@ -125,6 +125,22 @@ } loadingSave = false } + + const dropdownItems: Array<{ label: string; onClick: () => void }> = [ + { + label: 'Save and leave', + onClick: () => editScript(true) + } + ] + + if (initialPath != '') { + dropdownItems.push({ + label: 'Fork', + onClick: () => { + window.open(`/scripts/add?template=${initialPath}`) + } + }) + } {#if !$userStore?.operator} @@ -269,23 +285,16 @@ > Customise - editScript(false)} + {dropdownItems} > - Save - editScript(true)}>Save and exit - {#if initialPath != ''} - { - window.open(`/scripts/add?template=${initialPath}`) - }}>Fork - {/if} - + Save +
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index fac78a2a95..0edd281910 100644 --- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte +++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte @@ -1,15 +1,7 @@ - - {#if loading} - - {:else if startIcon} - - {/if} +
+ + {#if loading} + + {:else if startIcon} + + {/if} - {#if !iconOnly} - + {#if !iconOnly} + + {/if} + {#if endIcon} + + {/if} + + + {#if dropdownItems} +
+ + + {#each dropdownItems as item} + +
+ {item.label} +
+ + {/each} + + +
{/if} - {#if endIcon} - - {/if} - +
diff --git a/frontend/src/lib/components/common/button/ButtonDropdown.svelte b/frontend/src/lib/components/common/button/ButtonDropdown.svelte new file mode 100644 index 0000000000..af1bf793ae --- /dev/null +++ b/frontend/src/lib/components/common/button/ButtonDropdown.svelte @@ -0,0 +1,25 @@ + + + + + + + + + + + + diff --git a/frontend/src/lib/components/common/button/ButtonPopup.svelte b/frontend/src/lib/components/common/button/ButtonPopup.svelte deleted file mode 100644 index f5c48d6339..0000000000 --- a/frontend/src/lib/components/common/button/ButtonPopup.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - -
- {#if $$slots.main} - - {/if} - - - -
-{#if ref} - -
    - -
- -{/if} diff --git a/frontend/src/lib/components/common/button/ButtonPopupItem.svelte b/frontend/src/lib/components/common/button/ButtonPopupItem.svelte deleted file mode 100644 index 956d27941d..0000000000 --- a/frontend/src/lib/components/common/button/ButtonPopupItem.svelte +++ /dev/null @@ -1,53 +0,0 @@ - - -
  • - -
    • diff --git a/frontend/src/lib/components/common/button/model.ts b/frontend/src/lib/components/common/button/model.ts index 578a34bb28..d6a139be7d 100644 --- a/frontend/src/lib/components/common/button/model.ts +++ b/frontend/src/lib/components/common/button/model.ts @@ -1,9 +1,8 @@ export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'] as const export namespace ButtonType { - export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' - export type Color = typeof BUTTON_COLORS[number] + export type Color = (typeof BUTTON_COLORS)[number] export type Variant = 'contained' | 'border' export type Target = '_self' | '_blank' export type Element = HTMLButtonElement | HTMLAnchorElement @@ -40,7 +39,7 @@ export namespace ButtonType { xl: { border: 'px-4 py-[8px]', contained: 'px-4 py-[9px]' - }, + } } as const export const IconScale: Record = { @@ -51,10 +50,6 @@ export namespace ButtonType { xl: 1.2 } as const - // ButtonPopup types - - export const ItemContextKey = 'popupItemProps' as const - export interface ItemProps { size: Size color: Color diff --git a/frontend/src/lib/components/common/index.ts b/frontend/src/lib/components/common/index.ts index ad7f1f5c0f..25dbac40f4 100644 --- a/frontend/src/lib/components/common/index.ts +++ b/frontend/src/lib/components/common/index.ts @@ -2,8 +2,6 @@ export { default as ActionRow } from './actionRow/ActionRow.svelte' export { default as Alert } from './alert/Alert.svelte' export { default as Badge } from './badge/Badge.svelte' export { default as Button } from './button/Button.svelte' -export { default as ButtonPopup } from './button/ButtonPopup.svelte' -export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte' export { default as UndoRedo } from './button/UndoRedo.svelte' export { default as ClearableInput } from './clearableInput/ClearableInput.svelte' export { default as Drawer } from './drawer/Drawer.svelte' diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte index 23f8a2759d..f9a20cffa0 100644 --- a/frontend/src/lib/components/flows/CreateActionsApp.svelte +++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte @@ -2,7 +2,7 @@ import { goto } from '$app/navigation' import { faPlus } from '@fortawesome/free-solid-svg-icons' - import { Button, ButtonPopup, ButtonPopupItem } from '$lib/components/common' + import { Button } from '$lib/components/common' import Drawer from '$lib/components/common/drawer/Drawer.svelte' import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte' import SimpleEditor from '$lib/components/SimpleEditor.svelte' @@ -21,17 +21,22 @@
    - drawer?.toggleDrawer?.() + } + ]} > - App - drawer?.toggleDrawer?.()}> - Import from raw JSON - - +
    + App +
    +
    diff --git a/frontend/src/lib/components/flows/CreateActionsFlow.svelte b/frontend/src/lib/components/flows/CreateActionsFlow.svelte index 5125a9bb48..7afb3ffc59 100644 --- a/frontend/src/lib/components/flows/CreateActionsFlow.svelte +++ b/frontend/src/lib/components/flows/CreateActionsFlow.svelte @@ -2,12 +2,11 @@ import { goto } from '$app/navigation' import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons' - import { Button, ButtonPopup, ButtonPopupItem } from '$lib/components/common' + import { Button } from '$lib/components/common' import Drawer from '$lib/components/common/drawer/Drawer.svelte' import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte' import SimpleEditor from '$lib/components/SimpleEditor.svelte' import { importFlowStore } from '$lib/components/flows/flowStore' - import { Icon } from 'svelte-awesome' let drawer: Drawer | undefined = undefined let pendingJson: string @@ -21,19 +20,21 @@
    - drawer?.toggleDrawer?.() + } + ]} > - Flow - - drawer?.toggleDrawer?.()}> - Import from raw JSON - - + Flow +
    diff --git a/frontend/src/lib/components/scripts/CreateActionsScript.svelte b/frontend/src/lib/components/scripts/CreateActionsScript.svelte index d09fbef0de..c07c8d9fee 100644 --- a/frontend/src/lib/components/scripts/CreateActionsScript.svelte +++ b/frontend/src/lib/components/scripts/CreateActionsScript.svelte @@ -7,13 +7,7 @@
    - - +
    diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte index c0fab648fb..dbed97e3a5 100644 --- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte @@ -243,7 +243,7 @@ }} /> -
    +
    min datetime diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte index 756b702509..426b172a84 100644 --- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte @@ -35,16 +35,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, - Alert, - ButtonPopup, - ButtonPopupItem - } from '$lib/components/common' + import { Badge, Tabs, Tab, TabContent, Button, 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' @@ -333,26 +324,19 @@ on:click={() => webhookElem.scrollIntoView()}>Webhooks {#if Array.isArray(script.parent_hashes) && script.parent_hashes.length > 0} - ({ + href: `/scripts/get/${hash}?workspace_id={$workspaceStore}`, + label: hash + }))} > - - Previous version ({script.parent_hashes.length}) - - - {#each script.parent_hashes as hash} - - {hash} - - {/each} - + Previous version ({script.parent_hashes.length}) + {/if}