From 1edeebf4a3627583af10453afe3e7890351941ff Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 17 Aug 2022 14:33:58 -0400 Subject: [PATCH] Show namespace on saved aggregations and pipelines popovers --- .../pipeline-header/index.spec.tsx | 1 + .../pipeline-header/index.tsx | 4 +++ .../saved-pipelines/saved-pipelines.spec.jsx | 8 +++++ .../saved-pipelines/saved-pipelines.tsx | 32 ++++++++++++++++--- .../query-history/query-history.jsx | 9 ++++-- .../src/components/toolbar/toolbar.spec.tsx | 7 ++++ .../src/components/toolbar/toolbar.tsx | 25 +++++++++++---- 7 files changed, 73 insertions(+), 13 deletions(-) diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx index eb3baa6a1c0..1eccde44af7 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.spec.tsx @@ -23,6 +23,7 @@ describe('PipelineHeader', function () { isOpenPipelineVisible isSavedPipelineVisible={false} isOptionsVisible + namespace="test.pineapple" savedPipelines={[]} showRunButton showExportButton diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx index 5cf0911865b..4c9a69d6f24 100644 --- a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx +++ b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx @@ -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 = ({ deletePipeline, + namespace, onShowSavedPipelines, showRunButton, showExportButton, @@ -92,6 +94,7 @@ export const PipelineHeader: React.FunctionComponent = ({ }) => { const savedPipelinesPopover = () => ( ); }); @@ -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() { diff --git a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx index 0302dabe23d..4009274af62 100644 --- a/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx +++ b/packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx @@ -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 = ({ +function UnthemedSavedPipelines({ + darkMode, + namespace, restorePipelineModalToggle, restorePipelineFrom, deletePipeline, onSetShowSavedPipelines, savedPipelines, -}) => { +}: SavedPipelinesProps) { return (
@@ -77,7 +93,11 @@ const SavedPipelines: React.FunctionComponent = ({ className={toolbarTitleStyles} id="saved-pipeline-header-title" > - Saved Pipelines + Saved Pipelines in {namespace}
= ({ ); -} +}; + +const SavedPipelines = withTheme(UnthemedSavedPipelines); export { SavedPipelines }; diff --git a/packages/compass-query-history/src/components/query-history/query-history.jsx b/packages/compass-query-history/src/components/query-history/query-history.jsx index 1d572a6ff99..fb6e6a2bc3d 100644 --- a/packages/compass-query-history/src/components/query-history/query-history.jsx +++ b/packages/compass-query-history/src/components/query-history/query-history.jsx @@ -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']} >
- + {showing === 'favorites' ? this.renderFavorites() : null} {showing === 'recent' ? this.renderRecents() : null} diff --git a/packages/compass-query-history/src/components/toolbar/toolbar.spec.tsx b/packages/compass-query-history/src/components/toolbar/toolbar.spec.tsx index 4aece1ecaaf..930d96d39c6 100644 --- a/packages/compass-query-history/src/components/toolbar/toolbar.spec.tsx +++ b/packages/compass-query-history/src/components/toolbar/toolbar.spec.tsx @@ -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 () { diff --git a/packages/compass-query-history/src/components/toolbar/toolbar.tsx b/packages/compass-query-history/src/components/toolbar/toolbar.tsx index 4915c7c31a4..eda15629d40 100644 --- a/packages/compass-query-history/src/components/toolbar/toolbar.tsx +++ b/packages/compass-query-history/src/components/toolbar/toolbar.tsx @@ -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 (
-