Support Version Management (without sharing modes)

packages/server/src/main/resources/diagram-resource.ts

@@ -30,11 +30,49 @@ export class DiagramResource {
     }
   };
 
-  publishDiagram = (req: Request, res: Response) => {
-    const diagram: DiagramDTO = req.body;
-    this.diagramService.saveDiagramAndGenerateTokens(diagram).then((token: string) => {
-      res.status(200).send(token);
-    });
+  publishDiagramVersion = (req: Request, res: Response) => {
+    const diagram: DiagramDTO = req.body.diagram;
+    const existingToken: string | undefined = req.body.token;
+    this.diagramService
+      .saveDiagramVersion(diagram, existingToken)
+      .then((savedDiagram) => {
+        res.status(200).send(savedDiagram);
+      })
+      .catch((error) => {
+        console.error(error);
+        res.status(503).send('Error occurred while publishing');
+      });
+  };
+
+  deleteDiagramVersion = (req: Request, res: Response) => {
+    const token: string = req.params.token;
+    const versionIndex: number = req.body.versionIndex;
+
+    this.diagramService
+      .deleteDiagramVersion(token, versionIndex)
+      .then((deletedDiagramVersion) => {
+        res.status(200).send(deletedDiagramVersion);
+      })
+      .catch((error) => {
+        console.error(error);
+        res.status(503).send('Error occurred while deleting version');
+      });
+  };
+
+  editDiagramVersion = (req: Request, res: Response) => {
+    const token: string = req.params.token;
+    const versionIndex: number = req.body.versionIndex;
+    const title: string = req.body.title;
+    const description: string = req.body.description;
+    this.diagramService
+      .editDiagramVersion(token, versionIndex, title, description)
+      .then((editedDiagram) => {
+        res.status(200).send(editedDiagram);
+      })
+      .catch((error) => {
+        console.error(error);
+        res.status(503).send('Error occurred while editing version');
+      });
   };
 
   convertSvgToPdf = (req: Request, res: Response) => {

packages/server/src/main/routes.ts

@@ -18,7 +18,9 @@ export const register = (app: express.Application) => {
   // routes
 
   router.get('/diagrams/:token', (req, res) => diagramResource.getDiagram(req, res));
-  router.post('/diagrams/publish', (req, res) => diagramResource.publishDiagram(req, res));
+  router.post('/diagrams/publish', (req, res) => diagramResource.publishDiagramVersion(req, res));
+  router.delete('/diagrams/:token', (req, res) => diagramResource.deleteDiagramVersion(req, res));
+  router.post('/diagrams/:token', (req, res) => diagramResource.editDiagramVersion(req, res));
   router.post('/diagrams/pdf', (req, res) => diagramResource.convertSvgToPdf(req, res));
   app.use('/api', router);
 };

packages/server/src/main/services/diagram-service/diagram-service.ts

@@ -10,11 +10,84 @@ export class DiagramService {
     this.storageService = storageService;
   }
 
-  saveDiagramAndGenerateTokens(diagramDTO: DiagramDTO): Promise<string> {
-    // alpha numeric token with length = tokenLength
-    const token = randomString(tokenLength);
-    return this.storageService.saveDiagram(diagramDTO, token);
+  async saveDiagramVersion(
+    diagramDTO: DiagramDTO,
+    existingToken?: string,
+  ): Promise<{ diagramToken: string; diagram: DiagramDTO }> {
+    const diagramExists = existingToken !== undefined && (await this.storageService.diagramExists(existingToken));
+    const diagramToken = diagramExists ? existingToken : randomString(tokenLength);
+    const diagram = !diagramExists ? diagramDTO : await this.getDiagramByLink(diagramToken);
+    const model = diagramDTO.model;
+    const title = diagramDTO.title;
+    const description = diagramDTO.description;
+
+    if (!diagram) {
+      throw Error(`Could not retrieve a saved diagram with the token ${diagramToken}`);
+    }
+
+    if (!diagram.versions) {
+      diagram.versions = [];
+    }
+
+    diagram.model = model;
+    diagram.token = diagramToken;
+    diagram.title = title;
+    diagram.description = description;
+
+    const newDiagramVersion = {
+      ...diagramDTO,
+      lastUpdate: new Date().toISOString(),
+    };
+    // Remove token and versions fields from newDiagramVersion
+    delete newDiagramVersion.token;
+    delete newDiagramVersion.versions;
+
+    diagram.versions.push(newDiagramVersion);
+    await this.storageService.saveDiagram(diagram, diagramToken);
+
+    return { diagramToken, diagram };
   }
+
+  async deleteDiagramVersion(token: string, versionIndex: number): Promise<DiagramDTO> {
+    const diagram = await this.getDiagramByLink(token);
+
+    if (!diagram) {
+      throw Error(`Could not retrieve a saved diagram with the token ${token}`);
+    }
+
+    if (!diagram.versions) {
+      throw Error(`Diagram with the token ${token} doesn't have any versions`);
+    }
+
+    diagram.versions.splice(versionIndex, 1);
+    await this.storageService.saveDiagram(diagram, token);
+
+    return diagram;
+  }
+
+  async editDiagramVersion(
+    token: string,
+    versionIndex: number,
+    title: string,
+    description: string,
+  ): Promise<DiagramDTO> {
+    const diagram = await this.getDiagramByLink(token);
+
+    if (!diagram) {
+      throw Error(`Could not retrieve a saved diagram with the token ${token}`);
+    }
+
+    if (!diagram.versions) {
+      throw Error(`Diagram with the token ${token} doesn't have any versions`);
+    }
+
+    diagram.versions[versionIndex].title = title;
+    diagram.versions[versionIndex].description = description;
+    await this.storageService.saveDiagram(diagram, token);
+
+    return diagram;
+  }
+
   getDiagramByLink(token: string): Promise<DiagramDTO | undefined> {
     return this.storageService.getDiagramByLink(token);
   }

packages/server/src/main/services/diagram-storage/diagram-file-storage-service.ts

@@ -69,7 +69,7 @@ export class DiagramFileStorageService implements DiagramStorageService {
     );
   }
 
-  async saveDiagram(diagramDTO: DiagramDTO, token: string, shared: boolean = false): Promise<string> {
+  async saveDiagram(diagramDTO: DiagramDTO, token: string, shared: boolean = true): Promise<string> {
     const path = this.getFilePathForToken(token);
     const exists = await this.diagramExists(path);
 

packages/server/src/main/services/diagram-storage/diagram-redis-storage-service.ts

@@ -85,7 +85,7 @@ export class DiagramRedisStorageService implements DiagramStorageService {
     );
   }
 
-  async saveDiagram(diagramDTO: DiagramDTO, token: string, shared: boolean = false): Promise<string> {
+  async saveDiagram(diagramDTO: DiagramDTO, token: string, shared: boolean = true): Promise<string> {
     const key = this.getKeyForToken(token);
     const exists = await this.diagramExists(key);
 

packages/shared/src/diagram-dto.ts

@@ -5,11 +5,16 @@ export class DiagramDTO {
   title: string;
   model: UMLModel;
   lastUpdate: string;
+  versions?: DiagramDTO[];
+  description?: string;
+  token?: string;
 
-  constructor(id: string, title: string, model: UMLModel, lastUpdate: string) {
+  constructor(id: string, title: string, model: UMLModel, lastUpdate: string, versions: DiagramDTO[], token: string) {
     this.id = id;
     this.title = title;
     this.model = model;
     this.lastUpdate = lastUpdate;
+    this.versions = versions;
+    this.token = token;
   }
 }

packages/webapp/src/main/application.tsx

@@ -12,6 +12,7 @@ import { ToastContainer } from 'react-toastify';
 import { PostHogProvider } from 'posthog-js/react';
 import { ApplicationStore } from './components/store/application-store';
 import { ApollonEditorComponentWithConnection } from './components/apollon-editor-component/ApollonEditorComponentWithConnection';
+import { VersionManagementSidebar } from './components/version-management-sidebar/VersionManagementSidebar';
 
 const postHogOptions = {
   api_host: POSTHOG_HOST,
@@ -31,6 +32,7 @@ export function RoutedApplication() {
           <ApollonEditorProvider value={{ editor, setEditor: handleSetEditor }}>
             <ApplicationBar />
             <ApplicationModal />
+            <VersionManagementSidebar />
             {isFirefox && <FirefoxIncompatibilityHint />}
             <Routes>
               <Route path={'/:token'} element={<ApollonEditorComponentWithConnection />} />

packages/webapp/src/main/components/apollon-editor-component/ApollonEditorComponent.tsx

@@ -6,6 +6,7 @@ import { uuid } from '../../utils/uuid';
 import { setCreateNewEditor, updateDiagramThunk, selectCreatenewEditor } from '../../services/diagram/diagramSlice';
 import { ApollonEditorContext } from './apollon-editor-context';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { selectPreviewedDiagramIndex } from '../../services/version-management/versionManagementSlice';
 
 const ApollonContainer = styled.div`
   display: flex;
@@ -21,30 +22,51 @@ export const ApollonEditorComponent: React.FC = () => {
   const { diagram: reduxDiagram } = useAppSelector((state) => state.diagram);
   const options = useAppSelector((state) => state.diagram.editorOptions);
   const createNewEditor = useAppSelector(selectCreatenewEditor);
-  const editorContext = useContext(ApollonEditorContext);
-  const setEditor = editorContext?.setEditor;
+  const previewedDiagramIndex = useAppSelector(selectPreviewedDiagramIndex);
+  const { setEditor } = useContext(ApollonEditorContext);
 
   useEffect(() => {
-    const initializeEditor = async () => {
-      if (containerRef.current != null && createNewEditor) {
+    const setupEditor = async () => {
+      if (!containerRef.current) return;
+
+      if (createNewEditor || previewedDiagramIndex === -1) {
+        // Initialize or reset editor
+        if (editorRef.current) {
+          await editorRef.current.nextRender;
+          editorRef.current.destroy();
+        }
         editorRef.current = new ApollonEditor(containerRef.current, options);
-        await editorRef.current?.nextRender;
+        await editorRef.current.nextRender;
 
+        // Load diagram model if available
         if (reduxDiagram.model) {
           editorRef.current.model = reduxDiagram.model;
         }
+
         editorRef.current.subscribeToModelChange((model: UMLModel) => {
           const diagram = { ...reduxDiagram, model };
           dispatch(updateDiagramThunk(diagram));
         });
 
         setEditor!(editorRef.current);
         dispatch(setCreateNewEditor(false));
+      } else if (previewedDiagramIndex !== -1 && editorRef.current) {
+        // Handle preview mode
+        const editorOptions = { ...options, readonly: true };
+        await editorRef.current.nextRender;
+        editorRef.current.destroy();
+        editorRef.current = new ApollonEditor(containerRef.current, editorOptions);
+        await editorRef.current.nextRender;
+
+        const modelToPreview = reduxDiagram?.versions && reduxDiagram.versions[previewedDiagramIndex]?.model;
+        if (modelToPreview) {
+          editorRef.current.model = modelToPreview;
+        }
       }
     };
 
-    initializeEditor();
-  }, [containerRef.current, createNewEditor]);
+    setupEditor();
+  }, [createNewEditor, previewedDiagramIndex]);
 
   const key = reduxDiagram?.id || uuid();
 

packages/webapp/src/main/components/apollon-editor-component/ApollonEditorComponentWithConnection.tsx

@@ -39,8 +39,7 @@ export const ApollonEditorComponentWithConnection: React.FC = () => {
   const { diagram: reduxDiagram } = useAppSelector((state) => state.diagram);
   const options = useAppSelector((state) => state.diagram.editorOptions);
   const createNewEditor = useAppSelector(selectCreatenewEditor);
-  const editorContext = useContext(ApollonEditorContext);
-  const setEditor = editorContext!.setEditor;
+  const { setEditor } = useContext(ApollonEditorContext);
   const [searchParams] = useSearchParams();
   const view = searchParams.get('view');
   const navigate = useNavigate();
@@ -120,6 +119,7 @@ export const ApollonEditorComponentWithConnection: React.FC = () => {
       });
     }
   };
+
   useEffect(() => {
     const initializeEditor = async () => {
       const shouldConnectToServer =

packages/webapp/src/main/components/apollon-editor-component/apollon-editor-context.ts

@@ -6,6 +6,11 @@ export type ApollonEditorContextType = {
   setEditor: (editor: ApollonEditor) => void;
 };
 
-export const ApollonEditorContext = createContext<ApollonEditorContextType | null>(null);
+// Provide a default no-op function for `setEditor`
+export const ApollonEditorContext = createContext<ApollonEditorContextType>({
+  setEditor: () => {
+    throw new Error("setEditor is not defined. Make sure to wrap your component within ApollonEditorProvider.");
+  },
+});
 
 export const { Consumer: ApollonEditorConsumer, Provider: ApollonEditorProvider } = ApollonEditorContext;