From 323ed1abbec447527f2b3a5ac7e6fcf5333a2718 Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 23 Jun 2021 15:23:33 -0400 Subject: [PATCH 1/2] Use collection type to decide which icon to show for views --- .../collection-type-icon.jsx | 48 +++++++++++++++++++ .../collection-type-icon.less | 4 ++ .../collection-type-icon.spec.js | 45 +++++++++++++++++ .../components/collection-type-icon/index.js | 2 + .../sidebar-collection/sidebar-collection.jsx | 47 ++---------------- .../sidebar-collection.less | 5 -- 6 files changed, 104 insertions(+), 47 deletions(-) create mode 100644 packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx create mode 100644 packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less create mode 100644 packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js create mode 100644 packages/compass-sidebar/src/components/collection-type-icon/index.js diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx new file mode 100644 index 00000000000..221b080dacf --- /dev/null +++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx @@ -0,0 +1,48 @@ + +import React from 'react'; +import PropTypes from 'prop-types'; +import Icon from '@leafygreen-ui/icon'; + +import { TIME_SERIES_COLLECTION_TYPE } from '../../modules/collection'; + +import styles from './collection-type-icon.less'; + +const VIEW_COLLECTION_TYPE = 'view'; + +function CollectionTypeIcon({ + collectionType +}) { + if (collectionType === TIME_SERIES_COLLECTION_TYPE) { + return ( + + ); + } + + if (collectionType === VIEW_COLLECTION_TYPE) { + return ( + + ); + } + + return ( + + ); +} + +CollectionTypeIcon.propTypes = { + collectionType: PropTypes.string.isRequired +} + +export default CollectionTypeIcon; diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less new file mode 100644 index 00000000000..669970fd80c --- /dev/null +++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.less @@ -0,0 +1,4 @@ +.compass-sidebar-collection-type-icon { + vertical-align: sub; + margin-right: 8px; +} \ No newline at end of file diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js new file mode 100644 index 00000000000..e7bd59784cf --- /dev/null +++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.spec.js @@ -0,0 +1,45 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Icon from '@leafygreen-ui/icon'; + +import CollectionTypeIcon from '../collection-type-icon'; + +describe('CollectionTypeIcon [Component]', () => { + let component; + + describe('default collection type', () => { + beforeEach(() => { + component = mount(); + }); + + it('has a collection type icon folder', () => { + expect(component.find(Icon).props().glyph).to.equal('Folder'); + }); + }); + + describe('time-series collection type', () => { + beforeEach(() => { + component = mount(); + }); + + it('has a time series icon', () => { + expect(component.find(Icon).props().glyph).to.equal('TimeSeries'); + }); + }); + + describe('view collection type', () => { + beforeEach(() => { + component = mount(); + }); + + it('has a view icon', () => { + expect(component.find(Icon).props().glyph).to.equal('Visibility'); + }); + }); +}); diff --git a/packages/compass-sidebar/src/components/collection-type-icon/index.js b/packages/compass-sidebar/src/components/collection-type-icon/index.js new file mode 100644 index 00000000000..bf8353a6329 --- /dev/null +++ b/packages/compass-sidebar/src/components/collection-type-icon/index.js @@ -0,0 +1,2 @@ +import ColletionTypeIcon from './collection-type-icon'; +export default ColletionTypeIcon; diff --git a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx index 01107e65393..ca65b663e01 100644 --- a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx +++ b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx @@ -3,14 +3,12 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { DropdownButton, MenuItem } from 'react-bootstrap'; import toNS from 'mongodb-ns'; -import Icon from '@leafygreen-ui/icon'; -import { collectionMetadata, getSource, TIME_SERIES_COLLECTION_TYPE } from '../../modules/collection'; +import { collectionMetadata, getSource } from '../../modules/collection'; +import CollectionTypeIcon from '../collection-type-icon'; import styles from './sidebar-collection.less'; -const DEFAULT_COLLECTION_TYPE = 'collection'; - class SidebarCollection extends PureComponent { static displayName = 'SidebarCollection'; static propTypes = { @@ -138,41 +136,6 @@ class SidebarCollection extends PureComponent { } } - renderCollectionIcon() { - return ( - - ); - } - - /** - * Render the readonly icon. - * - * @returns {Component} The component. - */ - renderViewIcon() { - return ( - - ); - } - - renderTimeSeriesIcon() { - return ( - - ); - } - /** * Render the view contextual menu. * @@ -241,9 +204,9 @@ class SidebarCollection extends PureComponent { data-test-id="sidebar-collection" title={this.props._id} > - {this.props.type === DEFAULT_COLLECTION_TYPE && this.renderCollectionIcon()} - {this.props.readonly && this.renderViewIcon()} - {this.props.type === TIME_SERIES_COLLECTION_TYPE && this.renderTimeSeriesIcon()} + {collectionName}
Date: Wed, 23 Jun 2021 15:24:41 -0400 Subject: [PATCH 2/2] lint --- .../components/collection-type-icon/collection-type-icon.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx index 221b080dacf..17f8cf93c95 100644 --- a/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx +++ b/packages/compass-sidebar/src/components/collection-type-icon/collection-type-icon.jsx @@ -43,6 +43,6 @@ function CollectionTypeIcon({ CollectionTypeIcon.propTypes = { collectionType: PropTypes.string.isRequired -} +}; export default CollectionTypeIcon;