diff --git a/frontend/packages/core/src/AppNotifications/LayoutWithNotifications.tsx b/frontend/packages/core/src/AppNotifications/LayoutWithNotifications.tsx index 578e7b4a73..a34c57304e 100644 --- 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 && ( - - {perWorkflowData[workflow]?.linkText} - - )} + + {perWorkflowData[workflow]?.message} + {perWorkflowData[workflow]?.link && perWorkflowData[workflow]?.linkText && ( + + {perWorkflowData[workflow]?.linkText} + + )} + )} {showAlertMultiWorkflow && !showAlertPerWorkflow && ( @@ -80,12 +102,14 @@ const LayoutWithNotifications = ({ elevation={6} onClose={onDismissAlertMultiWorkflow} > - {multiWorkflowData?.message} - {multiWorkflowData?.link && multiWorkflowData?.linkText && ( - - {multiWorkflowData?.linkText} - - )} + + {multiWorkflowData?.message} + {multiWorkflowData?.link && multiWorkflowData?.linkText && ( + + {multiWorkflowData?.linkText} + + )} + )} diff --git a/frontend/packages/core/src/AppNotifications/useCompareAppNotificationsData.tsx b/frontend/packages/core/src/AppNotifications/useCompareAppNotificationsData.tsx index c87df15e48..e22c692cda 100644 --- 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 index add3dddd3b..e0caedbd21 100644 --- 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 { 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 index 9d2bd6851f..b42b50a982 100644 --- 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 new file mode 100644 index 0000000000..c83c40d0a4 --- /dev/null +++ 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;