Skip to content

Commit c09fef4

Browse files
yomybabyyomybaby
committed
refactor(FR-1363): migrate StorageStatusPanelCard to BAIRowWrapWithDividers (#4132)
Resolves #4131 ([FR-1363](https://lablup.atlassian.net/browse/FR-1363)) ## Summary Update the StorageStatusPanelCard component to use the newly introduced BAIRowWrapWithDividers component instead of the traditional Ant Design Row/Col layout. This change improves the visual consistency and provides better responsive behavior with automatic dividers between items. | Before | After | |---------|--------| | ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/84989ee0-7ab9-4f2d-8f74-cc7687f9bc0b.png) | ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/cf72f225-9165-42f3-9516-303d16126d1d.png) | ## Changes Made - Replaced Ant Design Row/Col layout with BAIRowWrapWithDividers component - Configured proper spacing using design system tokens (token.marginXL for gaps) - Added automatic vertical dividers with proper styling (token.colorBorder) - Set appropriate divider inset (token.marginXS) for visual balance - Maintained existing functionality and responsive behavior - Simplified the component structure by removing manual border styling ## Technical Details The BAIRowWrapWithDividers component provides: - Automatic vertical dividers between items in a flex-wrapped layout - Responsive behavior that adjusts dividers based on row wrapping - Better maintenance by eliminating manual border styling on individual columns - Consistent spacing using design system tokens ## Testing - [ ] Verify StorageStatusPanelCard displays correctly in different screen sizes - [ ] Confirm dividers appear only between items on the same row - [ ] Ensure all existing functionality (tooltips, badges, click handlers) works - [ ] Check responsive behavior when items wrap to new lines [FR-1363]: https://lablup.atlassian.net/browse/FR-1363?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent 4ca70f7 commit c09fef4

File tree

1 file changed

+82
-88
lines changed

1 file changed

+82
-88
lines changed

‎react/src/components/StorageStatusPanelCard.tsx‎

Lines changed: 82 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
55
import { useCurrentProjectValue } from '../hooks/useCurrentProject';
66
import usePrimaryColors from '../hooks/usePrimaryColors';
77
import BAIPanelItem from './BAIPanelItem';
8-
import { Badge, Col, Row, theme, Tooltip, Typography } from 'antd';
8+
import { Badge, theme, Tooltip, Typography } from 'antd';
99
import { createStyles } from 'antd-style';
10-
import { BAICard, BAICardProps } from 'backend.ai-ui';
10+
import { BAICard, BAICardProps, BAIRowWrapWithDividers } from 'backend.ai-ui';
1111
import _ from 'lodash';
1212
import React, { useDeferredValue } from 'react';
1313
import { useTranslation } from 'react-i18next';
@@ -31,6 +31,8 @@ interface StorageStatusPanelProps extends BAICardProps {
3131
onRequestBadgeClick?: () => void;
3232
}
3333

34+
const PANEL_ITEM_MAX_WIDTH = 90; // Adjusted max width for panel items
35+
3436
const StorageStatusPanelCard: React.FC<StorageStatusPanelProps> = ({
3537
fetchKey,
3638
onRequestBadgeClick,
@@ -97,98 +99,90 @@ const StorageStatusPanelCard: React.FC<StorageStatusPanelProps> = ({
9799
return (
98100
<>
99101
<BAICard {...cardProps} title={t('data.StorageStatus')}>
100-
<Row gutter={[24, 16]}>
101-
<Col
102-
span={8}
103-
style={{
104-
borderRight: `1px solid ${token.colorBorderSecondary}`,
105-
justifyItems: 'center',
106-
}}
107-
>
108-
<BAIPanelItem
109-
title={t('data.MyFolders')}
110-
value={createdCount}
111-
unit={
112-
user_resource_policy?.max_vfolder_count
113-
? `/ ${user_resource_policy?.max_vfolder_count}`
114-
: undefined
115-
}
116-
/>
117-
</Col>
118-
<Col
119-
span={8}
102+
<BAIRowWrapWithDividers
103+
rowGap={token.marginXL}
104+
columnGap={token.marginXL}
105+
dividerColor={token.colorBorder}
106+
dividerInset={token.marginXS}
107+
dividerWidth={token.lineWidth}
108+
>
109+
<BAIPanelItem
110+
title={t('data.MyFolders')}
111+
value={createdCount}
112+
unit={
113+
user_resource_policy?.max_vfolder_count
114+
? `/ ${user_resource_policy?.max_vfolder_count}`
115+
: undefined
116+
}
120117
style={{
121-
borderRight: `1px solid ${token.colorBorderSecondary}`,
122-
justifyItems: 'center',
118+
maxWidth: PANEL_ITEM_MAX_WIDTH,
123119
}}
124-
>
125-
<BAIPanelItem
126-
title={t('data.ProjectFolders')}
127-
value={projectCount}
128-
unit={
129-
project_resource_policy?.max_vfolder_count
130-
? `/ ${project_resource_policy?.max_vfolder_count}`
131-
: undefined
132-
}
133-
/>
134-
</Col>
135-
<Col
136-
span={8}
120+
/>
121+
<BAIPanelItem
122+
title={t('data.ProjectFolders')}
123+
value={projectCount}
124+
unit={
125+
project_resource_policy?.max_vfolder_count
126+
? `/ ${project_resource_policy?.max_vfolder_count}`
127+
: undefined
128+
}
137129
style={{
138-
justifyItems: 'center',
130+
maxWidth: PANEL_ITEM_MAX_WIDTH,
139131
}}
140-
>
141-
<BAIPanelItem
142-
title={
143-
count > 0 ? (
144-
// Add <a></a> to make tooltip clickable
145-
// eslint-disable-next-line
146-
<a
147-
onClick={() => {
148-
onRequestBadgeClick?.();
149-
}}
150-
>
151-
<Tooltip
152-
title={
153-
count > 0
154-
? t('data.InvitedFoldersTooltip', {
155-
count: count,
156-
})
157-
: null
158-
}
159-
rootClassName={styles.invitationTooltip}
160-
placement="topRight"
161-
>
162-
<Badge
163-
count={count > 0 ? `+${count}` : null}
164-
offset={[0, -`${token.sizeXS}`]}
165-
>
166-
<Typography.Title level={5} style={{ margin: 0 }}>
167-
{t('data.InvitedFolders')}
168-
</Typography.Title>
169-
</Badge>
170-
</Tooltip>
171-
</a>
172-
) : (
173-
<Typography.Title level={5} style={{ margin: 0 }}>
174-
{t('data.InvitedFolders')}
175-
</Typography.Title>
176-
)
177-
}
178-
value={
179-
<Typography.Text
180-
strong
181-
style={{
182-
fontSize: token.fontSizeHeading1,
183-
color: primaryColors.primary5,
132+
/>
133+
<BAIPanelItem
134+
title={
135+
count > 0 ? (
136+
// Add <a></a> to make tooltip clickable
137+
// eslint-disable-next-line
138+
<a
139+
onClick={() => {
140+
onRequestBadgeClick?.();
184141
}}
185142
>
186-
{invitedCount}
187-
</Typography.Text>
188-
}
189-
/>
190-
</Col>
191-
</Row>
143+
<Tooltip
144+
title={
145+
count > 0
146+
? t('data.InvitedFoldersTooltip', {
147+
count: count,
148+
})
149+
: null
150+
}
151+
rootClassName={styles.invitationTooltip}
152+
placement="topRight"
153+
>
154+
<Badge
155+
count={count > 0 ? `+${count}` : null}
156+
offset={[0, -`${token.sizeXS}`]}
157+
>
158+
<Typography.Title level={5} style={{ margin: 0 }}>
159+
{t('data.InvitedFolders')}
160+
</Typography.Title>
161+
</Badge>
162+
</Tooltip>
163+
</a>
164+
) : (
165+
<Typography.Title level={5} style={{ margin: 0 }}>
166+
{t('data.InvitedFolders')}
167+
</Typography.Title>
168+
)
169+
}
170+
value={
171+
<Typography.Text
172+
strong
173+
style={{
174+
fontSize: token.fontSizeHeading1,
175+
color: primaryColors.primary5,
176+
}}
177+
>
178+
{invitedCount}
179+
</Typography.Text>
180+
}
181+
style={{
182+
maxWidth: PANEL_ITEM_MAX_WIDTH,
183+
}}
184+
/>
185+
</BAIRowWrapWithDividers>
192186
</BAICard>
193187
</>
194188
);

0 commit comments

Comments
 (0)