feat(databases-collections): Add granularity field to create collection

COMPASS-4895 (#2328)

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

@@ -1,10 +1,13 @@
 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 FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
+import styles from './time-series-fields.less';
+
 const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
   'as timeField for the time-series collection. ' +
   'This field must have a BSON type date.';
@@ -15,6 +18,16 @@ const META_FIELD_INPUT_DESCRIPTION = 'The metaField is the designated field ' +
 const EXPIRE_AFTER_SECONDS_DESCRIPTION = 'The expireAfterSeconds field enables ' +
   'automatic deletion of documents older than the specified number of seconds.';
 
+const GRANULARITY_DESCRIPTION = 'The granularity field allows specifying a ' +
+  'coarser granularity so measurements over a longer time span can be ' +
+  'more efficiently stored and queried.';
+
+const GRANULARITY_OPTIONS = [
+  'seconds',
+  'minutes',
+  'hours'
+];
+
 function TimeSeriesFields({
   isTimeSeries,
   onChangeIsTimeSeries,
@@ -23,6 +36,7 @@ function TimeSeriesFields({
   expireAfterSeconds
 }) {
   const {
+    granularity,
     metaField,
     timeField
   } = timeSeries;
@@ -64,6 +78,29 @@ function TimeSeriesFields({
         />
       </FieldSet>
 
+      <FieldSet>
+        <Select
+          className={styles['options-select-dropdown']}
+          label="granularity"
+          name="timeSeries.granularity"
+          placeholder="Select a value [optional]"
+          description={GRANULARITY_DESCRIPTION}
+          onChange={(val) => onChangeTimeSeriesField('timeSeries.granularity', val)}
+          usePortal={false}
+          allowDeselect={false}
+          value={granularity}
+        >
+          {GRANULARITY_OPTIONS.map((granularityOption) => (
+            <Option
+              key={granularityOption}
+              value={granularityOption}
+            >
+              {granularityOption}
+            </Option>
+          ))}
+        </Select>
+      </FieldSet>
+
       <FieldSet>
         <TextInput
           value={expireAfterSeconds}

packages/databases-collections/src/components/collection-fields/time-series-fields.less

@@ -0,0 +1,7 @@
+.options-select-dropdown {
+  z-index: 1;
+
+  button:focus, button:focus-within {
+    z-index: 20;
+  }
+}

packages/databases-collections/src/components/collection-fields/time-series-fields.spec.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Select } from '@leafygreen-ui/select';
+
+import TimeSeriesFields from './time-series-fields';
+import FieldSet from '../field-set/field-set';
+
+describe('TimeSeriesFields [Component]', () => {
+  context('when isTimeSeries prop is true', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <TimeSeriesFields
+          isTimeSeries
+          onChangeIsTimeSeries={() => {}}
+          onChangeTimeSeriesField={() => {}}
+          timeSeries={{}}
+          expireAfterSeconds=""
+        />
+      );
+    });
+
+    afterEach(() => {
+      component = null;
+    });
+
+    it('renders the field sets', () => {
+      expect(component.find(FieldSet).length).to.equal(5);
+    });
+  });
+
+  context('when isTimeSeries prop is false', () => {
+    let component;
+
+    beforeEach(() => {
+      component = mount(
+        <TimeSeriesFields
+          isTimeSeries={false}
+          onChangeIsTimeSeries={() => {}}
+          onChangeTimeSeriesField={() => {}}
+          timeSeries={{}}
+          expireAfterSeconds=""
+        />
+      );
+    });
+
+    afterEach(() => {
+      component = null;
+    });
+
+    it('does not render the fields', () => {
+      expect(component.find(FieldSet).length).to.equal(1);
+    });
+  });
+
+  describe('when the time series checkbox is clicked', () => {
+    let component;
+    let onChangeSpy;
+
+    beforeEach(() => {
+      onChangeSpy = sinon.spy();
+      component = mount(
+        <TimeSeriesFields
+          isTimeSeries={false}
+          onChangeIsTimeSeries={onChangeSpy}
+          onChangeTimeSeriesField={() => {}}
+          timeSeries={{}}
+          expireAfterSeconds=""
+        />
+      );
+      component.find('input[type="checkbox"]').at(0).simulate(
+        'change', { target: { checked: true } }
+      );
+      component.update();
+    });
+
+    afterEach(() => {
+      component = null;
+      onChangeSpy = null;
+    });
+
+    it('calls the onchange with time series collection on', () => {
+      expect(onChangeSpy.callCount).to.equal(1);
+      expect(onChangeSpy.firstCall.args[0]).to.deep.equal(true);
+    });
+  });
+
+  context('when rendered', () => {
+    let component;
+    let onChangeSpy;
+    let onChangeFieldSpy;
+
+    beforeEach(() => {
+      onChangeSpy = sinon.spy();
+      onChangeFieldSpy = sinon.spy();
+
+      component = mount(
+        <TimeSeriesFields
+          isTimeSeries
+          onChangeIsTimeSeries={onChangeSpy}
+          onChangeTimeSeriesField={onChangeFieldSpy}
+          timeSeries={{}}
+          expireAfterSeconds=""
+        />
+      );
+    });
+
+    afterEach(() => {
+      component = null;
+      onChangeSpy = null;
+      onChangeFieldSpy = null;
+    });
+
+    describe('when a granularity is chosen', () => {
+      beforeEach(() => {
+        component.find(Select).at(0).props().onChange('hours');
+        component.update();
+      });
+
+      it('calls the onchange with granularity set', () => {
+        expect(onChangeFieldSpy.callCount).to.equal(1);
+        expect(onChangeFieldSpy.firstCall.args[0]).to.deep.equal(
+          'timeSeries.granularity'
+        );
+        expect(onChangeFieldSpy.firstCall.args[1]).to.deep.equal(
+          'hours'
+        );
+      });
+    });
+  });
+});