refactor(Preview): migrate to ts (#460)

Author: artemmufazalov

src/containers/Tenant/Preview/Preview.js

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;

src/containers/Tenant/Preview/Preview.scss renamed to src/containers/Tenant/Query/Preview/Preview.scss

@@ -0,0 +1,121 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader, Button} from '@gravity-ui/uikit';
+
+import type {EPathType} from '../../../../types/api/schema';
+import {sendQuery, setQueryOptions} from '../../../../store/reducers/preview';
+import {setShowPreview} from '../../../../store/reducers/schema/schema';
+import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+
+import {Icon} from '../../../../components/Icon';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryResultTable} from '../../../../components/QueryResultTable';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+
+import {isTableType} from '../../utils/schema';
+
+import i18n from '../i18n';
+
+import './Preview.scss';
+
+const b = cn('kv-preview');
+
+interface PreviewProps {
+    database: string;
+    type: EPathType | undefined;
+}
+
+export const Preview = ({database, type}: PreviewProps) => {
+    const dispatch = useDispatch();
+
+    const {data = {}, loading, error, wasLoaded} = useTypedSelector((state) => state.preview);
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+
+    const sendQueryForPreview = useCallback(
+        (isBackground) => {
+            if (!isTableType(type)) {
+                return;
+            }
+
+            if (!isBackground) {
+                dispatch(
+                    setQueryOptions({
+                        wasLoaded: false,
+                        data: undefined,
+                    }),
+                );
+            }
+
+            const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+
+            dispatch(
+                sendQuery({
+                    query,
+                    database,
+                    action: 'execute-scan',
+                }),
+            );
+        },
+        [dispatch, database, currentSchemaPath, type],
+    );
+
+    useAutofetcher(sendQueryForPreview, [sendQueryForPreview], autorefresh);
+
+    const handleClosePreview = () => {
+        dispatch(setShowPreview(false));
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className={b('header')}>
+                <div className={b('title')}>
+                    {i18n('preview.title')}{' '}
+                    <div className={b('table-name')}>{currentSchemaPath}</div>
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(error)} />
+                    <Button
+                        view="flat-secondary"
+                        onClick={handleClosePreview}
+                        title={i18n('preview.close')}
+                    >
+                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader-container')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    let message;
+
+    if (!isTableType(type)) {
+        message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
+    } else if (error) {
+        message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
+    }
+
+    const content = message ?? (
+        <div className={b('result')}>
+            <QueryResultTable data={data.result} columns={data.columns} />
+        </div>
+    );
+
+    return (
+        <div className={b()}>
+            {renderHeader()}
+            {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
+        </div>
+    );
+};

src/containers/Tenant/Query/Preview/Preview.tsx

@@ -35,7 +35,7 @@ import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
 } from '../../utils/paneVisibilityToggleHelpers';
-import Preview from '../../Preview/Preview';
+import {Preview} from '../Preview/Preview';
 
 import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
@@ -382,12 +382,8 @@ function QueryEditor(props) {
     };
 
     const renderPreview = () => {
-        const {path, type, currentSchema = {}} = props;
-        const partCount = currentSchema?.PathDescription?.TableStats?.PartCount;
-        // onExpandResultHandler();
-        return (
-            <Preview database={path} table={currentSchema.Path} type={type} partCount={partCount} />
-        );
+        const {path, type} = props;
+        return <Preview database={path} type={type} />;
     };
 
     const handlePreviousHistoryClick = () => {

src/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -1,12 +1,19 @@
 {
   "controls.query-mode-selector_type": "Query type:",
+
   "tabs.newQuery": "New query",
   "tabs.history": "History",
   "tabs.saved": "Saved",
+
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
+
   "delete-dialog.header": "Delete query",
   "delete-dialog.question": "Are you sure you want to delete query",
   "delete-dialog.delete": "Delete",
-  "delete-dialog.cancel": "Cancel"
+  "delete-dialog.cancel": "Cancel",
+
+  "preview.title": "Preview",
+  "preview.not-available": "Preview is not available",
+  "preview.close": "Close preview"
 }

src/containers/Tenant/Query/i18n/en.json

@@ -1,12 +1,19 @@
 {
   "controls.query-mode-selector_type": "Тип запроса:",
+
   "tabs.newQuery": "Новый запрос",
   "tabs.history": "История",
   "tabs.saved": "Сохраненные",
+
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
+
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",
-  "delete-dialog.cancel": "Отменить"
+  "delete-dialog.cancel": "Отменить",
+
+  "preview.title": "Предпросмотр",
+  "preview.not-available": "Предпросмотр недоступен",
+  "preview.close": "Закрыть предпросмотр"
 }