Revert "breadcrumbs ui" (#5499)

This reverts commit 8b0b3d9.

Author: mabaasit

package-lock.json

@@ -226,10 +226,7 @@ export const createView = (): CreateViewThunkAction<Promise<void>> => {
       const ns = `${database}.${viewName}`;
       track('Aggregation Saved As View', { num_stages: viewPipeline.length });
       globalAppRegistry.emit('view-created', ns);
-      workspaces.openCollectionWorkspace(ns, {
-        newTab: true,
-        sourceName: viewSource,
-      });
+      workspaces.openCollectionWorkspace(ns, { newTab: true });
       dispatch(reset());
     } catch (e) {
       dispatch(stopWithError(e as Error));

packages/compass-aggregations/src/modules/create-view/index.ts

@@ -111,9 +111,7 @@ export const updateView = (): PipelineBuilderThunkAction<Promise<void>> => {
       });
       debug('selecting namespace', viewNamespace);
       globalAppRegistry.emit('view-edited', viewNamespace);
-      workspaces.openCollectionWorkspace(viewNamespace, {
-        sourceName: state.namespace,
-      });
+      workspaces.openCollectionWorkspace(viewNamespace);
     } catch (e: any) {
       debug('Unexpected error updating view', e);
       dispatch(updateViewErrorOccured(e));

packages/compass-aggregations/src/modules/update-view.ts

@@ -16,6 +16,7 @@ function renderCollectionHeader(
       isClustered={false}
       isFLE={false}
       namespace="test.test"
+      stats={null}
       {...props}
     />
   );
@@ -33,8 +34,12 @@ describe('CollectionHeader [Component]', function () {
       expect(screen.getByTestId('collection-header')).to.exist;
     });
 
-    it('renders breadcrumbs', function () {
-      expect(screen.getByTestId('breadcrumbs')).to.exist;
+    it('renders the db name', function () {
+      expect(screen.getByTestId('collection-header-title-db')).to.exist;
+    });
+
+    it('renders the collection name', function () {
+      expect(screen.getByTestId('collection-header-title-collection')).to.exist;
     });
 
     it('does not render the readonly badge', function () {
@@ -65,8 +70,12 @@ describe('CollectionHeader [Component]', function () {
       expect(screen.getByTestId('collection-header')).to.exist;
     });
 
-    it('renders breadcrumbs', function () {
-      expect(screen.getByTestId('breadcrumbs')).to.exist;
+    it('renders the db name', function () {
+      expect(screen.getByTestId('collection-header-title-db')).to.exist;
+    });
+
+    it('renders the collection name', function () {
+      expect(screen.getByTestId('collection-header-title-collection')).to.exist;
     });
 
     it('renders the source collection', function () {

packages/compass-collection/src/components/collection-header/collection-header.spec.tsx

@@ -1,35 +1,88 @@
 import {
   css,
   palette,
+  Link,
   spacing,
+  H3,
   cx,
   SignalPopover,
   PerformanceSignals,
   useDarkMode,
-  Breadcrumbs,
 } from '@mongodb-js/compass-components';
 import type { Signal } from '@mongodb-js/compass-components';
 import React from 'react';
 import toNS from 'mongodb-ns';
 import { usePreference } from 'compass-preferences-model/provider';
 import CollectionHeaderActions from '../collection-header-actions';
+import CollectionStats from '../collection-stats';
 import type { CollectionState } from '../../modules/collection-tab';
 import { CollectionBadge } from './badges';
-import {
-  useOpenWorkspace,
-  useWorkspaceBreadcrumbs,
-} from '@mongodb-js/compass-workspaces/provider';
+import { useOpenWorkspace } from '@mongodb-js/compass-workspaces/provider';
 import { connect } from 'react-redux';
 
 const collectionHeaderStyles = css({
-  padding: spacing[3],
+  paddingTop: spacing[3],
+  paddingBottom: spacing[1],
+  height: +spacing[6] + +spacing[2],
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+});
+
+const collectionHeaderTitleStyles = css({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  padding: `0 ${String(spacing[3])}px`,
+  margin: 0,
+  overflow: 'hidden',
   gap: spacing[2],
 });
 
+const collectionHeaderDBLinkStyles = css({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  cursor: 'pointer',
+  textDecoration: 'none',
+  '&:hover,&:focus': {
+    textDecoration: 'underline',
+  },
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline-block',
+  padding: 0,
+});
+
+const collectionHeaderNamespaceStyles = css({
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'flex',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+});
+
+const collectionHeaderDBNameStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+const dbLinkLightStyles = css({
+  color: palette.green.dark2,
+});
+
+const dbLinkDarkStyles = css({
+  color: palette.green.base,
+});
+
+const collectionHeaderCollectionStyles = css({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
 const collectionHeaderLightStyles = css({
   background: palette.white,
 });
@@ -38,6 +91,14 @@ const collectionHeaderDarkStyles = css({
   backgroundColor: palette.black,
 });
 
+const collectionHeaderTitleCollectionLightStyles = css({
+  color: palette.gray.dark1,
+});
+
+const collectionHeaderTitleCollectionDarkStyles = css({
+  color: palette.gray.light1,
+});
+
 type CollectionHeaderProps = {
   namespace: string;
   isReadonly: boolean;
@@ -48,6 +109,7 @@ type CollectionHeaderProps = {
   sourceName?: string;
   editViewName?: string;
   sourcePipeline?: unknown[];
+  stats: CollectionState['stats'];
 };
 
 const getInsightsForPipeline = (pipeline: any[], isAtlas: boolean) => {
@@ -84,10 +146,15 @@ export const CollectionHeader: React.FunctionComponent<
   sourceName,
   editViewName,
   sourcePipeline,
+  stats,
 }) => {
   const darkMode = useDarkMode();
   const showInsights = usePreference('showInsights');
-  const { openCollectionWorkspace, openEditViewWorkspace } = useOpenWorkspace();
+  const {
+    openCollectionsWorkspace,
+    openCollectionWorkspace,
+    openEditViewWorkspace,
+  } = useOpenWorkspace();
 
   const ns = toNS(namespace);
   const database = ns.database;
@@ -96,41 +163,85 @@ export const CollectionHeader: React.FunctionComponent<
     showInsights && sourcePipeline?.length
       ? getInsightsForPipeline(sourcePipeline, isAtlas)
       : [];
-  const breadcrumbItems = useWorkspaceBreadcrumbs();
+
   return (
     <div
-      title={`${database}.${collection}`}
       className={cx(
         collectionHeaderStyles,
         darkMode ? collectionHeaderDarkStyles : collectionHeaderLightStyles
       )}
       data-testid="collection-header"
     >
-      <Breadcrumbs items={breadcrumbItems} />
-      {isReadonly && <CollectionBadge type="readonly" />}
-      {isTimeSeries && <CollectionBadge type="timeseries" />}
-      {isClustered && <CollectionBadge type="clustered" />}
-      {isFLE && <CollectionBadge type="fle" />}
-      {isReadonly && sourceName && <CollectionBadge type="view" />}
-      {!!insights.length && <SignalPopover signals={insights} />}
-      <CollectionHeaderActions
-        editViewName={editViewName}
-        isReadonly={isReadonly}
-        onEditViewClicked={() => {
-          if (sourceName && sourcePipeline) {
-            openEditViewWorkspace(namespace, {
-              sourceName,
-              sourcePipeline,
-            });
-          }
-        }}
-        onReturnToViewClicked={() => {
-          if (editViewName) {
-            openCollectionWorkspace(editViewName, { sourceName: namespace });
-          }
-        }}
-        sourceName={sourceName}
-      />
+      <div
+        title={`${database}.${collection}`}
+        className={collectionHeaderTitleStyles}
+        data-testid="collection-header-title"
+      >
+        <div
+          data-testid="collection-header-namespace"
+          className={collectionHeaderNamespaceStyles}
+        >
+          <Link
+            data-testid="collection-header-title-db"
+            as="button"
+            className={cx(
+              collectionHeaderDBLinkStyles,
+              darkMode ? dbLinkDarkStyles : dbLinkLightStyles
+            )}
+            hideExternalIcon={true}
+            onClick={() => {
+              openCollectionsWorkspace(ns.database);
+            }}
+          >
+            <H3
+              className={cx(
+                collectionHeaderDBNameStyles,
+                darkMode ? dbLinkDarkStyles : dbLinkLightStyles
+              )}
+            >
+              {database}
+            </H3>
+          </Link>
+          <H3
+            data-testid="collection-header-title-collection"
+            className={cx(
+              collectionHeaderCollectionStyles,
+              darkMode
+                ? collectionHeaderTitleCollectionDarkStyles
+                : collectionHeaderTitleCollectionLightStyles
+            )}
+          >
+            {`.${collection}`}
+          </H3>
+        </div>
+        {isReadonly && <CollectionBadge type="readonly" />}
+        {isTimeSeries && <CollectionBadge type="timeseries" />}
+        {isClustered && <CollectionBadge type="clustered" />}
+        {isFLE && <CollectionBadge type="fle" />}
+        {isReadonly && sourceName && <CollectionBadge type="view" />}
+        {!!insights.length && <SignalPopover signals={insights} />}
+        <CollectionHeaderActions
+          editViewName={editViewName}
+          isReadonly={isReadonly}
+          onEditViewClicked={() => {
+            if (sourceName && sourcePipeline) {
+              openEditViewWorkspace(namespace, {
+                sourceName,
+                sourcePipeline,
+              });
+            }
+          }}
+          onReturnToViewClicked={() => {
+            if (editViewName) {
+              openCollectionWorkspace(editViewName);
+            }
+          }}
+          sourceName={sourceName}
+        />
+      </div>
+      {!isReadonly && !editViewName && (
+        <CollectionStats isTimeSeries={isTimeSeries} stats={stats} />
+      )}
     </div>
   );
 };

packages/compass-collection/src/components/collection-header/collection-header.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+import { expect } from 'chai';
+
+import CollectionStatsItem from '../collection-stats-item';
+
+describe('CollectionStatsItem [Component]', function () {
+  context('when the component is not primary', function () {
+    afterEach(cleanup);
+
+    beforeEach(function () {
+      render(
+        <CollectionStatsItem label="label" value="10kb" data-testid="test" />
+      );
+    });
+
+    it('renders the correct root classname', function () {
+      expect(screen.getByTestId('test-stats-item')).to.exist;
+    });
+
+    it('renders the label', function () {
+      const label = screen.getByTestId('test-count-label');
+      expect(label).to.have.text('label');
+      expect(label).to.be.visible;
+    });
+
+    it('renders the value', function () {
+      const value = screen.getByTestId('test-count-value');
+      expect(value).to.have.text('10kb');
+      expect(value).to.be.visible;
+    });
+  });
+
+  context('when the component is primary', function () {
+    afterEach(cleanup);
+
+    beforeEach(function () {
+      render(
+        <CollectionStatsItem label="label" value="20kb" data-testid="test" />
+      );
+    });
+
+    it('renders the correct root classname', function () {
+      expect(screen.getByTestId('test-stats-item')).to.exist;
+    });
+
+    it('renders the label', function () {
+      const label = screen.getByTestId('test-count-label');
+      expect(label).to.have.text('label');
+      expect(label).to.be.visible;
+    });
+
+    it('renders the value', function () {
+      const value = screen.getByTestId('test-count-value');
+      expect(value).to.have.text('20kb');
+      expect(value).to.be.visible;
+    });
+  });
+});