fix: empty diagram list view COMPASS-9310 (#6900)

paula-stacho · web-flow · commit ebec8b9541be · 2025-05-09T16:29:06.000+02:00
diff --git a/packages/compass-components/src/components/empty-content.tsx b/packages/compass-components/src/components/empty-content.tsx
@@ -44,32 +44,45 @@ const callToActionLinkContainerStyles = css({
 });
 
 type EmptyContentProps = {
-  icon: React.FunctionComponent;
+  icon?: React.FunctionComponent;
   title: string;
+  titleClassName?: string;
   subTitle: React.ReactNode;
+  subTitleClassName?: string;
   callToAction?: React.ReactNode;
   callToActionLink?: React.ReactNode;
 };
 
 const EmptyContent: React.FunctionComponent<
   EmptyContentProps & React.HTMLProps<HTMLDivElement>
-> = ({ icon: Icon, title, subTitle, callToAction, callToActionLink }) => {
+> = ({
+  icon: Icon,
+  title,
+  subTitle,
+  callToAction,
+  callToActionLink,
+  titleClassName,
+  subTitleClassName,
+}) => {
   const darkMode = useDarkMode();
 
   return (
     <div data-testid="empty-content" className={containerStyles}>
-      <div className={iconStyles}>
-        <Icon />
-      </div>
+      {Icon && (
+        <div className={iconStyles}>
+          <Icon />
+        </div>
+      )}
       <Subtitle
         className={cx(
           titleStyles,
-          darkMode ? titleDarkStyles : titleLightStyles
+          darkMode ? titleDarkStyles : titleLightStyles,
+          titleClassName
         )}
       >
         {title}
       </Subtitle>
-      <Body className={subTitleStyles}>{subTitle}</Body>
+      <Body className={cx(subTitleStyles, subTitleClassName)}>{subTitle}</Body>
       {!!callToAction && (
         <div className={callToActionStyles}>
           {typeof callToAction === 'string' ? (
diff --git a/packages/compass-data-modeling/src/components/icons/collaborate.tsx b/packages/compass-data-modeling/src/components/icons/collaborate.tsx
@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { palette, useDarkMode } from '@mongodb-js/compass-components';
+
+const Collaborate: React.FunctionComponent = () => {
+  const darkMode = useDarkMode();
+  const strokeColor = useMemo(
+    () => (darkMode ? palette.white : palette.black),
+    [darkMode]
+  );
+
+  return (
+    <svg
+      width="72"
+      height="72"
+      viewBox="0 0 72 72"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="General_CONTENT_Collaborate">
+        <g id="general_content_collaborate">
+          <path
+            id="Vector"
+            d="M36 45.4857C40.8285 45.4857 44.7429 41.5714 44.7429 36.7429C44.7429 31.9143 40.8285 28 36 28C31.1715 28 27.2571 31.9143 27.2571 36.7429C27.2571 41.5714 31.1715 45.4857 36 45.4857ZM36 45.4857C26.1 45.4857 18 53.8171 18 64H54C54 53.6849 45.9 45.4857 36 45.4857Z"
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+          />
+          <path
+            id="Vector_2"
+            d="M4 64H3.5C3.5 64.2761 3.72386 64.5 4 64.5V64ZM21.5 46C21.5 49.0376 19.0376 51.5 16 51.5V52.5C19.5899 52.5 22.5 49.5899 22.5 46H21.5ZM16 51.5C12.9624 51.5 10.5 49.0376 10.5 46H9.5C9.5 49.5899 12.4101 52.5 16 52.5V51.5ZM10.5 46C10.5 42.9624 12.9624 40.5 16 40.5V39.5C12.4101 39.5 9.5 42.4101 9.5 46H10.5ZM16 40.5C19.0376 40.5 21.5 42.9624 21.5 46H22.5C22.5 42.4101 19.5899 39.5 16 39.5V40.5ZM18 63.5H4V64.5H18V63.5ZM4.5 64C4.5 57.6095 9.60948 52.5 16 52.5V51.5C9.05719 51.5 3.5 57.0572 3.5 64H4.5ZM16 52.5C17.9067 52.5 19.6974 52.9545 21.2722 53.7606L21.7278 52.8705C20.0141 51.9932 18.0675 51.5 16 51.5V52.5Z"
+            fill={strokeColor}
+          />
+          <path
+            id="Vector_3"
+            d="M68 64H68.5C68.5 64.2761 68.2761 64.5 68 64.5V64ZM50.5 46C50.5 49.0376 52.9624 51.5 56 51.5V52.5C52.4101 52.5 49.5 49.5899 49.5 46H50.5ZM56 51.5C59.0376 51.5 61.5 49.0376 61.5 46H62.5C62.5 49.5899 59.5899 52.5 56 52.5V51.5ZM61.5 46C61.5 42.9624 59.0376 40.5 56 40.5V39.5C59.5899 39.5 62.5 42.4101 62.5 46H61.5ZM56 40.5C52.9624 40.5 50.5 42.9624 50.5 46H49.5C49.5 42.4101 52.4101 39.5 56 39.5V40.5ZM54 63.5H68V64.5H54V63.5ZM67.5 64C67.5 57.6095 62.3905 52.5 56 52.5V51.5C62.9428 51.5 68.5 57.0572 68.5 64H67.5ZM56 52.5C54.0933 52.5 52.3026 52.9545 50.7278 53.7606L50.2722 52.8705C51.9859 51.9932 53.9325 51.5 56 51.5V52.5Z"
+            fill={strokeColor}
+          />
+          <path
+            id="Vector_4"
+            d="M66 8H6C4.89543 8 4 8.89543 4 10V18C4 19.1046 4.89543 20 6 20L31 20L34.4636 24.1563C35.2631 25.1158 36.7369 25.1158 37.5364 24.1563L41 20L44.5 20H66C67.1046 20 68 19.1046 68 18V10C68 8.89543 67.1046 8 66 8Z"
+            fill={palette.green.base}
+            stroke={strokeColor}
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default Collaborate;
diff --git a/packages/compass-data-modeling/src/components/icons/flexibility.tsx b/packages/compass-data-modeling/src/components/icons/flexibility.tsx
@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { palette, useDarkMode } from '@mongodb-js/compass-components';
+
+const Flexibility: React.FunctionComponent = () => {
+  const darkMode = useDarkMode();
+  const strokeColor = useMemo(
+    () => (darkMode ? palette.white : palette.black),
+    [darkMode]
+  );
+  // Using green that doesn't change with dark mode
+  const fillColor = palette.green.base;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="72"
+      height="72"
+      viewBox="0 0 72 72"
+      fill="none"
+    >
+      <path
+        d="M4 60H48.5C51.8 60 54.8 58.7027 57 56.5073C59.2 54.3119 60.5 51.3181 60.5 48.0249C60.5 41.4387 55.1 36.0499 48.5 36.0499L24 35.9501C17.4 35.9501 12 30.5613 12 23.9751C12 20.6819 13.3 17.6881 15.5 15.4927C17.7 13.2973 20.7 12 24 12H68M60 20L67.68 12.8C68.1067 12.4 68.1067 11.6 67.68 11.2L60 4M12 52L4.32 59.2C3.89333 59.6 3.89333 60.4 4.32 60.8L12 68"
+        stroke={strokeColor}
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M31.7835 22.6262L44.3054 35.2971C44.6903 35.6866 44.6903 36.3134 44.3054 36.7029L31.7835 49.3738C30.8991 50.2688 29.4539 50.2688 28.5694 49.3738C27.6997 48.4937 27.6997 47.0777 28.5694 46.1976L37.9524 36.7029C38.3374 36.3134 38.3374 35.6866 37.9524 35.2971L28.5694 25.8024C27.6997 24.9223 27.6997 23.5063 28.5694 22.6262C29.4539 21.7312 30.8991 21.7312 31.7835 22.6262Z"
+        fill={fillColor}
+        stroke={strokeColor}
+      />
+    </svg>
+  );
+};
+
+export default Flexibility;
diff --git a/packages/compass-data-modeling/src/components/icons/insight.tsx b/packages/compass-data-modeling/src/components/icons/insight.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { palette, useDarkMode } from '@mongodb-js/compass-components';
+
+const Insight: React.FunctionComponent = () => {
+  const darkMode = useDarkMode();
+  const strokeColor = useMemo(
+    () => (darkMode ? palette.white : palette.black),
+    [darkMode]
+  );
+  // Green color that doesn't change with dark mode
+  const fillColor = palette.green.base;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="72"
+      height="72"
+      viewBox="0 0 72 72"
+      fill="none"
+    >
+      <path
+        d="M42 64C43.1 64 44 64.9 44 66C44 67.1 43.1 68 42 68H30C28.9 68 28 67.1 28 66C28 64.9 28.9 64 30 64M27.5 56H44.5M42.3297 64C43.4901 64 44.4396 63.0357 44.4396 61.8571V55.75C44.4396 55.1071 44.545 54.5714 44.8615 54.0357L51.8242 40.2143C52.4571 38.9286 53.0901 37.75 53.8286 36.5714C55.9384 33.1429 57.0989 29.0714 56.9934 24.6786C56.5714 14.0714 47.3934 4.53571 37.0549 4C36.633 4 35.8945 4 35.8945 4C35.8945 4 35.156 4 34.7341 4C24.5011 4.53571 15.3231 14.0714 15.0066 24.5714C14.9011 28.9643 16.0616 33.0357 18.1714 36.4643C18.9099 37.6429 19.5429 38.9286 20.1758 40.1071L27.1385 54.0357C27.455 54.5714 27.5604 55.1071 27.5604 55.75V61.8571C27.5604 63.0357 28.5099 64 29.6703 64H42.3297Z"
+        stroke={strokeColor}
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M44 56L48 24C48 26.2 46.2 28 44 28C41.8 28 40 26.2 40 24C40 26.2 38.2 28 36 28C33.8 28 32 26.2 32 24C32 26.2 30.2 28 28 28C25.8 28 24 26.2 24 24L28 56"
+        fill={fillColor}
+      />
+      <path
+        d="M44 56L48 24C48 26.2 46.2 28 44 28C41.8 28 40 26.2 40 24C40 26.2 38.2 28 36 28C33.8 28 32 26.2 32 24C32 26.2 30.2 28 28 28C25.8 28 24 26.2 24 24L28 56H44Z"
+        stroke={strokeColor}
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+};
+
+export default Insight;
diff --git a/packages/compass-data-modeling/src/components/icons/schema-visualization.tsx b/packages/compass-data-modeling/src/components/icons/schema-visualization.tsx
@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { palette, useDarkMode } from '@mongodb-js/compass-components';
+
+const SchemaVisualization: React.FunctionComponent = () => {
+  const darkMode = useDarkMode();
+  const strokeColor = useMemo(
+    () => (darkMode ? palette.white : palette.black),
+    [darkMode]
+  );
+  // Using green that doesn't change with dark mode
+  const fillColor = palette.green.base;
+
+  return (
+    <svg
+      width="72"
+      height="72"
+      viewBox="0 0 72 72"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Technical_MDB_SchemaVisualization">
+        <g id="mdb_schema_visualization">
+          <path
+            id="Vector"
+            d="M18.0203 46V35C18.0203 32.8 19.8229 31 22.0261 31H50.0666C52.2698 31 54.0724 32.8 54.0724 35V46M36.0463 36V46"
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_2"
+            d="M66.0896 62H6.00289C4.9013 62 4 61.1 4 60V12C4 10.9 4.9013 10 6.00289 10H65.9895C67.0911 10 67.9924 10.9 67.9924 12V59.9C68.0925 61.1 67.1912 62 66.0896 62Z"
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_3"
+            d="M68 20H4V12.1C4 10.9 4.9 10 6.1 10H65.9C67.1 10 68 10.9 68 12.1V20Z"
+            fill={fillColor}
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_4"
+            d="M40 56H32C31.4 56 31 55.6 31 55V47C31 46.4 31.4 46 32 46H40C40.6 46 41 46.4 41 47V55C41 55.6 40.6 56 40 56Z"
+            fill={fillColor}
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_5"
+            d="M58 56H50C49.4 56 49 55.6 49 55V47C49 46.4 49.4 46 50 46H58C58.6 46 59 46.4 59 47V55C59 55.6 58.5 56 58 56Z"
+            fill={fillColor}
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_6"
+            d="M22 56H14C13.4 56 13 55.6 13 55V47C13 46.4 13.4 46 14 46H22C22.6 46 23 46.4 23 47V55C23 55.6 22.6 56 22 56Z"
+            fill={fillColor}
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            id="Vector_7"
+            d="M40 36H32C31.4 36 31 35.6 31 35V27C31 26.4 31.4 26 32 26H40C40.6 26 41 26.4 41 27V35C41 35.6 40.6 36 40 36Z"
+            fill={fillColor}
+            stroke={strokeColor}
+            strokeMiterlimit="10"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default SchemaVisualization;
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
@@ -0,0 +1,112 @@
+import React from 'react';
+import { expect } from 'chai';
+import {
+  screen,
+  userEvent,
+  waitFor,
+} from '@mongodb-js/testing-library-compass';
+import SavedDiagramsList from './saved-diagrams-list';
+import { renderWithStore } from '../../test/setup-store';
+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,
+        },
+      }
+    );
+  };
+
+  context('when there are no saved diagrams', function () {
+    let store: DataModelingStore;
+
+    beforeEach(async function () {
+      const result = renderSavedDiagramsList();
+      store = result.store;
+
+      // wait till the empty list is loaded
+      await waitFor(() => {
+        expect(screen.getByTestId('empty-content')).to.be.visible;
+      });
+    });
+
+    it('shows the empty state', function () {
+      expect(
+        screen.getByText('Design, Visualize, and Evolve your Data Model')
+      ).to.be.visible;
+    });
+
+    it('allows to start adding diagrams', function () {
+      const createDiagramButton = screen.getByRole('button', {
+        name: 'Generate diagram',
+      });
+      expect(store.getState().generateDiagramWizard.inProgress).to.be.false;
+      expect(createDiagramButton).to.be.visible;
+      userEvent.click(createDiagramButton);
+      expect(store.getState().generateDiagramWizard.inProgress).to.be.true;
+    });
+  });
+
+  context('when there are diagrams', function () {
+    let store: DataModelingStore;
+
+    beforeEach(async function () {
+      const result = renderSavedDiagramsList({
+        loadAll: () =>
+          Promise.resolve([
+            {
+              id: 'diagram-1',
+              name: 'Diagram 1',
+            } as MongoDBDataModelDescription,
+          ]),
+      });
+      store = result.store;
+
+      // wait till the list is loaded
+      await waitFor(() => {
+        expect(screen.getByTestId('saved-diagram-list')).to.be.visible;
+      });
+    });
+
+    it('shows the list of diagrams', function () {
+      expect(screen.getByText('Diagram 1')).to.exist;
+    });
+
+    it('allows to add another diagram', function () {
+      const createDiagramButton = screen.getByRole('button', {
+        name: 'Generate new diagram',
+      });
+      expect(store.getState().generateDiagramWizard.inProgress).to.be.false;
+      expect(createDiagramButton).to.be.visible;
+      userEvent.click(createDiagramButton);
+      expect(store.getState().generateDiagramWizard.inProgress).to.be.true;
+    });
+  });
+});
diff --git a/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx b/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx
diff --git a/packages/compass-data-modeling/src/provider/index.tsx b/packages/compass-data-modeling/src/provider/index.tsx
