feat(compass-workspace): breadcrumbs COMPASS-7593 (#5501)

* breadcrumbs ui

* refactor

* undo unwanted change

* depcheck

* fix workspace tab tests

* unit test

* fix e2e tests

* todo

* pr feedback

* remove due to connection title

* make text bold

* better if

* fix firefox tests

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

@@ -1,24 +1,31 @@
 import { expect } from 'chai';
 import type { ComponentProps } from 'react';
 import React from 'react';
-import { render, screen, cleanup } from '@testing-library/react';
+import { render, screen, cleanup, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CollectionHeader } from './collection-header';
+import {
+  WorkspacesServiceProvider,
+  type WorkspacesService,
+} from '@mongodb-js/compass-workspaces/provider';
+import Sinon from 'sinon';
 
 function renderCollectionHeader(
-  props: Partial<ComponentProps<typeof CollectionHeader>> = {}
+  props: Partial<ComponentProps<typeof CollectionHeader>> = {},
+  workspaceService: Partial<WorkspacesService> = {}
 ) {
   return render(
-    <CollectionHeader
-      isAtlas={false}
-      isReadonly={false}
-      isTimeSeries={false}
-      isClustered={false}
-      isFLE={false}
-      namespace="test.test"
-      stats={null}
-      {...props}
-    />
+    <WorkspacesServiceProvider value={workspaceService as WorkspacesService}>
+      <CollectionHeader
+        isAtlas={false}
+        isReadonly={false}
+        isTimeSeries={false}
+        isClustered={false}
+        isFLE={false}
+        namespace="test.test"
+        {...props}
+      />
+    </WorkspacesServiceProvider>
   );
 }
 
@@ -34,12 +41,8 @@ describe('CollectionHeader [Component]', function () {
       expect(screen.getByTestId('collection-header')).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 breadcrumbs', function () {
+      expect(screen.getByTestId('breadcrumbs')).to.exist;
     });
 
     it('does not render the readonly badge', function () {
@@ -70,12 +73,8 @@ describe('CollectionHeader [Component]', function () {
       expect(screen.getByTestId('collection-header')).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 breadcrumbs', function () {
+      expect(screen.getByTestId('breadcrumbs')).to.exist;
     });
 
     it('renders the source collection', function () {
@@ -191,4 +190,106 @@ describe('CollectionHeader [Component]', function () {
       expect(screen.getByText('$lookup usage')).to.exist;
     });
   });
+
+  context('breadcrumbs', function () {
+    let sandbox: Sinon.SinonSandbox;
+    beforeEach(function () {
+      sandbox = Sinon.createSandbox();
+    });
+    afterEach(function () {
+      sandbox.restore();
+    });
+
+    function assertBreadcrumbText(items: string[]) {
+      const crumbs: any[] = [];
+      screen.getByTestId('breadcrumbs').childNodes.forEach((item) => {
+        crumbs.push(item.textContent);
+      });
+      expect(crumbs.filter(Boolean).join('.').toLowerCase()).to.equal(
+        items.join('.').toLowerCase()
+      );
+    }
+
+    function assertLastItemIsNotClickable(stub: Sinon.SinonStub) {
+      const breadcrumbs = screen.getByTestId('breadcrumbs');
+      const lastItem = breadcrumbs.lastElementChild;
+      if (!lastItem) {
+        throw new Error('No last item');
+      }
+      expect(stub.called).to.be.false;
+      userEvent.click(lastItem);
+      expect(stub.called).to.be.false;
+    }
+
+    context('renders correclty', function () {
+      it('for a collection', function () {
+        renderCollectionHeader({ namespace: 'db.coll1' });
+        assertBreadcrumbText(['db', 'coll1']);
+      });
+
+      it('for a view', function () {
+        renderCollectionHeader({
+          namespace: 'db.coll1',
+          sourceName: 'db.coll2',
+        });
+        // For view: connection-db-sourceCollectionName-viewName
+        assertBreadcrumbText(['db', 'coll2', 'coll1']);
+      });
+
+      it('for a view when its being edited', function () {
+        renderCollectionHeader({
+          namespace: 'db.coll3',
+          editViewName: 'db.coll1',
+        });
+        // For view: connection-db-sourceCollectionName-viewName
+        assertBreadcrumbText(['db', 'coll3', 'coll1']);
+      });
+    });
+
+    context('calls onClick correclty', function () {
+      it('for a collection', function () {
+        const openCollectionsWorkspaceStub = sandbox.stub();
+        const openCollectionWorkspaceStub = sandbox.stub();
+        renderCollectionHeader(
+          { namespace: 'db.coll1' },
+          {
+            openCollectionsWorkspace: openCollectionsWorkspaceStub,
+            openCollectionWorkspace: openCollectionWorkspaceStub,
+          }
+        );
+
+        assertLastItemIsNotClickable(openCollectionWorkspaceStub);
+
+        const breadcrumbs = screen.getByTestId('breadcrumbs');
+        const item = within(breadcrumbs).getByText(/db/i);
+        expect(openCollectionsWorkspaceStub.called).to.be.false;
+        userEvent.click(item);
+        expect(openCollectionsWorkspaceStub.calledOnce).to.be.true;
+        expect(openCollectionsWorkspaceStub.firstCall.firstArg).to.deep.equal(
+          'db'
+        );
+      });
+
+      it('for a view, opens source collection', function () {
+        const openCollectionWorkspaceStub = sandbox.stub();
+        renderCollectionHeader(
+          { namespace: 'db.coll1', sourceName: 'db.coll2' },
+          {
+            openCollectionWorkspace: openCollectionWorkspaceStub,
+          }
+        );
+
+        assertLastItemIsNotClickable(openCollectionWorkspaceStub);
+
+        const breadcrumbs = screen.getByTestId('breadcrumbs');
+        const item = within(breadcrumbs).getByText(/coll2/i);
+        expect(openCollectionWorkspaceStub.called).to.be.false;
+        userEvent.click(item);
+        expect(openCollectionWorkspaceStub.calledOnce).to.be.true;
+        expect(openCollectionWorkspaceStub.firstCall.firstArg).to.deep.equal(
+          'db.coll2'
+        );
+      });
+    });
+  });
 });