Skip to content

Commit 47d631d

Browse files
authored
RI-7005: page and page body
* add EuiPage/EuiPageBody/EuiPageHeader/EuiPageContentBody equivalents * replace EuiPage/EuiPageBody/EuiPageHeader/EuiPageContentBody
1 parent ef336cd commit 47d631d

File tree

16 files changed

+713
-44
lines changed

16 files changed

+713
-44
lines changed

redisinsight/ui/src/App.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { ReactElement, useEffect } from 'react'
22
import { Provider, useSelector } from 'react-redux'
3-
import { EuiPage, EuiPageBody } from '@elastic/eui'
43

54
import { Route, Switch } from 'react-router-dom'
65
import { store } from 'uiSrc/slices/store'
76
import { appInfoSelector } from 'uiSrc/slices/app/info'
87
import { removePagePlaceholder } from 'uiSrc/utils'
98
import MonacoLanguages from 'uiSrc/components/monaco-laguages'
109
import AppInit from 'uiSrc/components/init/AppInit'
10+
import { Page, PageBody } from 'uiSrc/components/base/layout/page'
1111
import { Pages, Theme } from './constants'
1212
import { themeService } from './services'
1313
import {
@@ -59,14 +59,14 @@ const App = ({ children }: { children?: ReactElement[] }) => {
5959
path="*"
6060
render={() => (
6161
<>
62-
<EuiPage className="main">
62+
<Page className="main">
6363
<GlobalDialogs />
6464
<GlobalSubscriptions />
6565
<NavigationMenu />
66-
<EuiPageBody component="main">
66+
<PageBody component="main">
6767
<MainComponent />
68-
</EuiPageBody>
69-
</EuiPage>
68+
</PageBody>
69+
</Page>
7070
<Notifications />
7171
<Config />
7272
<ShortcutsFlyout />
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react'
2+
import cx from 'classnames'
3+
import {
4+
PageClassNames,
5+
PageProps,
6+
restrictWidthSize,
7+
StyledPage,
8+
} from 'uiSrc/components/base/layout/page/page.styles'
9+
10+
const Page = ({
11+
className,
12+
restrictWidth = false,
13+
paddingSize = 'm',
14+
grow = true,
15+
direction = 'row',
16+
style,
17+
...rest
18+
}: PageProps) => (
19+
<StyledPage
20+
{...rest}
21+
className={cx(PageClassNames.page, className)}
22+
$grow={grow}
23+
$direction={direction}
24+
$restrictWidth={restrictWidth}
25+
$paddingSize={paddingSize}
26+
style={restrictWidthSize(style, restrictWidth)}
27+
/>
28+
)
29+
30+
export default Page
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import cx from 'classnames'
3+
import {
4+
PageClassNames,
5+
restrictWidthSize,
6+
} from 'uiSrc/components/base/layout/page/page.styles'
7+
import {
8+
ComponentTypes,
9+
PageBodyProps,
10+
StyledPageBody,
11+
} from 'uiSrc/components/base/layout/page/page-body.styles'
12+
13+
const PageBody = <T extends ComponentTypes = 'div'>({
14+
component = 'div' as T,
15+
className,
16+
restrictWidth,
17+
paddingSize,
18+
style,
19+
...rest
20+
}: PageBodyProps<T>) => (
21+
<StyledPageBody
22+
as={component}
23+
{...rest}
24+
$restrictWidth={restrictWidth}
25+
$paddingSize={paddingSize}
26+
style={restrictWidthSize(style, restrictWidth)}
27+
className={cx(PageClassNames.body, className)}
28+
/>
29+
)
30+
31+
export default PageBody
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import cx from 'classnames'
2+
import React from 'react'
3+
import {
4+
PageClassNames,
5+
PageContentBodyProps,
6+
restrictWidthSize,
7+
StyledPageContentBody,
8+
} from 'uiSrc/components/base/layout/page/page.styles'
9+
10+
const PageContentBody = ({
11+
restrictWidth = false,
12+
paddingSize = 'none',
13+
style,
14+
className,
15+
...rest
16+
}: PageContentBodyProps) => {
17+
const classes = cx(PageClassNames.contentBody, className)
18+
19+
return (
20+
<StyledPageContentBody
21+
className={classes}
22+
$paddingSize={paddingSize}
23+
$restrictWidth={restrictWidth}
24+
style={restrictWidthSize(style, restrictWidth)}
25+
{...rest}
26+
/>
27+
)
28+
}
29+
30+
export default PageContentBody
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import cx from 'classnames'
3+
import { restrictWidthSize } from 'uiSrc/components/base/layout/page/page.styles'
4+
import {
5+
PageHeaderClassName,
6+
PageHeaderProps,
7+
StyledPageHeader,
8+
} from './page-heading.styles'
9+
10+
const PageHeader = ({
11+
className,
12+
style,
13+
restrictWidth,
14+
alignItems,
15+
responsive = true,
16+
bottomBorder,
17+
paddingSize,
18+
direction,
19+
...rest
20+
}: PageHeaderProps) => (
21+
<StyledPageHeader
22+
{...rest}
23+
style={restrictWidthSize(style, restrictWidth)}
24+
className={cx(className, PageHeaderClassName)}
25+
$restrictWidth={restrictWidth}
26+
$paddingSize={paddingSize}
27+
$direction={direction}
28+
$responsive={responsive}
29+
$alignItems={alignItems}
30+
$bottomBorder={bottomBorder}
31+
/>
32+
)
33+
34+
export default PageHeader
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Page from './Page'
2+
import PageBody from './PageBody'
3+
import PageHeader from './PageHeader'
4+
import PageContentBody from './PageContentBody'
5+
6+
export { Page, PageBody, PageHeader, PageContentBody }
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react'
2+
3+
import { render } from 'uiSrc/utils/test-utils'
4+
import { PADDING_SIZES } from './page.styles'
5+
import PageBody from './PageBody'
6+
7+
describe('PageBody', () => {
8+
test('is rendered', () => {
9+
const { container } = render(<PageBody />)
10+
11+
expect(container.firstChild).toBeTruthy()
12+
})
13+
14+
describe('paddingSize', () => {
15+
const sizes = {
16+
none: '0',
17+
s: '8px',
18+
m: '16px',
19+
l: '24px',
20+
}
21+
PADDING_SIZES.forEach((size) => {
22+
it(`padding '${size}' is rendered`, () => {
23+
const { container } = render(<PageBody paddingSize={size} />)
24+
expect(container.firstChild).toHaveStyle(`padding: ${sizes[size]}`)
25+
})
26+
})
27+
})
28+
29+
describe('restrict width', () => {
30+
test('can be set to a default', () => {
31+
const { container } = render(<PageBody restrictWidth />)
32+
33+
expect(container.firstChild).toHaveStyle('max-width: 1200px')
34+
})
35+
36+
test('can be set to a custom number', () => {
37+
const { container } = render(<PageBody restrictWidth={1024} />)
38+
39+
expect(container.firstChild).toHaveStyle('max-width: 1024px')
40+
})
41+
42+
test('can be set to a custom value and measurement', () => {
43+
const { container } = render(
44+
<PageBody
45+
restrictWidth="24rem"
46+
style={{
47+
color: 'red ',
48+
}}
49+
/>,
50+
)
51+
52+
expect(container.firstChild).toHaveStyle('max-width: 24rem; color: red;')
53+
})
54+
})
55+
})
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { ComponentProps, ComponentType, PropsWithChildren } from 'react'
2+
import styled from 'styled-components'
3+
import {
4+
PaddingSize,
5+
pageStyles,
6+
} from 'uiSrc/components/base/layout/page/page.styles'
7+
8+
export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType<any>
9+
export type PageBodyProps<T extends ComponentTypes = 'main'> =
10+
PropsWithChildren &
11+
ComponentProps<T> & {
12+
className?: string
13+
/**
14+
* Sets the max-width of the page,
15+
* set to `true` to use the default size of `1200px`,
16+
* set to `false` to not restrict the width,
17+
* set to a number for a custom width in px,
18+
* set to a string for a custom width in custom measurement.
19+
*/
20+
restrictWidth?: boolean | number | string
21+
/**
22+
* Sets the HTML element for `PageBody`.
23+
*/
24+
component?: T
25+
/**
26+
* Adjusts the padding
27+
*/
28+
paddingSize?: PaddingSize
29+
}
30+
31+
type StyledPageBodyProps = Omit<
32+
PageBodyProps,
33+
'component' | 'paddingSize' | 'restrictWidth'
34+
> & {
35+
$restrictWidth?: boolean | number | string
36+
$paddingSize?: PaddingSize
37+
}
38+
39+
export const StyledPageBody = styled.main<StyledPageBodyProps>`
40+
display: flex;
41+
flex-direction: column;
42+
align-items: stretch;
43+
flex: 1 1 100%;
44+
/* Make sure that inner flex layouts don't get larger than this container */
45+
max-width: 100%;
46+
min-width: 0;
47+
${({ $restrictWidth = false }) => $restrictWidth && pageStyles.restrictWidth}
48+
${({ $paddingSize = 'none' }) =>
49+
$paddingSize && pageStyles.padding[$paddingSize]}
50+
`

0 commit comments

Comments
 (0)