feat(data-modeling): grid list and toolbar COMPASS-9311 (#6931)

mabaasit · web-flow · commit d3e74dbd42a3 · 2025-05-21T18:03:46.000+05:30
* card list and toolbar

* vgrid

* fix tests

* filter tests

* pr feedback

* npm check

* add todo ticket
diff --git a/packages/compass-data-modeling/src/components/diagram-card.tsx b/packages/compass-data-modeling/src/components/diagram-card.tsx
@@ -0,0 +1,97 @@
+import {
+  Card,
+  css,
+  cx,
+  ItemActionMenu,
+  palette,
+  spacing,
+  Subtitle,
+  useDarkMode,
+} 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;
+
+const diagramCardStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
+const cardHeaderStyles = css({
+  display: 'flex',
+  gap: spacing[200],
+  alignItems: 'flex-start',
+});
+const cardTitle = css({
+  fontWeight: 'bold',
+  height: spacing[600] * 2,
+  marginBottom: spacing[400],
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+});
+
+const cardTitleDark = css({
+  color: palette.green.light2,
+});
+const cardTitleLight = css({
+  color: palette.green.dark2,
+});
+
+export function DiagramCard({
+  diagram,
+  onOpen,
+  onRename,
+  onDelete,
+}: {
+  diagram: MongoDBDataModelDescription;
+  onOpen: (diagram: MongoDBDataModelDescription) => void;
+  onRename: (id: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  const darkmode = useDarkMode();
+  return (
+    <Card
+      className={diagramCardStyles}
+      contentStyle="clickable"
+      onClick={() => onOpen(diagram)}
+      data-testid="saved-diagram-card"
+      data-diagram-name={diagram.name}
+      title={diagram.name}
+    >
+      <div className={cardHeaderStyles}>
+        <Subtitle
+          as="div"
+          className={cx(cardTitle, darkmode ? cardTitleDark : cardTitleLight)}
+          title={diagram.name}
+        >
+          {diagram.name}
+        </Subtitle>
+        <ItemActionMenu
+          isVisible
+          actions={[
+            { action: 'rename', label: 'Rename' },
+            { action: 'delete', label: 'Delete' },
+          ]}
+          onAction={(action) => {
+            switch (action) {
+              case 'rename':
+                onRename(diagram.id);
+                break;
+              case 'delete':
+                onDelete(diagram.id);
+                break;
+              default:
+                break;
+            }
+          }}
+        ></ItemActionMenu>
+      </div>
+      {/* TODO(COMPASS-9398): Add lastModified and namespace to the card. */}
+    </Card>
+  );
+}
diff --git a/packages/compass-data-modeling/src/components/diagram-list-toolbar.tsx b/packages/compass-data-modeling/src/components/diagram-list-toolbar.tsx
@@ -0,0 +1,84 @@
+import React, { useContext } from 'react';
+import {
+  Button,
+  css,
+  cx,
+  Icon,
+  palette,
+  SearchInput,
+  spacing,
+  Subtitle,
+  useDarkMode,
+} from '@mongodb-js/compass-components';
+import { DiagramListContext } from './saved-diagrams-list';
+
+const containerStyles = css({
+  padding: spacing[400],
+  display: 'grid',
+  gridTemplateAreas: `
+    'title createDiagram'
+    'searchInput sortControls'
+  `,
+  columnGap: spacing[800],
+  rowGap: spacing[200],
+  gridTemplateColumns: '5fr',
+});
+
+const titleStyles = css({
+  gridArea: 'title',
+});
+const createDiagramContainerStyles = css({
+  gridArea: 'createDiagram',
+  display: 'flex',
+  justifyContent: 'flex-end',
+});
+const searchInputStyles = css({
+  gridArea: 'searchInput',
+});
+const sortControlsStyles = css({
+  gridArea: 'sortControls',
+});
+
+const toolbarTitleLightStyles = css({ color: palette.gray.dark1 });
+const toolbarTitleDarkStyles = css({ color: palette.gray.light1 });
+
+export const DiagramListToolbar = () => {
+  const {
+    onSearchDiagrams: onSearch,
+    onCreateDiagram,
+    sortControls,
+    searchTerm,
+  } = useContext(DiagramListContext);
+  const darkMode = useDarkMode();
+
+  return (
+    <div className={containerStyles}>
+      <Subtitle
+        className={cx(
+          titleStyles,
+          darkMode ? toolbarTitleDarkStyles : toolbarTitleLightStyles
+        )}
+      >
+        Open an existing diagram:
+      </Subtitle>
+      <div className={createDiagramContainerStyles}>
+        <Button
+          onClick={onCreateDiagram}
+          variant="primary"
+          size="small"
+          data-testid="create-diagram-button"
+          leftGlyph={<Icon glyph="Plus"></Icon>}
+        >
+          Generate new diagram
+        </Button>
+      </div>
+      <SearchInput
+        aria-label="Search diagrams"
+        value={searchTerm}
+        className={searchInputStyles}
+        onChange={(e) => onSearch(e.target.value)}
+      />
+      <div className={sortControlsStyles}>{sortControls}</div>
+    </div>
+  );
+};
diff --git a/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx b/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx
@@ -11,44 +11,65 @@ import type { DataModelingStore } from '../../test/setup-store';
 import { DataModelStorageServiceProvider } from '../provider';
 import type { MongoDBDataModelDescription } from '../services/data-model-storage';
 
-describe('SavedDiagramsList', function () {
-  const renderSavedDiagramsList = ({
-    loadAll = () => Promise.resolve([]),
-  }: {
-    loadAll?: () => Promise<MongoDBDataModelDescription[]>;
-  } = {}) => {
-    const mockDataModelStorage = {
-      status: 'READY',
-      error: null,
-      items: [],
-      save: () => {
-        return Promise.resolve(false);
-      },
-      delete: () => {
-        return Promise.resolve(false);
-      },
-      loadAll,
-      load: () => {
-        return Promise.resolve(null);
-      },
-    };
-    return renderWithStore(
-      <DataModelStorageServiceProvider storage={mockDataModelStorage}>
-        <SavedDiagramsList />
-      </DataModelStorageServiceProvider>,
-      {
-        services: {
-          dataModelStorage: mockDataModelStorage,
-        },
-      }
-    );
+const storageItems: MongoDBDataModelDescription[] = [
+  {
+    id: '1',
+    name: 'One',
+    edits: [],
+    connectionId: null,
+  },
+  {
+    id: '2',
+    name: 'Two',
+    edits: [],
+    connectionId: null,
+  },
+  {
+    id: '3',
+    name: 'Three',
+    edits: [],
+    connectionId: null,
+  },
+];
+
+const renderSavedDiagramsList = ({
+  items = storageItems,
+}: {
+  items?: MongoDBDataModelDescription[];
+} = {}) => {
+  const mockDataModelStorage = {
+    status: 'READY',
+    error: null,
+    items,
+    save: () => {
+      return Promise.resolve(false);
+    },
+    delete: () => {
+      return Promise.resolve(false);
+    },
+    loadAll: () => Promise.resolve(items),
+    load: (id: string) => {
+      return Promise.resolve(items.find((x) => x.id === id) ?? null);
+    },
   };
+  return renderWithStore(
+    <DataModelStorageServiceProvider storage={mockDataModelStorage}>
+      <SavedDiagramsList />
+    </DataModelStorageServiceProvider>,
+    {
+      services: {
+        dataModelStorage: mockDataModelStorage,
+      },
+    }
+  );
+};
 
+describe('SavedDiagramsList', function () {
   context('when there are no saved diagrams', function () {
     let store: DataModelingStore;
 
     beforeEach(async function () {
-      const result = renderSavedDiagramsList();
+      const result = renderSavedDiagramsList({ items: [] });
       store = result.store;
 
       // wait till the empty list is loaded
@@ -78,15 +99,7 @@ describe('SavedDiagramsList', function () {
     let store: DataModelingStore;
 
     beforeEach(async function () {
-      const result = renderSavedDiagramsList({
-        loadAll: () =>
-          Promise.resolve([
-            {
-              id: 'diagram-1',
-              name: 'Diagram 1',
-            } as MongoDBDataModelDescription,
-          ]),
-      });
+      const result = renderSavedDiagramsList();
       store = result.store;
 
       // wait till the list is loaded
@@ -95,8 +108,12 @@ describe('SavedDiagramsList', function () {
       });
     });
 
-    it('shows the list of diagrams', function () {
-      expect(screen.getByText('Diagram 1')).to.exist;
+    it('shows the list of diagrams', async function () {
+      await waitFor(() => {
+        expect(screen.getByText('One')).to.exist;
+        expect(screen.getByText('Two')).to.exist;
+        expect(screen.getByText('Three')).to.exist;
+      });
     });
 
     it('allows to add another diagram', function () {
@@ -108,5 +125,35 @@ describe('SavedDiagramsList', function () {
       userEvent.click(createDiagramButton);
       expect(store.getState().generateDiagramWizard.inProgress).to.be.true;
     });
+
+    it('filters the list of diagrams', async function () {
+      const searchInput = screen.getByPlaceholderText('Search');
+      userEvent.type(searchInput, 'One');
+      await waitFor(() => {
+        expect(screen.queryByText('One')).to.exist;
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Two')).to.not.exist;
+        expect(screen.queryByText('Three')).to.not.exist;
+      });
+    });
+
+    it('shows empty content when filter for a non-existent diagram', async function () {
+      const searchInput = screen.getByPlaceholderText('Search');
+      userEvent.type(searchInput, 'Hello');
+      await waitFor(() => {
+        expect(screen.queryByText('No results found.')).to.exist;
+        expect(
+          screen.queryByText("We can't find any diagram matching your search.")
+        ).to.exist;
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('One')).to.not.exist;
+        expect(screen.queryByText('Two')).to.not.exist;
+        expect(screen.queryByText('Three')).to.not.exist;
+      });
+    });
   });
 });
diff --git a/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx b/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx
