Diagram versioning (#560)

* clean up sidesheet

* clean up sharing

* add revisions sidesheet

* update getCommits and clean up

* update date localization

* load diagram in read only mode from previous version

* disable input from control panel and popovers

* add restore warning modal

* separate share and versions

* update versions

* finalize versioning implementation, add pagination

* fix package-lock.json

* clear versions cache on flush storgae

* disable menubar items when in read only mode

* disable remaining fields in readonlt

* suppress eslint only-export-components rule

* show loading version progress

Author: 1ilit

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
-    "prettier"
+    "prettier",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
@@ -18,5 +18,6 @@ module.exports = {
       { allowConstantExport: true },
     ],
     "react/prop-types": 0,
+    "react-refresh/only-export-components": "off",
   },
 };

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "client-vite",
+  "name": "drawdb",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -32,6 +32,8 @@
     "jspdf": "^3.0.1",
     "jszip": "^3.10.1",
     "lexical": "^0.12.5",
+    "lodash": "^4.17.21",
+    "luxon": "^3.7.1",
     "nanoid": "^5.1.5",
     "node-sql-parser": "^5.3.11",
     "oracle-sql-parser": "^0.1.0",

package.json

@@ -1,11 +1,12 @@
 import axios from "axios";
 
-const filename = "share.json";
-const description = "drawDB diagram";
+export const SHARE_FILENAME = "share.json";
+export const VERSION_FILENAME = "versionned.json";
 
+const description = "drawDB diagram";
 const baseUrl = import.meta.env.VITE_BACKEND_URL;
 
-export async function create(content) {
+export async function create(filename, content) {
   const res = await axios.post(`${baseUrl}/gists`, {
     public: false,
     filename,
@@ -16,11 +17,13 @@ export async function create(content) {
   return res.data.data.id;
 }
 
-export async function patch(gistId, content) {
-  await axios.patch(`${baseUrl}/gists/${gistId}`, {
+export async function patch(gistId, filename, content) {
+  const { deleted } = await axios.patch(`${baseUrl}/gists/${gistId}`, {
     filename,
     content,
   });
+
+  return deleted;
 }
 
 export async function del(gistId) {
@@ -32,3 +35,39 @@ export async function get(gistId) {
 
   return res.data;
 }
+
+export async function getCommits(gistId, perPage = 20, page = 1) {
+  const res = await axios.get(`${baseUrl}/gists/${gistId}/commits`, {
+    params: {
+      per_page: perPage,
+      page,
+    },
+  });
+
+  return res.data;
+}
+
+export async function getVersion(gistId, sha) {
+  const res = await axios.get(`${baseUrl}/gists/${gistId}/${sha}`);
+
+  return res.data;
+}
+
+export async function getCommitsWithFile(
+  gistId,
+  file,
+  limit = 10,
+  cursor = null,
+) {
+  const res = await axios.get(
+    `${baseUrl}/gists/${gistId}/file-versions/${file}`,
+    {
+      params: {
+        limit,
+        cursor,
+      },
+    },
+  );
+
+  return res.data;
+}

src/api/gists.js

@@ -179,6 +179,7 @@ export default function Area({
                     backgroundColor: "#2F68ADB3",
                   }}
                   onClick={lockUnlockArea}
+                  disabled={layout.readOnly}
                 />
                 <Popover
                   visible={areaIsOpen() && !layout.sidebar}
@@ -257,6 +258,7 @@ function EditPopoverContent({ data }) {
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
+  const { layout } = useLayout();
   const initialColorRef = useRef(data.color);
 
   const handleColorPick = (color) => {
@@ -302,6 +304,7 @@ function EditPopoverContent({ data }) {
           value={data.name}
           placeholder={t("name")}
           className="me-2"
+          readonly={layout.readOnly}
           onChange={(value) => updateArea(data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
@@ -325,6 +328,7 @@ function EditPopoverContent({ data }) {
         />
         <ColorPicker
           usePopover={true}
+          readOnly={layout.readOnly}
           value={data.color}
           onChange={(color) => updateArea(data.id, { color })}
           onColorPick={(color) => handleColorPick(color)}
@@ -336,6 +340,7 @@ function EditPopoverContent({ data }) {
           type="danger"
           block
           onClick={() => deleteArea(data.id, true)}
+          disabled={layout.readOnly}
         >
           {t("delete")}
         </Button>

src/assets/calendar.png

@@ -279,21 +279,24 @@ export default function Canvas() {
 
     if (!e.isPrimary) return;
 
+    
     if (panning.isPanning) {
       setTransform((prev) => ({
         ...prev,
         pan: {
           x:
-            panning.panStart.x +
-            (panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
+          panning.panStart.x +
+          (panning.cursorStart.x - pointer.spaces.screen.x) / transform.zoom,
           y:
-            panning.panStart.y +
-            (panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
+          panning.panStart.y +
+          (panning.cursorStart.y - pointer.spaces.screen.y) / transform.zoom,
         },
       }));
       return;
     }
 
+    if(layout.readOnly) return;
+
     if (linking) {
       setLinkingLine({
         ...linkingLine,

src/assets/process.png

@@ -249,6 +249,7 @@ export default function Note({ data, onPointerDown }) {
                     backgroundColor: "#2F68ADB3",
                   }}
                   onClick={lockUnlockNote}
+                  disabled={layout.readOnly}
                 />
                 <Popover
                   visible={
@@ -280,6 +281,7 @@ export default function Note({ data, onPointerDown }) {
                           value={data.title}
                           placeholder={t("title")}
                           className="me-2"
+                          readonly={layout.readOnly}
                           onChange={(value) =>
                             updateNote(data.id, { title: value })
                           }
@@ -307,16 +309,18 @@ export default function Note({ data, onPointerDown }) {
                         />
                         <ColorPicker
                           usePopover={true}
+                          readOnly={layout.readOnly}
                           value={data.color}
                           onChange={(color) => updateNote(data.id, { color })}
                           onColorPick={(color) => handleColorPick(color)}
                         />
                       </div>
                       <div className="flex">
                         <Button
-                          icon={<IconDeleteStroked />}
-                          type="danger"
                           block
+                          type="danger"
+                          disabled={layout.readOnly}
+                          icon={<IconDeleteStroked />}
                           onClick={() => deleteNote(data.id, true)}
                         >
                           {t("delete")}
@@ -343,6 +347,7 @@ export default function Note({ data, onPointerDown }) {
           </div>
           <textarea
             id={`note_${data.id}`}
+            readOnly={layout.readOnly}
             value={data.content}
             onChange={handleChange}
             onFocus={(e) =>