feat: describe altered nodes and prompt for summary message before publishing

api.planx.uk/publish.js

@@ -68,7 +68,37 @@ const dataMerged = async (id, ob = {}) => {
   return ob;
 };
 
-const publishFlow = async (req, res) => {
+const diffFlow = async (req, res, next) => {
+  if (!req.user?.sub)
+    return res.status(401).json({ error: "User ID missing from JWT" });
+
+  try {
+    const flattenedFlow = await dataMerged(req.params.flowId);
+    const mostRecent = await getMostRecentPublishedFlow(req.params.flowId);
+
+    const delta = jsondiffpatch.diff(mostRecent, flattenedFlow);
+
+    if (delta) {
+      const alteredNodes = Object.keys(delta).map((key) => ({
+        id: key,
+        ...flattenedFlow[key]
+      }));
+
+      res.json({
+        alteredNodes
+      });
+    } else {
+      res.json({
+        alteredNodes: null,
+        message: "No new changes",
+      });
+    }
+  } catch (error) {
+    next(error);
+  }
+};
+
+const publishFlow = async (req, res, next) => {
   if (!req.user?.sub)
     return res.status(401).json({ error: "User ID missing from JWT" });
 
@@ -84,12 +114,14 @@ const publishFlow = async (req, res) => {
           mutation PublishFlow(
             $data: jsonb = {},
             $flow_id: uuid,
-          $publisher_id: Int,
+            $publisher_id: Int,
+            $summary: String,
           ) {
             insert_published_flows_one(object: {
               data: $data,
               flow_id: $flow_id,
               publisher_id: $publisher_id,
+              summary: $summary,
             }) {
               id
               flow_id
@@ -103,8 +135,10 @@ const publishFlow = async (req, res) => {
           data: flattenedFlow,
           flow_id: req.params.flowId,
           publisher_id: parseInt(req.user.sub, 10),
+          summary: req.query?.summary || null,
         }
       );
+
       const publishedFlow =
         response.insert_published_flows_one &&
         response.insert_published_flows_one.data;
@@ -124,9 +158,8 @@ const publishFlow = async (req, res) => {
       });
     }
   } catch (error) {
-    console.error(error);
-    res.status(500).json({ error });
+    next(error);
   }
 };
 
-module.exports = { publishFlow };
+module.exports = { diffFlow, publishFlow };

api.planx.uk/server.js

@@ -22,7 +22,7 @@ const {
 
 const { signS3Upload } = require("./s3");
 const { locationSearch } = require("./gis/index");
-const { publishFlow } = require("./publish");
+const { diffFlow, publishFlow } = require("./publish");
 
 // debug, info, warn, error, silent
 const LOG_LEVEL = process.env.NODE_ENV === "test" ? "silent" : "debug";
@@ -444,6 +444,8 @@ app.get("/throw-error", () => {
   throw new Error("custom error");
 });
 
+app.post("/flows/:flowId/diff", useJWT, diffFlow);
+
 app.post("/flows/:flowId/publish", useJWT, publishFlow);
 
 // unauthenticated because accessing flow schema only, no user data

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -1,13 +1,19 @@
 import Box from "@material-ui/core/Box";
 import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogTitle from "@material-ui/core/DialogTitle";
 import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
 import Typography from "@material-ui/core/Typography";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import React, { useEffect, useState } from "react";
 import { ExternalLink, Globe, RefreshCw, Terminal } from "react-feather";
 import { useAsync } from "react-use";
+import Input from "ui/Input";
 
+import { TYPES } from "../../../@planx/components/types";
 import Questions from "../../Preview/Questions";
 import { useStore } from "../lib/store";
 
@@ -66,6 +72,31 @@ const DebugConsole = () => {
   );
 };
 
+function PublishChangeItem(props: any) {
+  const { node } = props;
+  let text, data;
+
+  if (node.id === "_root") {
+    text = "Changed _root service by adding, deleting or re-ordering nodes";
+  } else if (node.id === "0") {
+    text = `The entire _root service will be published for the first time`;
+  } else if (node.id && Object.keys(node).length === 1) {
+    text = `Deleted node ${node.id}`;
+  } else if (node.type && node.data) {
+    text = `Added/edited ${TYPES[node.type]}`;
+    data = JSON.stringify(node.data, null, 2);
+  } else {
+    text = `Added/edited ${TYPES[node.type]}`;
+  }
+
+  return (
+    <>
+      <Typography variant="body2">{text}</Typography>
+      {data && <pre style={{ fontSize: ".8em" }}>{data}</pre>}
+    </>
+  );
+}
+
 const PreviewBrowser: React.FC<{ url: string }> = React.memo((props) => {
   const [showDebugConsole, setDebugConsoleVisibility] = useState(false);
   const [
@@ -75,16 +106,23 @@ const PreviewBrowser: React.FC<{ url: string }> = React.memo((props) => {
     publishFlow,
     lastPublished,
     lastPublisher,
+    diffFlow,
   ] = useStore((state) => [
     state.id,
     state.resetPreview,
     state.setPreviewEnvironment,
     state.publishFlow,
     state.lastPublished,
     state.lastPublisher,
+    state.diffFlow,
   ]);
   const [key, setKey] = useState<boolean>(false);
-  const [lastPublishedTitle, setLastPublishedTitle] = useState<string>();
+  const [lastPublishedTitle, setLastPublishedTitle] = useState<string>(
+    "This flow is not published yet"
+  );
+  const [alteredNodes, setAlteredNodes] = useState<object[]>();
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [summary, setSummary] = useState<string>();
   const classes = useStyles();
 
   useEffect(() => setPreviewEnvironment("editor"), []);
@@ -152,18 +190,80 @@ const PreviewBrowser: React.FC<{ url: string }> = React.memo((props) => {
               variant="contained"
               color="primary"
               onClick={async () => {
-                setLastPublishedTitle("Sending changes...");
-                const publishedFlow = await publishFlow(flowId);
+                setLastPublishedTitle("Checking for changes...");
+                const alteredFlow = await diffFlow(flowId);
+                setAlteredNodes(
+                  alteredFlow?.data.alteredNodes
+                    ? alteredFlow.data.alteredNodes
+                    : []
+                );
                 setLastPublishedTitle(
-                  publishedFlow?.data.alteredNodes
-                    ? `Successfully published changes to ${publishedFlow.data.alteredNodes.length} node(s)`
+                  alteredFlow?.data.alteredNodes
+                    ? `Found changes to ${alteredFlow.data.alteredNodes.length} node(s)`
                     : "No new changes to publish"
                 );
+                setDialogOpen(true);
               }}
-              disabled={window.location.hostname.endsWith("planx.uk")}
             >
-              PUBLISH
+              CHECK FOR CHANGES TO PUBLISH
             </Button>
+            <Dialog
+              open={dialogOpen}
+              onClose={() => setDialogOpen(false)}
+              aria-labelledby="alert-dialog-title"
+              aria-describedby="alert-dialog-description"
+            >
+              <DialogTitle style={{ paddingBottom: 0 }}>
+                {lastPublishedTitle}
+              </DialogTitle>
+              <DialogContent>
+                {alteredNodes?.length ? (
+                  <>
+                    <Box pb={1}>
+                      <ul>
+                        {alteredNodes.map((a: any) => (
+                          <li key={a.id}>
+                            <PublishChangeItem node={a} />
+                          </li>
+                        ))}
+                      </ul>
+                    </Box>
+                    <Input
+                      bordered
+                      type="text"
+                      name="summary"
+                      value={summary || ""}
+                      placeholder="Summarise your changes..."
+                      onChange={(e) => setSummary(e.target.value)}
+                    />
+                  </>
+                ) : (
+                  `No new changes to publish`
+                )}
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={() => setDialogOpen(false)}>
+                  KEEP EDITING
+                </Button>
+                <Button
+                  color="primary"
+                  autoFocus
+                  onClick={async () => {
+                    setDialogOpen(false);
+                    setLastPublishedTitle("Publishing changes...");
+                    const publishedFlow = await publishFlow(flowId, summary);
+                    setLastPublishedTitle(
+                      publishedFlow?.data.alteredNodes
+                        ? `Successfully published changes to ${publishedFlow.data.alteredNodes.length} node(s)`
+                        : "No new changes to publish"
+                    );
+                  }}
+                  disabled={!alteredNodes || alteredNodes.length === 0}
+                >
+                  PUBLISH
+                </Button>
+              </DialogActions>
+            </Dialog>
             <Box mr={0}>
               <Typography variant="caption">{lastPublishedTitle}</Typography>
             </Box>

editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts

@@ -13,6 +13,8 @@ import axios from "axios";
 import { getCookie } from "lib/cookie";
 import { client } from "lib/graphql";
 import debounce from "lodash/debounce";
+import isEmpty from "lodash/isEmpty";
+import omitBy from "lodash/omitBy";
 import type { FlowSettings, TextContent } from "types";
 import type { GetState, SetState } from "zustand/vanilla";
 
@@ -56,6 +58,7 @@ export interface EditorStore extends Store.Store {
   copyNode: (id: Store.nodeId) => void;
   createFlow: (teamId: any, newSlug: any) => Promise<string>;
   deleteFlow: (teamId: number, flowSlug: string) => Promise<object>;
+  diffFlow: (flowId: string) => Promise<any>;
   getFlows: (teamId: number) => Promise<any>;
   isClone: (id: Store.nodeId) => boolean;
   lastPublished: (flowId: string) => Promise<string>;
@@ -68,7 +71,7 @@ export interface EditorStore extends Store.Store {
     toParent?: Store.nodeId
   ) => void;
   pasteNode: (toParent: Store.nodeId, toBefore: Store.nodeId) => void;
-  publishFlow: (flowId: string) => Promise<any>;
+  publishFlow: (flowId: string, summary?: string) => Promise<any>;
   removeNode: (id: Store.nodeId, parent: Store.nodeId) => void;
   updateFlowSettings: (
     teamSlug: string,
@@ -211,6 +214,18 @@ export const editorStore = (
     return response;
   },
 
+  diffFlow(flowId: string) {
+    const token = getCookie("jwt");
+
+    return axios({
+      url: `${process.env.REACT_APP_API_URL}/flows/${flowId}/diff`,
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+  },
+
   getFlows: async (teamId) => {
     client.cache.reset();
     const { data } = await client.query({
@@ -322,11 +337,19 @@ export const editorStore = (
     }
   },
 
-  publishFlow(flowId: string) {
+  publishFlow(flowId: string, summary?: string) {
     const token = getCookie("jwt");
 
+    const urlWithParams = (url: string, params: any) =>
+      [url, new URLSearchParams(omitBy(params, isEmpty))]
+        .filter(Boolean)
+        .join("?");
+
     return axios({
-      url: `${process.env.REACT_APP_API_URL}/flows/${flowId}/publish`,
+      url: urlWithParams(
+        `${process.env.REACT_APP_API_URL}/flows/${flowId}/publish`,
+        { summary }
+      ),
       method: "POST",
       headers: {
         Authorization: `Bearer ${token}`,

hasura.planx.uk/metadata/tables.yaml

@@ -161,11 +161,12 @@
   - role: public
     permission:
       columns:
-      - id
-      - publisher_id
-      - data
       - created_at
+      - data
       - flow_id
+      - id
+      - publisher_id
+      - summary
       filter: {}
 - table:
     schema: public

hasura.planx.uk/migrations/1635852876269_alter_table_public_published_flows_add_column_summary/down.sql

@@ -0,0 +1 @@
+ALTER TABLE "public"."published_flows" DROP COLUMN "summary";

hasura.planx.uk/migrations/1635852876269_alter_table_public_published_flows_add_column_summary/up.sql

@@ -0,0 +1 @@
+ALTER TABLE "public"."published_flows" ADD COLUMN "summary" text NULL;