From 87cda7a4d7e77c7eb2015cfc467e652033a53398 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Tue, 25 Feb 2025 08:53:43 +0000 Subject: [PATCH] migrate popup to melt popover (3/4) (#5328) * use melt menu in sidebar * stop keyboard navigation for disabled items * use melt menu for FavoriteMenu and WorkspaceMenu * fix popover placement for menuButton * use melt menu for operator menu * fix notification * fix operator menu * Use melt menu in FlowJobsMenu * use melt menu for AppMenu * clean code * clean code * add use clickOutside option to Menu * use pointerdown_outside * use pointerdown_outside # Conflicts: # frontend/src/lib/components/meltComponents/Menu.svelte * use pointerdown in menus * add max-h to app dropdown menu * keep more open in operator menu * add a MenuItem component * clean * nit * nit * clean code * put conditionalMelt as utility function * remove unused Portal * Add debounce effect in operator menu * fix component jumping due to z-index * format pages * migrate dropdown to melt * migrate popup to melt popover * feat: remove `pip` fallback option for python and ansible (#5186) * refactor!: Remove `pip` fallback option for python and ansible BREAKING CHANGE: pip was deprecated since 1.425.0 (2024-11-15) * fix errors in main.rs * fix tests * remove nsjail for pip * fix imports * fix compilation error * reinforce melt types * fix racing condition issue in closing operator menu * nit * fix id conflix with melt element * nit * clean code * use melt dropdown instead of menubar * prevent modal from closing on click outside button in menu * fix nit * nit * close dropdown when opening a new one * replace MenuV2 with melt Menu (1/4) (#5214) * use melt menu in sidebar * stop keyboard navigation for disabled items * use melt menu for FavoriteMenu and WorkspaceMenu * fix popover placement for menuButton * use melt menu for operator menu * fix notification * fix operator menu * Use melt menu in FlowJobsMenu * use melt menu for AppMenu * clean code * clean code * add use clickOutside option to Menu * use pointerdown_outside * use pointerdown_outside # Conflicts: # frontend/src/lib/components/meltComponents/Menu.svelte * use pointerdown in menus * add max-h to app dropdown menu * keep more open in operator menu * add a MenuItem component * clean * nit * nit * clean code * put conditionalMelt as utility function * remove unused Portal * Add debounce effect in operator menu * fix component jumping due to z-index * feat: remove `pip` fallback option for python and ansible (#5186) * refactor!: Remove `pip` fallback option for python and ansible BREAKING CHANGE: pip was deprecated since 1.425.0 (2024-11-15) * fix errors in main.rs * fix tests * remove nsjail for pip * fix imports * fix compilation error * reinforce melt types * fix racing condition issue in closing operator menu * nit * fix id conflix with melt element * nit * prevent modal from closing on click outside button in menu --------- Co-authored-by: pyranota <92104930+pyranota@users.noreply.github.com> Co-authored-by: Ruben Fiszel # Conflicts: # frontend/src/lib/components/meltComponents/MenuItem.svelte # frontend/src/lib/utils.ts * clean * fix z index and render * fix initialize of dropdownmenu after melt migration * feat: add support for | None and Optional in python (#5361) * feat: add support for | None and Optional in python * update python parser package * add local rooting for MenuItem * fix z index * clean * nit * nit * clean code * nit --------- Co-authored-by: pyranota <92104930+pyranota@users.noreply.github.com> Co-authored-by: Ruben Fiszel Co-authored-by: HugoCasa --- frontend/src/lib/components/AddUser.svelte | 108 +-- .../src/lib/components/ApiConnectForm.svelte | 57 +- .../src/lib/components/AssignableTags.svelte | 16 +- .../lib/components/AssignableTagsInner.svelte | 2 +- .../components/ChangeInstanceUsername.svelte | 28 +- .../ChangeInstanceUsernameInner.svelte | 9 +- .../src/lib/components/CronBuilder.svelte | 25 +- frontend/src/lib/components/CronInput.svelte | 2 +- .../src/lib/components/DefaultTags.svelte | 16 +- .../lib/components/EditableSchemaForm.svelte | 66 +- .../src/lib/components/EditorSettings.svelte | 16 +- .../lib/components/FlowPreviewContent.svelte | 94 +-- .../lib/components/InstanceNameEditor.svelte | 207 +++-- frontend/src/lib/components/InviteUser.svelte | 88 ++- .../lib/components/ResourceTypePicker.svelte | 21 +- frontend/src/lib/components/RunForm.svelte | 28 +- .../components/RunFormAdvancedPopup.svelte | 9 +- .../table/AppAggridTableActions.svelte | 38 +- .../components/display/table/AppTable.svelte | 34 +- .../apps/editor/ComponentHeader.svelte | 41 +- .../CustomComponentsList.svelte | 2 - .../editor/componentsPanel/NameEditor.svelte | 42 +- .../componentsPanel/ThemeNameEditor.svelte | 19 +- .../contextPanel/components/IdEditor.svelte | 32 +- .../inlineScriptsPanel/CacheTtlPopup.svelte | 17 +- .../InlineScriptRunnableByPath.svelte | 18 +- .../settingsPanel/InputsSpecEditor.svelte | 6 +- .../inputEditor/IconSelectInput.svelte | 104 +-- .../auditLogs/AuditLogMobileFilters.svelte | 13 +- .../calendarPicker/CalendarPicker.svelte | 55 +- frontend/src/lib/components/common/index.ts | 1 - .../lib/components/common/menu/MenuV2.svelte | 54 -- .../lib/components/common/popup/Popup.svelte | 70 -- .../src/lib/components/copilot/CronGen.svelte | 100 +-- .../copilot/FlowCopilotStatus.svelte | 35 +- .../components/copilot/PredicateGen.svelte | 19 +- .../lib/components/copilot/RegexGen.svelte | 133 ++-- .../lib/components/copilot/ScriptFix.svelte | 228 +++--- .../lib/components/copilot/ScriptGen.svelte | 292 +++---- .../components/copilot/StepInputsGen.svelte | 59 +- .../flows/map/FlowCopilotButton.svelte | 59 -- .../flows/propPicker/FlowPropPicker.svelte | 54 +- .../src/lib/components/home/ItemsList.svelte | 45 +- .../components/meltComponents/MenuItem.svelte | 13 +- .../components/meltComponents/Popover.svelte | 101 ++- .../components/meltComponents/Tooltip.svelte | 75 ++ .../lib/components/runs/MobileFilters.svelte | 22 +- .../src/lib/components/runs/RunsFilter.svelte | 605 +++++++------- .../schema/AddPropertyFormV2.svelte | 10 +- .../schema/FlowPropertyEditor.svelte | 52 +- .../settings/WorkspaceUserSettings.svelte | 187 ++--- .../sidebar/CriticalAlertModal.svelte | 126 +-- .../components/triggers/CaptureButton.svelte | 2 +- .../FlowBuilderTutorialErrorHandler.svelte | 2 +- .../components/wizards/AgChartWizard.svelte | 50 +- .../components/wizards/AgGridWizard.svelte | 329 ++++---- .../components/wizards/ChartJSWizard.svelte | 63 +- .../wizards/DBExplorerWizard.svelte | 21 +- .../components/wizards/NavbarWizard.svelte | 221 +++--- .../components/wizards/PlotlyWizard.svelte | 160 ++-- .../wizards/TableActionsWizard.svelte | 135 ++-- .../wizards/TableColumnWizard.svelte | 99 +-- frontend/src/lib/utils.ts | 2 +- frontend/src/lib/zIndexes.ts | 4 +- .../(root)/(logged)/folders/+page.svelte | 20 +- .../(root)/(logged)/groups/+page.svelte | 56 +- .../(logged)/instance_groups/+page.svelte | 40 +- .../(root)/(logged)/run/[...run]/+page.svelte | 123 +-- .../(root)/(logged)/workers/+page.svelte | 746 +++++++++--------- 69 files changed, 2861 insertions(+), 2765 deletions(-) delete mode 100644 frontend/src/lib/components/common/menu/MenuV2.svelte delete mode 100644 frontend/src/lib/components/common/popup/Popup.svelte delete mode 100644 frontend/src/lib/components/flows/map/FlowCopilotButton.svelte create mode 100644 frontend/src/lib/components/meltComponents/Tooltip.svelte diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte index 90ce1e8d31..54acc1157a 100644 --- a/frontend/src/lib/components/AddUser.svelte +++ b/frontend/src/lib/components/AddUser.svelte @@ -2,7 +2,8 @@ import { createEventDispatcher } from 'svelte' import { globalEmailInvite, superadmin, workspaceStore } from '$lib/stores' import { SettingService, UserService, WorkspaceService } from '$lib/gen' - import { Button, Popup } from './common' + import { Button } from './common' + import Popover from './meltComponents/Popover.svelte' import { sendUserToast } from '$lib/toast' import { isCloudHosted } from '$lib/cloud' import { goto } from '$lib/navigation' @@ -72,64 +73,63 @@ let selected: 'operator' | 'developer' | 'admin' = 'developer' - - + + -
- Add a new user + +
+ Add a new user - Email - + Email + - {#if !automateUsernameCreation} - Username - - {/if} + {#if !automateUsernameCreation} + Username + + {/if} - Role - - Role + + + + + + -
- + on:click={() => { + addUser().then(() => { + // @ts-ignore + email = undefined + // @ts-ignore + username = undefined + }) + }} + disabled={email === undefined || (!automateUsernameCreation && username === undefined)} + > + Add + +
+ + diff --git a/frontend/src/lib/components/ApiConnectForm.svelte b/frontend/src/lib/components/ApiConnectForm.svelte index 0e90ec56c7..b2fc7410e1 100644 --- a/frontend/src/lib/components/ApiConnectForm.svelte +++ b/frontend/src/lib/components/ApiConnectForm.svelte @@ -8,7 +8,7 @@ import Toggle from './Toggle.svelte' import TestConnection from './TestConnection.svelte' import SupabaseIcon from './icons/SupabaseIcon.svelte' - import Popup from './common/popup/Popup.svelte' + import Popover from './meltComponents/Popover.svelte' import Button from './common/button/Button.svelte' import { Loader2 } from 'lucide-svelte' @@ -129,13 +129,12 @@ /> {#if resourceType == 'postgresql'} - - + + +
+
+
+ + +
+ {#if !validConnectionString} +

Could not parse connection string

+ {/if}
- {#if !validConnectionString} -

Could not parse connection string

- {/if}
- - + + {/if} {#if resourceType == 'postgresql' && supabaseWizard} - import { Button, Popup } from './common' + import { Button } from './common' import { Pen } from 'lucide-svelte' + import Popover from './meltComponents/Popover.svelte' import Tooltip from './Tooltip.svelte' import AssignableTagsInner from './AssignableTagsInner.svelte' @@ -11,12 +12,13 @@ export let showWorkspaceRestriction = false - - + - - + + + + diff --git a/frontend/src/lib/components/AssignableTagsInner.svelte b/frontend/src/lib/components/AssignableTagsInner.svelte index 03f0254983..1f374fc343 100644 --- a/frontend/src/lib/components/AssignableTagsInner.svelte +++ b/frontend/src/lib/components/AssignableTagsInner.svelte @@ -29,7 +29,7 @@ loadCustomTags() -
+
{#if customTags == undefined} {:else} diff --git a/frontend/src/lib/components/ChangeInstanceUsername.svelte b/frontend/src/lib/components/ChangeInstanceUsername.svelte index e4f696bfd0..38ae001816 100644 --- a/frontend/src/lib/components/ChangeInstanceUsername.svelte +++ b/frontend/src/lib/components/ChangeInstanceUsername.svelte @@ -1,5 +1,6 @@ - - + - close(null)} - on:renamed - /> - + + close()} + on:renamed + /> + + diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte index 1690dcd4f3..3eb38a487a 100644 --- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte +++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte @@ -8,6 +8,7 @@ export let email: string export let username: string export let isConflict = false + export let noPadding = false let loading = false @@ -71,11 +72,9 @@ } -
- {#if isConflict} - Fix username conflict +
+ {#if isConflict} + Fix username conflict {/if} import Section from './Section.svelte' - import { Button, Popup } from './common' + import { Button } from './common' import { Clock } from 'lucide-svelte' + import Popover from './meltComponents/Popover.svelte' - - + + -
-
- -
-
- + +
+
+ +
+
+ + diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte index 94b2219331..986a26de2e 100644 --- a/frontend/src/lib/components/CronInput.svelte +++ b/frontend/src/lib/components/CronInput.svelte @@ -385,7 +385,7 @@ size="xs" on:click={() => { schedule = nschedule - close(null) + close() }} > Set cron schedule diff --git a/frontend/src/lib/components/DefaultTags.svelte b/frontend/src/lib/components/DefaultTags.svelte index df9272cbf5..718cb1dd29 100644 --- a/frontend/src/lib/components/DefaultTags.svelte +++ b/frontend/src/lib/components/DefaultTags.svelte @@ -1,7 +1,8 @@ - - + + - - + + + + diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte index a5e991393a..a19135709a 100644 --- a/frontend/src/lib/components/EditableSchemaForm.svelte +++ b/frontend/src/lib/components/EditableSchemaForm.svelte @@ -18,7 +18,7 @@ import { sendUserToast } from '$lib/toast' import Toggle from './Toggle.svelte' import { emptyString } from '$lib/utils' - import Popup from './common/popup/Popup.svelte' + import Popover from './meltComponents/Popover.svelte' import SchemaFormDnd from './schema/SchemaFormDND.svelte' import { deepEqual } from 'fast-equals' import { tweened } from 'svelte/motion' @@ -371,12 +371,8 @@ {argName} {#if !uiOnly}
- - + + -
- - + close() + }} + > + Rename + +
+ + +
{/if}
diff --git a/frontend/src/lib/components/EditorSettings.svelte b/frontend/src/lib/components/EditorSettings.svelte index 7a5bf50398..fe1bd4bdf9 100644 --- a/frontend/src/lib/components/EditorSettings.svelte +++ b/frontend/src/lib/components/EditorSettings.svelte @@ -2,19 +2,21 @@ import { Settings } from 'lucide-svelte' import FormatOnSave from './FormatOnSave.svelte' import VimMode from './VimMode.svelte' - import { Button, Popup } from './common' + import { Button } from './common' import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte' import type { EditorBarUi } from './custom_ui' + import Popover from './meltComponents/Popover.svelte' export let customUi: EditorBarUi = {} {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false} - - + -
- {#if automateUsernameCreation && username} - - {/if} - +
+ + diff --git a/frontend/src/lib/components/InviteUser.svelte b/frontend/src/lib/components/InviteUser.svelte index 0455702854..ae5a824190 100644 --- a/frontend/src/lib/components/InviteUser.svelte +++ b/frontend/src/lib/components/InviteUser.svelte @@ -3,7 +3,8 @@ import { createEventDispatcher } from 'svelte' import { globalEmailInvite, superadmin, workspaceStore } from '$lib/stores' import { UserService, WorkspaceService } from '$lib/gen' - import { Button, Popup } from './common' + import { Button } from './common' + import Popover from './meltComponents/Popover.svelte' import { isCloudHosted } from '$lib/cloud' import { goto } from '$lib/navigation' import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte' @@ -64,53 +65,54 @@ let selected: 'operator' | 'developer' | 'admin' = 'developer' - - + + - -
- - - +
+ + + - + - + + -
- + on:click={inviteUser} + disabled={email === undefined} + > + Invite + +
+ + diff --git a/frontend/src/lib/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte index 56d8b97d0a..2348ad66db 100644 --- a/frontend/src/lib/components/ResourceTypePicker.svelte +++ b/frontend/src/lib/components/ResourceTypePicker.svelte @@ -4,7 +4,8 @@ import { ResourceService } from '$lib/gen' import { workspaceStore } from '$lib/stores' import IconedResourceType from './IconedResourceType.svelte' - import { Button, ClearableInput, Popup } from './common' + import { Button, ClearableInput } from './common' + import Popover from './meltComponents/Popover.svelte' import { offset, flip, shift } from 'svelte-floating-ui/dom' import Label from './Label.svelte' import Tooltip from './Tooltip.svelte' @@ -50,20 +51,18 @@ > Clear - - + - -
+
@@ -80,7 +79,7 @@ disabled={notPickable} on:click={() => { onClick(undefined) - close(null) + close() }} > None @@ -96,7 +95,7 @@ disabled={notPickable} on:click={() => { onClick(r) - close(null) + close() }} > @@ -108,8 +107,8 @@ {/if}
-
- + +
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte index 22a31ff530..9be671846d 100644 --- a/frontend/src/lib/components/RunForm.svelte +++ b/frontend/src/lib/components/RunForm.svelte @@ -12,7 +12,7 @@ import SharedBadge from './SharedBadge.svelte' import TimeAgo from './TimeAgo.svelte' - import Popup from './common/popup/Popup.svelte' + import Popover from './meltComponents/Popover.svelte' import { autoPlacement } from '@floating-ui/core' import { Calendar, CornerDownLeft } from 'lucide-svelte' import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte' @@ -58,7 +58,6 @@ export let jsonView = false let reloadArgs = 0 - let blockPopupOpen = false let jsonEditor: JsonInputs | undefined = undefined let schemaHeight = 0 @@ -206,7 +205,7 @@ {scheduledForStr ? 'Schedule to run later' : buttonText}
- - + - close(null)} - /> - + + + +
{#if overrideTag} diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte index da7508a114..f0ba3d1eb9 100644 --- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte +++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte @@ -1,7 +1,6 @@ -
+
{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
- +
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte index da3521a8d2..a5034aa1d4 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte @@ -11,12 +11,12 @@ import AppSelect from '../../inputs/AppSelect.svelte' import { twMerge } from 'tailwind-merge' - import { Popup } from '$lib/components/common' import { Plug2 } from 'lucide-svelte' import ComponentOutputViewer from '$lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte' import { connectOutput } from '$lib/components/apps/editor/appUtils' import RowWrapper from '../../layout/RowWrapper.svelte' import type { ICellRendererParams } from 'ag-grid-community' + import Popover from '$lib/components/meltComponents/Popover.svelte' export let p: ICellRendererParams export let id: string @@ -124,34 +124,38 @@ {#if $connectingInput.opened}
- - + - { - const tableId = action.id.split('_')[0] + + { + const tableId = action.id.split('_')[0] - connectOutput( - connectingInput, - action.type, - tableId, - `inputs.${action.id}[${rowIndex}].${detail}` - ) - }} - componentId={action.id} - /> - + connectOutput( + connectingInput, + action.type, + tableId, + `inputs.${action.id}[${rowIndex}].${detail}` + ) + }} + componentId={action.id} + /> + +
{/if} {/if} diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte index 1c13d1c575..9abf102c7e 100644 --- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte +++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte @@ -39,12 +39,12 @@ import AppSelect from '../../inputs/AppSelect.svelte' import RowWrapper from '../../layout/RowWrapper.svelte' import ResolveStyle from '../../helpers/ResolveStyle.svelte' - import { Popup } from '$lib/components/common' import ComponentOutputViewer from '$lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte' import { EyeIcon, Plug2 } from 'lucide-svelte' import AppCell from './AppCell.svelte' import sum from 'hash-sum' import RefreshButton from '$lib/components/apps/components/helpers/RefreshButton.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' export let id: string export let componentInput: AppInput | undefined @@ -553,31 +553,35 @@ {#if $connectingInput.opened}
- - + - - connectOutput( - connectingInput, - 'buttoncomponent', - actionButton.id, - detail - )} - componentId={actionButton.id} - /> - + + + connectOutput( + connectingInput, + 'buttoncomponent', + actionButton.id, + detail + )} + componentId={actionButton.id} + /> + +
{/if} {/if} diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte index 7386417435..a4a516b06f 100644 --- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte +++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte @@ -3,8 +3,8 @@ import type { AppViewerContext } from '../types' import { Anchor, ArrowDownFromLine, Bug, Expand, Network, Pen, Plug } from 'lucide-svelte' import { createEventDispatcher, getContext } from 'svelte' - import Popover from '$lib/components/Popover.svelte' - import { Button, Popup } from '$lib/components/common' + import Popover from '$lib/components/meltComponents/Popover.svelte' + import { Button } from '$lib/components/common' import type { AppComponent } from './component' import { twMerge } from 'tailwind-merge' import { connectOutput } from './appUtils' @@ -73,11 +73,12 @@ style="left: {id_width}px;" data-connection-button > - - + - - connectOutput(connectingInput, component.type, component.id, detail)} - componentId={component.id} - /> - + + + connectOutput(connectingInput, component.type, component.id, detail)} + componentId={component.id} + /> + +
{/if} @@ -278,13 +281,15 @@ 'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1 shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer' )} > - - - + + + + +
- 
{error ?? ''}	
-
+
- + {/if} diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte index 295e0f5fed..4bb894e308 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte @@ -69,8 +69,6 @@ getCustomComponents() -
-
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte index 2fee02c101..6d479df50b 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte @@ -1,7 +1,6 @@ - - + + -
-
Edit {kind} name
-
- - + +
+
Edit {kind} name
+
+ + +
-
- + + diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte index e545c622fb..36ebd17556 100644 --- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte +++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte @@ -2,8 +2,7 @@ import { updateTheme } from './themeUtils' import { workspaceStore } from '$lib/stores' import Button from '$lib/components/common/button/Button.svelte' - - import { Popup } from '$lib/components/common' + import Popover from '$lib/components/meltComponents/Popover.svelte' import { Pen } from 'lucide-svelte' import { createEventDispatcher } from 'svelte' import { sendUserToast } from '$lib/toast' @@ -18,19 +17,19 @@ const dispatch = createEventDispatcher() - - + -
+
Edit theme name
@@ -46,12 +45,12 @@ } }) dispatch('reloadThemes') - close(null) + close() sendUserToast('Theme name updated:\n' + editedName) }} > Update
-
- + + diff --git a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte index 2db5998316..88882ced5b 100644 --- a/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte +++ b/frontend/src/lib/components/apps/editor/contextPanel/components/IdEditor.svelte @@ -4,7 +4,7 @@ import { Pencil } from 'lucide-svelte' import { createEventDispatcher, getContext } from 'svelte' import IdEditorInput from '$lib/components/IdEditorInput.svelte' - import { Popup } from '$lib/components/common' + import Popover from '$lib/components/meltComponents/Popover.svelte' const { app, selectedComponent } = getContext('AppViewerContext') @@ -15,8 +15,12 @@ $: reservedIds = allItems($app.grid, $app.subgrids).map((item) => item.id) - - + + - close(null)} - on:save={(e) => { - dispatch('save', e.detail) - close(null) - }} - {reservedIds} - /> - + + close()} + on:save={(e) => { + dispatch('save', e.detail) + close() + }} + {reservedIds} + /> + + diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte index 4ade3ec0fa..6734a18a8d 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte @@ -1,13 +1,14 @@ - - +
- + + diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte index 2b2be45da5..16fe10c594 100644 --- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte +++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte @@ -1,5 +1,5 @@ - - + +
- {#if !loading} - {#if filteredItems} -
- { - if (!['ArrowDown', 'ArrowUp'].includes(event.key)) { - event.stopPropagation() - } - }} - bind:value={search} - type="text" - placeholder="Search" - class="col-span-4 mb-2" - /> -
- {#each filteredItems as label} - - {:else} -
- No icons match your search -
- {/each} + + {#if !loading} + {#if filteredItems} +
+ { + if (!['ArrowDown', 'ArrowUp'].includes(event.key)) { + event.stopPropagation() + } + }} + bind:value={search} + type="text" + placeholder="Search" + class="col-span-4 mb-2" + /> +
+ {#each filteredItems as label} + + {:else} +
+ No icons match your search +
+ {/each} +
-
- {:else} -
Couldn't load options
+ {:else} +
Couldn't load options
+ {/if} {/if} - {/if} - + + diff --git a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte index 36590aaee1..d9c0f5dd49 100644 --- a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte +++ b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte @@ -1,18 +1,19 @@ - -
+ -
- + + diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte index 4e1e7cadb5..538ded9e7c 100644 --- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte +++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte @@ -1,7 +1,7 @@ - - + + - - - - - + + + diff --git a/frontend/src/lib/components/common/index.ts b/frontend/src/lib/components/common/index.ts index 2f6bba1aa7..cd68ce79d4 100644 --- a/frontend/src/lib/components/common/index.ts +++ b/frontend/src/lib/components/common/index.ts @@ -9,7 +9,6 @@ export { default as DrawerContent } from './drawer/DrawerContent.svelte' export { default as Kbd } from './kbd/Kbd.svelte' export { default as Menu } from './menu/Menu.svelte' export { default as MenuItem } from './menu/MenuItem.svelte' -export { default as Popup } from './popup/Popup.svelte' export { default as SecondsInput } from './seconds/SecondsInput.svelte' export { default as Skeleton } from './skeleton/Skeleton.svelte' export { default as Tab } from './tabs/Tab.svelte' diff --git a/frontend/src/lib/components/common/menu/MenuV2.svelte b/frontend/src/lib/components/common/menu/MenuV2.svelte deleted file mode 100644 index 708224ee13..0000000000 --- a/frontend/src/lib/components/common/menu/MenuV2.svelte +++ /dev/null @@ -1,54 +0,0 @@ - - - - -
- - - -
- -
- - -
- -
- - -
- - diff --git a/frontend/src/lib/components/common/popup/Popup.svelte b/frontend/src/lib/components/common/popup/Popup.svelte deleted file mode 100644 index 6bbceccec7..0000000000 --- a/frontend/src/lib/components/common/popup/Popup.svelte +++ /dev/null @@ -1,70 +0,0 @@ - - - - -
- -
- - - - - -
{ - popupHover = true - }} - on:mouseleave={() => { - popupHover = false - }} - on:click={(e) => preventPopupClosingOnClickInside && e.stopPropagation()} - > - {#if !noTransition} - - -
- -
- - - {:else} - -
- -
- - {/if} -
- - diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte index c7046c6ada..b211fcd7e2 100644 --- a/frontend/src/lib/components/copilot/CronGen.svelte +++ b/frontend/src/lib/components/copilot/CronGen.svelte @@ -2,7 +2,7 @@ import { ExternalLink, Wand2 } from 'lucide-svelte' import Button from '../common/button/Button.svelte' import { getNonStreamingCompletion } from './lib' - import Popup from '../common/popup/Popup.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' import { sendUserToast } from '$lib/toast' import { copilotInfo } from '$lib/stores' @@ -74,12 +74,8 @@ } - - + +
+ {:else} +
+

Enable Windmill AI in the workspace settings

+
+ {/if}
- {:else} -
-

Enable Windmill AI in the workspace settings

-
- {/if} - + + diff --git a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte index 682c797c05..3e9c5bb839 100644 --- a/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte +++ b/frontend/src/lib/components/copilot/FlowCopilotStatus.svelte @@ -7,7 +7,7 @@ import type { FlowCopilotContext } from './flow' import { charsToNumber } from '../flows/idUtils' import { copilotInfo } from '$lib/stores' - import Popup from '../common/popup/Popup.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' import type { FlowModule } from '$lib/gen' import type { FlowEditorContext } from '../flows/types' import { ExternalLink, Wand2 } from 'lucide-svelte' @@ -114,13 +114,8 @@
{:else} - - + +
- {#if promptHistory.length > 0} -
- {#each promptHistory as p} - - {/each} - + }} + disabled={funcDesc?.length <= 0} + iconOnly + startIcon={{ icon: Wand2 }} + />
- {/if} -
- {:else} -

- Enable Windmill AI in the - workspace settings - -

- {/if} -
- + {#if promptHistory.length > 0} +
+ {#each promptHistory as p} + + {/each} + +
+ {/if} +
+ {:else} +

+ Enable Windmill AI in the + workspace settings + +

+ {/if} +
+ + diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte index da4d5e476f..7f4c77f1e7 100644 --- a/frontend/src/lib/components/copilot/ScriptFix.svelte +++ b/frontend/src/lib/components/copilot/ScriptFix.svelte @@ -9,15 +9,13 @@ import { dbSchemas, copilotInfo, type DBSchema, workspaceStore } from '$lib/stores' import type DiffEditor from '../DiffEditor.svelte' import { scriptLangToEditorLang } from '$lib/scripts' - import Popover from '../Popover.svelte' - import Popup from '../common/popup/Popup.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' import { writable } from 'svelte/store' - import { sleep } from '$lib/utils' import { WindmillIcon } from '../icons' import HighlightCode from '../HighlightCode.svelte' import LoadingIcon from '../apps/svelte-select/lib/LoadingIcon.svelte' import { autoPlacement } from '@floating-ui/core' - import { Check, Wand2, X } from 'lucide-svelte' + import { Check, Wand2, X, RotateCw } from 'lucide-svelte' // props export let lang: SupportedLanguage @@ -33,7 +31,7 @@ let dbSchema: DBSchema | undefined = undefined let abortController: AbortController | undefined = undefined - async function onFix(closePopup: () => void) { + async function onFix() { if (!error) { return } @@ -57,9 +55,6 @@ ) setupDiff() diffEditor?.setModified($generatedCode) - await sleep(500) - closePopup() - await sleep(300) showDiff() } catch (err) { if (!abortController?.signal.aborted) { @@ -70,7 +65,6 @@ console.error(err) } } - closePopup() } finally { genLoading = false } @@ -117,110 +111,134 @@ } } $: updateSchema(lang, args) + + let popover: Popover | undefined = undefined {#if SUPPORTED_LANGUAGES.has(lang)} -
- {#if !genLoading && $generatedCode.length > 0} -
+ {#if !genLoading && $generatedCode.length > 0} +
+ + +
+ {/if} + + +
- {#if $generatedExplanation.length > 0} - - {$generatedExplanation} - - +
+ + +
+ {#if $copilotInfo.exists_ai_resource} +
+ {#if $generatedCode.length > 0 && genLoading} +
+ +
+ {:else if genLoading} + + {/if} + {#if $generatedExplanation.length > 0} +

Explanation: test {$generatedExplanation}

+ {/if} +
+ {:else} +
+

Enable Windmill AI in the workspace settings

{/if}
- {:else} - - - - - {@const fixAction = (_) => { - if ($copilotInfo.exists_ai_resource) { - onFix(() => close(null)) - } - }} -
- {#if $copilotInfo.exists_ai_resource} -
- {#if $generatedCode.length > 0} -
- -
- {#if $generatedExplanation.length > 0} -

Explanation: {$generatedExplanation}

- {/if} - {:else} - - {/if} -
- {:else} -
-

Enable Windmill AI in the workspace settings

- {/if} -
- - {/if} -
+ + {/if} diff --git a/frontend/src/lib/components/copilot/ScriptGen.svelte b/frontend/src/lib/components/copilot/ScriptGen.svelte index 1ae45c9146..960cf13689 100644 --- a/frontend/src/lib/components/copilot/ScriptGen.svelte +++ b/frontend/src/lib/components/copilot/ScriptGen.svelte @@ -6,7 +6,8 @@ import type { SupportedLanguage } from '$lib/common' import { sendUserToast } from '$lib/toast' import type Editor from '../Editor.svelte' - import Popup from '../common/popup/Popup.svelte' + import Popover from '$lib/components/meltComponents/Popover.svelte' + import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte' import { dbSchemas, copilotInfo, @@ -29,7 +30,6 @@ import { fade } from 'svelte/transition' import { isInitialCode } from '$lib/script_helpers' import { twMerge } from 'tailwind-merge' - import Popover from '../Popover.svelte' import { onDestroy } from 'svelte' // props @@ -249,6 +249,11 @@ } $: $copilotInfo && checkForInvalidModel() + function handlePublicOnlySelected({ detail }: { detail: string }) { + if (!dbSchema) return + ;(dbSchema as any).publicOnly = detail === 'true' + } + onDestroy(() => { abortController?.abort() }) @@ -311,7 +316,7 @@ {/if} {/if} {#if ($generatedCode.length === 0 || genLoading) && SUPPORTED_LANGUAGES.has(lang ?? '')} - - + {#if inlineScript}