- Deeper grouping of notices, now by message then severity

- Sorting of notices by severity - Added a number next to show details if # of notices > 1 - Adjusted css for info-svg-icon to align it with others - Turned off param-reassign rule
amundsen-io · Feb 23, 2024 · 3d33552 · 3d33552
1 parent 7b6cb9a
commit 3d33552
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/frontend/amundsen_application/static/js/components/Alert/Alert.tsx b/frontend/amundsen_application/static/js/components/Alert/Alert.tsx
@@ -82,6 +82,9 @@ export const Alert: React.FC<AlertProps> = ({
         onClick={handleSeeDetails}
       >
         {OPEN_PAYLOAD_CTA}
+        {(payload?.descriptions || []).length > 1
+          ? ` (${(payload.descriptions || []).length})`
+          : ''}
       </button>
     );
   }

diff --git a/frontend/amundsen_application/static/js/components/Alert/AlertList.tsx b/frontend/amundsen_application/static/js/components/Alert/AlertList.tsx
@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 
-import { NoticeType } from 'config/config-types';
+import { NoticeSeverity, NoticeType } from 'config/config-types';
 import { Alert } from './Alert';
 
 export interface AlertListProps {
@@ -17,21 +17,23 @@ export interface AggregatedAlertListProps {
 }
 
 const aggregateNotices = (notices) =>
-  notices.reduce((accum, notice: any) => {
+  notices.reduce((accum, notice: NoticeType) => {
     if (notice) {
       const { messageHtml, severity, payload } = notice;
 
-      /* eslint-disable no-param-reassign */
-      if (payload) {
-        accum[messageHtml] ??= {
-          severity,
-          payload: { descriptions: [] },
-        };
-        accum[messageHtml].payload.descriptions.push(payload);
-      } else {
-        accum[messageHtml] = { ...notice };
+      if (typeof messageHtml !== 'function') {
+        if (payload) {
+          accum[messageHtml] ??= {};
+          accum[messageHtml][severity] ??= {
+            payload: { descriptions: [] },
+          };
+          accum[messageHtml][severity].payload.descriptions.push(payload);
+        } else {
+          accum[messageHtml] = {
+            [severity]: { ...notice },
+          };
+        }
       }
-      /* eslint-enable no-param-reassign */
     }
 
     return accum;
@@ -43,17 +45,25 @@ export const AlertList: React.FC<AlertListProps> = ({ notices }) => {
   }
 
   const aggregated = aggregateNotices(notices);
+  const NoticeSeverityValues = Object.values(NoticeSeverity);
 
   return (
     <div className="alert-list">
-      {Object.keys(aggregated).map((notice, idx) => (
-        <Alert
-          key={idx}
-          message={notice}
-          severity={aggregated[notice].severity}
-          payload={aggregated[notice].payload}
-        />
-      ))}
+      {Object.keys(aggregated).map((notice, idx) =>
+        Object.keys(aggregated[notice])
+          .sort(
+            (a: NoticeSeverity, b: NoticeSeverity) =>
+              NoticeSeverityValues.indexOf(a) - NoticeSeverityValues.indexOf(b)
+          )
+          .map((severity) => (
+            <Alert
+              key={idx}
+              message={notice}
+              severity={severity as NoticeSeverity}
+              payload={aggregated[notice][severity].payload}
+            />
+          ))
+      )}
     </div>
   );
 };
diff --git a/frontend/amundsen_application/static/js/components/Alert/styles.scss b/frontend/amundsen_application/static/js/components/Alert/styles.scss
@@ -51,6 +51,11 @@ $alert-alert-background: #ffe4dd;
     margin-right: $spacer-1;
   }
 
+  .info-svg-icon {
+    margin-right: $spacer-half;
+    margin-left: -$spacer-half;
+  }
+
   .alert-action {
     margin: auto 0 auto auto;
   }

diff --git a/frontend/amundsen_application/static/package.json b/frontend/amundsen_application/static/package.json
@@ -414,7 +414,7 @@
       "no-multi-str": "warn",
       "no-nested-ternary": "warn",
       "no-new-wrappers": "error",
-      "no-param-reassign": "warn",
+      "no-param-reassign": "off",
       "no-plusplus": "off",
       "no-prototype-builtins": "off",
       "no-restricted-globals": "warn",