From ed16b7fc0808616d5b649b3cbee5241c7bbf8a6d Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Mon, 13 Oct 2025 10:36:30 +0200
Subject: [PATCH] adds ExportImageDialog and reuses it across the app

---
 .../ExportImageDialog.module.css              |   5 +
 .../ExportImageDialog/ExportImageDialog.tsx   | 135 ++++++++++++++++++
 .../ExportImageDialogLazy.tsx                 |  11 ++
 webapp/packages/core-blocks/src/index.ts      |   2 +
 4 files changed, 153 insertions(+)
 create mode 100644 webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.module.css
 create mode 100644 webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.tsx
 create mode 100644 webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialogLazy.tsx

diff --git a/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.module.css b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.module.css
new file mode 100644
index 0000000000..30002cba9d
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.module.css
@@ -0,0 +1,5 @@
+.footer {
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+}
diff --git a/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.tsx b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.tsx
new file mode 100644
index 0000000000..2880d2833e
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialog.tsx
@@ -0,0 +1,135 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useCallback } from 'react';
+
+import {
+  Button,
+  Select,
+  CommonDialogBody,
+  CommonDialogFooter,
+  CommonDialogHeader,
+  CommonDialogWrapper,
+  Container,
+  ErrorMessage,
+  FieldCheckbox,
+  s,
+  useErrorDetails,
+  useS,
+  useTranslate,
+  useObservableRef,
+} from '@cloudbeaver/core-blocks';
+import type { DialogComponentProps } from '@cloudbeaver/core-dialogs';
+
+import style from './ExportImageDialog.module.css';
+import { observable } from 'mobx';
+
+export interface IExportImageOptions {
+  format: ExportFormat;
+  transparent: boolean;
+  fileName: string;
+}
+
+type ExportFormat = 'SVG' | 'PNG';
+
+export const EXPORT_FORMATS: ExportFormat[] = ['SVG', 'PNG'];
+
+export interface ExportImagePayload {
+  onExport: (options: IExportImageOptions) => void;
+  defaultFileName: string;
+}
+
+interface State extends IExportImageOptions {
+  error: Error | null;
+}
+
+// TODO refactor to use translate
+export const ExportImageDialog = observer<DialogComponentProps<ExportImagePayload, null>>(function ExportImageDialog(props) {
+  const translate = useTranslate();
+  const styles = useS(style);
+
+  const state = useObservableRef<State>(
+    () => ({
+      format: 'SVG',
+      transparent: false,
+      fileName: props.payload.defaultFileName,
+      error: null,
+    }),
+    {
+      format: observable.ref,
+      transparent: observable.ref,
+      fileName: observable.ref,
+      error: observable.ref,
+    },
+    false,
+  );
+  const errorDetails = useErrorDetails(state.error);
+
+  const onExportHandler = () => {
+    try {
+      props.payload.onExport(state);
+      props.resolveDialog();
+    } catch (error: any) {
+      state.error = error;
+    }
+  };
+
+  const onFormatSelect = useCallback(
+    (format: ExportFormat) => {
+      state.format = format;
+    },
+    [state],
+  );
+
+  const onTransparentOptionChange = useCallback(
+    (transparent: boolean) => {
+      state.transparent = transparent;
+    },
+    [state],
+  );
+
+  return (
+    <CommonDialogWrapper size="small">
+      <CommonDialogHeader title="plugin_erd_viewer_erd_export_dialog_title" onReject={props.rejectDialog} />
+      <CommonDialogBody>
+        <Container>
+          <Container small gap>
+            <Select
+              items={EXPORT_FORMATS}
+              keySelector={value => value}
+              valueSelector={value => value}
+              state={state}
+              name="format"
+              onSelect={onFormatSelect}
+            >
+              {translate('plugin_erd_viewer_erd_export_format')}
+            </Select>
+            <FieldCheckbox
+              state={state}
+              name="transparent"
+              label={translate('plugin_erd_viewer_erd_export_options_background')}
+              onChange={onTransparentOptionChange}
+            />
+          </Container>
+        </Container>
+        {errorDetails.name && (
+          <ErrorMessage text={errorDetails.message || errorDetails.name} hasDetails={errorDetails.hasDetails} onShowDetails={errorDetails.open} />
+        )}
+      </CommonDialogBody>
+      <CommonDialogFooter className={s(styles, { footer: true })}>
+        <Button type="button" variant="secondary" onClick={props.rejectDialog}>
+          {translate('app_shared_inlineEditor_dialog_cancel')}
+        </Button>
+        <Button type="button" onClick={onExportHandler}>
+          {translate('plugin_erd_viewer_erd_export_as_img')}
+        </Button>
+      </CommonDialogFooter>
+    </CommonDialogWrapper>
+  );
+});
diff --git a/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialogLazy.tsx b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialogLazy.tsx
new file mode 100644
index 0000000000..14076e3140
--- /dev/null
+++ b/webapp/packages/core-blocks/src/ExportImageDialog/ExportImageDialogLazy.tsx
@@ -0,0 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { importLazyComponent } from '../importLazyComponent.js';
+
+export const ExportImageDialogLazy = importLazyComponent(() => import('./ExportImageDialog.js').then(m => m.ExportImageDialog));
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 084d2902dc..c2257f2c40 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -19,6 +19,8 @@ export { default as ConfirmationDialogStyles } from './CommonDialog/Confirmation
 export * from './CommonDialog/ConfirmationDialogDelete.js';
 export * from './CommonDialog/RenameDialog.js';
 export * from './CommonDialog/DialogsPortal.js';
+export * from './ExportImageDialog/ExportImageDialog.js';
+export * from './ExportImageDialog/ExportImageDialogLazy.js';
 
 export * from './ErrorDetailsDialog/ErrorDetailsDialog.js';