Skip to content

Commit 0efdc60

Browse files
viovio
committed
fix: Update bundgets data structure
1 parent c59df72 commit 0efdc60

12 files changed

+458
-316
lines changed

‎packages/ui/src/components/budget-info/budget-info.jsx

+12-22
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import cx from 'classnames';
33
import PropTypes from 'prop-types';
44
import { InsightType } from '@bundle-stats/utils';
5-
import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
65

76
import { Icon } from '../../ui/icon';
87
import { Tooltip } from '../../ui/tooltip';
@@ -24,38 +23,29 @@ const INSIGHT_TYPE_MAP = {
2423
},
2524
};
2625

27-
export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
28-
const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
29-
const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
26+
export const BudgetInfo = ({ className = '', budgetInsight }) => {
27+
const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsight.type];
3028

3129
const rootClassName = cx(css.root, insightTypeClassName, className);
32-
const { data: messageData } = budgetInsightInfo.message;
3330

3431
return (
35-
<Tooltip
36-
className={rootClassName}
37-
title={
38-
<>
39-
<strong>{messageData.metricLabel}</strong>
40-
{` value (`}
41-
<strong>{messageData.currentValue}</strong>
42-
{`) is ${messageData.diffLabel} `}
43-
<strong>{messageData.budgetValue}</strong>
44-
{` budget `}
45-
</>
46-
}
47-
>
32+
<Tooltip className={rootClassName} title={budgetInsight.message.text}>
4833
<Icon className={css.icon} glyph={glyph} size="medium" />
4934
</Tooltip>
5035
);
5136
};
5237

5338
BudgetInfo.propTypes = {
54-
metricId: PropTypes.string.isRequired,
5539
budgetInsight: PropTypes.shape({
56-
currentValue: PropTypes.number,
57-
budgetValue: PropTypes.number,
58-
failed: PropTypes.bool,
40+
type: PropTypes.string,
41+
message: PropTypes.shape({
42+
text: PropTypes.string,
43+
}),
44+
data: PropTypes.shape({
45+
currentValue: PropTypes.number,
46+
budgetValue: PropTypes.number,
47+
failed: PropTypes.bool,
48+
}),
5949
}).isRequired,
6050
className: PropTypes.string,
6151
};

‎packages/ui/src/components/budget-info/budget-info.stories.jsx

+27-12
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,48 @@ stories.addDecorator(getWrapperDecorator());
99

1010
stories.add('default', () => (
1111
<BudgetInfo
12-
metricId="webpack.assetCount"
1312
budgetInsight={{
14-
budgetValue: 300,
15-
currentValue: 250,
16-
failed: false,
13+
type: 'SUCCESS',
14+
message: {
15+
text: 'Metric is under the budget',
16+
},
17+
data: {
18+
budgetValue: 300,
19+
currentValue: 250,
20+
failed: false,
21+
},
1722
}}
1823
/>
1924
));
2025

2126
stories.add('error', () => (
2227
<BudgetInfo
23-
metricId="webpack.assetCount"
2428
budgetInsight={{
25-
budgetValue: 300,
26-
currentValue: 350,
27-
failed: true,
29+
type: 'ERROR',
30+
message: {
31+
text: 'Metric is over the budget',
32+
},
33+
data: {
34+
budgetValue: 300,
35+
currentValue: 250,
36+
failed: false,
37+
},
2838
}}
2939
/>
3040
));
3141

3242
stories.add('warning', () => (
3343
<BudgetInfo
34-
metricId="webpack.assetCount"
3544
budgetInsight={{
36-
budgetValue: 300,
37-
currentValue: 300,
38-
failed: false,
45+
type: 'WARNING',
46+
message: {
47+
text: 'Metric is equal the budget',
48+
},
49+
data: {
50+
budgetValue: 300,
51+
currentValue: 250,
52+
failed: false,
53+
},
3954
}}
4055
/>
4156
));

‎packages/ui/src/components/budget-insights/budget-insights.jsx

+55-45
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react';
22
import PropTypes from 'prop-types';
33
import cx from 'classnames';
44
import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
5-
import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
65

76
import { Box } from '../../layout/box';
87
import { Stack } from '../../layout/stack';
@@ -13,30 +12,28 @@ import { ComponentLink } from '../component-link';
1312
import css from './budget-insights.module.css';
1413

1514
const Budget = (props) => {
16-
const { className, metricId, budgetInsight, CustomLink } = props;
15+
const { className, metricId, budget, CustomLink } = props;
1716
const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
18-
const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
19-
const { data: messageData } = budgetInsightInfo.message;
2017

2118
return (
2219
<CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
23-
<strong>{messageData.metricLabel}</strong>
24-
{` value (`}
25-
<strong>{messageData.currentValue}</strong>
26-
{`) is ${messageData.diffLabel} `}
27-
<strong>{messageData.budgetValue}</strong>
28-
{` budget `}
20+
{budget.message.text}
2921
</CustomLink>
3022
);
3123
};
3224

3325
Budget.propTypes = {
3426
className: PropTypes.string,
3527
metricId: PropTypes.string.isRequired,
36-
budgetInsight: PropTypes.shape({
37-
currentValue: PropTypes.number.isRequired,
38-
budgetValue: PropTypes.number.isRequired,
39-
failed: PropTypes.bool.isRequired,
28+
budget: PropTypes.shape({
29+
message: PropTypes.shape({
30+
text: PropTypes.string,
31+
}),
32+
data: PropTypes.shape({
33+
currentValue: PropTypes.number.isRequired,
34+
budgetValue: PropTypes.number.isRequired,
35+
failed: PropTypes.bool.isRequired,
36+
}),
4037
}).isRequired,
4138
CustomLink: PropTypes.elementType.isRequired,
4239
};
@@ -103,44 +100,57 @@ BudgetsGroup.defaultProps = {
103100
className: '',
104101
};
105102

106-
export const BudgetInsights = (props) => {
107-
const { className, source, budgets, CustomLink } = props;
103+
const BUDGET_ALERT_KIND = new Map([
104+
['ERROR', 'danger'],
105+
['WARNING', 'warning'],
106+
['SUCCESS', 'success'],
107+
]);
108108

109-
const [failedBudgets, passedBudgets] = useMemo(() => {
110-
const passed = [];
111-
const failed = [];
109+
const BUDGET_ICON = new Map([
110+
['ERROR', Icon.ICONS.ALERT_CIRCLE],
111+
['WARNING', Icon.ICONS.WARNING],
112+
['SUCCESS', Icon.ICONS.CHECK_CIRCLE],
113+
]);
112114

113-
Object.entries(budgets).forEach(([key, budget]) => {
114-
if (budget.failed) {
115-
failed.push([key, budget]);
116-
} else {
117-
passed.push([key, budget]);
118-
}
119-
});
115+
export const BudgetInsights = (props) => {
116+
const { className, source, budgets, CustomLink } = props;
117+
const [showBudgets, setShowBudgets] = useState(false);
120118

121-
return [failed, passed];
122-
}, [budgets]);
119+
const iconGlyph = BUDGET_ICON.get(budgets.type);
120+
const alertKind = BUDGET_ALERT_KIND.get(budgets.type);
121+
const rootClassName = cx(css.group, className, css[`group-${alertKind}`]);
123122

124123
return (
125-
<Stack className={className} space="xsmall">
126-
{failedBudgets.length > 0 && (
127-
<BudgetsGroup
128-
kind="danger"
129-
source={source}
130-
budgets={failedBudgets}
131-
CustomLink={CustomLink}
132-
/>
133-
)}
124+
<Alert kind={alertKind} padding="none" className={rootClassName}>
125+
<Box
126+
padding={['xsmall', 'small']}
127+
className={css.groupHeader}
128+
as="button"
129+
type="button"
130+
onClick={() => setShowBudgets(!showBudgets)}
131+
>
132+
<FlexStack space="xxsmall" className={css.groupTitle}>
133+
{iconGlyph && <Icon className={css.groupIcon} glyph={iconGlyph} />}
134+
<span>{budgets.message.text}</span>
135+
<span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
136+
</FlexStack>
137+
</Box>
134138

135-
{passedBudgets.length > 0 && (
136-
<BudgetsGroup
137-
kind="success"
138-
source={source}
139-
budgets={passedBudgets}
140-
CustomLink={CustomLink}
141-
/>
139+
{showBudgets && (
140+
<Box padding={['xsmall', 'small']} className={css.groupContent}>
141+
<Stack space="none">
142+
{Object.entries(budgets.data).map(([key, budget]) => (
143+
<Budget
144+
key={key}
145+
metricId={`${source}.${key}`}
146+
budget={budget}
147+
CustomLink={CustomLink}
148+
/>
149+
))}
150+
</Stack>
151+
</Box>
142152
)}
143-
</Stack>
153+
</Alert>
144154
);
145155
};
146156

‎packages/ui/src/components/budget-insights/budget-insights.module.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,15 @@
2020
margin: 0 0 0 auto !important;
2121
}
2222

23-
.danger .groupIcon {
23+
.group-danger .groupIcon {
2424
color: var(--color-danger);
2525
}
2626

27-
.success .groupIcon {
27+
.group-warning .groupIcon {
28+
color: var(--color-warning);
29+
}
30+
31+
.group-success .groupIcon {
2832
color: var(--color-success);
2933
}
3034

0 commit comments

Comments
 (0)