Add paths attribute to per workflow banner settings (#3109)

### Description For the App Notification Banner, user can now specify the paths of a workflow that need to show the banner configured in the appConfiguration banners settings. --------- Co-authored-by: Josh Slaughter <8338893+jdslaugh@users.noreply.github.com>
lyft · Sep 13, 2024 · 18fcbb2 · 18fcbb2
1 parent 331daca
commit 18fcbb2
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 deletions.
diff --git a/frontend/packages/core/src/AppNotifications/LayoutWithNotifications.tsx b/frontend/packages/core/src/AppNotifications/LayoutWithNotifications.tsx
@@ -1,10 +1,13 @@
 import React from "react";
+import { useLocation } from "react-router-dom";
+import styled from "@emotion/styled";
 import isEmpty from "lodash/isEmpty";
 
 import { Alert } from "../Feedback";
 import Grid from "../grid";
 import { Link as LinkComponent } from "../link";
 import type { AppBanners } from "../Types";
+import { findPathMatchList } from "../utils";
 
 interface LayoutWithNotificationsProps {
   bannersData: AppBanners;
@@ -13,6 +16,14 @@ interface LayoutWithNotificationsProps {
   workflow?: string;
 }
 
+const AlertContent = styled.div({
+  display: "flex",
+});
+
+const StyledLink = styled(LinkComponent)({
+  marginLeft: "8px",
+});
+
 const LayoutWithNotifications = ({
   bannersData,
   onDismissAlert,
@@ -22,8 +33,17 @@ const LayoutWithNotifications = ({
   const perWorkflowData = bannersData?.perWorkflow;
   const multiWorkflowData = bannersData?.multiWorkflow;
 
-  const showAlertPerWorkflow =
+  const location = useLocation();
+
+  const pathMatches = findPathMatchList(location?.pathname, perWorkflowData[workflow]?.paths);
+
+  const hasPerWorkflowAlert =
     workflow && perWorkflowData[workflow] && !perWorkflowData[workflow]?.dismissed;
+  const showAlertPerWorkflow = !isEmpty(perWorkflowData[workflow]?.paths)
+    ? hasPerWorkflowAlert &&
+      (perWorkflowData[workflow]?.paths?.includes(location.pathname) || pathMatches)
+    : hasPerWorkflowAlert;
+
   const showAlertMultiWorkflow =
     showAlertPerWorkflow || perWorkflowData[workflow]?.dismissed
       ? false
@@ -65,12 +85,14 @@ const LayoutWithNotifications = ({
                 elevation={6}
                 onClose={onDismissAlertPerWorkflow}
               >
-                {perWorkflowData[workflow]?.message}
-                {perWorkflowData[workflow]?.link && perWorkflowData[workflow]?.linkText && (
-                  <LinkComponent href={perWorkflowData[workflow]?.link}>
-                    {perWorkflowData[workflow]?.linkText}
-                  </LinkComponent>
-                )}
+                <AlertContent>
+                  {perWorkflowData[workflow]?.message}
+                  {perWorkflowData[workflow]?.link && perWorkflowData[workflow]?.linkText && (
+                    <StyledLink href={perWorkflowData[workflow]?.link}>
+                      {perWorkflowData[workflow]?.linkText}
+                    </StyledLink>
+                  )}
+                </AlertContent>
               </Alert>
             )}
             {showAlertMultiWorkflow && !showAlertPerWorkflow && (
@@ -80,12 +102,14 @@ const LayoutWithNotifications = ({
                 elevation={6}
                 onClose={onDismissAlertMultiWorkflow}
               >
-                {multiWorkflowData?.message}
-                {multiWorkflowData?.link && multiWorkflowData?.linkText && (
-                  <LinkComponent href={multiWorkflowData?.link}>
-                    {multiWorkflowData?.linkText}
-                  </LinkComponent>
-                )}
+                <AlertContent>
+                  {multiWorkflowData?.message}
+                  {multiWorkflowData?.link && multiWorkflowData?.linkText && (
+                    <StyledLink href={multiWorkflowData?.link}>
+                      {multiWorkflowData?.linkText}
+                    </StyledLink>
+                  )}
+                </AlertContent>
               </Alert>
             )}
           </Grid>

diff --git a/frontend/packages/core/src/AppNotifications/useCompareAppNotificationsData.tsx b/frontend/packages/core/src/AppNotifications/useCompareAppNotificationsData.tsx
@@ -59,6 +59,7 @@ const useCompareAppNotificationsData = (banners: AppBanners) => {
           linkText: bannersPreferences?.perWorkflow?.[key].linkText,
           link: bannersPreferences?.perWorkflow?.[key].link,
           severity: bannersPreferences?.perWorkflow?.[key].severity,
+          paths: bannersPreferences?.perWorkflow?.[key].paths,
         };
 
         if (!isEqual(banners?.perWorkflow?.[key], perWorkflowPreferences)) {

diff --git a/frontend/packages/core/src/Types/notification.tsx b/frontend/packages/core/src/Types/notification.tsx
@@ -13,6 +13,7 @@ export interface Banner extends Pick<AlertProps, "title" | "severity"> {
   dismissed: boolean;
   linkText?: string;
   link?: string;
+  paths?: string[];
 }
 
 export interface PerWorkflowBanner {

diff --git a/frontend/packages/core/src/utils/index.ts b/frontend/packages/core/src/utils/index.ts
@@ -1,2 +1,3 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as getDisplayName } from "./getDisplayName";
+export { default as findPathMatchList } from "./pathMatching";
diff --git a/frontend/packages/core/src/utils/pathMatching.tsx b/frontend/packages/core/src/utils/pathMatching.tsx
@@ -0,0 +1,9 @@
+import { matchPath } from "react-router";
+
+const findPathMatchList = (locationPathname: string, pathsToMatch: string[]) => {
+  const pathFound = pathsToMatch?.find((path: string) => matchPath({ path }, locationPathname));
+
+  return pathFound;
+};
+
+export default findPathMatchList;