diff --git a/editor.planx.uk/src/@planx/graph/__tests__/formatOps.test.ts b/editor.planx.uk/src/@planx/graph/__tests__/formatOps.test.ts index 05751a6ac7..5d66948318 100644 --- a/editor.planx.uk/src/@planx/graph/__tests__/formatOps.test.ts +++ b/editor.planx.uk/src/@planx/graph/__tests__/formatOps.test.ts @@ -1,7 +1,7 @@ import { formatOps, Graph } from "../index"; describe("Update operations", () => { - test("Updating a single property of a node", () => { + test("Updating a single property of a node that is in `allowProps`", () => { const ops = [ { p: ["FW5G3EMBI3", "data", "text"], @@ -11,7 +11,21 @@ describe("Update operations", () => { ]; expect(formatOps(flowWithChecklist, ops)).toEqual([ - 'Updated Checklist text from "Which fruits?" to "Which vegetables?"', + 'Updated Checklist text from "Which fruits?" to "Which vegetables?"', // shows prop name "fn" and content "from x to y" + ]); + }); + + test("Updating a single property of a node that is not in `allowProps`", () => { + const ops = [ + { + p: ["FW5G3EMBI3", "data", "info"], + oi: "New help text", + od: "Old help text", + }, + ]; + + expect(formatOps(flowWithChecklist, ops)).toEqual([ + "Updated Checklist info", // shows prop name "info", without content ]); }); @@ -142,6 +156,19 @@ describe("Insert operations", () => { ]); }); + test("Adding a data property to an existing node that is in `allowProps`", () => { + const ops = [ + { + p: ["FW5G3EMBI3", "data", "fn"], + oi: "food.fruit", + }, + ]; + + expect(formatOps(flowWithChecklist, ops)).toEqual([ + `Added Checklist fn "food.fruit"`, // shows prop name "fn" and content + ]); + }); + test("Adding a data property to an existing node that is not in `allowProps`", () => { const ops = [ { @@ -151,7 +178,7 @@ describe("Insert operations", () => { ]; expect(formatOps(flowWithChecklist, ops)).toEqual([ - "Added Checklist description", // only shows "description", not content + "Added Checklist description", // only shows prop name "description", not content ]); }); }); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx index 91340b5010..33dc1fc68d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditHistory.tsx @@ -15,7 +15,7 @@ import { OT } from "@planx/graph/types"; import DelayedLoadingIndicator from "components/DelayedLoadingIndicator"; import React, { useState } from "react"; -import { formatLastEditDate,Operation } from ".."; +import { formatLastEditDate, Operation } from ".."; import { useStore } from "../lib/store"; const EditHistory = () => { @@ -82,7 +82,8 @@ const EditHistory = () => { undoOperation(flattenedOperationsData); }; - const inFocus = (i: number): boolean => { + const inUndoScope = (i: number): boolean => { + // Is a given operation in the list in scope of also being "undone" if the currently focused button is clicked? return focusedOpIndex !== undefined && i < focusedOpIndex; }; @@ -105,14 +106,18 @@ const EditHistory = () => { - inFocus(i) ? undefined : theme.palette.grey[900], + inUndoScope(i) + ? theme.palette.grey[400] + : theme.palette.grey[900], }} /> {i < data.operations.length - 1 && ( - inFocus(i) ? undefined : theme.palette.grey[900], + inUndoScope(i) + ? theme.palette.grey[400] + : theme.palette.grey[900], }} /> )} @@ -129,7 +134,7 @@ const EditHistory = () => { {`${ op.actor @@ -139,7 +144,7 @@ const EditHistory = () => { {formatLastEditDate(op.createdAt)} @@ -154,7 +159,7 @@ const EditHistory = () => { > )} @@ -165,12 +170,14 @@ const EditHistory = () => { variant="body2" component="ul" padding={2} - color={inFocus(i) ? "GrayText" : "inherit"} + color={inUndoScope(i) ? "GrayText" : "inherit"} > {[...new Set(formatOps(flow, op.data))] .slice(0, OPS_TO_DISPLAY) .map((formattedOp, i) => ( -
  • {formattedOp}
  • +
  • + {formattedOp} +
  • ))} {[...new Set(formatOps(flow, op.data))].length > @@ -190,12 +197,14 @@ const EditHistory = () => { variant="body2" component="ul" padding={2} - color={inFocus(i) ? "GrayText" : "inherit"} + color={inUndoScope(i) ? "GrayText" : "inherit"} > {[...new Set(formatOps(flow, op.data))] .slice(OPS_TO_DISPLAY) .map((formattedOp, i) => ( -
  • {formattedOp}
  • +
  • + {formattedOp} +
  • ))}