feat: lastModified and db for diagram list COMPASS-9398

Author: paula-stacho

packages/compass-components/src/hooks/use-formatted-date.tsx

@@ -2,15 +2,15 @@ import { formatDate } from '../utils/format-date';
 
 import { useState, useEffect } from 'react';
 
-export function useFormattedDate(timestamp: number) {
-  const [formattedDate, setFormattedDate] = useState(() =>
-    formatDate(timestamp)
+export function useFormattedDate(timestamp?: number) {
+  const [formattedDate, setFormattedDate] = useState(
+    () => timestamp && formatDate(timestamp)
   );
 
   useEffect(() => {
-    setFormattedDate(formatDate(timestamp));
+    setFormattedDate(timestamp && formatDate(timestamp));
     const interval = setInterval(() => {
-      setFormattedDate(formatDate(timestamp));
+      setFormattedDate(timestamp && formatDate(timestamp));
     }, 1000 * 60);
     return () => {
       clearInterval(interval);

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

@@ -2,25 +2,55 @@ import {
   Card,
   css,
   cx,
+  Icon,
   ItemActionMenu,
   palette,
   spacing,
   Subtitle,
   useDarkMode,
+  useFormattedDate,
 } from '@mongodb-js/compass-components';
 import type { MongoDBDataModelDescription } from '../services/data-model-storage';
 import React from 'react';
 
 // Same as saved-queries-aggregations
 export const CARD_WIDTH = spacing[1600] * 4;
-export const CARD_HEIGHT = 218;
+export const CARD_HEIGHT = 180;
 
 const diagramCardStyles = css({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'hidden',
 });
 
+const cardContentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  justifyContent: 'flex-end',
+  gap: spacing[300],
+});
+
+const namespaceNameStyles = css({
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+});
+
+const namespaceIconStyles = css({
+  flexShrink: 0,
+});
+
+const lastModifiedLabel = css({
+  fontStyle: 'italic',
+});
+
+const namespaceStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[200],
+});
+
 const cardHeaderStyles = css({
   display: 'flex',
   gap: spacing[200],
@@ -48,12 +78,16 @@ export function DiagramCard({
   onRename,
   onDelete,
 }: {
-  diagram: MongoDBDataModelDescription;
+  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);
   return (
     <Card
       className={diagramCardStyles}
@@ -91,7 +125,20 @@ export function DiagramCard({
           }}
         ></ItemActionMenu>
       </div>
-      {/* TODO(COMPASS-9398): Add lastModified and namespace to the card. */}
+      <div className={cardContentStyles}>
+        <div className={namespaceStyles}>
+          <Icon
+            title={null}
+            glyph="Database"
+            color={palette.gray.dark1}
+            className={namespaceIconStyles}
+          ></Icon>
+          <span className={namespaceNameStyles}>{diagram.databases}</span>
+        </div>
+        <div className={lastModifiedLabel}>
+          Last&nbsp;modified: {formattedDate}
+        </div>
+      </div>
     </Card>
   );
 }

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

@@ -13,25 +13,30 @@ import {
   WorkspaceContainer,
 } from '@mongodb-js/compass-components';
 import { useDataModelSavedItems } from '../provider';
-import { deleteDiagram, openDiagram, renameDiagram } from '../store/diagram';
+import {
+  deleteDiagram,
+  getCurrentModel,
+  openDiagram,
+  renameDiagram,
+} from '../store/diagram';
 import type { MongoDBDataModelDescription } from '../services/data-model-storage';
 import CollaborateIcon from './icons/collaborate';
 import SchemaVisualizationIcon from './icons/schema-visualization';
 import FlexibilityIcon from './icons/flexibility';
 import InsightIcon from './icons/insight';
 import { CARD_HEIGHT, CARD_WIDTH, DiagramCard } from './diagram-card';
 import { DiagramListToolbar } from './diagram-list-toolbar';
+import toNS from 'mongodb-ns';
 
 const sortBy = [
   {
     name: 'name',
     label: 'Name',
   },
-  // TODO(COMPASS-9398): Currently we do not have lastModified.
-  // {
-  //   name: 'lastModified',
-  //   label: 'Last Modified',
-  // },
+  {
+    name: 'lastModified',
+    label: 'Last Modified',
+  },
 ] as const;
 
 const listContainerStyles = css({ height: '100%' });
@@ -134,24 +139,42 @@ export const SavedDiagramsList: React.FunctionComponent<{
   onDiagramDeleteClick,
 }) => {
   const { items, status } = useDataModelSavedItems();
+  const decoratedItems = useMemo<
+    (MongoDBDataModelDescription & {
+      lastModified?: number;
+      databases?: string;
+    })[]
+  >(() => {
+    return items.map((item) => {
+      if (!item.edits.length) return item;
+
+      const databases = new Set(
+        getCurrentModel(item).collections.map(({ ns }) => toNS(ns).database)
+      );
+      return {
+        ...item,
+        lastModified: Date.parse(item.edits[item.edits.length - 1].timestamp),
+        databases: Array.from(databases).join(', '),
+      };
+    });
+  }, [items]);
   const [search, setSearch] = useState('');
   const filteredItems = useMemo(() => {
     try {
       const regex = new RegExp(search, 'i');
-      // TODO(COMPASS-9398): Currently only searching for name.
-      // We want to include more fields like namespace.
-      return items.filter((x) => regex.test(x.name));
+      return decoratedItems.filter(
+        (x) => regex.test(x.name) || (x.databases && regex.test(x.databases))
+      );
     } catch {
-      return items;
+      return decoratedItems;
     }
-  }, [items, search]);
+  }, [decoratedItems, search]);
   const [sortControls, sortState] = useSortControls(sortBy);
   const sortedItems = useSortedItems(filteredItems, sortState);
 
   if (status === 'INITIAL' || status === 'LOADING') {
     return null;
   }
-
   if (items.length === 0) {
     return (
       <WorkspaceContainer>