datalens-tech · imsitnikov · Dec 24, 2024
diff --git a/src/i18n-keysets/collections/en.json b/src/i18n-keysets/collections/en.json
@@ -14,6 +14,8 @@
   "action_create-workbook-hint": "Stores related connections, datasets, charts, and dashboards",
   "action_delete": "Delete",
   "action_edit": "Edit",
+  "action_export": "Export",
+  "action_import": "Import workbook",
   "action_move": "Move",
   "action_reset-all": "Reset all",
   "action_select": "Select",

diff --git a/src/i18n-keysets/collections/ru.json b/src/i18n-keysets/collections/ru.json
@@ -14,6 +14,8 @@
   "action_create-workbook-hint": "Содержит подключения, датасеты, чарты и дашборды",
   "action_delete": "Удалить",
   "action_edit": "Редактировать",
+  "action_export": "Экспорт",
+  "action_import": "Импорт воркбука",
   "action_move": "Переместить",
   "action_reset-all": "Снять все",
   "action_select": "Выбрать",

diff --git a/src/i18n-keysets/new-workbooks/en.json b/src/i18n-keysets/new-workbooks/en.json
@@ -11,6 +11,7 @@
   "action_delete": "Delete",
   "action_duplicate": "Duplicate",
   "action_edit": "Edit",
+  "action_export": "Export",
   "action_move": "Move",
   "action_rename": "Rename",
   "action_retry": "Retry",

diff --git a/src/i18n-keysets/new-workbooks/ru.json b/src/i18n-keysets/new-workbooks/ru.json
@@ -11,6 +11,7 @@
   "action_delete": "Удалить",
   "action_duplicate": "Дублировать",
   "action_edit": "Редактировать",
+  "action_export": "Экспорт",
   "action_move": "Переместить",
   "action_rename": "Переименовать",
   "action_retry": "Обновить",

diff --git a/src/shared/endpoints/constants/opensource.ts b/src/shared/endpoints/constants/opensource.ts
@@ -9,6 +9,8 @@ export const opensourceEndpoints = {
 
             charts: process.env.CHARTS_ENDPOINT || '/',
             uploader: process.env.UI_UPLOADER_ENDPOINT || '/uploader',
+
+            transfer: process.env.TRANSFER_ENDPOINT,
         },
         ui: {
             gateway: process.env.UI_GATEWAY_ENDPOINT || '/gateway',
@@ -37,6 +39,8 @@ export const opensourceEndpoints = {
 
             charts: process.env.CHARTS_ENDPOINT || '/',
             uploader: process.env.UI_UPLOADER_ENDPOINT || '/uploader',
+
+            transfer: process.env.TRANSFER_ENDPOINT,
         },
         ui: {
             gateway: process.env.UI_GATEWAY_ENDPOINT || '/gateway',

diff --git a/src/shared/endpoints/schema/opensource.ts b/src/shared/endpoints/schema/opensource.ts
@@ -13,6 +13,9 @@ export const opensourceEndpoints = {
         us: {
             endpoint: endpoints.development.api.us,
         },
+        transfer: {
+            endpoint: endpoints.development.api.transfer,
+        },
     },
     production: {
         bi: {
@@ -26,5 +29,8 @@ export const opensourceEndpoints = {
         us: {
             endpoint: endpoints.production.api.us,
         },
+        transfer: {
+            endpoint: endpoints.development.api.transfer,
+        },
     },
 };
diff --git a/src/shared/schema/simple-schema.ts b/src/shared/schema/simple-schema.ts
@@ -3,6 +3,7 @@ import {getTypedApiFactory} from '@gravity-ui/gateway';
 import bi from './bi';
 import biConverter from './bi-converter';
 import extensions from './extensions';
+import transfer from './transfer';
 import us from './us';
 
 // Scheme for all local requests except mix
@@ -11,6 +12,7 @@ export const simpleSchema = {
     bi,
     biConverter,
     extensions,
+    transfer,
 };
 
 export const getTypedApi = getTypedApiFactory<{root: typeof simpleSchema}>();
diff --git a/src/shared/schema/transfer/actions/exports.ts b/src/shared/schema/transfer/actions/exports.ts
@@ -0,0 +1,24 @@
+import {createAction} from '../../gateway-utils';
+import type {
+    GetExportStatusArgs,
+    GetExportStatusResponse,
+    StartExportArgs,
+    StartExportResponse,
+} from '../types';
+
+export const exportActions = {
+    startExport: createAction<StartExportResponse, StartExportArgs>({
+        method: 'POST',
+        path: () => '/workbooks/export',
+        params: ({workbookId}) => ({
+            body: {
+                workbookId,
+            },
+        }),
+    }),
+
+    getExportStatus: createAction<GetExportStatusResponse, GetExportStatusArgs>({
+        method: 'GET',
+        path: ({exportId}) => `/workbooks/export/${exportId}`,
+    }),
+};
diff --git a/src/shared/schema/transfer/actions/imports.ts b/src/shared/schema/transfer/actions/imports.ts
@@ -0,0 +1,9 @@
+import {createAction} from '../../gateway-utils';
+import type {GetImportStatusArgs, GetImportStatusResponse} from '../types';
+
+export const importActions = {
+    getImportStatus: createAction<GetImportStatusResponse, GetImportStatusArgs>({
+        method: 'GET',
+        path: ({importId}) => `/workbooks/import/${importId}`,
+    }),
+};
diff --git a/src/shared/schema/transfer/actions/index.ts b/src/shared/schema/transfer/actions/index.ts
@@ -0,0 +1,7 @@
+import {exportActions} from './exports';
+import {importActions} from './imports';
+
+export const actions = {
+    ...exportActions,
+    ...importActions,
+};
diff --git a/src/shared/schema/transfer/index.ts b/src/shared/schema/transfer/index.ts
@@ -0,0 +1,9 @@
+import {getServiceEndpoints} from '../../endpoints/schema';
+
+import {actions} from './actions';
+
+export default {
+    actions,
+    endpoints: getServiceEndpoints('transfer'),
+    serviceName: 'transfer',
+};
diff --git a/src/shared/schema/transfer/types/exports.ts b/src/shared/schema/transfer/types/exports.ts
@@ -0,0 +1,17 @@
+export type StartExportArgs = {
+    workbookId: string;
+};
+
+export type StartExportResponse = {
+    exportId: string;
+};
+
+export type GetExportStatusArgs = {
+    exportId: string;
+};
+
+export type GetExportStatusResponse = {
+    exportId: string;
+    status: 'pending' | 'success' | 'error';
+    data: Record<string, unknown>;
+};
diff --git a/src/shared/schema/transfer/types/imports.ts b/src/shared/schema/transfer/types/imports.ts
@@ -0,0 +1,9 @@
+export type GetImportStatusArgs = {
+    importId: string;
+};
+
+export type GetImportStatusResponse = {
+    importId: string;
+    status: 'pending' | 'success' | 'error';
+    progress: number;
+};
diff --git a/src/shared/schema/transfer/types/index.ts b/src/shared/schema/transfer/types/index.ts
@@ -0,0 +1,2 @@
+export * from './exports';
+export * from './imports';
diff --git a/src/ui/components/CollectionsStructure/ExportWorkbookDialog.tsx b/src/ui/components/CollectionsStructure/ExportWorkbookDialog.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {Dialog} from '@gravity-ui/uikit';
+
+import DialogManager from '../../components/DialogManager/DialogManager';
+import {getSdk} from '../../libs/schematic-sdk';
+
+export type Props = {
+    open: boolean;
+    workbookId: string;
+    workbookTitle: string;
+    onClose: () => void;
+};
+
+export const DIALOG_EXPORT_WORKBOOK = Symbol('DIALOG_EXPORT_WORKBOOK');
+
+export type OpenDialogExportWorkbookArgs = {
+    id: typeof DIALOG_EXPORT_WORKBOOK;
+    props: Props;
+};
+
+export const ExportWorkbookDialog: React.FC<Props> = ({
+    open,
+    workbookId,
+    workbookTitle,
+    onClose,
+}) => {
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const startExport = React.useCallback(() => {
+        setIsLoading(true);
+
+        getSdk()
+            .transfer.startExport({workbookId})
+            .then(async ({exportId}) => {
+                let isReady = false;
+                while (!isReady) {
+                    await new Promise((resolve) => {
+                        setTimeout(resolve, 1000);
+                    });
+
+                    try {
+                        const exportWorkbook = await getSdk().transfer.getExportStatus({exportId});
+
+                        if (exportWorkbook.status === 'success') {
+                            isReady = true;
+                            setIsLoading(false);
+
+                            // Create blob link to download
+                            const url = window.URL.createObjectURL(
+                                new Blob([JSON.stringify(exportWorkbook.data)]),
+                            );
+                            const link = document.createElement('a');
+                            link.href = url;
+                            link.setAttribute('download', `export-${exportId}.json`);
+
+                            // Append to html link element page
+                            document.body.appendChild(link);
+
+                            // Start download (close modal TODO: use ref)
+                            link.click();
+
+                            // Clean up and remove the link
+                            link.parentNode?.removeChild(link);
+                        }
+                    } catch (err) {}
+                }
+            });
+    }, [workbookId]);
+
+    return (
+        <Dialog open={open} onClose={onClose}>
+            <Dialog.Header caption="Export workbook" />
+            <Dialog.Body>
+                <div>Export &quot;{workbookTitle}&quot;?</div>
+                <div> It may take a few minutes, don&apos;t close the dialog.</div>
+            </Dialog.Body>
+            <Dialog.Footer
+                onClickButtonCancel={onClose}
+                onClickButtonApply={startExport}
+                textButtonApply="Start export"
+                propsButtonApply={{
+                    disabled: isLoading,
+                    loading: isLoading,
+                }}
+                textButtonCancel="Cancel"
+            />
+        </Dialog>
+    );
+};
+
+DialogManager.registerDialog(DIALOG_EXPORT_WORKBOOK, ExportWorkbookDialog);
diff --git a/src/ui/components/CollectionsStructure/ImportWorkbookDialog.tsx b/src/ui/components/CollectionsStructure/ImportWorkbookDialog.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+
+import {Dialog, Progress, TextInput} from '@gravity-ui/uikit';
+import axios from 'axios';
+
+import DialogManager from '../../components/DialogManager/DialogManager';
+import {getSdk} from '../../libs/schematic-sdk';
+
+export type Props = {
+    open: boolean;
+    initialCollectionId?: string | null;
+    onClose: () => void;
+};
+
+export const DIALOG_IMPORT_WORKBOOK = Symbol('DIALOG_IMPORT_WORKBOOK');
+
+export type OpenDialogImportWorkbookArgs = {
+    id: typeof DIALOG_IMPORT_WORKBOOK;
+    props: Props;
+};
+
+export const ImportWorkbookDialog: React.FC<Props> = ({
+    open,
+    // initialCollectionId = null,
+    onClose,
+}) => {
+    const [progress, setProgress] = React.useState<number>(0);
+    const [title, setTitle] = React.useState<string>();
+    const [file, setFile] = React.useState<File>();
+
+    const handleUploadFile = React.useCallback((event) => {
+        setFile(event.target.files[0]);
+    }, []);
+
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    const startImport = React.useCallback(() => {
+        if (title && file) {
+            setIsLoading(true);
+
+            const url = 'http://localhost:3001/workbooks/import';
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('fileName', file.name);
+            formData.append('title', title);
+            const config = {
+                headers: {
+                    'content-type': 'multipart/form-data',
+                },
+            };
+            axios
+                .post<any, {data: {importId: string}}>(url, formData, config)
+                .then(async (response) => {
+                    let isReady = false;
+                    while (!isReady) {
+                        await new Promise((resolve) => {
+                            setTimeout(resolve, 3000);
+                        });
+
+                        try {
+                            const importWorkbook = await getSdk().transfer.getImportStatus({
+                                importId: response.data.importId,
+                            });
+
+                            setProgress(importWorkbook.progress);
+
+                            if (importWorkbook.status === 'success') {
+                                isReady = true;
+                                window.location.reload();
+                                onClose();
+                            }
+                        } catch (err) {}
+                    }
+                });
+        }
+    }, [file, onClose, title]);
+
+    return (
+        <Dialog open={open} onClose={onClose}>
+            <Dialog.Header caption="Import workbook" />
+            <Dialog.Body>
+                <div>Title:</div>
+                <div>
+                    <TextInput value={title} onUpdate={setTitle} />
+                </div>
+                <br />
+                <div>Upload the export file:</div>
+                <div>
+                    <input type="file" onChange={handleUploadFile} />
+                </div>
+                {isLoading ? (
+                    <React.Fragment>
+                        <br />
+                        <Progress text="Importing" theme="misc" value={progress} loading={true} />
+                    </React.Fragment>
+                ) : null}
+            </Dialog.Body>
+            <Dialog.Footer
+                onClickButtonCancel={onClose}
+                onClickButtonApply={startImport}
+                textButtonApply="Start import"
+                propsButtonApply={{
+                    disabled: isLoading || !file || !title,
+                    loading: isLoading,
+                }}
+                textButtonCancel="Cancel"
+            />
+        </Dialog>
+    );
+};
+
+DialogManager.registerDialog(DIALOG_IMPORT_WORKBOOK, ImportWorkbookDialog);
diff --git a/src/ui/components/CollectionsStructure/index.ts b/src/ui/components/CollectionsStructure/index.ts
@@ -25,3 +25,5 @@ export {
     CreateEntryInWorkbookDialog,
     DIALOG_CREATE_ENTRY_IN_WORKBOOK,
 } from './CreateEntryInWorkbookDialog';
+export {ExportWorkbookDialog, DIALOG_EXPORT_WORKBOOK} from './ExportWorkbookDialog';
+export {ImportWorkbookDialog, DIALOG_IMPORT_WORKBOOK} from './ImportWorkbookDialog';
diff --git a/src/ui/store/actions/openDialogTypes.ts b/src/ui/store/actions/openDialogTypes.ts
@@ -32,6 +32,8 @@ import type {OpenDialogMoveCollectionsWorkbooksArgs} from '../../components/Coll
 import type {OpenDialogMoveCollectionArgs} from '../../components/CollectionsStructure/MoveCollectionDialog';
 import type {OpenDialogMoveWorkbookArgs} from '../../components/CollectionsStructure/MoveWorkbookDialog';
 import type {OpenDialogCopyWorkbookArgs} from '../../components/CollectionsStructure/CopyWorkbookDialog';
+import type {OpenDialogExportWorkbookArgs} from '../../components/CollectionsStructure/ExportWorkbookDialog';
+import type {OpenDialogImportWorkbookArgs} from '../../components/CollectionsStructure/ImportWorkbookDialog';
 import type {OpenDialogMigrateEntryToWorkbookArgs} from '../../components/CollectionsStructure/MigrateEntryToWorkbookDialog';
 import type {OpenDialogEditWorkbookArgs} from '../../components/CollectionsStructure/EditWorkbookDialog';
 import type {OpenDialogCreateWorkbookArgs} from '../../components/CollectionsStructure/CreateWorkbookDialog';
@@ -109,4 +111,6 @@ export type OpenDialogArgs<T = unknown> =
     | OpenDialogIamAccessArgs
     | OpenDialogCreateEntryInWorkbookArgs
     | OpenDialogTooltipSettingsArgs
-    | OpenDialogChangeDatasetFieldsArgs;
+    | OpenDialogChangeDatasetFieldsArgs
+    | OpenDialogExportWorkbookArgs
+    | OpenDialogImportWorkbookArgs;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './exports';
		export * from './imports';