feat(UI/Layout): use 'maxContentWidth' for the most of pages [YTFRONT…

…-4149] The following pages are ignores the option: - Accounts/Detailed Usage - CHYT - Components - Navigation/Document - Navigation/File - Navigation/ReplicatedTable - Navigation/Table - Navigation/Access log - QueryTracker - System - Bundles
ytsaurus · Feb 27, 2025 · 4764d6b · 4764d6b
1 parent 498c66c
commit 4764d6b
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 46 deletions.
diff --git a/packages/ui/src/ui/containers/App/App.tsx b/packages/ui/src/ui/containers/App/App.tsx
@@ -6,6 +6,7 @@ import {ThemeProvider, useThemeType, useThemeValue} from '@gravity-ui/uikit';
 
 import ModalErrors from '../../containers/ModalErrors/ModalErrors';
 import AttributesModal from '../../components/AttributesModal/AttributesModal';
+import {MaxContentWidth} from '../../containers/MaxContentWidth';
 import {ClustersMenuLazy} from '../../containers/ClustersMenu/lazy';
 import {ClusterPageWrapperLazy} from '../../containers/ClusterPageWrapper/lazy';
 import ActionModal from '../ActionModal/ActionModal';
@@ -76,11 +77,13 @@ function AppWithRum() {
                                     } as React.CSSProperties
                                 }
                             >
-                                <Route exact path="/" render={() => <ClustersMenuLazy />} />
-                                <Route
-                                    path="/:cluster/"
-                                    render={() => <ClusterPageWrapperLazy />}
-                                />
+                                <MaxContentWidth>
+                                    <Route exact path="/" render={() => <ClustersMenuLazy />} />
+                                    <Route
+                                        path="/:cluster/"
+                                        render={() => <ClusterPageWrapperLazy />}
+                                    />
+                                </MaxContentWidth>
                                 <AttributesModal />
                                 <ActionModal />
                                 <ModalErrors />

diff --git a/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.scss b/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.scss
@@ -0,0 +1,23 @@
+.yt-max-content-width {
+    &_size_standard {
+        max-width: 1400px;
+        margin: 0 auto;
+
+        .with-sticky-toolbar__toolbar_sticky .toolbar,
+        .map-node__toolbar {
+            max-width: 1360px;
+            margin: 0 auto;
+        }
+    }
+
+    &_size_wide {
+        max-width: 1800px;
+        margin: 0 auto;
+
+        .with-sticky-toolbar__toolbar_sticky .toolbar,
+        .map-node__toolbar {
+            max-width: 1760px;
+            margin: 0 auto;
+        }
+    }
+}
diff --git a/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.tsx b/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import {useSelector} from 'react-redux';
+
+import {
+    getMaxContentWidth,
+    isMaxContentWidthEnabled,
+} from '../../store/selectors/global/max-content-width';
+
+import './MaxContentWidth.scss';
+
+const block = cn('yt-max-content-width');
+
+export type MaxContentWidthProps = {
+    children: React.ReactNode;
+};
+
+export function MaxContentWidth({children}: MaxContentWidthProps) {
+    const enableMaxWidth = useSelector(isMaxContentWidthEnabled);
+    const size = useSelector(getMaxContentWidth);
+
+    return <div className={block({size: enableMaxWidth ? size : undefined})}>{children}</div>;
+}
diff --git a/packages/ui/src/ui/containers/MaxContentWidth/hooks.tsx b/packages/ui/src/ui/containers/MaxContentWidth/hooks.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {useDispatch} from 'react-redux';
+
+import {setMaxContentWidthEnabled} from '../../store/actions/global/max-content-width';
+
+export function useDisableMaxContentWidth() {
+    const dispatch = useDispatch();
+
+    React.useEffect(() => {
+        dispatch(setMaxContentWidthEnabled(false));
+
+        return () => {
+            dispatch(setMaxContentWidthEnabled(true));
+        };
+    }, [dispatch]);
+}
+
+export function UseDisableMaxContentWidth() {
+    useDisableMaxContentWidth();
+    return null;
+}
+
+export function withDisableMaxContentWidth<Props extends object>(
+    Component: React.ComponentType<Props>,
+) {
+    return function WithDisableMaxContentWidth(props: Props) {
+        useDisableMaxContentWidth();
+        return <Component {...props} />;
+    };
+}
diff --git a/packages/ui/src/ui/containers/MaxContentWidth/index.tsx b/packages/ui/src/ui/containers/MaxContentWidth/index.tsx
@@ -0,0 +1,2 @@
+export * from './MaxContentWidth';
+export * from './hooks';
diff --git a/packages/ui/src/ui/legacy-styles/elements/page/page.scss b/packages/ui/src/ui/legacy-styles/elements/page/page.scss
@@ -12,9 +12,6 @@
 }
 
 .elements-page {
-    display: flex;
-    flex-direction: column;
-
     min-width: 320px;
     min-height: 100vh;
 

diff --git a/packages/ui/src/ui/pages/accounts/tabs/detailed-usage/AccountUsageTab.tsx b/packages/ui/src/ui/pages/accounts/tabs/detailed-usage/AccountUsageTab.tsx
@@ -9,10 +9,13 @@ import {getActiveAccount} from '../../../../store/selectors/accounts/accounts-ts
 import {useSelector} from 'react-redux';
 import {getAccountUsageViewType} from '../../../../store/selectors/accounts/account-usage';
 import ErrorBoundary from '../../../../components/ErrorBoundary/ErrorBoundary';
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
 
 const block = cn('accounts');
 
 function AccountDetailedUsageTab() {
+    useDisableMaxContentWidth();
+
     const account = useSelector(getActiveAccount);
     const viewType = useSelector(getAccountUsageViewType);
 

diff --git a/packages/ui/src/ui/pages/chyt/lazy.tsx b/packages/ui/src/ui/pages/chyt/lazy.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 
 import withLazyLoading from '../../hocs/withLazyLoading';
+import {withDisableMaxContentWidth} from '../../containers/MaxContentWidth';
 
 function importPage() {
     return import(/* webpackChunkName: "chyt" */ './index');
 }
 
-export const ChytPageLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importPage()).ChytPage};
-    }),
+export const ChytPageLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importPage()).ChytPage};
+        }),
+    ),
 );
 
 export const ChytPageTopRowLazy = withLazyLoading(

diff --git a/packages/ui/src/ui/pages/components/lazy.tsx b/packages/ui/src/ui/pages/components/lazy.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import withLazyLoading from '../../hocs/withLazyLoading';
+import {withDisableMaxContentWidth} from '../../containers/MaxContentWidth';
 
 function importComponents() {
     return import(/* webpackChunkName: "components" */ './Components');
 }
 
-export const ComponentsLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importComponents()).Components};
-    }),
+export const ComponentsLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importComponents()).Components};
+        }),
+    ),
 );
 
 export const ComponentsTopRowLazy = withLazyLoading(

diff --git a/packages/ui/src/ui/pages/navigation/content/Document/DocumentWithRum.tsx b/packages/ui/src/ui/pages/navigation/content/Document/DocumentWithRum.tsx
@@ -6,6 +6,7 @@ import {useAppRumMeasureStart} from '../../../../rum/rum-app-measures';
 import {isFinalLoadingStatus} from '../../../../utils/utils';
 import {getNavigationDocumentLoadingStatus} from '../../../../store/selectors/navigation/content/document';
 import {useSelector} from 'react-redux';
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
 
 const DocumentWithRum: FC = () => {
     const loadState = useSelector(getNavigationDocumentLoadingStatus);
@@ -26,6 +27,8 @@ const DocumentWithRum: FC = () => {
         },
     });
 
+    useDisableMaxContentWidth();
+
     return <Document />;
 };
 

diff --git a/packages/ui/src/ui/pages/navigation/content/File/File.js b/packages/ui/src/ui/pages/navigation/content/File/File.js
@@ -3,6 +3,7 @@ import {connect, useSelector} from 'react-redux';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
 import LoadDataHandler from '../../../../components/LoadDataHandler/LoadDataHandler';
 import MetaTable from '../../../../components/MetaTable/MetaTable';
 import {
@@ -173,6 +174,8 @@ const mapDispatchToProps = {
 const FileConnected = connect(mapStateToProps, mapDispatchToProps)(File);
 
 export default function FileWithRum() {
+    useDisableMaxContentWidth();
+
     const loadState = useSelector(getNavigationFileLoadingStatus);
 
     useAppRumMeasureStart({

diff --git a/packages/ui/src/ui/pages/navigation/content/MapNode/MapNode.js b/packages/ui/src/ui/pages/navigation/content/MapNode/MapNode.js
@@ -279,7 +279,7 @@ class MapNodeToolbar extends React.PureComponent {
         ]);
 
         return (
-            <React.Fragment>
+            <div className={block('toolbar')}>
                 <div className={tbBlock('container')}>
                     <div className={block('filter', tbBlock('component'))}>
                         <Filter
@@ -350,7 +350,7 @@ class MapNodeToolbar extends React.PureComponent {
                 </div>
                 <UploadManagerCreate ref={this.uploadXlsRef} />
                 {renderModals()}
-            </React.Fragment>
+            </div>
         );
     }
 }

diff --git a/packages/ui/src/ui/pages/navigation/content/ReplicatedTable/ReplicatedTable.js b/packages/ui/src/ui/pages/navigation/content/ReplicatedTable/ReplicatedTable.js
@@ -6,6 +6,7 @@ import ypath from '@ytsaurus/interface-helpers/lib/ypath';
 import hammer from '../../../../common/hammer';
 import cn from 'bem-cn-lite';
 
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
 import ClickableAttributesButton from '../../../../components/AttributesButton/ClickableAttributesButton';
 import TableActions from '../../../../pages/navigation/content/Table/TableOverview/TableActions';
 import TableMeta from '../../../../pages/navigation/content/Table/TableMeta/TableMeta';
@@ -394,6 +395,8 @@ const mapDispatchToProps = {
 const ReplicatedTableConnected = connect(mapStateToProps, mapDispatchToProps)(ReplicatedTable);
 
 export default function ReplicatedTableWithRum() {
+    useDisableMaxContentWidth();
+
     const loadState = useSelector(getNavigationReplicatedTableLoadingStatus);
 
     useAppRumMeasureStart({

diff --git a/packages/ui/src/ui/pages/navigation/content/Table/Table.js b/packages/ui/src/ui/pages/navigation/content/Table/Table.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import {compose} from 'redux';
 import cn from 'bem-cn-lite';
 
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
 import DataTableWrapper from '../../../../pages/navigation/content/Table/DataTableWrapper/DataTableWrapper';
 import TableOverview from '../../../../pages/navigation/content/Table/TableOverview/TableOverview';
 import ColumnSelectorModal from '../../../../components/ColumnSelectorModal/ColumnSelectorModal';
@@ -268,5 +269,6 @@ export default function TableWithRum() {
         },
     });
 
+    useDisableMaxContentWidth();
     return <TableConnected />;
 }
diff --git a/packages/ui/src/ui/pages/navigation/tabs/AccessLog/AccessLog.tsx b/packages/ui/src/ui/pages/navigation/tabs/AccessLog/AccessLog.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
+import {useDisableMaxContentWidth} from '../../../../containers/MaxContentWidth';
+
 import WithStickyToolbar from '../../../../components/WithStickyToolbar/WithStickyToolbar';
 import {
     accessLogResetFilters,
@@ -21,6 +23,8 @@ function AccessLog() {
         dispatch(fetchAccessLog());
     }, [dispatch, path]);
 
+    useDisableMaxContentWidth();
+
     return (
         <React.Fragment>
             <WithStickyToolbar

diff --git a/packages/ui/src/ui/pages/odin/lazy.ts b/packages/ui/src/ui/pages/odin/lazy.ts
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {withDisableMaxContentWidth} from '../../containers/MaxContentWidth';
 import withLazyLoading from '../../hocs/withLazyLoading';
 import {UIFactoryClusterPageInfo, UIFactoryRootPageInfo} from '../../UIFactory';
 import {PageOdin} from '../../icons/PageOdin';
@@ -17,15 +18,19 @@ function importPage() {
     return import(/* webpackChunkName: "odin" */ './index');
 }
 
-const OdinLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importPage()).Odin};
-    }),
+const OdinLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importPage()).Odin};
+        }),
+    ),
 );
-const IndependentOdinLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importPage()).IndependentOdin};
-    }),
+const IndependentOdinLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importPage()).IndependentOdin};
+        }),
+    ),
 );
 const OdinTopRowLazy = withLazyLoading(
     React.lazy(async () => {

diff --git a/packages/ui/src/ui/pages/operations/OperationDetail/tabs/details/Details/Details.js b/packages/ui/src/ui/pages/operations/OperationDetail/tabs/details/Details/Details.js
@@ -102,7 +102,7 @@ class Details extends Component {
         return (
             error && (
                 <div className={block('result')}>
-                    <Error {...error} />
+                    <Error disableLogger {...error} />
                 </div>
             )
         );

diff --git a/packages/ui/src/ui/pages/query-tracker/lazy.tsx b/packages/ui/src/ui/pages/query-tracker/lazy.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import withLazyLoading from '../../hocs/withLazyLoading';
+import {withDisableMaxContentWidth} from '../../containers/MaxContentWidth';
 
 function importQT() {
     return import(/* webpackChunkName: "query-tracker" */ './index');
 }
 
-export const QueryTrackerLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importQT()).QueryTracker};
-    }),
+export const QueryTrackerLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importQT()).QueryTracker};
+        }),
+    ),
 );
 
 export const QueryTrackerTopRowLazy = withLazyLoading(

diff --git a/packages/ui/src/ui/pages/system/lazy.tsx b/packages/ui/src/ui/pages/system/lazy.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import withLazyLoading from '../../hocs/withLazyLoading';
+import {withDisableMaxContentWidth} from '../../containers/MaxContentWidth';
 
 function importPage() {
     return import(/* webpackChunkName: "system" */ './index');
 }
 
-export const SystemLazy = withLazyLoading(
-    React.lazy(async () => {
-        return {default: (await importPage()).System};
-    }),
+export const SystemLazy = withDisableMaxContentWidth(
+    withLazyLoading(
+        React.lazy(async () => {
+            return {default: (await importPage()).System};
+        }),
+    ),
 );
 
 export const SystemTopRowLazy = withLazyLoading(
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './MaxContentWidth';
		export * from './hooks';