store last modified at diagram level

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-card.spec.tsx

@@ -10,6 +10,8 @@ describe('DiagramCard', () => {
       id: 'test-diagram',
       connectionId: 'test-connection',
       name: 'Test Diagram',
+      createdAt: '2023-10-01T00:00:00.000Z',
+      updatedAt: '2023-10-03T00:00:00.000Z',
       edits: [
         {
           id: 'edit-id',
@@ -29,7 +31,6 @@ describe('DiagramCard', () => {
           },
         },
       ] as [Edit],
-      lastModified: new Date('2025-01-01').getTime(),
       databases: 'someDatabase',
     },
     onOpen: () => {},
@@ -41,6 +42,6 @@ describe('DiagramCard', () => {
     render(<DiagramCard {...props} />);
     expect(screen.getByText('Test Diagram')).to.be.visible;
     expect(screen.getByText('someDatabase')).to.be.visible;
-    expect(screen.getByText('Last modified: January 1, 2025')).to.be.visible;
+    expect(screen.getByText('Last modified: October 3, 2023')).to.be.visible;
   });
 });

packages/compass-data-modeling/src/components/diagram-card.tsx

@@ -79,15 +79,14 @@ export function DiagramCard({
   onDelete,
 }: {
   diagram: MongoDBDataModelDescription & {
-    lastModified: number;
     databases: string;
   };
   onOpen: (diagram: MongoDBDataModelDescription) => void;
   onRename: (id: string) => void;
   onDelete: (id: string) => void;
 }) {
   const darkmode = useDarkMode();
-  const formattedDate = useFormattedDate(diagram.lastModified);
+  const formattedDate = useFormattedDate(new Date(diagram.updatedAt).getTime());
   return (
     <Card
       className={diagramCardStyles}

packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx

@@ -15,10 +15,12 @@ const storageItems: MongoDBDataModelDescription[] = [
   {
     id: '1',
     name: 'One',
+    createdAt: '2023-10-01T00:00:00.000Z',
+    updatedAt: '2023-10-03T00:00:00.000Z',
     edits: [
       {
         id: 'edit-id-1',
-        timestamp: '2023-10-01T00:00:00.000Z',
+        timestamp: '2023-10-02T00:00:00.000Z',
         type: 'SetModel',
         model: {
           collections: [
@@ -39,6 +41,8 @@ const storageItems: MongoDBDataModelDescription[] = [
   {
     id: '2',
     name: 'Two',
+    createdAt: '2023-10-02T00:00:00.000Z',
+    updatedAt: '2023-10-04T00:00:00.000Z',
     edits: [
       {
         id: 'edit-id-2',
@@ -63,6 +67,8 @@ const storageItems: MongoDBDataModelDescription[] = [
   {
     id: '3',
     name: 'Three',
+    createdAt: '2023-10-01T00:00:00.000Z',
+    updatedAt: '2023-10-05T00:00:00.000Z',
     edits: [
       {
         id: 'edit-id-3',

packages/compass-data-modeling/src/components/saved-diagrams-list.tsx

@@ -34,7 +34,7 @@ const sortBy = [
     label: 'Name',
   },
   {
-    name: 'lastModified',
+    name: 'updatedAt',
     label: 'Last Modified',
   },
 ] as const;
@@ -141,7 +141,6 @@ export const SavedDiagramsList: React.FunctionComponent<{
   const { items, status } = useDataModelSavedItems();
   const decoratedItems = useMemo<
     (MongoDBDataModelDescription & {
-      lastModified: number;
       databases: string;
     })[]
   >(() => {
@@ -151,7 +150,6 @@ export const SavedDiagramsList: React.FunctionComponent<{
       );
       return {
         ...item,
-        lastModified: Date.parse(item.edits[item.edits.length - 1].timestamp),
         databases: Array.from(databases).join(', '),
       };
     });

packages/compass-data-modeling/src/services/data-model-storage.ts

@@ -89,6 +89,9 @@ export const MongoDBDataModelDescriptionSchema = z.object({
   connectionId: z.string().nullable(),
 
   edits: z.array(EditSchema).nonempty(),
+
+  createdAt: z.string().datetime(),
+  updatedAt: z.string().datetime(),
 });
 
 export type MongoDBDataModelDescription = z.output<

packages/compass-data-modeling/src/store/diagram.spec.ts

@@ -55,6 +55,8 @@ const loadedDiagram: MongoDBDataModelDescription = {
   id: 'diagram-id',
   name: 'diagram-name',
   connectionId: 'connection-id',
+  createdAt: '2023-10-01T00:00:00.000Z',
+  updatedAt: '2023-10-05T00:00:00.000Z',
   edits: [{ type: 'SetModel', model } as Edit],
 };
 

packages/compass-data-modeling/src/store/diagram.ts

@@ -88,9 +88,7 @@ export const diagramReducer: Reducer<DiagramState> = (
 ) => {
   if (isAction(action, DiagramActionTypes.OPEN_DIAGRAM)) {
     return {
-      id: action.diagram.id,
-      connectionId: action.diagram.connectionId,
-      name: action.diagram.name,
+      ...action.diagram,
       edits: {
         prev: [],
         current: action.diagram.edits,
@@ -104,6 +102,8 @@ export const diagramReducer: Reducer<DiagramState> = (
       id: new UUID().toString(),
       name: action.name,
       connectionId: action.connectionId,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
       edits: {
         prev: [],
         current: [
@@ -138,6 +138,7 @@ export const diagramReducer: Reducer<DiagramState> = (
     return {
       ...state,
       name: action.name,
+      updatedAt: new Date().toISOString(),
     };
   }
   if (isAction(action, DiagramActionTypes.APPLY_EDIT)) {
@@ -149,6 +150,7 @@ export const diagramReducer: Reducer<DiagramState> = (
         next: [],
       },
       editErrors: undefined,
+      updatedAt: new Date().toISOString(),
     };
   }
   if (isAction(action, DiagramActionTypes.APPLY_EDIT_FAILED)) {
@@ -169,6 +171,7 @@ export const diagramReducer: Reducer<DiagramState> = (
         current: newCurrent,
         next: [...state.edits.next, state.edits.current],
       },
+      updatedAt: new Date().toISOString(),
     };
   }
   if (isAction(action, DiagramActionTypes.REDO_EDIT)) {
@@ -183,6 +186,7 @@ export const diagramReducer: Reducer<DiagramState> = (
         current: newCurrent,
         next: [...state.edits.next],
       },
+      updatedAt: new Date().toISOString(),
     };
   }
   return state;
@@ -345,10 +349,12 @@ export function getCurrentDiagramFromState(
     id,
     connectionId,
     name,
+    createdAt,
+    updatedAt,
     edits: { current: edits },
   } = state.diagram;
 
-  return { id, connectionId, name, edits };
+  return { id, connectionId, name, edits, createdAt, updatedAt };
 }
 
 export const selectCurrentModel = memoize(getCurrentModel);