From 4764d6bc18c84c6573ea6fcc4fb42ca239f0ab3b Mon Sep 17 00:00:00 2001 From: Maksim Efremov Date: Thu, 27 Feb 2025 13:55:27 +0300 Subject: [PATCH] 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 --- packages/ui/src/ui/containers/App/App.tsx | 13 ++++---- .../MaxContentWidth/MaxContentWidth.scss | 23 ++++++++++++++ .../MaxContentWidth/MaxContentWidth.tsx | 23 ++++++++++++++ .../ui/containers/MaxContentWidth/hooks.tsx | 30 +++++++++++++++++++ .../ui/containers/MaxContentWidth/index.tsx | 2 ++ .../ui/legacy-styles/elements/page/page.scss | 3 -- .../tabs/detailed-usage/AccountUsageTab.tsx | 3 ++ packages/ui/src/ui/pages/chyt/lazy.tsx | 11 ++++--- packages/ui/src/ui/pages/components/lazy.tsx | 11 ++++--- .../content/Document/DocumentWithRum.tsx | 3 ++ .../ui/pages/navigation/content/File/File.js | 3 ++ .../navigation/content/MapNode/MapNode.js | 4 +-- .../ReplicatedTable/ReplicatedTable.js | 3 ++ .../pages/navigation/content/Table/Table.js | 2 ++ .../navigation/tabs/AccessLog/AccessLog.tsx | 4 +++ packages/ui/src/ui/pages/odin/lazy.ts | 21 ++++++++----- .../tabs/details/Details/Details.js | 2 +- .../ui/src/ui/pages/query-tracker/lazy.tsx | 11 ++++--- packages/ui/src/ui/pages/system/lazy.tsx | 11 ++++--- .../src/ui/pages/tablet_cell_bundles/lazy.tsx | 23 ++++++++------ .../store/actions/global/max-content-width.ts | 6 ++++ .../ui/src/ui/store/reducers/global/index.ts | 4 +-- .../selectors/global/max-content-width.ts | 8 +++++ 23 files changed, 178 insertions(+), 46 deletions(-) create mode 100644 packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.scss create mode 100644 packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.tsx create mode 100644 packages/ui/src/ui/containers/MaxContentWidth/hooks.tsx create mode 100644 packages/ui/src/ui/containers/MaxContentWidth/index.tsx create mode 100644 packages/ui/src/ui/store/actions/global/max-content-width.ts create mode 100644 packages/ui/src/ui/store/selectors/global/max-content-width.ts diff --git a/packages/ui/src/ui/containers/App/App.tsx b/packages/ui/src/ui/containers/App/App.tsx index d8e5bc77b..8a43331fa 100644 --- 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 } > - } /> - } - /> + + } /> + } + /> + diff --git a/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.scss b/packages/ui/src/ui/containers/MaxContentWidth/MaxContentWidth.scss new file mode 100644 index 000000000..39dbe4b37 --- /dev/null +++ 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 new file mode 100644 index 000000000..a7840cf6f --- /dev/null +++ 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
{children}
; +} diff --git a/packages/ui/src/ui/containers/MaxContentWidth/hooks.tsx b/packages/ui/src/ui/containers/MaxContentWidth/hooks.tsx new file mode 100644 index 000000000..3a57f1cfc --- /dev/null +++ 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( + Component: React.ComponentType, +) { + return function WithDisableMaxContentWidth(props: Props) { + useDisableMaxContentWidth(); + return ; + }; +} diff --git a/packages/ui/src/ui/containers/MaxContentWidth/index.tsx b/packages/ui/src/ui/containers/MaxContentWidth/index.tsx new file mode 100644 index 000000000..9d468354b --- /dev/null +++ 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 index c712db0ba..aba79e10e 100644 --- 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 index 245c25ea5..32ede7dfa 100644 --- 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 index ca2fa84a2..4867cfc42 100644 --- 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 index 6c5aff58e..a213f0594 100644 --- 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 index 161933136..a60f35694 100644 --- 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 ; }; diff --git a/packages/ui/src/ui/pages/navigation/content/File/File.js b/packages/ui/src/ui/pages/navigation/content/File/File.js index bbcbfb988..fb05c6d11 100644 --- 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 index b7831a9d2..76f4fcbb3 100644 --- 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 ( - +
{renderModals()} - +
); } } diff --git a/packages/ui/src/ui/pages/navigation/content/ReplicatedTable/ReplicatedTable.js b/packages/ui/src/ui/pages/navigation/content/ReplicatedTable/ReplicatedTable.js index 692aa13cf..f7b3337ed 100644 --- 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 index ed7117512..5a9fce03f 100644 --- 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 ; } diff --git a/packages/ui/src/ui/pages/navigation/tabs/AccessLog/AccessLog.tsx b/packages/ui/src/ui/pages/navigation/tabs/AccessLog/AccessLog.tsx index e314d788c..00925c787 100644 --- 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 ( { - 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 index ef268f9b3..8eb761c32 100644 --- 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 && (
- +
) ); diff --git a/packages/ui/src/ui/pages/query-tracker/lazy.tsx b/packages/ui/src/ui/pages/query-tracker/lazy.tsx index 5ff243e9e..dd9de8370 100644 --- 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 index bfd0f66cb..3dbc25ee6 100644 --- 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( diff --git a/packages/ui/src/ui/pages/tablet_cell_bundles/lazy.tsx b/packages/ui/src/ui/pages/tablet_cell_bundles/lazy.tsx index 990282ffc..1318634b4 100644 --- a/packages/ui/src/ui/pages/tablet_cell_bundles/lazy.tsx +++ b/packages/ui/src/ui/pages/tablet_cell_bundles/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: "bundles" */ './index'); } -export const TabletCellBundlesLazy = withLazyLoading( - React.lazy(async () => { - return {default: (await importPage()).TabletCellBundles}; - }), +export const TabletCellBundlesLazy = withDisableMaxContentWidth( + withLazyLoading( + React.lazy(async () => { + return {default: (await importPage()).TabletCellBundles}; + }), + ), ); export const TabletCellBundlesTopRowLazy = withLazyLoading( @@ -17,9 +20,11 @@ export const TabletCellBundlesTopRowLazy = withLazyLoading( }), ); -export const ChaosCellBundlesTopRowLazy = withLazyLoading( - React.lazy(async () => { - return {default: (await importPage()).ChaosCellBundlesTopRow}; - }), - '', +export const ChaosCellBundlesTopRowLazy = withDisableMaxContentWidth( + withLazyLoading( + React.lazy(async () => { + return {default: (await importPage()).ChaosCellBundlesTopRow}; + }), + '', + ), ); diff --git a/packages/ui/src/ui/store/actions/global/max-content-width.ts b/packages/ui/src/ui/store/actions/global/max-content-width.ts new file mode 100644 index 000000000..7a4c90b0d --- /dev/null +++ b/packages/ui/src/ui/store/actions/global/max-content-width.ts @@ -0,0 +1,6 @@ +import {GLOBAL_PARTIAL} from '../../../constants/global'; +import {GloablStateAction} from '../../../store/reducers/global'; + +export function setMaxContentWidthEnabled(enableMaxContentWidth: boolean): GloablStateAction { + return {type: GLOBAL_PARTIAL, data: {enableMaxContentWidth}}; +} diff --git a/packages/ui/src/ui/store/reducers/global/index.ts b/packages/ui/src/ui/store/reducers/global/index.ts index f246b75f4..11b850d79 100644 --- a/packages/ui/src/ui/store/reducers/global/index.ts +++ b/packages/ui/src/ui/store/reducers/global/index.ts @@ -92,7 +92,7 @@ export type GlobalState = { allowedExperimentalPages?: undefined | Array; - useMaxContentWidth: false; + enableMaxContentWidth: boolean; ytAuthCluster?: string; @@ -154,7 +154,7 @@ const initialState: GlobalState = { allowedExperimentalPages: undefined, - useMaxContentWidth: false, + enableMaxContentWidth: true, }; function updatedTitle( diff --git a/packages/ui/src/ui/store/selectors/global/max-content-width.ts b/packages/ui/src/ui/store/selectors/global/max-content-width.ts new file mode 100644 index 000000000..37749d269 --- /dev/null +++ b/packages/ui/src/ui/store/selectors/global/max-content-width.ts @@ -0,0 +1,8 @@ +import {RootState} from '../../../store/reducers'; +import {getSettingsData} from '../../../store/selectors/settings/settings-base'; + +export const isMaxContentWidthEnabled = (state: RootState) => state.global.enableMaxContentWidth; + +export const getMaxContentWidth = (state: RootState) => { + return getSettingsData(state)['global::maxContentWidth']; +};