From 7ccde86685de5de50fc4540ea2ae3177ecc09a84 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Tue, 30 Jul 2024 14:36:06 +0200 Subject: [PATCH] fix: update styling of publish dialog validation checks based on feedback (#3473) --- .../components/Sidebar/PublishDialog.tsx | 111 ++++++++++++++++-- 1 file changed, 103 insertions(+), 8 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/PublishDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/PublishDialog.tsx index f956eaccbb..5aeef4e9cf 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/PublishDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/PublishDialog.tsx @@ -1,18 +1,25 @@ +import Cancel from "@mui/icons-material/Cancel"; +import CheckCircle from "@mui/icons-material/CheckCircle"; import Close from "@mui/icons-material/Close"; import Done from "@mui/icons-material/Done"; +import Help from "@mui/icons-material/Help"; import NotInterested from "@mui/icons-material/NotInterested"; -import Warning from "@mui/icons-material/Warning"; +import WarningAmber from "@mui/icons-material/WarningAmber"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Collapse from "@mui/material/Collapse"; import Divider from "@mui/material/Divider"; +import IconButton from "@mui/material/IconButton"; import Link from "@mui/material/Link"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from "@mui/material/ListItemText"; +import { styled } from "@mui/material/styles"; +import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; +import countBy from "lodash/countBy"; import { formatLastPublishMessage } from "pages/FlowEditor/utils"; import React, { useState } from "react"; import { useAsync } from "react-use"; @@ -147,7 +154,7 @@ export const AlteredNodesSummaryContent = (props: { return ( - + {`Changes`} {changeSummary["title"] && ( @@ -230,6 +237,17 @@ export const AlteredNodesSummaryContent = (props: { ); }; +const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( + +))(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: theme.palette.background.default, + color: theme.palette.text.primary, + boxShadow: theme.shadows[1], + fontSize: theme.typography.body2, + }, +})); + export interface ValidationCheck { title: string; status: "Pass" | "Fail" | "Warn" | "Not applicable"; @@ -244,19 +262,41 @@ export const ValidationChecks = (props: { const Icon: Record = { Pass: , Fail: , - Warn: , + Warn: , "Not applicable": , }; return ( - + Validation checks + + + + + - + + {validationChecks.map((check, i) => ( - - theme.spacing(3) }}> + theme.palette.background.default, + border: (theme) => `1px solid ${theme.palette.border.light}`, + marginTop: "-1px", // eliminate double borders + }} + > + theme.spacing(4) }}> {Icon[check.status]} ))} - + + ); +}; + +const ValidationSummary = (props: { validationChecks: ValidationCheck[] }) => { + const { validationChecks } = props; + const atLeastOneFail = + validationChecks.filter((check) => check.status === "Fail").length > 0; + const countByStatus = countBy(validationChecks, "status"); + + const summary: string[] = []; + Object.entries(countByStatus).map(([status, count]) => { + switch (status) { + case "Fail": + summary.push(`${count} failing`); + break; + case "Warn": + summary.push(count === 1 ? `${count} warning` : `${count} warnings`); + break; + case "Pass": + summary.push(`${count} successful`); + break; + case "Not applicable": + summary.push(`${count} skipped`); + break; + } + }); + // If there aren't any fails, still add "0 errors" to end of summary string for distinction from "warnings" + const formattedSummary = atLeastOneFail + ? summary.join(", ") + : summary.join(", ").concat(", 0 errors"); + + return ( + + {atLeastOneFail ? ( + theme.spacing(5.5) }} + /> + ) : ( + theme.spacing(5.5) }} + /> + )} + + {atLeastOneFail ? `Fix errors before publishing` : `Ready to publish`} + {formattedSummary} + ); };