ydb-embedded-ui 4.6.0 → 4.8.0

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.tsx

@@ -4,7 +4,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -22,29 +22,22 @@ import type {KeyValueRow} from '../../../../types/api/query';
 import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
-import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
-import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
+import {TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
-import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-import routes, {createHref} from '../../../../routes';
 
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantTabsGroups} from '../../TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
-const TABLE_SETTINGS: Settings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    dynamicRenderType: 'variable',
-};
-
-const MAX_QUERY_HEIGHT = 10;
 const COLUMNS: Column<KeyValueRow>[] = [
     {
         name: 'CPUTimeUs',
@@ -88,7 +81,6 @@ const COLUMNS: Column<KeyValueRow>[] = [
 
 interface TopQueriesProps {
     path: string;
-    changeSchemaTab: (tab: TenantGeneralTab) => void;
     type?: EPathType;
 }
 
@@ -178,9 +170,10 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 ignoreQueryPrefix: true,
             });
 
-            const queryPath = createHref(routes.tenant, undefined, {
+            const queryPath = getTenantPath({
                 ...queryParams,
-                [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
+                [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
             });
 
             history.push(queryPath);
@@ -222,7 +215,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 <DataTable
                     columns={COLUMNS}
                     data={data}
-                    settings={TABLE_SETTINGS}
+                    settings={QUERY_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
                     theme="yandex-cloud"
                 />

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,13 +1,15 @@
-import qs from 'qs';
 import {useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import {useThemeValue} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../types/api/schema';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {TENANT_PAGES_IDS} from '../../../store/reducers/tenant/constants';
+import {useSetting} from '../../../utils/hooks';
+import {TENANT_INITIAL_PAGE_KEY} from '../../../utils/constants';
+import {parseQuery} from '../../../routes';
 
-import QueryEditor from '../QueryEditor/QueryEditor';
+import {Query} from '../Query/Query';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
 import './ObjectGeneral.scss';
@@ -22,20 +24,18 @@ interface ObjectGeneralProps {
 
 function ObjectGeneral(props: ObjectGeneralProps) {
     const location = useLocation();
-
     const theme = useThemeValue();
 
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
+    const [initialPage] = useSetting<string>(TENANT_INITIAL_PAGE_KEY);
 
-    const {name: tenantName, general: generalTab} = queryParams;
+    const queryParams = parseQuery(location);
+    const {name: tenantName, tenantPage = initialPage} = queryParams;
 
     const renderTabContent = () => {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
-        switch (generalTab) {
-            case TENANT_GENERAL_TABS_IDS.query: {
-                return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
+        switch (tenantPage) {
+            case TENANT_PAGES_IDS.query: {
+                return <Query path={tenantName as string} theme={theme} type={type} />;
             }
             default: {
                 return (

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -47,8 +47,11 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -275,7 +278,8 @@ function ObjectSummary(props: ObjectSummaryProps) {
 
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
-        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
     const renderCommonInfoControls = () => {

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

@@ -20,9 +20,9 @@ import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpe
 import ResultIssues from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 
-import './QueryResult.scss';
+import './ExecuteResult.scss';
 
-const b = cn('kv-query-result');
+const b = cn('ydb-query-execute-result');
 
 const resultOptionsIds = {
     result: 'result',
@@ -34,7 +34,7 @@ const resultOptions = [
     {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
-function QueryResult(props) {
+export function ExecuteResult(props) {
     const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
     const isFullscreen = useSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
@@ -162,5 +162,3 @@ function QueryResult(props) {
         </React.Fragment>
     );
 }
-
-export default QueryResult;

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

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-result {
+.ydb-query-execute-result {
     &__result {
         display: flex;
         overflow: auto;

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

@@ -21,9 +21,9 @@ import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
-import './QueryExplain.scss';
+import './ExplainResult.scss';
 
-const b = cn('kv-query-explain');
+const b = cn('ydb-query-explain-result');
 
 const EDITOR_OPTIONS = {
     automaticLayout: true,
@@ -90,7 +90,7 @@ function GraphRoot(props) {
     return <div id="graphRoot" style={{height: '100vh'}} />;
 }
 
-function QueryExplain(props) {
+export function ExplainResult(props) {
     const dispatch = useDispatch();
     const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
 
@@ -287,5 +287,3 @@ function QueryExplain(props) {
         </React.Fragment>
     );
 }
-
-export default QueryExplain;

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

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-explain {
+.ydb-query-explain-result {
     &__result {
         display: flex;
         overflow: auto;

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

@@ -0,0 +1,20 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-queries-history {
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 16px;
+
+    @include flex-container();
+    @include table-styles;
+
+    &__query {
+        overflow: hidden;
+        flex-grow: 1;
+
+        cursor: pointer;
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+}

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

@@ -0,0 +1,60 @@
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {useTypedSelector} from '../../../../utils/hooks';
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+
+import i18n from '../i18n';
+
+import './QueriesHistory.scss';
+
+const b = block('ydb-queries-history');
+
+interface QueriesHistoryProps {
+    changeUserInput: (value: {input: string}) => void;
+}
+
+function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
+    const dispatch = useDispatch();
+
+    const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
+    const reversedHistory = [...queriesHistory].reverse();
+
+    const onQueryClick = (queryText: string) => {
+        changeUserInput({input: queryText});
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+
+    const columns: Column<string>[] = [
+        {
+            name: 'queryText',
+            header: 'Query Text',
+            render: ({row: query}) => (
+                <div className={b('query')}>
+                    <TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                </div>
+            ),
+            sortable: false,
+        },
+    ];
+
+    return (
+        <div className={b()}>
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                data={reversedHistory}
+                settings={QUERY_TABLE_SETTINGS}
+                emptyDataMessage={i18n('history.empty')}
+                onRowClick={(row) => onQueryClick(row)}
+            />
+        </div>
+    );
+}
+
+export default QueriesHistory;

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

@@ -0,0 +1,16 @@
+@import '../../../styles/mixins.scss';
+
+.ydb-query {
+    max-height: 100%;
+    @include flex-container();
+
+    &__tabs {
+        padding: 13px 20px 16px;
+    }
+
+    &__content {
+        overflow: hidden;
+
+        height: 100%;
+    }
+}

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,43 @@ 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';
+    setTenantPath,
+} 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 +67,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,
@@ -75,6 +76,7 @@ const propTypes = {
     theme: PropTypes.string,
     type: PropTypes.string,
     initialQueryMode: PropTypes.string,
+    setTenantPath: PropTypes.func,
 };
 
 const initialTenantCommonInfoState = {
@@ -83,6 +85,9 @@ const initialTenantCommonInfoState = {
     collapsed: true,
 };
 function QueryEditor(props) {
+    const {path, executeQuery, theme, setTenantPath, changeUserInput} = props;
+    const {tenantPath: savedPath} = executeQuery;
+
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
     const [isResultLoaded, setIsResultLoaded] = useState(false);
@@ -96,6 +101,13 @@ function QueryEditor(props) {
         }
     }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
 
+    useEffect(() => {
+        if (savedPath !== path) {
+            setTenantPath(path);
+            changeUserInput({input: ''});
+        }
+    }, [changeUserInput, setTenantPath, path, savedPath]);
+
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
         initialTenantCommonInfoState,
@@ -324,11 +336,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 +360,7 @@ function QueryEditor(props) {
         } = props;
 
         return (
-            <QueryExplain
+            <ExplainResult
                 error={error}
                 explain={data}
                 astQuery={handleAstQuery}
@@ -436,46 +448,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 +485,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,22 +519,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();
 
     return (
@@ -584,7 +532,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 +550,6 @@ function QueryEditor(props) {
                         </div>
                     </div>
                     {renderControls()}
-                    {renderUpperControls()}
                 </div>
                 <div className={b('pane-wrapper')}>
                     {props.showPreview ? renderPreview() : result}
@@ -621,7 +572,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
     sendExecuteQuery,
-    changeUserInput,
     saveQueryToHistory,
     goToPreviousQuery,
     goToNextQuery,
@@ -630,6 +580,7 @@ const mapDispatchToProps = {
     setSettingValue,
     setShowPreview,
     setMonacoHotKey,
+    setTenantPath,
 };
 
 QueryEditor.propTypes = propTypes;

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);
+        }
     }
 }