ydb-embedded-ui 4.5.2 → 4.7.0

package/dist/containers/Tenant/{QueryEditor → Query/QueryEditor}/QueryEditor.js

@@ -5,42 +5,44 @@ import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import MonacoEditor from 'react-monaco-editor';
 
-import SplitPane from '../../../components/SplitPane';
-import {QueryResultTable} from '../../../components/QueryResultTable';
-
-import SavedQueries from './SavedQueries/SavedQueries';
-import QueryResult from './QueryResult/QueryResult';
-import QueryExplain from './QueryExplain/QueryExplain';
-import {QueryEditorControls} from './QueryEditorControls/QueryEditorControls';
-import {OldQueryEditorControls} from './QueryEditorControls/OldQueryEditorControls';
+import SplitPane from '../../../../components/SplitPane';
+import {QueryResultTable} from '../../../../components/QueryResultTable';
 
 import {
     sendExecuteQuery,
-    changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
     MONACO_HOT_KEY_ACTIONS,
     setMonacoHotKey,
-} from '../../../store/reducers/executeQuery';
-import {getExplainQuery, getExplainQueryAst} from '../../../store/reducers/explainQuery';
-import {getParsedSettingValue, setSettingValue} from '../../../store/reducers/settings/settings';
+} from '../../../../store/reducers/executeQuery';
+import {getExplainQuery, getExplainQueryAst} from '../../../../store/reducers/explainQuery';
+import {getParsedSettingValue, setSettingValue} from '../../../../store/reducers/settings/settings';
+import {setShowPreview} from '../../../../store/reducers/schema/schema';
 import {
     DEFAULT_IS_QUERY_RESULT_COLLAPSED,
     DEFAULT_SIZE_RESULT_PANE_KEY,
     SAVED_QUERIES_KEY,
     QUERY_INITIAL_MODE_KEY,
-    ENABLE_QUERY_MODES_FOR_EXPLAIN,
-} from '../../../utils/constants';
+    ENABLE_ADDITIONAL_QUERY_MODES,
+} from '../../../../utils/constants';
+import {useSetting} from '../../../../utils/hooks';
+import {QueryModes} from '../../../../types/store/query';
 
-import './QueryEditor.scss';
-import QueriesHistory from './QueriesHistory/QueriesHistory';
 import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
-} from '../utils/paneVisibilityToggleHelpers';
-import Preview from '../Preview/Preview';
-import {setShowPreview} from '../../../store/reducers/schema';
+} from '../../utils/paneVisibilityToggleHelpers';
+import Preview from '../../Preview/Preview';
+
+import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
+import {ExplainResult} from '../ExplainResult/ExplainResult';
+import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
+import {OldQueryEditorControls} from '../QueryEditorControls/OldQueryEditorControls';
+
+import {getPreparedResult} from '../utils/getPreparedResult';
+
+import './QueryEditor.scss';
 
 const TABLE_SETTINGS = {
     sortable: false,
@@ -64,6 +66,7 @@ const b = cn('query-editor');
 
 const propTypes = {
     sendExecuteQuery: PropTypes.func,
+    changeUserInput: PropTypes.func,
     path: PropTypes.string,
     response: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
     executeQuery: PropTypes.object,
@@ -83,7 +86,15 @@ function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
-    const [queryMode, setQueryMode] = useState(props.initialQueryMode);
+    const [queryMode, setQueryMode] = useSetting(QUERY_INITIAL_MODE_KEY);
+    const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
+
+    useEffect(() => {
+        const isNewQueryMode = queryMode !== QueryModes.script && queryMode !== QueryModes.scan;
+        if (!enableAdditionalQueryModes && isNewQueryMode) {
+            setQueryMode(QueryModes.script);
+        }
+    }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
 
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
@@ -313,11 +324,11 @@ function QueryEditor(props) {
                 />
             );
         }
-        const textResults = getPreparedResult();
+        const textResults = getPreparedResult(data);
         const disabled = !textResults.length || resultType !== RESULT_TYPES.EXECUTE;
 
         return data || error ? (
-            <QueryResult
+            <ExecuteResult
                 result={content}
                 stats={stats}
                 error={error}
@@ -337,7 +348,7 @@ function QueryEditor(props) {
         } = props;
 
         return (
-            <QueryExplain
+            <ExplainResult
                 error={error}
                 explain={data}
                 astQuery={handleAstQuery}
@@ -425,46 +436,6 @@ function QueryEditor(props) {
         return queries.length - 1 === currentIndex;
     };
 
-    const renderHistoryNavigation = () => {
-        const {changeUserInput} = props;
-        return (
-            <div className={b('history-controls')}>
-                <QueriesHistory changeUserInput={changeUserInput} />
-            </div>
-        );
-    };
-
-    const getPreparedResult = () => {
-        const {
-            executeQuery: {data},
-        } = props;
-        const columnDivider = '\t';
-        const rowDivider = '\n';
-
-        if (!data?.result?.length) {
-            return '';
-        }
-
-        const columnHeaders = Object.keys(data.result[0]);
-        const rows = [columnHeaders].concat(data.result);
-
-        return rows
-            .map((item) => {
-                const row = [];
-
-                for (const field in item) {
-                    if (typeof item[field] === 'object' || Array.isArray(item[field])) {
-                        row.push(JSON.stringify(item[field]));
-                    } else {
-                        row.push(item[field]);
-                    }
-                }
-
-                return row.join(columnDivider);
-            })
-            .join(rowDivider);
-    };
-
     const onChangeWindow = _.throttle(() => {
         updateEditor();
     }, 100);
@@ -502,23 +473,10 @@ function QueryEditor(props) {
         setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
     };
 
-    const onDeleteQueryHandler = (queryName) => {
-        const {savedQueries = [], setSettingValue} = props;
-        const newSavedQueries = savedQueries.filter(
-            (el) => el.name.toLowerCase() !== queryName.toLowerCase(),
-        );
-        setSettingValue(SAVED_QUERIES_KEY, JSON.stringify(newSavedQueries));
-    };
-
-    const onUpdateQueryMode = (mode) => {
-        setQueryMode(mode);
-        props.setSettingValue(QUERY_INITIAL_MODE_KEY, mode);
-    };
-
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, enableQueryModesForExplain} = props;
+        const {executeQuery, explainQuery, savedQueries} = props;
 
-        if (enableQueryModesForExplain) {
+        if (enableAdditionalQueryModes) {
             return (
                 <QueryEditorControls
                     onRunButtonClick={handleSendExecuteClick}
@@ -528,7 +486,7 @@ function QueryEditor(props) {
                     onSaveQueryClick={onSaveQueryHandler}
                     savedQueries={savedQueries}
                     disabled={!executeQuery.input}
-                    onUpdateQueryMode={onUpdateQueryMode}
+                    onUpdateQueryMode={setQueryMode}
                     queryMode={queryMode}
                 />
             );
@@ -543,27 +501,12 @@ function QueryEditor(props) {
                 onSaveQueryClick={onSaveQueryHandler}
                 savedQueries={savedQueries}
                 disabled={!executeQuery.input}
-                onUpdateQueryMode={onUpdateQueryMode}
+                onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
             />
         );
     };
 
-    const renderUpperControls = () => {
-        const {savedQueries, changeUserInput} = props;
-
-        return (
-            <div className={b('upper-controls')}>
-                {renderHistoryNavigation()}
-                <SavedQueries
-                    savedQueries={savedQueries}
-                    changeUserInput={changeUserInput}
-                    onDeleteQuery={onDeleteQueryHandler}
-                />
-            </div>
-        );
-    };
-
     const {executeQuery, theme} = props;
     const result = renderResult();
 
@@ -578,7 +521,11 @@ function QueryEditor(props) {
                 collapsedSizes={[100, 0]}
                 onSplitStartDragAdditional={onSplitStartDragAdditional}
             >
-                <div className={b('pane-wrapper')}>
+                <div
+                    className={b('pane-wrapper', {
+                        top: true,
+                    })}
+                >
                     <div className={b('monaco-wrapper')}>
                         <div className={b('monaco')}>
                             <MonacoEditor
@@ -592,7 +539,6 @@ function QueryEditor(props) {
                         </div>
                     </div>
                     {renderControls()}
-                    {renderUpperControls()}
                 </div>
                 <div className={b('pane-wrapper')}>
                     {props.showPreview ? renderPreview() : result}
@@ -607,8 +553,6 @@ const mapStateToProps = (state) => {
         executeQuery: state.executeQuery,
         explainQuery: state.explainQuery,
         savedQueries: getParsedSettingValue(state, SAVED_QUERIES_KEY),
-        initialQueryMode: getParsedSettingValue(state, QUERY_INITIAL_MODE_KEY),
-        enableQueryModesForExplain: getParsedSettingValue(state, ENABLE_QUERY_MODES_FOR_EXPLAIN),
         showPreview: state.schema.showPreview,
         currentSchema: state.schema.currentSchema,
         monacoHotKey: state.executeQuery?.monacoHotKey,
@@ -617,7 +561,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
     sendExecuteQuery,
-    changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,

package/dist/containers/Tenant/{QueryEditor → Query/QueryEditor}/QueryEditor.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .query-editor {
     position: relative;
@@ -24,7 +24,8 @@
 
         width: 100%;
         height: 100%;
-        padding-top: 9px;
+
+        border: 1px solid var(--yc-color-line-generic);
     }
 
     &__monaco-wrapper {
@@ -40,28 +41,11 @@
         flex-direction: column;
 
         background-color: var(--yc-color-base-background);
-    }
-
-    &__upper-controls {
-        position: absolute;
-        top: -38px;
-        right: 20px;
-
-        display: flex;
-        gap: 12px;
-
-        justify-content: flex-end;
-        align-items: center;
-    }
-
-    &__history-controls {
-        display: flex;
-        align-items: center;
-    }
 
-    &__history-label {
-        margin-right: 8px;
+        &_top {
+            padding: 0 16px;
 
-        color: var(--yc-color-text-secondary);
+            border-bottom: 1px solid var(--yc-color-line-generic);
+        }
     }
 }

package/dist/containers/Tenant/{QueryEditor → Query}/QueryEditorControls/OldQueryEditorControls.tsx

@@ -6,10 +6,17 @@ import {Icon} from '../../../../components/Icon';
 
 import SaveQuery from '../SaveQuery/SaveQuery';
 
-import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+import {QueryEditorControlsProps, b} from './shared';
 
 import './QueryEditorControls.scss';
 
+type OldQueryModes = QueryModes.script | QueryModes.scan;
+
+export const QueryModeSelectorTitles = {
+    [QueryModes.script]: 'Script',
+    [QueryModes.scan]: 'Scan',
+} as const;
+
 export const OldQueryEditorControls = ({
     onRunButtonClick,
     runIsLoading,
@@ -26,7 +33,7 @@ export const OldQueryEditorControls = ({
             return {
                 text: `Run ${title}`,
                 action: () => {
-                    onUpdateQueryMode(mode as QueryModes);
+                    onUpdateQueryMode(mode as OldQueryModes);
                 },
             };
         });
@@ -44,7 +51,7 @@ export const OldQueryEditorControls = ({
                         loading={runIsLoading}
                     >
                         <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {`Run ${QueryModeSelectorTitles[queryMode]}`}
+                        {`Run ${QueryModeSelectorTitles[queryMode as OldQueryModes]}`}
                     </Button>
                     <DropdownMenu
                         items={runModeSelectorMenuItems}

package/dist/containers/Tenant/{QueryEditor → Query}/QueryEditorControls/QueryEditorControls.scss

@@ -5,11 +5,8 @@
     align-items: flex-end;
 
     min-height: 40px;
-    padding: 5px 20px;
+    padding: 5px 0px;
 
-    border-top: 1px solid var(--yc-color-line-generic);
-    border-bottom: 1px solid var(--yc-color-line-generic);
-    background-color: var(--yc-color-base-background);
     gap: 24px;
 
     &__left {

package/dist/containers/Tenant/{QueryEditor → Query}/QueryEditorControls/QueryEditorControls.tsx

@@ -8,10 +8,17 @@ import SaveQuery from '../SaveQuery/SaveQuery';
 
 import i18n from '../i18n';
 
-import {b, QueryEditorControlsProps, QueryModeSelectorTitles} from './shared';
+import {QueryEditorControlsProps, b} from './shared';
 
 import './QueryEditorControls.scss';
 
+export const QueryModeSelectorTitles = {
+    [QueryModes.script]: 'Script',
+    [QueryModes.scan]: 'Scan',
+    [QueryModes.data]: 'Data',
+    [QueryModes.query]: 'Query',
+} as const;
+
 export const QueryEditorControls = ({
     onRunButtonClick,
     runIsLoading,

package/dist/containers/Tenant/{QueryEditor → Query}/QueryEditorControls/shared.ts

@@ -1,14 +1,9 @@
 import block from 'bem-cn-lite';
 
-import {QueryModes} from '../../../../types/store/query';
+import type {QueryModes} from '../../../../types/store/query';
 
 export const b = block('ydb-query-editor-controls');
 
-export const QueryModeSelectorTitles = {
-    [QueryModes.script]: 'Script',
-    [QueryModes.scan]: 'Scan',
-} as const;
-
 export interface QueryEditorControlsProps {
     onRunButtonClick: (mode?: QueryModes) => void;
     runIsLoading: boolean;

package/dist/containers/Tenant/Query/QueryTabs/QueryTabs.tsx

@@ -0,0 +1,59 @@
+import {useLocation} from 'react-router';
+
+import {Tabs} from '@gravity-ui/uikit';
+
+import type {TenantQueryTab} from '../../../../store/reducers/tenant/types';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+import {parseQuery} from '../../../../routes';
+
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
+
+import i18n from '../i18n';
+
+const newQuery = {
+    id: TENANT_QUERY_TABS_ID.newQuery,
+    title: i18n('tabs.newQuery'),
+};
+const history = {
+    id: TENANT_QUERY_TABS_ID.history,
+    title: i18n('tabs.history'),
+};
+const saved = {
+    id: TENANT_QUERY_TABS_ID.saved,
+    title: i18n('tabs.saved'),
+};
+
+const queryEditorTabs = [newQuery, history, saved];
+
+interface QueryEditorTabsProps {
+    className?: string;
+    activeTab?: TenantQueryTab;
+}
+
+export const QueryTabs = ({className, activeTab}: QueryEditorTabsProps) => {
+    const location = useLocation();
+    const queryParams = parseQuery(location);
+
+    return (
+        <div className={className}>
+            <Tabs
+                size="l"
+                allowNotSelected={true}
+                activeTab={activeTab}
+                items={queryEditorTabs}
+                wrapTo={({id}, node) => {
+                    const path = getTenantPath({
+                        ...queryParams,
+                        [TenantTabsGroups.queryTab]: id,
+                    });
+                    return (
+                        <InternalLink to={path} key={id}>
+                            {node}
+                        </InternalLink>
+                    );
+                }}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/{QueryEditor → Query}/SaveQuery/SaveQuery.js

@@ -105,21 +105,21 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
     const renderSaveButton = (onClick) => {
         return (
             <Button onClick={onClick} disabled={saveButtonDisabled}>
-                Save query
+                {queryNameToEdit ? 'Edit query' : 'Save query'}
             </Button>
         );
     };
 
     const renderSaveDropdownMenu = () => {
         const items = [
-            {
-                action: onSaveQueryClick,
-                text: 'Save as new',
-            },
             {
                 action: onEditQueryClick,
                 text: 'Edit existing',
             },
+            {
+                action: onSaveQueryClick,
+                text: 'Save as new',
+            },
         ];
         return (
             <DropdownMenu items={items} switcher={renderSaveButton()} popupPlacement={['top']} />

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.scss

@@ -0,0 +1,55 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-saved-queries {
+    $block: &;
+
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 16px;
+
+    @include flex-container();
+    @include table-styles;
+
+    &__row {
+        cursor: pointer;
+
+        :hover {
+            #{$block}__controls {
+                display: flex;
+            }
+        }
+    }
+
+    &__query-name {
+        overflow: hidden;
+
+        white-space: pre-wrap;
+        text-overflow: ellipsis;
+    }
+
+    &__query {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__query-body {
+        overflow: hidden;
+        flex-grow: 1;
+
+        max-width: 100%;
+
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+
+    &__controls {
+        display: none;
+    }
+
+    &__dialog-query-name {
+        font-weight: 500;
+    }
+}

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -0,0 +1,150 @@
+import {MouseEvent, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import {Dialog, Button} from '@gravity-ui/uikit';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {SavedQuery} from '../../../../types/store/query';
+import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
+import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {IconWrapper} from '../../../../components/Icon';
+
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+
+import i18n from '../i18n';
+
+import './SavedQueries.scss';
+
+const b = block('ydb-saved-queries');
+
+interface DeleteDialogProps {
+    visible: boolean;
+    queryName: string;
+    onCancelClick: VoidFunction;
+    onConfirmClick: VoidFunction;
+}
+
+const DeleteDialog = ({visible, queryName, onCancelClick, onConfirmClick}: DeleteDialogProps) => {
+    return (
+        <Dialog
+            open={visible}
+            hasCloseButton={false}
+            size="s"
+            onClose={onCancelClick}
+            onEnterKeyDown={onConfirmClick}
+        >
+            <Dialog.Header caption={i18n('delete-dialog.header')} />
+            <Dialog.Body className={b('dialog-body')}>
+                {i18n('delete-dialog.question')}
+                <span className={b('dialog-query-name')}>{` ${queryName}?`}</span>
+            </Dialog.Body>
+            <Dialog.Footer
+                textButtonApply={i18n('delete-dialog.delete')}
+                textButtonCancel={i18n('delete-dialog.cancel')}
+                onClickButtonCancel={onCancelClick}
+                onClickButtonApply={onConfirmClick}
+            />
+        </Dialog>
+    );
+};
+
+interface SavedQueriesProps {
+    savedQueries: SavedQuery[];
+    changeUserInput: (value: {input: string}) => void;
+    onDeleteQuery: (queryName: string) => void;
+}
+
+export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: SavedQueriesProps) => {
+    const dispatch = useDispatch();
+
+    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
+    const [queryNameToDelete, setQueryNameToDelete] = useState<string>('');
+
+    const closeDeleteDialog = () => {
+        setIsDeleteDialogVisible(false);
+        setQueryNameToDelete('');
+    };
+
+    const onCancelDeleteClick = () => {
+        closeDeleteDialog();
+    };
+
+    const onConfirmDeleteClick = () => {
+        closeDeleteDialog();
+        onDeleteQuery(queryNameToDelete);
+        setQueryNameToDelete('');
+    };
+
+    const onQueryClick = (queryText: string, queryName: string) => {
+        changeUserInput({input: queryText});
+        dispatch(setQueryNameToEdit(queryName));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+
+    const onDeleteQueryClick = (queryName: string) => {
+        return (event: MouseEvent) => {
+            event.stopPropagation();
+            setIsDeleteDialogVisible(true);
+            setQueryNameToDelete(queryName);
+        };
+    };
+
+    const columns: Column<SavedQuery>[] = [
+        {
+            name: 'name',
+            header: 'Name',
+            render: ({row: query}) => <div className={b('query-name')}>{query.name}</div>,
+            width: 200,
+        },
+        {
+            name: 'body',
+            header: 'Query Text',
+            render: ({row: query}) => (
+                <div className={b('query')}>
+                    <div className={b('query-body')}>
+                        <TruncatedQuery value={query.body} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                    </div>
+                    <span className={b('controls')}>
+                        <Button view="flat-secondary">
+                            <IconWrapper name="pencil" viewBox="0 0 24 24" />
+                        </Button>
+                        <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
+                            <IconWrapper name="trash" viewBox="0 0 24 24" />
+                        </Button>
+                    </span>
+                </div>
+            ),
+            sortable: false,
+        },
+    ];
+
+    return (
+        <>
+            <div className={b()}>
+                <DataTable
+                    theme="yandex-cloud"
+                    columns={columns}
+                    data={savedQueries}
+                    settings={QUERY_TABLE_SETTINGS}
+                    emptyDataMessage={i18n('saved.empty')}
+                    rowClassName={() => b('row')}
+                    onRowClick={(row) => onQueryClick(row.body, row.name)}
+                    initialSortOrder={{
+                        columnId: 'name',
+                        order: DataTable.ASCENDING,
+                    }}
+                />
+            </div>
+            <DeleteDialog
+                visible={isDeleteDialogVisible}
+                queryName={queryNameToDelete}
+                onCancelClick={onCancelDeleteClick}
+                onConfirmClick={onConfirmDeleteClick}
+            />
+        </>
+    );
+};