From 2c0c711e30bbf5d3b48ac34106d631f2f83f2037 Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 7 Jul 2021 12:35:32 -0400 Subject: [PATCH] Disable capped or time series collection checkboxes when another is enabled --- .../collapsible-field-set.jsx | 3 + .../capped-collection-fields.jsx | 3 + .../capped-collection-fields.spec.js | 87 +++++++++++++++++++ .../collection-fields/collection-fields.jsx | 2 + .../collection-fields/time-series-fields.jsx | 5 +- .../time-series-fields.spec.js | 34 ++++++++ 6 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 packages/databases-collections/src/components/collection-fields/capped-collection-fields.spec.js diff --git a/packages/databases-collections/src/components/collapsible-field-set/collapsible-field-set.jsx b/packages/databases-collections/src/components/collapsible-field-set/collapsible-field-set.jsx index 7233994c5ed..94301d48945 100644 --- a/packages/databases-collections/src/components/collapsible-field-set/collapsible-field-set.jsx +++ b/packages/databases-collections/src/components/collapsible-field-set/collapsible-field-set.jsx @@ -10,6 +10,7 @@ import styles from './collapsible-field-set.less'; function CollapsibleFieldSet({ children, description, + disabled, helpUrl, label, onToggle, @@ -22,6 +23,7 @@ function CollapsibleFieldSet({ onChange={event => { onToggle(event.target.checked); }} + disabled={disabled} label={label} checked={toggled} bold={false} @@ -53,6 +55,7 @@ CollapsibleFieldSet.propTypes = { PropTypes.element, PropTypes.string ]), + disabled: PropTypes.bool, helpUrl: PropTypes.string, onToggle: PropTypes.func.isRequired, toggled: PropTypes.bool, diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx index be0cec5494d..577e9bdbda0 100644 --- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx +++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx @@ -9,6 +9,7 @@ const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections function CappedCollectionFields({ cappedSize, isCapped, + isTimeSeries, onChangeCappedSize, onChangeIsCapped, openLink @@ -16,6 +17,7 @@ function CappedCollectionFields({ return ( onChangeIsCapped(checked)} label="Capped Collection" helpUrl={HELP_URL_CAPPED} @@ -36,6 +38,7 @@ function CappedCollectionFields({ CappedCollectionFields.propTypes = { cappedSize: PropTypes.string.isRequired, isCapped: PropTypes.bool.isRequired, + isTimeSeries: PropTypes.bool.isRequired, onChangeCappedSize: PropTypes.func.isRequired, onChangeIsCapped: PropTypes.func.isRequired, openLink: PropTypes.func.isRequired diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.spec.js b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.spec.js new file mode 100644 index 00000000000..d113c4f9f15 --- /dev/null +++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.spec.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Checkbox from '@leafygreen-ui/checkbox'; +import TextInput from '@leafygreen-ui/text-input'; + +import CappedCollectionFields from './capped-collection-fields'; + +describe('CappedCollectionFields [Component]', () => { + context('when isTimeSeries prop is true', () => { + let component; + + beforeEach(() => { + component = mount( + {}} + onChangeIsCapped={() => {}} + openLink={() => {}} + cappedSize={0} + /> + ); + }); + + afterEach(() => { + component = null; + }); + + it('renders the checkbox disabled', () => { + expect(component.find(Checkbox).props().disabled).to.equal(true); + }); + }); + + context('when isCapped prop is true', () => { + let component; + + beforeEach(() => { + component = mount( + {}} + onChangeIsCapped={() => {}} + openLink={() => {}} + cappedSize={0} + /> + ); + }); + + afterEach(() => { + component = null; + }); + + it('renders the inputs ', () => { + expect(component.find(TextInput).length).to.equal(1); + }); + }); + + context('when isTimeSeries prop is false', () => { + let component; + + beforeEach(() => { + component = mount( + {}} + onChangeIsCapped={() => {}} + openLink={() => {}} + cappedSize={0} + /> + ); + }); + + afterEach(() => { + component = null; + }); + + it('does not render the fields', () => { + expect(component.find(TextInput).length).to.equal(0); + }); + + it('has the capped collection checkbox enabled', () => { + expect(component.find(Checkbox).props().disabled).to.equal(false); + }); + }); +}); diff --git a/packages/databases-collections/src/components/collection-fields/collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/collection-fields.jsx index fb7ab1d9885..658dcf0fa99 100644 --- a/packages/databases-collections/src/components/collection-fields/collection-fields.jsx +++ b/packages/databases-collections/src/components/collection-fields/collection-fields.jsx @@ -128,6 +128,7 @@ export default class CollectionFields extends PureComponent { this.setField('cappedSize', newCappedSizeString) } @@ -150,6 +151,7 @@ export default class CollectionFields extends PureComponent { /> {hasTimeSeriesSupport(serverVersion) && ( this.setState( { isTimeSeries: newIsTimeSeries }, diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx index 1a617ebcc8d..2bcbc5dd12e 100644 --- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx +++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import PropTypes from 'prop-types'; import TextInput from '@leafygreen-ui/text-input'; -import { Select, Option, Size as SelectSize } from '@leafygreen-ui/select'; +import { Select, Option } from '@leafygreen-ui/select'; import FieldSet from '../field-set/field-set'; import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set'; @@ -29,6 +29,7 @@ const GRANULARITY_OPTIONS = [ ]; function TimeSeriesFields({ + isCapped, isTimeSeries, onChangeIsTimeSeries, onChangeTimeSeriesField, @@ -51,6 +52,7 @@ function TimeSeriesFields({ return ( onChangeIsTimeSeries(checked)} toggled={isTimeSeries} label="Time-Series" @@ -117,6 +119,7 @@ function TimeSeriesFields({ } TimeSeriesFields.propTypes = { + isCapped: PropTypes.bool.isRequired, isTimeSeries: PropTypes.bool.isRequired, onChangeIsTimeSeries: PropTypes.func.isRequired, onChangeTimeSeriesField: PropTypes.func.isRequired, diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.spec.js b/packages/databases-collections/src/components/collection-fields/time-series-fields.spec.js index 9d295181180..a50938c3908 100644 --- a/packages/databases-collections/src/components/collection-fields/time-series-fields.spec.js +++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.spec.js @@ -1,6 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { Select } from '@leafygreen-ui/select'; +import Checkbox from '@leafygreen-ui/checkbox'; import TimeSeriesFields from './time-series-fields'; import FieldSet from '../field-set/field-set'; @@ -13,6 +14,7 @@ describe('TimeSeriesFields [Component]', () => { component = mount( {}} onChangeTimeSeriesField={() => {}} timeSeries={{}} @@ -37,6 +39,7 @@ describe('TimeSeriesFields [Component]', () => { component = mount( {}} onChangeTimeSeriesField={() => {}} timeSeries={{}} @@ -52,6 +55,10 @@ describe('TimeSeriesFields [Component]', () => { it('does not render the fields', () => { expect(component.find(FieldSet).length).to.equal(1); }); + + it('has the time-series checkbox enabled', () => { + expect(component.find(Checkbox).props().disabled).to.equal(false); + }); }); describe('when the time series checkbox is clicked', () => { @@ -63,6 +70,7 @@ describe('TimeSeriesFields [Component]', () => { component = mount( {}} timeSeries={{}} @@ -86,6 +94,31 @@ describe('TimeSeriesFields [Component]', () => { }); }); + describe('when the isCapped prop is true', () => { + let component; + + beforeEach(() => { + component = mount( + {}} + onChangeTimeSeriesField={() => {}} + timeSeries={{}} + expireAfterSeconds="" + /> + ); + }); + + afterEach(() => { + component = null; + }); + + it('has the time-series checkbox disabled', () => { + expect(component.find(Checkbox).props().disabled).to.equal(true); + }); + }); + context('when rendered', () => { let component; let onChangeSpy; @@ -98,6 +131,7 @@ describe('TimeSeriesFields [Component]', () => { component = mount(