feat(admin): ability to diff chart revisions (#3460)

owid · Apr 9, 2024 · abbc4e5 · abbc4e5
1 parent a49f0e0
commit abbc4e5
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 17 deletions.
diff --git a/adminSiteClient/ChartEditor.ts b/adminSiteClient/ChartEditor.ts
@@ -13,6 +13,7 @@ import {
     PostReference,
     ChartRedirect,
     DimensionProperty,
+    Json,
 } from "@ourworldindata/utils"
 import { computed, observable, runInAction, when } from "mobx"
 import { BAKED_GRAPHER_URL } from "../settings/clientSettings.js"
@@ -39,7 +40,7 @@ export interface Dataset {
 export interface Log {
     userId: number
     userName: string
-    config: string
+    config: Json
     createdAt: string
 }
 

diff --git a/adminSiteClient/EditorHistoryTab.tsx b/adminSiteClient/EditorHistoryTab.tsx
@@ -2,24 +2,66 @@ import React from "react"
 import { observer } from "mobx-react"
 import { ChartEditor, Log } from "./ChartEditor.js"
 import { Section, Timeago } from "./Forms.js"
-import { computed, action } from "mobx"
+import { computed, action, observable } from "mobx"
 import { copyToClipboard } from "@ourworldindata/utils"
 import { dump } from "js-yaml"
-import { notification } from "antd"
+import { notification, Modal } from "antd"
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer"
+
+function LogCompareModal({
+    log,
+    previousLog,
+    isOpen,
+    onClose,
+}: {
+    log: Log
+    previousLog: Log
+    isOpen: boolean
+    onClose: () => void
+}) {
+    const titleForLog = (log: Log) => {
+        const user = log.userName || log.userId.toString()
+        return <Timeago time={log.createdAt} by={user} />
+    }
+
+    return (
+        <Modal
+            open={isOpen}
+            centered
+            width="80vw"
+            onOk={onClose}
+            onCancel={onClose}
+            cancelButtonProps={{ style: { display: "none" } }}
+        >
+            <div style={{ maxHeight: "50vh", overflowY: "auto" }}>
+                <ReactDiffViewer
+                    newValue={JSON.stringify(log.config, null, 2)}
+                    oldValue={JSON.stringify(previousLog.config, null, 2)}
+                    leftTitle={titleForLog(previousLog)}
+                    rightTitle={titleForLog(log)}
+                    compareMethod={DiffMethod.WORDS_WITH_SPACE}
+                    styles={{
+                        contentText: {
+                            wordBreak: "break-word",
+                        },
+                    }}
+                    extraLinesSurroundingDiff={2}
+                />
+            </div>
+        </Modal>
+    )
+}
 
 @observer
 class LogRenderer extends React.Component<{
     log: Log
+    previousLog: Log | undefined
     applyConfig: (config: any) => void
 }> {
-    @computed get prettyConfig() {
-        const { log } = this.props
-        return JSON.stringify(JSON.parse(log.config), undefined, 2)
-    }
+    @observable isCompareModalOpen = false
 
     @computed get title() {
         const { log } = this.props
-
         const user = log.userName || log.userId.toString()
         return (
             <>
@@ -31,16 +73,38 @@ class LogRenderer extends React.Component<{
     render() {
         const { log } = this.props
         const { title } = this
+        const hasCompareButton = !!this.props.previousLog
 
         return (
-            <li className="list-group-item d-flex justify-content-between">
+            <li
+                className="list-group-item d-flex justify-content-between"
+                style={{ alignItems: "center" }}
+            >
+                {hasCompareButton && (
+                    <LogCompareModal
+                        log={log}
+                        previousLog={this.props.previousLog}
+                        isOpen={this.isCompareModalOpen}
+                        onClose={() => (this.isCompareModalOpen = false)}
+                    />
+                )}
                 <span>{title}</span>
-                <button
-                    className="align-self-end btn btn-danger"
-                    onClick={() => this.props.applyConfig(log.config)}
-                >
-                    Restore
-                </button>
+                <div className="d-flex" style={{ gap: 6 }}>
+                    {hasCompareButton && (
+                        <button
+                            className="btn btn-secondary"
+                            onClick={() => (this.isCompareModalOpen = true)}
+                        >
+                            Compare <br /> to previous
+                        </button>
+                    )}
+                    <button
+                        className="btn btn-danger"
+                        onClick={() => this.props.applyConfig(log.config)}
+                    >
+                        Restore
+                    </button>
+                </div>
             </li>
         )
     }
@@ -94,6 +158,7 @@ export class EditorHistoryTab extends React.Component<{ editor: ChartEditor }> {
                     <ul key={i} className="list-group">
                         <LogRenderer
                             log={log}
+                            previousLog={this.logs[i + 1]} // Needed for comparison, might be undefined
                             applyConfig={this.applyConfig}
                         ></LogRenderer>
                     </ul>

diff --git a/adminSiteServer/apiRouter.ts b/adminSiteServer/apiRouter.ts
@@ -54,6 +54,7 @@ import {
     TaggableType,
     DbChartTagJoin,
     pick,
+    Json,
 } from "@ourworldindata/utils"
 import {
     DbPlainDatasetTag,
@@ -183,7 +184,7 @@ async function getLogsByChartId(
 ): Promise<
     {
         userId: number
-        config: string
+        config: Json
         userName: string
         createdAt: Date
     }[]
@@ -203,7 +204,10 @@ async function getLogsByChartId(
         LIMIT 50`,
         [chartId]
     )
-    return logs
+    return logs.map((log) => ({
+        ...log,
+        config: JSON.parse(log.config),
+    }))
 }
 
 const getReferencesByChartId = async (