Skip to content

Commit

Permalink
Add paths attribute to per workflow banner settings (#3109)
Browse files Browse the repository at this point in the history
### 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 <[email protected]>
  • Loading branch information
lucechal14 and jdslaugh authored Sep 13, 2024
1 parent 331daca commit 18fcbb2
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -13,6 +16,14 @@ interface LayoutWithNotificationsProps {
workflow?: string;
}

const AlertContent = styled.div({
display: "flex",
});

const StyledLink = styled(LinkComponent)({
marginLeft: "8px",
});

const LayoutWithNotifications = ({
bannersData,
onDismissAlert,
Expand All @@ -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
Expand Down Expand Up @@ -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 && (
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/core/src/Types/notification.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface Banner extends Pick<AlertProps, "title" | "severity"> {
dismissed: boolean;
linkText?: string;
link?: string;
paths?: string[];
}

export interface PerWorkflowBanner {
Expand Down
1 change: 1 addition & 0 deletions frontend/packages/core/src/utils/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
// eslint-disable-next-line import/prefer-default-export
export { default as getDisplayName } from "./getDisplayName";
export { default as findPathMatchList } from "./pathMatching";
9 changes: 9 additions & 0 deletions frontend/packages/core/src/utils/pathMatching.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 18fcbb2

Please sign in to comment.