ydb-embedded-ui 4.6.0 → 4.7.0

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

@@ -0,0 +1,73 @@
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import type {EPathType} from '../../../types/api/schema';
+import type {SavedQuery} from '../../../types/store/query';
+import {changeUserInput} from '../../../store/reducers/executeQuery';
+import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
+import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {SAVED_QUERIES_KEY} from '../../../utils/constants';
+
+import {QueryTabs} from './QueryTabs/QueryTabs';
+import {SavedQueries} from './SavedQueries/SavedQueries';
+import QueriesHistory from './QueriesHistory/QueriesHistory';
+import QueryEditor from './QueryEditor/QueryEditor';
+
+import './Query.scss';
+
+const b = block('ydb-query');
+
+interface QueryProps {
+    theme: string;
+    path?: string;
+    type?: EPathType;
+}
+
+export const Query = (props: QueryProps) => {
+    const dispatch = useDispatch();
+
+    const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
+
+    const [savedQueries, setSavedQueries] = useSetting<SavedQuery[]>(SAVED_QUERIES_KEY, []);
+
+    const handleDeleteQuery = (queryName: string) => {
+        const newSavedQueries = savedQueries.filter(
+            (el) => el.name.toLowerCase() !== queryName.toLowerCase(),
+        );
+        setSavedQueries(newSavedQueries);
+    };
+
+    const handleUserInputChange = (value: {input: string}) => {
+        dispatch(changeUserInput(value));
+    };
+
+    const renderContent = () => {
+        switch (queryTab) {
+            case TENANT_QUERY_TABS_ID.newQuery: {
+                return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
+            }
+            case TENANT_QUERY_TABS_ID.history: {
+                return <QueriesHistory changeUserInput={handleUserInputChange} />;
+            }
+            case TENANT_QUERY_TABS_ID.saved: {
+                return (
+                    <SavedQueries
+                        changeUserInput={handleUserInputChange}
+                        savedQueries={savedQueries}
+                        onDeleteQuery={handleDeleteQuery}
+                    />
+                );
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    return (
+        <div className={b()}>
+            <QueryTabs className={b('tabs')} activeTab={queryTab} />
+            <div className={b('content')}>{renderContent()}</div>
+        </div>
+    );
+};

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

@@ -5,43 +5,42 @@ 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 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';
-import {setShowPreview} from '../../../store/reducers/schema/schema';
+} 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_ADDITIONAL_QUERY_MODES,
-} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
-import {QueryModes} from '../../../types/store/query';
+} from '../../../../utils/constants';
+import {useSetting} from '../../../../utils/hooks';
+import {QueryModes} from '../../../../types/store/query';
 
 import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
-} from '../utils/paneVisibilityToggleHelpers';
-import Preview from '../Preview/Preview';
+} from '../../utils/paneVisibilityToggleHelpers';
+import Preview from '../../Preview/Preview';
 
-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 QueriesHistory from './QueriesHistory/QueriesHistory';
+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';
 
@@ -67,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,
@@ -324,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}
@@ -348,7 +348,7 @@ function QueryEditor(props) {
         } = props;
 
         return (
-            <QueryExplain
+            <ExplainResult
                 error={error}
                 explain={data}
                 astQuery={handleAstQuery}
@@ -436,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);
@@ -513,14 +473,6 @@ 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 renderControls = () => {
         const {executeQuery, explainQuery, savedQueries} = props;
 
@@ -555,21 +507,6 @@ function QueryEditor(props) {
         );
     };
 
-    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();
 
@@ -584,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
@@ -598,7 +539,6 @@ function QueryEditor(props) {
                         </div>
                     </div>
                     {renderControls()}
-                    {renderUpperControls()}
                 </div>
                 <div className={b('pane-wrapper')}>
                     {props.showPreview ? renderPreview() : result}
@@ -621,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/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/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}
+            />
+        </>
+    );
+};

package/dist/containers/Tenant/Query/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "controls.query-mode-selector_type": "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"
+}

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "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": "Отменить"
+}

package/dist/containers/Tenant/Query/utils/getPreparedResult.ts

@@ -0,0 +1,30 @@
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {IQueryResult} from '../../../../types/store/query';
+
+export const getPreparedResult = (data: IQueryResult) => {
+    const columnDivider = '\t';
+    const rowDivider = '\n';
+
+    if (!data?.result?.length) {
+        return '';
+    }
+
+    const columnHeaders = Object.keys(data.result[0]);
+    const rows = Array<string[] | KeyValueRow[]>(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);
+};