FIXUP: wip

relative-ci · Mar 31, 2022 · fb30045 · fb30045
1 parent 06a67ac
commit fb30045
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 71 deletions.
diff --git a/packages/ui/src/components/budget-insights/budget-insights.jsx b/packages/ui/src/components/budget-insights/budget-insights.jsx
@@ -103,44 +103,57 @@ BudgetsGroup.defaultProps = {
   className: '',
 };
 
+const BUDGET_ALERT_KIND = new Map([
+  ['ERROR', 'danger'],
+  ['WARNING', 'warning'],
+  ['SUCCESS', 'success'],
+]);
+
+const BUDGET_ICON = new Map([
+  ['ERROR', Icon.ICONS.ALERT_CIRCLE],
+  ['WARNING', Icon.ICONS.WARNING],
+  ['SUCCESS', Icon.ICONS.CHECK_CIRCLE],
+]);
+
 export const BudgetInsights = (props) => {
   const { className, source, budgets, CustomLink } = props;
+  const [showBudgets, setShowBudgets] = useState(false);
 
-  const [failedBudgets, passedBudgets] = useMemo(() => {
-    const passed = [];
-    const failed = [];
-
-    Object.entries(budgets).forEach(([key, budget]) => {
-      if (budget.failed) {
-        failed.push([key, budget]);
-      } else {
-        passed.push([key, budget]);
-      }
-    });
-
-    return [failed, passed];
-  }, [budgets]);
+  const iconGlyph = BUDGET_ICON.get(budgets.type);
+  const alertKind = BUDGET_ALERT_KIND.get(budgets.type);
+  const rootClassName = cx(css.group, className, css[`group-${alertKind}`]);
 
   return (
-    <Stack className={className} space="xsmall">
-      {failedBudgets.length > 0 && (
-        <BudgetsGroup
-          kind="danger"
-          source={source}
-          budgets={failedBudgets}
-          CustomLink={CustomLink}
-        />
-      )}
+    <Alert kind={alertKind} padding="none" className={rootClassName}>
+      <Box
+        padding={['xsmall', 'small']}
+        className={css.groupHeader}
+        as="button"
+        type="button"
+        onClick={() => setShowBudgets(!showBudgets)}
+      >
+        <FlexStack space="xxsmall" className={css.groupTitle}>
+          {iconGlyph && <Icon className={css.groupIcon} glyph={iconGlyph} />}
+          <span>{budgets.message.text}</span>
+          <span className={css.groupTitleToggle}>{showBudgets ? 'hide' : 'show'} all</span>
+        </FlexStack>
+      </Box>
 
-      {passedBudgets.length > 0 && (
-        <BudgetsGroup
-          kind="success"
-          source={source}
-          budgets={passedBudgets}
-          CustomLink={CustomLink}
-        />
+      {showBudgets && (
+        <Box padding={['xsmall', 'small']} className={css.groupContent}>
+          <Stack space="none">
+            {Object.entries(budgets.data).map(([key, budget]) => (
+              <Budget
+                key={key}
+                metricId={`${source}.${key}`}
+                budgetInsight={budget}
+                CustomLink={CustomLink}
+              />
+            ))}
+          </Stack>
+        </Box>
       )}
-    </Stack>
+    </Alert>
   );
 };
 

diff --git a/packages/ui/src/components/budget-insights/budget-insights.module.css b/packages/ui/src/components/budget-insights/budget-insights.module.css
@@ -20,11 +20,15 @@
   margin: 0 0 0 auto !important;
 }
 
-.danger .groupIcon {
+.group-danger .groupIcon {
   color: var(--color-danger);
 }
 
-.success .groupIcon {
+.group-warning .groupIcon {
+  color: var(--color-warning);
+}
+
+.group-success .groupIcon {
   color: var(--color-success);
 }
 

diff --git a/packages/ui/src/components/budget-insights/budget-insights.stories.jsx b/packages/ui/src/components/budget-insights/budget-insights.stories.jsx
@@ -22,45 +22,108 @@ export const Default = Template.bind();
 Default.args = {
   source: 'webpack',
   budgets: {
-    totalSizeByTypeALL: {
-      currentValue: 2097917,
-      budgetValue: 2097152,
-      failed: true,
-    },
-    totalInitialSizeJS: {
-      currentValue: 1265645,
-      budgetValue: 524288,
-      failed: true,
-    },
-    totalInitialSizeCSS: {
-      currentValue: 48866,
-      budgetValue: 51200,
-      failed: false,
+    type: 'SUCCESS',
+    message: {
+      text: '8 budget checks passed',
+      md: '**8** budget checks passed',
     },
-    chunkCount: {
-      currentValue: 12,
-      budgetValue: 50,
-      failed: false,
-    },
-    moduleCount: {
-      currentValue: 1059,
-      budgetValue: 2000,
-      failed: false,
-    },
-    duplicatePackagesCount: {
-      currentValue: 13,
-      budgetValue: 5,
-      failed: true,
-    },
-    'sizes.totalSizeByTypeJS': {
-      currentValue: 1981470,
-      budgetValue: 2097152,
-      failed: false,
-    },
-    'sizes.totalSizeByTypeCSS': {
-      currentValue: 56091,
-      budgetValue: 20480,
-      failed: true,
+    data: {
+      totalSizeByTypeALL: {
+        type: 'ERROR',
+        message: {
+          text: 'Bundle Size is over the budget',
+          md: 'Bundle Size is over the budget',
+        },
+        data: {
+          currentValue: 2097917,
+          budgetValue: 2097152,
+          failed: true,
+        },
+      },
+      totalInitialSizeJS: {
+        type: 'ERROR',
+        message: {
+          text: 'Initial JS is over the budget',
+          md: 'Initial JS is over the budget',
+        },
+        data: {
+          currentValue: 1265645,
+          budgetValue: 524288,
+          failed: true,
+        },
+      },
+      totalInitialSizeCSS: {
+        type: 'SUCCESS',
+        message: {
+          text: 'Initial CSS is under the budget',
+          md: 'Initial CSS is under the budget',
+        },
+        data: {
+          currentValue: 48866,
+          budgetValue: 51200,
+          failed: false,
+        },
+      },
+      chunkCount: {
+        type: 'SUCCESS',
+        message: {
+          text: 'Chunks is under the budget',
+          md: 'Chunks is under the budget',
+        },
+        data: {
+          currentValue: 12,
+          budgetValue: 50,
+          failed: false,
+        },
+      },
+      moduleCount: {
+        type: 'SUCCESS',
+        message: {
+          text: 'Modules is under the budget',
+          md: 'Modules is under the budget',
+        },
+        data: {
+          currentValue: 1059,
+          budgetValue: 2000,
+          failed: false,
+        },
+      },
+      duplicatePackagesCount: {
+        type: 'ERROR',
+        message: {
+          text: 'Duplicate packages is over the budget',
+          md: 'Duplicate packages is over the budget',
+        },
+        data: {
+          currentValue: 13,
+          budgetValue: 5,
+          failed: true,
+        },
+      },
+      'sizes.totalSizeByTypeJS': {
+        type: 'SUCCESS',
+        message: {
+          text: 'JS is under the budget',
+          md: 'JS is under the budget',
+        },
+        data: {
+          currentValue: 1981470,
+          budgetValue: 2097152,
+          failed: false,
+        },
+      },
+      'sizes.totalSizeByTypeCSS': {
+        type: 'SUCCESS',
+        message: {
+          text: 'CSS is under the budget',
+          md: 'CSS is under the budget',
+        },
+        data: {
+          currentValue: 56091,
+          budgetValue: 20480,
+          failed: true,
+        },
+      },
     },
   },
 };