Save scripts to custom locations (use import/export buttons) by sergeyteleshev · Pull Request #4258 · dbeaver/cloudbeaver

sergeyteleshev · 2026-04-02T13:21:19Z

closes https://github.com/dbeaver/pro/issues/7880

codacy-production · 2026-04-02T13:23:30Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity

Metric Results

Complexity 0

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

…mportexport-buttons

devnaumov · 2026-04-07T09:04:58Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.module.css

@@ -0,0 +1,17 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others


2026 here and below

devnaumov · 2026-04-07T09:05:38Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.module.css

+ * you may not use this file except in compliance with the License.
+ */
+
+.tabList {


Please use tailwind as amount of styles and its logic is small

webapp/packages/plugin-script-export/src/ScriptExportService.ts

devnaumov · 2026-04-07T09:13:25Z

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx

+  const [focusedRef] = useFocus<HTMLFormElement>({ focusFirstChild: true });
+  const notificationService = useService(NotificationService);
+
+  const state = useObservableRef<State>(


Its better not to use useObservableRef for such simple cases. You can use native react state so we can reuse this logic across code bases and in desktop env.

devnaumov · 2026-04-07T09:17:06Z

webapp/packages/plugin-sql-editor/src/MenuBootstrap.ts

    const name = getSqlEditorName(state, dataSource, connection);
    const script = dataSource.script;
+    const hasOnlyLocalExport =
+      this.scriptExportService.tabsContainer.has(LOCAL_EXPORT_TAB_ID) && this.scriptExportService.tabsContainer.getIdList().length === 1;


getDisplayed instead of getIdList, as tabs might be hidden

devnaumov · 2026-04-07T09:20:18Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.tsx

+  const [footerNode, setFooterNode] = useState<HTMLDivElement | null>(null);
+  const footerRef = useCallback((node: HTMLDivElement | null) => setFooterNode(node), []);
+
+  const FooterSlot: React.FC<React.PropsWithChildren> = useCallback(


footerNode and FooterSlot seems very strange, could you please explain what are we trying to achive with this?

The dialog uses a tab-based architecture where:

Different export destinations are shown as tabs (Local Download - CE, Cloud Storage - EE, etc.)

Each tab has different validation requirements and submit logic

Local: just needs a filename

Cloud Storage: needs filename + folder selection + async upload

The issue:

The dialog can't know each tab's specific validation rules

The dialog can't know each tab's specific submit logic

But the dialog needs to render the buttons

The initial solution was the portal pattern. I just moved the whole logic inside tabs for simplicity and then teleported the buttons to their original position, so the layout is not broken and looks fine (CommonDialog demands quite a strict order of the elements - body & footer)

I pushed my second proposal for how to handle this issue using MobX state, React contexts & useEffect. But as for me, it looks fragile to have all handled by useEffect. It can cause an unexpected state during saving & can lead to a memory leak and an app freeze. This is why I first came up with the portal pattern. It seems more stable, but tricky, I agree

The source issue is more general, and we need to design a confident API for these case scenarios. It's just currently out of the scope of this task, so I propose 1 of these 2 solutions for the current task

SychevAndrey · 2026-04-07T08:21:06Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.tsx

+          {...payload}
+        >
+          <CommonDialogBody noBodyPadding noOverflow>
+            <TabList className={s(style, { tabList: true })} underline />


can we use tailwind here instead?

I thought useS and s are kinda deprecated. Am I wrong?

SychevAndrey · 2026-04-07T08:29:24Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.tsx

+      if (!footerNode) {
+        return null;
+      }
+      return createPortal(children, footerNode);


I see why you need this here, but it looks a bit weird:

Footer buttons are actually the same, but we duplicate them in different tabs

Only onSubmit is different

It is not a Tab responsibility to render buttons of a dialog

maybe we could pass actions in IScriptExportDialogContext?

{ canSubmit: boolean; onSubmit: () => void; loading?: boolean; }

So the tab could do
action.onSubmit = () => {downloadSql(fileName, script)}

I see that you have tried to use export controller, but it was using react state. Can you try with mobx observable via useObservableRef?

#4258 (comment)

webapp/packages/plugin-sql-editor/src/locales/ru.ts

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx

…mportexport-buttons

webapp/packages/plugin-script-export/src/index.ts

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx

webapp/packages/plugin-script-export/src/ExportScriptDialog/ScriptExportDialogContext.ts

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.tsx

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx

…mportexport-buttons

devnaumov · 2026-04-10T10:26:36Z

webapp/packages/plugin-script-export/src/ExportScriptDialog/ExportScriptDialog.tsx

+  className,
+}) {
+  const scriptExportService = useService(ScriptExportService);
+  const [selectedTabId, setSelectedTabId] = useState<string | undefined>(undefined);


Seems like you are using this state just to pass to TabsState, you can omit it and keep only container

Wroud · 2026-04-10T14:43:00Z

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportPanel.tsx

+  const [fileName, setFileName] = useState(initialFileName);
+
+  const form = useForm({
+    onSubmit(event) {


please fix lint

Wroud · 2026-04-10T14:43:46Z

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportPanel.tsx

+    <Form ref={focusedRef} context={form}>
+      <InputField name="fileName" value={fileName} required small onChange={setFileName}>
+        <Translate token="ui_file_name" />
+      </InputField>
+    </Form>


i think that use of <Form> component is optional here

…mportexport-buttons

…errors approach

dbeaver/pro#7880 adds MVP for saving script to cloud storage

7f30576

sergeyteleshev requested a review from devnaumov April 2, 2026 13:21

sergeyteleshev self-assigned this Apr 2, 2026

sergeyteleshev requested review from SychevAndrey and Wroud April 2, 2026 13:21

sergeyteleshev added 7 commits April 2, 2026 16:52

removes registerScriptExportController

1fe973e

Merge branch 'devel' into 7880-save-scripts-to-custom-locations-use-i…

be0c9c0

…mportexport-buttons

finalizes the ui

df24f91

adds missing locales

35c8d27

introduces footer slot to use CommonDialog api

524e81d

adds locales

21d66bf

moves success message to the tab components itself

7d26fd8

sergeyteleshev marked this pull request as ready for review April 3, 2026 12:29

devnaumov requested changes Apr 7, 2026

View reviewed changes

SychevAndrey reviewed Apr 7, 2026

View reviewed changes

Wroud reviewed Apr 7, 2026

View reviewed changes

webapp/packages/plugin-sql-editor/src/locales/ru.ts Outdated Show resolved Hide resolved

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx Outdated Show resolved Hide resolved

sergeyteleshev added 7 commits April 7, 2026 17:30

Merge branch 'devel' into 7880-save-scripts-to-custom-locations-use-i…

e2a6a83

…mportexport-buttons

Merge branch 'devel' into 7880-save-scripts-to-custom-locations-use-i…

51138cf

…mportexport-buttons

pr small fixes

c343a4c

saves file with timestamp

1202f53

send notification with correct filename

6719762

fixes locales

895cc1e

uses different approach for handling dialog save

d1c7d51

sergeyteleshev requested review from SychevAndrey, Wroud and devnaumov April 8, 2026 18:46

sergeyteleshev added 2 commits April 8, 2026 20:56

cleanup

6f8f985

self review fixes

6a36867

Wroud requested changes Apr 9, 2026

View reviewed changes

webapp/packages/plugin-sql-editor/src/LocalExport/LocalExportTab.tsx Outdated Show resolved Hide resolved

sergeyteleshev added 4 commits April 9, 2026 11:18

adds lazy import for export dialog

bae6e32

uses form API to save the dialog

066d16a

fixes imports (tab -> panel)

b2235f1

uses react state for filename

af18122

sergeyteleshev requested a review from Wroud April 9, 2026 12:51

sergeyteleshev added 4 commits April 9, 2026 15:24

Merge branch 'devel' into 7880-save-scripts-to-custom-locations-use-i…

fb5008f

…mportexport-buttons

build fix

428f64e

handles form validation

55068a7

sanitizes file name

727dde8

devnaumov previously approved these changes Apr 10, 2026

View reviewed changes

Wroud previously approved these changes Apr 10, 2026

View reviewed changes

removes redundant form layout

244cc0e

sergeyteleshev dismissed stale reviews from Wroud and devnaumov via 244cc0e April 10, 2026 16:38

sergeyteleshev added 3 commits April 12, 2026 18:17

Merge branch 'devel' into 7880-save-scripts-to-custom-locations-use-i…

691f721

…mportexport-buttons

fixes bug: allows to load tree root with useTreeData

c04f44f

uses context api to resolve export script dialog instead of throwing …

36704c5

…errors approach

Wroud approved these changes Apr 13, 2026

View reviewed changes

devnaumov approved these changes Apr 13, 2026

View reviewed changes

Conversation

sergeyteleshev commented Apr 2, 2026

Uh oh!

codacy-production bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codacy-production bot commented Apr 2, 2026 •

edited

Loading