fix(databases-collections): Disable collection configuration checkboxes when another is active COMPASS-4890

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,

packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx

@@ -9,13 +9,15 @@ const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections
 function CappedCollectionFields({
   cappedSize,
   isCapped,
+  isTimeSeries,
   onChangeCappedSize,
   onChangeIsCapped,
   openLink
 }) {
   return (
     <CollapsibleFieldSet
       toggled={isCapped}
+      disabled={isTimeSeries}
       onToggle={checked => 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

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(
+        <CappedCollectionFields
+          isTimeSeries
+          isCapped={false}
+          onChangeCappedSize={() => {}}
+          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(
+        <CappedCollectionFields
+          isTimeSeries={false}
+          isCapped
+          onChangeCappedSize={() => {}}
+          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(
+        <CappedCollectionFields
+          isTimeSeries={false}
+          isCapped={false}
+          onChangeCappedSize={() => {}}
+          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);
+    });
+  });
+});

packages/databases-collections/src/components/collection-fields/collection-fields.jsx

@@ -128,6 +128,7 @@ export default class CollectionFields extends PureComponent {
       <CappedCollectionFields
         cappedSize={`${cappedSize}`}
         isCapped={isCapped}
+        isTimeSeries={isTimeSeries}
         onChangeCappedSize={(newCappedSizeString) =>
           this.setField('cappedSize', newCappedSizeString)
         }
@@ -150,6 +151,7 @@ export default class CollectionFields extends PureComponent {
       />
       {hasTimeSeriesSupport(serverVersion) && (
         <TimeSeriesFields
+          isCapped={isCapped}
           isTimeSeries={isTimeSeries}
           onChangeIsTimeSeries={(newIsTimeSeries) => this.setState(
             { isTimeSeries: newIsTimeSeries },

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 (
     <CollapsibleFieldSet
+      disabled={isCapped}
       onToggle={checked => 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,

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(
         <TimeSeriesFields
           isTimeSeries
+          isCapped={false}
           onChangeIsTimeSeries={() => {}}
           onChangeTimeSeriesField={() => {}}
           timeSeries={{}}
@@ -37,6 +39,7 @@ describe('TimeSeriesFields [Component]', () => {
       component = mount(
         <TimeSeriesFields
           isTimeSeries={false}
+          isCapped={false}
           onChangeIsTimeSeries={() => {}}
           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(
         <TimeSeriesFields
           isTimeSeries={false}
+          isCapped={false}
           onChangeIsTimeSeries={onChangeSpy}
           onChangeTimeSeriesField={() => {}}
           timeSeries={{}}
@@ -86,6 +94,31 @@ describe('TimeSeriesFields [Component]', () => {
     });
   });
 
+  describe('when the isCapped prop is true', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <TimeSeriesFields
+          isTimeSeries={false}
+          isCapped
+          onChangeIsTimeSeries={() => {}}
+          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(
         <TimeSeriesFields
           isTimeSeries
+          isCapped={false}
           onChangeIsTimeSeries={onChangeSpy}
           onChangeTimeSeriesField={onChangeFieldSpy}
           timeSeries={{}}