Skip to content

Commit 4c85be2

Browse files
dogmardogmar
authored
feat: Truncate and reduce label sizes + Responsive enhancements (#266)
1 parent 7fcb097 commit 4c85be2

File tree

9 files changed

+150
-61
lines changed

9 files changed

+150
-61
lines changed

‎assets/src/components/apps/Apps.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,8 @@ export default function Apps() {
178178
return (
179179
<ResponsivePageFullWidth
180180
heading="Apps"
181+
// 1528 is magic number for content width when screen is 1640px wide
182+
maxContentWidth={1528}
181183
headingContent={(
182184
<>
183185
<Flex grow={1} />

‎assets/src/components/apps/app/components/Component.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function Component({
2222
<Card
2323
display="flex"
2424
gap="small"
25+
alignItems="center"
2526
paddingHorizontal="xsmall"
2627
paddingVertical="xxsmall"
2728
grow={1}
@@ -37,7 +38,7 @@ export default function Component({
3738
type="tertiary"
3839
/>
3940
<Flex
40-
align="center"
41+
align="baseline"
4142
gap="small"
4243
flexShrink={1}
4344
overflow="hidden"

‎assets/src/components/cluster/LabelsAnnotations.tsx‎

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { Card, CardProps, Chip } from '@pluralsh/design-system'
1+
import { CardProps, Chip, ChipList } from '@pluralsh/design-system'
22
import { Div, Flex } from 'honorable'
33
import { ReactNode } from 'react'
4-
import type { LabelPair, Metadata as MetadataT } from 'generated/graphql'
4+
import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
5+
import { CARD_CONTENT_MAX_WIDTH, MetadataCard } from 'components/utils/Metadata'
6+
import { useTheme } from 'styled-components'
57

68
export const mapify = tags => tags.reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {})
79

@@ -34,45 +36,66 @@ export function LabelsAnnotationsRow({
3436

3537
export function LabelsAnnotationsTag({ name, value }: LabelPair) {
3638
return (
37-
<Chip>
39+
<Chip size="small">
3840
{name}
3941
{value && `: ${value}`}
4042
</Chip>
4143
)
4244
}
4345

46+
function renderLabel(label: Maybe<LabelPair>) {
47+
return (
48+
<>
49+
{label?.name}
50+
{label?.value && `: ${label.value}`}
51+
</>
52+
)
53+
}
54+
4455
export function LabelsAnnotations({
4556
metadata: { labels, annotations },
4657
...props
4758
}: {
4859
metadata: MetadataT
4960
} & CardProps) {
61+
const theme = useTheme()
62+
63+
const hasLabels = labels && labels?.length > 0
64+
const hasAnnotations = annotations && annotations.length > 0
65+
const hasData = hasLabels || hasAnnotations
66+
67+
if (!hasData) {
68+
return null
69+
}
70+
5071
return (
51-
<Card
52-
padding="xlarge"
53-
{...props}
54-
>
72+
<MetadataCard {...props}>
5573
<Flex
5674
direction="column"
5775
gap="xlarge"
76+
maxWidth={(CARD_CONTENT_MAX_WIDTH - theme.spacing.xlarge * 3) / 2}
5877
>
59-
<LabelsAnnotationsRow name="Labels">
60-
{labels?.map(label => (
61-
<LabelsAnnotationsTag
62-
key={label?.name}
63-
{...label}
78+
{hasLabels && (
79+
<LabelsAnnotationsRow name="Labels">
80+
<ChipList
81+
size="small"
82+
limit={8}
83+
values={labels}
84+
transformValue={renderLabel}
6485
/>
65-
))}
66-
</LabelsAnnotationsRow>
67-
<LabelsAnnotationsRow name="Annotations">
68-
{annotations?.map(annotation => (
69-
<LabelsAnnotationsTag
70-
key={annotation?.name}
71-
{...annotation}
86+
</LabelsAnnotationsRow>
87+
)}
88+
{hasAnnotations && (
89+
<LabelsAnnotationsRow name="Annotations">
90+
<ChipList
91+
size="small"
92+
limit={8}
93+
values={annotations}
94+
transformValue={renderLabel}
7295
/>
73-
))}
74-
</LabelsAnnotationsRow>
96+
</LabelsAnnotationsRow>
97+
)}
7598
</Flex>
76-
</Card>
99+
</MetadataCard>
77100
)
78101
}

‎assets/src/components/cluster/containers/Container.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export default function Container() {
8585

8686
const match = useMatch('/pods/:namespace/:name/shell/:container/:subpath')
8787
const subpath = match?.params?.subpath || ''
88+
const currentTab = DIRECTORY.find(({ path }) => path === subpath)
8889

8990
const { data, error } = useQuery<{ pod: Pod }>(POD_INFO_Q, {
9091
variables: { name, namespace },
@@ -148,7 +149,7 @@ export default function Container() {
148149

149150
return (
150151
<ResponsivePageFullWidth
151-
scrollable={false}
152+
scrollable={currentTab?.path === 'metadata'}
152153
heading={containerName}
153154
headingContent={(
154155
<Flex gap="medium">

‎assets/src/components/cluster/nodes/Node.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function Node() {
6161
stateRef={tabStateRef}
6262
as={(
6363
<ResponsivePageFullWidth
64-
scrollable={(currentTab?.label ?? 'Info') === 'Info'}
64+
scrollable={(currentTab?.label ?? 'Info') === 'Info' || currentTab?.label === 'Metadata'}
6565
heading={name}
6666
headingContent={(
6767
<HeadingTabList

‎assets/src/components/utils/Metadata.tsx‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,55 @@
11
import { Card, SidecarProps } from '@pluralsh/design-system'
2-
import { Div, Flex, H2 } from 'honorable'
2+
import {
3+
CardProps,
4+
Div,
5+
Flex,
6+
H2,
7+
} from 'honorable'
38
import { Children, forwardRef } from 'react'
49
import styled from 'styled-components'
510
import { makeGrid } from 'utils/makeGrid'
611

712
const MAX_COLS = 4
813

9-
export const MetadataGridCard = styled(Card)<{$maxCols:number}>(({ theme, maxCols = MAX_COLS }) => ({
10-
...makeGrid({ maxCols, minColWidth: 186, gap: theme.spacing.xlarge }),
11-
padding: theme.spacing.large,
14+
export const CARD_CONTENT_MAX_WIDTH = 1526
15+
16+
const MetadataGridGrid = styled.div<{ maxCols: number }>(({ theme, maxCols = MAX_COLS }) => ({
17+
...makeGrid({
18+
maxCols,
19+
minColWidth: 186,
20+
gap: theme.spacing.xlarge,
21+
}),
1222
}))
1323

24+
export function MetadataCard({ children, ...props }: CardProps) {
25+
return (
26+
<Card
27+
display="flex"
28+
justifyContent="center"
29+
{...props}
30+
>
31+
{/* 1526 is magic number which is the card's width when screen is 1940px wide */}
32+
<Div
33+
maxWidth={CARD_CONTENT_MAX_WIDTH}
34+
width="100%"
35+
padding="xlarge"
36+
>{children}
37+
</Div>
38+
</Card>
39+
)
40+
}
41+
1442
export function MetadataGrid(props) {
1543
const numChildren = Children.count(props.children)
16-
const maxCols = (numChildren < MAX_COLS) ? numChildren : MAX_COLS
44+
const maxCols = numChildren < MAX_COLS ? numChildren : MAX_COLS
1745

1846
return (
19-
<MetadataGridCard
20-
maxCols={maxCols}
21-
{...props}
22-
/>
47+
<MetadataCard>
48+
<MetadataGridGrid
49+
maxCols={maxCols}
50+
{...props}
51+
/>
52+
</MetadataCard>
2353
)
2454
}
2555

‎assets/src/components/utils/layout/ResponsivePageFullWidth.tsx‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ResponsiveLayoutPage } from 'components/utils/layout/ResponsiveLayoutPage'
2-
import { useTheme } from 'styled-components'
32
import { ComponentProps } from 'react'
43

54
import { ScrollablePage } from './ScrollablePage'
@@ -9,8 +8,6 @@ export function ResponsivePageFullWidth({
98
children,
109
...props
1110
}: ComponentProps<typeof ScrollablePage>) {
12-
const theme = useTheme()
13-
1411
return (
1512
<ResponsiveLayoutPage
1613
flexDirection="column"
@@ -23,16 +20,7 @@ export function ResponsivePageFullWidth({
2320
>
2421
<ScrollablePage
2522
scrollable={scrollable}
26-
{...(scrollable
27-
? {
28-
marginRight: 'large',
29-
contentStyles: {
30-
paddingRight: theme.spacing.large - 6,
31-
paddingTop: theme.spacing.medium,
32-
paddingBottom: theme.spacing.large,
33-
},
34-
}
35-
: {})}
23+
fullWidth
3624
{...props}
3725
>
3826
{children}

‎assets/src/components/utils/layout/ScrollablePage.tsx‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,38 @@ import ConsolePageTitle from './ConsolePageTitle'
77
const ScrollablePageContent = styled.div<{
88
scrollable?: boolean
99
extraStyles?: CSSProperties
10-
}>(({ theme, scrollable, extraStyles }) => ({
10+
maxContentWidth?: number
11+
fullWidth?: boolean
12+
}>(({
13+
theme, scrollable, extraStyles, maxContentWidth, fullWidth,
14+
}) => ({
15+
position: 'relative',
1116
height: '100%',
1217
maxHeight: '100%',
1318
width: '100%',
1419
overflowY: scrollable ? 'auto' : 'hidden',
1520
overflowX: 'hidden',
16-
paddingTop: theme.spacing.medium,
1721
paddingRight: scrollable ? theme.spacing.small : 0,
18-
paddingBottom: scrollable ? theme.spacing.xxlarge : theme.spacing.large,
19-
...(extraStyles ?? {}),
20-
position: 'relative',
22+
...(scrollable ? { scrollbarGutter: 'stable' } : {}),
23+
...(scrollable && fullWidth
24+
? {
25+
paddingRight: theme.spacing.large - 6,
26+
}
27+
: {}),
28+
'& > .widthLimiter': {
29+
width: '100%',
30+
paddingTop: theme.spacing.medium,
31+
paddingBottom: scrollable ? theme.spacing.xxlarge : theme.spacing.large,
32+
...(!scrollable
33+
? {
34+
height: '100%',
35+
}
36+
: {}),
37+
...(maxContentWidth
38+
? { maxWidth: maxContentWidth, marginLeft: 'auto', marginRight: 'auto' }
39+
: {}),
40+
...(extraStyles ?? {}),
41+
},
2142
}))
2243

2344
const ScrollShadow = styled.div(({ theme }) => ({
@@ -38,32 +59,46 @@ export function ScrollablePage({
3859
contentStyles,
3960
children,
4061
scrollable = true,
62+
maxContentWidth,
63+
fullWidth,
4164
...props
4265
}: {
4366
heading: ReactNode
4467
headingContent?: ReactNode | undefined
4568
contentStyles?: CSSProperties
4669
children: ReactNode
4770
scrollable?: boolean
71+
maxContentWidth?: number
72+
fullWidth?: boolean
4873
} & FlexProps) {
4974
return (
5075
<>
5176
{heading && (
52-
<Div position="relative">
53-
{scrollable && <ScrollShadow />}
54-
<ConsolePageTitle
55-
heading={heading}
56-
{...props}
77+
<Div paddingRight={scrollable && fullWidth ? 'large' : undefined}>
78+
<Div
79+
position="relative"
80+
width="100%"
81+
marginLeft="auto"
82+
marginRight="auto"
83+
maxWidth={maxContentWidth}
5784
>
58-
{headingContent}
59-
</ConsolePageTitle>
85+
{scrollable && <ScrollShadow />}
86+
<ConsolePageTitle
87+
heading={heading}
88+
{...props}
89+
>
90+
{headingContent}
91+
</ConsolePageTitle>
92+
</Div>
6093
</Div>
6194
)}
6295
<ScrollablePageContent
6396
scrollable={scrollable}
6497
extraStyles={contentStyles}
98+
maxContentWidth={maxContentWidth}
99+
fullWidth={fullWidth}
65100
>
66-
{children}
101+
<div className="widthLimiter">{children}</div>
67102
</ScrollablePageContent>
68103
</>
69104
)

‎assets/src/utils/makeGrid.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,27 @@
1+
import { CSSProperties } from 'styled-components'
2+
13
export function makeGrid({
24
gap,
35
maxCols,
46
minColWidth,
7+
maxColWidth,
58
}: {
69
gap: number
710
maxCols: number
811
minColWidth: number
9-
}) {
12+
maxColWidth?: number
13+
}): CSSProperties {
1014
const gapCount = maxCols - 1
1115
const totalGapWidth = gapCount * gap
1216

1317
return {
1418
display: 'grid',
1519
gridTemplateColumns: `repeat(auto-fill, minmax(max(${minColWidth}px, calc((100% - ${totalGapWidth}px) / ${maxCols})), 1fr))`,
1620
gap,
21+
...(maxColWidth
22+
? {
23+
maxWidth: maxCols * maxColWidth + totalGapWidth,
24+
}
25+
: {}),
1726
}
1827
}

0 commit comments

Comments
 (0)