diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx index 9444a87c5c..2b87337963 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx @@ -7,6 +7,7 @@ import TimelineDot from "@mui/lab/TimelineDot"; import TimelineItem, { timelineItemClasses } from "@mui/lab/TimelineItem"; import TimelineSeparator from "@mui/lab/TimelineSeparator"; import Box from "@mui/material/Box"; +import Divider from "@mui/material/Divider"; import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; @@ -110,30 +111,25 @@ const EditHistory = () => { return ( {loading && !data ? ( - + ) : ( - + - {data?.operations?.map((op: Operation, i: number) => ( - - - - inUndoScope(i) - ? theme.palette.grey[400] - : theme.palette.grey[900], - }} - /> - {i < data.operations.length - 1 && ( - + {data?.operations?.map((op: Operation, i: number) => ( + + + inUndoScope(i) @@ -141,111 +137,129 @@ const EditHistory = () => { : theme.palette.grey[900], }} /> - )} - - - + inUndoScope(i) + ? theme.palette.grey[400] + : theme.palette.grey[900], + }} + /> + )} + + - - - {`${ - op.actor - ? `Edited by ${op.actor?.firstName} ${op.actor?.lastName}` - : `Created flow` - }`} - - - {formatLastEditDate(op.createdAt)} - - - {i > 0 && op.actor && canUserEditTeam(teamSlug) && ( - - handleUndo(i)} - onMouseEnter={() => setFocusedOpIndex(i)} - onMouseLeave={() => setFocusedOpIndex(undefined)} + + + - - - - )} - - {op.data && ( - <> - - {[...new Set(formatOps(flow, op.data))] - .slice(0, OPS_TO_DISPLAY) - .map((formattedOp, i) => ( - - {formattedOp} - - ))} - - {[...new Set(formatOps(flow, op.data))].length > - OPS_TO_DISPLAY && ( - + - + + {i > 0 && op.actor && canUserEditTeam(teamSlug) && ( + + handleUndo(i)} + onMouseEnter={() => setFocusedOpIndex(i)} + onMouseLeave={() => setFocusedOpIndex(undefined)} > - {[...new Set(formatOps(flow, op.data))] - .slice(OPS_TO_DISPLAY) - .map((formattedOp, i) => ( - - {formattedOp} - - ))} - - + + + )} - - )} - - - ))} - + + {op.data && ( + <> + + {[...new Set(formatOps(flow, op.data))] + .slice(0, OPS_TO_DISPLAY) + .map((formattedOp, i) => ( + + {formattedOp} + + ))} + + {[...new Set(formatOps(flow, op.data))].length > + OPS_TO_DISPLAY && ( + + + {[...new Set(formatOps(flow, op.data))] + .slice(OPS_TO_DISPLAY) + .map((formattedOp, i) => ( + + {formattedOp} + + ))} + + + )} + + )} + + + ))} + + {data?.operations.length === 15 && ( + <> + + + {`History shows the last 15 edits made to this service. If you have questions about restoring to an earlier point in time, please contact a PlanX developer.`} + + + )} + )} );