mongodb-js · Anemy · Aug 18, 2022 · Aug 17, 2022
@@ -23,6 +23,7 @@ describe('PipelineHeader', function () {
           isOpenPipelineVisible
           isSavedPipelineVisible={false}
           isOptionsVisible
+          namespace="test.pineapple"
           savedPipelines={[]}
           showRunButton
           showExportButton

@@ -62,6 +62,7 @@ const savedAggregationsPopoverStyles = css({
 type PipelineHeaderProps = {
   deletePipeline: (pipelineId: string) => void;
   isOptionsVisible: boolean;
+  namespace: string;
   showRunButton: boolean;
   showExportButton: boolean;
   showExplainButton: boolean;
@@ -77,6 +78,7 @@ type PipelineHeaderProps = {
 
 export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
   deletePipeline,
+  namespace,
   onShowSavedPipelines,
   showRunButton,
   showExportButton,
@@ -92,6 +94,7 @@ export const PipelineHeader: React.FunctionComponent<PipelineHeaderProps> = ({
 }) => {
   const savedPipelinesPopover = () => (
     <SavedPipelines
+      namespace={namespace}
       restorePipelineModalToggle={restorePipelineModalToggle}
       restorePipelineFrom={restorePipelineFrom}
       deletePipeline={deletePipeline}
@@ -159,6 +162,7 @@ export default connect(
     return {
       isOpenPipelineVisible: !state.editViewName && !state.isAtlasDeployed,
       isSavedPipelineVisible: state.savedPipeline.isListVisible,
+      namespace: state.namespace,
       savedPipelines: state.savedPipeline.pipelines,
     };
   },

@@ -24,6 +24,7 @@ describe('SavedPipelines [Component]', function() {
           deletePipeline={deletePipelineSpy}
           savedPipelines={savedPipelines}
           onSetShowSavedPipelines={spy}
+          namespace="test.test123"
         />
       );
     });
@@ -57,6 +58,13 @@ describe('SavedPipelines [Component]', function() {
       ).at(0).hostNodes().simulate('click');
       expect(spy.calledOnce).to.equal(true);
     });
+
+    it('renders the namespace', function () {
+
+      expect(
+        component.find('[data-testid="saved-pipeline-header-title-namespace"]').first()
+      ).to.contain.text('test.test123');
+    });
   });
 
   context('rendered with pipelines', function() {

@@ -7,7 +7,8 @@ import {
   Toolbar,
   uiColors,
   compassUIColors,
-  Body
+  Body,
+  withTheme
 } from '@mongodb-js/compass-components';
 
 import SavePipelineCard from './save-pipeline-card/save-pipeline-card';
@@ -24,6 +25,16 @@ const savedPipelinesStyles = css({
 
 const toolbarTitleStyles = css({
   fontWeight: 'bold',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+const titleStylesDark = css({
+  color: uiColors.green.light2,
+});
+
+const titleStylesLight = css({
   color: uiColors.green.dark2,
 });
 
@@ -34,6 +45,7 @@ const toolbarStyles = css({
 });
 
 const toolbarContentStyles = css({
+  overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
   padding: spacing[3],
@@ -55,20 +67,24 @@ const emptyMessageStyles = css({
 });
 
 type SavedPipelinesProps = {
+  darkMode?: boolean;
   deletePipeline: (pipelineId: string) => void;
+  namespace: string;
   onSetShowSavedPipelines: (show: boolean) => void;
   restorePipelineFrom: (pipelineId: string) => void;
   restorePipelineModalToggle: (index: number) => void;
   savedPipelines: Pipeline[];
 }
 
-const SavedPipelines: React.FunctionComponent<SavedPipelinesProps> = ({
+function UnthemedSavedPipelines({
+  darkMode,
+  namespace,
   restorePipelineModalToggle,
   restorePipelineFrom,
   deletePipeline,
   onSetShowSavedPipelines,
   savedPipelines,
-}) => {
+}: SavedPipelinesProps) {
   return (
     <div className={savedPipelinesStyles}>
       <Toolbar className={toolbarStyles}>
@@ -77,7 +93,11 @@ const SavedPipelines: React.FunctionComponent<SavedPipelinesProps> = ({
             className={toolbarTitleStyles}
             id="saved-pipeline-header-title"
           >
-            Saved Pipelines
+            Saved Pipelines in <span
+              className={darkMode ? titleStylesDark : titleStylesLight}
+              data-testid="saved-pipeline-header-title-namespace"
+              title={namespace}
+            >{namespace}</span>
           </Body>
         </div>
         <IconButton
@@ -111,6 +131,8 @@ const SavedPipelines: React.FunctionComponent<SavedPipelinesProps> = ({
       </div>
     </div>
   );
-}
+};
+
+const SavedPipelines = withTheme(UnthemedSavedPipelines);
 
 export { SavedPipelines };
@@ -62,7 +62,7 @@ class QueryHistory extends PureComponent {
   );
 
   render() {
-    const { collapsed, showing, onClose, actions } = this.props;
+    const { collapsed, ns, showing, onClose, actions } = this.props;
 
     if (!onClose && collapsed) {
       // TODO(COMPASS-5679): After we enable the toolbars feature flag,
@@ -77,7 +77,12 @@ class QueryHistory extends PureComponent {
         className={onClose ? styles.component : styles['component-legacy']}
       >
         <div className={styles.inner}>
-          <Toolbar actions={actions} showing={showing} onClose={onClose} />
+          <Toolbar
+            actions={actions}
+            showing={showing}
+            onClose={onClose}
+            namespace={ns}
+          />
 
           {showing === 'favorites' ? this.renderFavorites() : null}
           {showing === 'recent' ? this.renderRecents() : null}

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 import { render, screen, cleanup, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import mongodbns from 'mongodb-ns';
 
 import { Toolbar } from './toolbar';
 
@@ -16,6 +17,7 @@ function renderQueryHistoryToolbar(
         showFavorites: sinon.stub(),
         collapse: sinon.stub(),
       }}
+      namespace={mongodbns('test.test')}
       showing="recent"
       {...props}
     />
@@ -50,6 +52,11 @@ describe('Toolbar [Component]', function () {
       expect(screen.getByTestId('query-history-button-close-panel')).to.be
         .visible;
     });
+
+    it('renders the namespace', function () {
+      expect(screen.getByText('Queries in')).to.be.visible;
+      expect(screen.getByText('test.test')).to.be.visible;
+    });
   });
 
   describe('#behavior', function () {

@@ -21,6 +21,12 @@ const toolbarStyles = css({
   justifyContent: 'space-between',
 });
 
+const titleStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
 const titleStylesDark = css({
   color: uiColors.green.light2,
 });
@@ -30,6 +36,7 @@ const titleStylesLight = css({
 });
 
 const toolbarActionStyles = css({
+  overflow: 'hidden',
   display: 'flex',
   flexDirection: 'column',
   padding: spacing[3],
@@ -51,6 +58,9 @@ type ToolbarProps = {
     showFavorites: () => void;
     collapse: () => void;
   }; // Query history actions are not currently typed.
+  namespace: {
+    ns: string;
+  };
   darkMode?: boolean;
   onClose?: () => void;
   showing: 'recent' | 'favorites';
@@ -59,6 +69,7 @@ type ToolbarProps = {
 function UnthemedToolbar({
   actions,
   darkMode,
+  namespace,
   showing,
   onClose,
 }: ToolbarProps): React.ReactElement {
@@ -90,12 +101,14 @@ function UnthemedToolbar({
   return (
     <CompassComponentsToolbar className={toolbarStyles}>
       <div className={toolbarActionStyles}>
-        <Label
-          className={darkMode ? titleStylesDark : titleStylesLight}
-          id={labelId}
-          htmlFor={controlId}
-        >
-          Queries
+        <Label className={titleStyles} id={labelId} htmlFor={controlId}>
+          Queries in{' '}
+          <span
+            className={darkMode ? titleStylesDark : titleStylesLight}
+            title={namespace.ns}
+          >
+            {namespace.ns}
+          </span>
         </Label>
         <SegmentedControl
           className={viewSwitcherStyles}