chore: add connection name to breadcrumbs COMPASS-7684 (#5730)

kmruiz · web-flow · commit 1ad511855e2d · 2024-04-24T22:39:49.000+02:00
* chore: add connection title

* chore: fix tests

* chore: fix package.json

* chore: add missing breadcrumbs

* chore: add test to new breadcrumb behaviour

* chore: add missing dep

* chore: fix package.json
diff --git a/packages/compass-collection/package.json b/packages/compass-collection/package.json
@@ -51,6 +51,7 @@
     "@mongodb-js/compass-app-stores": "^7.11.0",
     "@mongodb-js/compass-components": "^1.23.0",
     "@mongodb-js/compass-connections": "^1.26.0",
+    "@mongodb-js/connection-info": "^0.2.0",
     "@mongodb-js/compass-logging": "^1.2.15",
     "@mongodb-js/compass-workspaces": "^0.6.0",
     "compass-preferences-model": "^2.19.0",
diff --git a/packages/compass-collection/src/components/collection-header/collection-header.spec.tsx b/packages/compass-collection/src/components/collection-header/collection-header.spec.tsx
@@ -188,7 +188,7 @@ describe('CollectionHeader [Component]', function () {
         crumbs.push(item.textContent);
       });
       expect(crumbs.filter(Boolean).join('.').toLowerCase()).to.equal(
-        items.join('.').toLowerCase()
+        `localhost:27020.${items.join('.').toLowerCase()}`
       );
     }
 
diff --git a/packages/compass-collection/src/components/collection-header/collection-header.tsx b/packages/compass-collection/src/components/collection-header/collection-header.tsx
@@ -19,6 +19,7 @@ import { CollectionBadge } from './badges';
 import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { connect } from 'react-redux';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import { getConnectionTitle } from '@mongodb-js/connection-info';
 
 const collectionHeaderStyles = css({
   padding: spacing[3],
@@ -98,13 +99,21 @@ export const CollectionHeader: React.FunctionComponent<
 }) => {
   const darkMode = useDarkMode();
   const showInsights = usePreference('showInsights');
-  const { openCollectionWorkspace, openCollectionsWorkspace } =
-    useOpenWorkspace();
-  const { id: connectionId } = useConnectionInfo();
+  const {
+    openCollectionWorkspace,
+    openCollectionsWorkspace,
+    openDatabasesWorkspace,
+  } = useOpenWorkspace();
+  const connectionInfo = useConnectionInfo();
+  const connectionId = connectionInfo.id;
+  const connectionName = getConnectionTitle(connectionInfo);
 
   const breadcrumbItems = useMemo(() => {
     return [
-      // TODO (COMPASS-7684): add connection name
+      {
+        name: connectionName,
+        onClick: () => openDatabasesWorkspace(connectionId),
+      },
       {
         name: toNS(namespace).database,
         onClick: () =>
@@ -128,11 +137,13 @@ export const CollectionHeader: React.FunctionComponent<
     ].filter(Boolean) as BreadcrumbItem[];
   }, [
     connectionId,
+    connectionName,
     namespace,
     sourceName,
     editViewName,
     openCollectionsWorkspace,
     openCollectionWorkspace,
+    openDatabasesWorkspace,
   ]);
 
   const insights =
diff --git a/packages/databases-collections-list/src/collections.tsx b/packages/databases-collections-list/src/collections.tsx
@@ -1,6 +1,11 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
-import { spacing } from '@mongodb-js/compass-components';
+import React, { useMemo } from 'react';
+import {
+  type BreadcrumbItem,
+  Breadcrumbs,
+  css,
+  spacing,
+} from '@mongodb-js/compass-components';
 import { compactBytes, compactNumber } from './format';
 import type { BadgeProp } from './namespace-card';
 import { NamespaceItemCard } from './namespace-card';
@@ -74,97 +79,136 @@ function collectionPropertyToBadge({
   }
 }
 
+const pageContainerStyles = css({
+  height: 'auto',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const breadcrumbStyles = css({
+  paddingLeft: spacing[3],
+  paddingTop: spacing[3],
+  paddingBottom: spacing[2],
+});
+
 const CollectionsList: React.FunctionComponent<{
   connectionId: string;
+  connectionTitle: string;
+  databaseName: string;
   collections: Collection[];
   onCollectionClick(id: string): void;
+  onClickConnectionBreadcrumb(connectionId: string): void;
   onDeleteCollectionClick?: (connectionId: string, id: string) => void;
   onCreateCollectionClick?: () => void;
   onRefreshClick?: () => void;
 }> = ({
   connectionId,
+  connectionTitle,
+  databaseName,
   collections,
+  onClickConnectionBreadcrumb,
   onCollectionClick,
   onCreateCollectionClick,
   onDeleteCollectionClick,
   onRefreshClick,
 }) => {
+  const breadcrumbItems = useMemo(() => {
+    return [
+      {
+        name: connectionTitle,
+        onClick: () => onClickConnectionBreadcrumb(connectionId),
+      },
+      {
+        name: databaseName,
+      },
+    ] as BreadcrumbItem[];
+  }, [
+    connectionId,
+    connectionTitle,
+    databaseName,
+    onClickConnectionBreadcrumb,
+  ]);
+
   return (
-    <ItemsGrid
-      items={collections}
-      itemType="collection"
-      itemGridWidth={COLLECTION_CARD_WIDTH}
-      itemGridHeight={COLLECTION_CARD_HEIGHT}
-      itemListHeight={COLLECTION_CARD_LIST_HEIGHT}
-      sortBy={[
-        { name: 'name', label: 'Collection Name' },
-        { name: 'document_count', label: 'Documents' },
-        { name: 'avg_document_size', label: 'Avg. document size' },
-        { name: 'storage_size', label: 'Storage size' },
-        { name: 'index_count', label: 'Indexes' },
-        { name: 'index_size', label: 'Total index size' },
-      ]}
-      onItemClick={onCollectionClick}
-      onDeleteItemClick={(ns) => onDeleteCollectionClick?.(connectionId, ns)}
-      onCreateItemClick={onCreateCollectionClick}
-      onRefreshClick={onRefreshClick}
-      renderItem={({
-        item: coll,
-        onItemClick,
-        onDeleteItemClick,
-        ...props
-      }) => {
-        const data =
-          coll.type === 'view'
-            ? [{ label: 'View on', value: coll.source?.name }]
-            : [
-                {
-                  label: 'Storage size',
-                  value: compactBytes(
-                    coll.storage_size - coll.free_storage_size
-                  ),
-                  hint: `Uncompressed data size: ${compactBytes(
-                    coll.document_size
-                  )}`,
-                },
-                {
-                  label: 'Documents',
-                  value: compactNumber(coll.document_count),
-                },
-                {
-                  label: 'Avg. document size',
-                  value: compactBytes(coll.avg_document_size),
-                },
-                {
-                  label: 'Indexes',
-                  value: compactNumber(coll.index_count),
-                },
-                {
-                  label: 'Total index size',
-                  value: compactBytes(coll.index_size),
-                },
-              ];
+    <div className={pageContainerStyles}>
+      <Breadcrumbs className={breadcrumbStyles} items={breadcrumbItems} />
+      <ItemsGrid
+        items={collections}
+        itemType="collection"
+        itemGridWidth={COLLECTION_CARD_WIDTH}
+        itemGridHeight={COLLECTION_CARD_HEIGHT}
+        itemListHeight={COLLECTION_CARD_LIST_HEIGHT}
+        sortBy={[
+          { name: 'name', label: 'Collection Name' },
+          { name: 'document_count', label: 'Documents' },
+          { name: 'avg_document_size', label: 'Avg. document size' },
+          { name: 'storage_size', label: 'Storage size' },
+          { name: 'index_count', label: 'Indexes' },
+          { name: 'index_size', label: 'Total index size' },
+        ]}
+        onItemClick={onCollectionClick}
+        onDeleteItemClick={(ns) => onDeleteCollectionClick?.(connectionId, ns)}
+        onCreateItemClick={onCreateCollectionClick}
+        onRefreshClick={onRefreshClick}
+        renderItem={({
+          item: coll,
+          onItemClick,
+          onDeleteItemClick,
+          ...props
+        }) => {
+          const data =
+            coll.type === 'view'
+              ? [{ label: 'View on', value: coll.source?.name }]
+              : [
+                  {
+                    label: 'Storage size',
+                    value: compactBytes(
+                      coll.storage_size - coll.free_storage_size
+                    ),
+                    hint: `Uncompressed data size: ${compactBytes(
+                      coll.document_size
+                    )}`,
+                  },
+                  {
+                    label: 'Documents',
+                    value: compactNumber(coll.document_count),
+                  },
+                  {
+                    label: 'Avg. document size',
+                    value: compactBytes(coll.avg_document_size),
+                  },
+                  {
+                    label: 'Indexes',
+                    value: compactNumber(coll.index_count),
+                  },
+                  {
+                    label: 'Total index size',
+                    value: compactBytes(coll.index_size),
+                  },
+                ];
 
-        const badges = coll.properties.map((prop) => {
-          return collectionPropertyToBadge(prop);
-        });
+          const badges = coll.properties.map((prop) => {
+            return collectionPropertyToBadge(prop);
+          });
 
-        return (
-          <NamespaceItemCard
-            id={coll._id}
-            key={coll._id}
-            name={coll.name}
-            type="collection"
-            status={coll.status}
-            data={data}
-            badges={badges}
-            onItemClick={onItemClick}
-            onItemDeleteClick={onDeleteItemClick}
-            {...props}
-          ></NamespaceItemCard>
-        );
-      }}
-    ></ItemsGrid>
+          return (
+            <NamespaceItemCard
+              id={coll._id}
+              key={coll._id}
+              name={coll.name}
+              type="collection"
+              status={coll.status}
+              data={data}
+              badges={badges}
+              onItemClick={onItemClick}
+              onItemDeleteClick={onDeleteItemClick}
+              {...props}
+            ></NamespaceItemCard>
+          );
+        }}
+      ></ItemsGrid>
+    </div>
   );
 };
 
diff --git a/packages/databases-collections-list/src/index.spec.tsx b/packages/databases-collections-list/src/index.spec.tsx
@@ -82,6 +82,9 @@ describe('databases and collections list', function () {
 
       render(
         <CollectionsList
+          connectionTitle="My Connection"
+          connectionId="1"
+          databaseName="My Database"
           collections={colls}
           onCollectionClick={clickSpy}
         ></CollectionsList>
@@ -99,5 +102,25 @@ describe('databases and collections list', function () {
 
       expect(clickSpy).to.be.calledWith('bar.bar');
     });
+
+    it('should notify when the connection name is clicked', function () {
+      const clickSpy = Sinon.spy();
+      const connectionClickSpy = Sinon.spy();
+
+      render(
+        <CollectionsList
+          connectionTitle="My Connection"
+          connectionId="1"
+          databaseName="My Database"
+          collections={colls}
+          onClickConnectionBreadcrumb={connectionClickSpy}
+          onCollectionClick={clickSpy}
+        ></CollectionsList>
+      );
+
+      userEvent.click(screen.getByText('My Connection'));
+
+      expect(connectionClickSpy).to.be.calledWith('1');
+    });
   });
 });
diff --git a/packages/databases-collections/package.json b/packages/databases-collections/package.json
@@ -64,6 +64,7 @@
     "@mongodb-js/compass-components": "^1.23.0",
     "@mongodb-js/compass-connections": "^1.26.0",
     "@mongodb-js/compass-editor": "^0.22.0",
+    "@mongodb-js/connection-info": "^0.2.0",
     "@mongodb-js/compass-logging": "^1.2.15",
     "@mongodb-js/compass-workspaces": "^0.6.0",
     "@mongodb-js/databases-collections-list": "^1.24.0",
diff --git a/packages/databases-collections/src/components/collections.tsx b/packages/databases-collections/src/components/collections.tsx
@@ -18,6 +18,7 @@ import type Collection from 'mongodb-collection-model';
 import toNS from 'mongodb-ns';
 import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
+import { getConnectionTitle } from '@mongodb-js/connection-info';
 
 const ERROR_WARNING = 'An error occurred while loading collections';
 
@@ -46,8 +47,12 @@ const Collections: React.FunctionComponent<CollectionsListProps> = ({
   onCreateCollectionClick: _onCreateCollectionClick,
   onRefreshClick,
 }) => {
-  const { id: connectionId } = useConnectionInfo();
-  const { openCollectionWorkspace } = useOpenWorkspace();
+  const connectionInfo = useConnectionInfo();
+  const { id: connectionId } = connectionInfo;
+  const { openDatabasesWorkspace, openCollectionWorkspace } =
+    useOpenWorkspace();
+
+  const parsedNS = toNS(namespace);
 
   useTrackOnChange(
     'COMPASS-COLLECTIONS-UI',
@@ -85,6 +90,9 @@ const Collections: React.FunctionComponent<CollectionsListProps> = ({
     <CollectionsList
       connectionId={connectionId}
       collections={collections}
+      connectionTitle={getConnectionTitle(connectionInfo)}
+      databaseName={parsedNS.database}
+      onClickConnectionBreadcrumb={openDatabasesWorkspace}
       {...actions}
     />
   );

Original file line number	Diff line number	Diff line change
`@@ -188,7 +188,7 @@ describe('CollectionHeader [Component]', function () {`
`188`	`188`	`crumbs.push(item.textContent);`
`189`	`189`	`});`
`190`	`190`	`expect(crumbs.filter(Boolean).join('.').toLowerCase()).to.equal(`
`191`		`- items.join('.').toLowerCase()`
	`191`	+ `localhost:27020.${items.join('.').toLowerCase()}`
`192`	`192`	`);`
`193`	`193`	`}`
`194`	`194`