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;