chore(databases-collections): make Time-Series more visible (#4056)

Author: himanshusinghs

packages/compass-e2e-tests/helpers/selectors.ts

@@ -307,7 +307,7 @@ export const CreateCollectionCappedCheckboxLabel =
 export const CreateCollectionCappedSizeInput =
   '[data-testid="capped-collection-fields"] [data-testid="capped-size"]';
 export const CreateCollectionCollectionOptionsAccordion =
-  '[data-testid="create-collection-modal"] [data-testid="advanced-collection-options"]';
+  '[data-testid="create-collection-modal"] [data-testid="additional-collection-preferences"]';
 export const CreateCollectionCustomCollationCheckboxLabel =
   '[data-testid="use-custom-collation-fields"] [data-testid="use-custom-collation-fields-label"]';
 

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

@@ -187,10 +187,32 @@ export default class CollectionFields extends PureComponent {
             this.setField('collectionName', newCollectionName)
           }
         />
+        {hasTimeSeriesSupport(serverVersion) && (
+          <TimeSeriesFields
+            isCapped={isCapped}
+            isTimeSeries={isTimeSeries}
+            isClustered={isClustered}
+            isFLE2={isFLE2}
+            onChangeIsTimeSeries={(newIsTimeSeries) =>
+              this.setState(
+                { isTimeSeries: newIsTimeSeries, expireAfterSeconds: '' },
+                this.updateOptions
+              )
+            }
+            onChangeField={(fieldName, value) =>
+              this.setField(fieldName, value)
+            }
+            timeSeries={timeSeries}
+            expireAfterSeconds={expireAfterSeconds}
+            supportsFlexibleBucketConfiguration={hasFlexibleBucketConfigSupport(
+              serverVersion
+            )}
+          />
+        )}
         <Accordion
-          data-testid="advanced-collection-options"
-          text="Advanced Collection Options"
-          hintText="(e.g. Time-Series, Capped, Clustered collections)"
+          data-testid="additional-collection-preferences"
+          text="Additional preferences"
+          hintText="(e.g. Custom collation, Capped, Clustered collections)"
         >
           <div className={advancedCollectionOptionsContainerStyles}>
             <CappedCollectionFields
@@ -219,28 +241,6 @@ export default class CollectionFields extends PureComponent {
               }
               isCustomCollation={isCustomCollation}
             />
-            {hasTimeSeriesSupport(serverVersion) && (
-              <TimeSeriesFields
-                isCapped={isCapped}
-                isTimeSeries={isTimeSeries}
-                isClustered={isClustered}
-                isFLE2={isFLE2}
-                onChangeIsTimeSeries={(newIsTimeSeries) =>
-                  this.setState(
-                    { isTimeSeries: newIsTimeSeries, expireAfterSeconds: '' },
-                    this.updateOptions
-                  )
-                }
-                onChangeField={(fieldName, value) =>
-                  this.setField(fieldName, value)
-                }
-                timeSeries={timeSeries}
-                expireAfterSeconds={expireAfterSeconds}
-                supportsFlexibleBucketConfiguration={hasFlexibleBucketConfigSupport(
-                  serverVersion
-                )}
-              />
-            )}
             {hasClusteredCollectionSupport(serverVersion) && (
               <ClusteredCollectionFields
                 isCapped={isCapped}

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

@@ -2,11 +2,22 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { expect } from 'chai';
 import sinon from 'sinon';
-import { Select, TextInput } from '@mongodb-js/compass-components';
+import { Select } from '@mongodb-js/compass-components';
 
 import CollectionFields from '.';
 import TimeSeriesFields from './time-series-fields';
 
+const additionalPreferenceSelector =
+  'button[data-testid="additional-collection-preferences"]';
+const timeSeriesCollectionSelector =
+  'input[type="checkbox"][data-testid="time-series-fields-checkbox"]';
+const cappedCollectionSelector =
+  'input[type="checkbox"][data-testid="capped-collection-fields-checkbox"]';
+const customCollationSelector =
+  'input[type="checkbox"][data-testid="use-custom-collation-fields-checkbox"]';
+const clusteredCollectionSelector =
+  'input[type="checkbox"][data-testid="clustered-collection-fields-checkbox"]';
+
 describe('CollectionFields [Component]', function () {
   context('when withDatabase prop is true', function () {
     let component;
@@ -26,7 +37,9 @@ describe('CollectionFields [Component]', function () {
     });
 
     it('renders a database name input field', function () {
-      expect(component.find(TextInput).length).to.equal(2);
+      expect(
+        component.find('input[type="text"][data-testid="database-name"]')
+      ).to.be.present();
       expect(component.text().includes('Database Name')).to.equal(true);
     });
   });
@@ -45,11 +58,77 @@ describe('CollectionFields [Component]', function () {
     });
 
     it('does not render a database name input field', function () {
-      expect(component.find(TextInput).length).to.equal(1);
+      expect(
+        component.find('input[type="text"][data-testid="database-name"]')
+      ).to.not.be.present();
       expect(component.text().includes('Database Name')).to.equal(false);
     });
   });
 
+  context('with server version >= 5.3', function () {
+    let component;
+    let onChangeSpy;
+
+    beforeEach(function () {
+      onChangeSpy = sinon.spy();
+      component = mount(
+        <CollectionFields
+          onChange={onChangeSpy}
+          withDatabase
+          serverVersion="5.3"
+        />
+      );
+      component.find(additionalPreferenceSelector).simulate('click');
+    });
+
+    afterEach(function () {
+      component = null;
+      onChangeSpy = null;
+    });
+
+    describe('when the clustered collection checkbox is clicked', function () {
+      beforeEach(function () {
+        component
+          .find(clusteredCollectionSelector)
+          .at(0)
+          .simulate('change', { target: { checked: true } });
+        component.update();
+      });
+
+      it('calls the onchange with clustered collection on', function () {
+        expect(onChangeSpy.callCount).to.equal(1);
+        expect(onChangeSpy.firstCall.args[0]).to.deep.equal({
+          database: '',
+          collection: '',
+          options: {
+            clusteredIndex: {
+              key: { _id: 1 },
+              unique: true,
+            },
+          },
+        });
+      });
+
+      context('when clicked twice', function () {
+        beforeEach(function () {
+          component
+            .find(clusteredCollectionSelector)
+            .at(0)
+            .simulate('change', { target: { checked: false } });
+          component.update();
+        });
+        it('calls the onchange with clustered collection off', function () {
+          expect(onChangeSpy.callCount).to.equal(2);
+          expect(onChangeSpy.secondCall.args[0]).to.deep.equal({
+            database: '',
+            collection: '',
+            options: {},
+          });
+        });
+      });
+    });
+  });
+
   context('with server version >= 5.0', function () {
     let component;
     let onChangeSpy;
@@ -63,9 +142,6 @@ describe('CollectionFields [Component]', function () {
           serverVersion="5.0"
         />
       );
-      component
-        .find('button[data-testid="advanced-collection-options"]')
-        .simulate('click');
     });
 
     afterEach(function () {
@@ -81,8 +157,8 @@ describe('CollectionFields [Component]', function () {
     describe('when the time series checkbox is clicked', function () {
       beforeEach(function () {
         component
-          .find('input[type="checkbox"]')
-          .at(2)
+          .find(timeSeriesCollectionSelector)
+          .at(0)
           .simulate('change', { target: { checked: true } });
         component.update();
       });
@@ -111,9 +187,6 @@ describe('CollectionFields [Component]', function () {
           serverVersion="4.3.0"
         />
       );
-      component
-        .find('button[data-testid="advanced-collection-options"]')
-        .simulate('click');
     });
 
     afterEach(function () {
@@ -137,9 +210,7 @@ describe('CollectionFields [Component]', function () {
         component = mount(
           <CollectionFields onChange={onChangeSpy} serverVersion="4.3.0" />
         );
-        component
-          .find('button[data-testid="advanced-collection-options"]')
-          .simulate('click');
+        component.find(additionalPreferenceSelector).simulate('click');
       });
 
       afterEach(function () {
@@ -150,8 +221,8 @@ describe('CollectionFields [Component]', function () {
       describe('when the collation checkbox is clicked', function () {
         beforeEach(function () {
           component
-            .find('input[type="checkbox"]')
-            .at(1)
+            .find(customCollationSelector)
+            .at(0)
             .simulate('change', { target: { checked: true } });
           component.update();
         });
@@ -171,8 +242,8 @@ describe('CollectionFields [Component]', function () {
       describe('when the collation checkbox is clicked and a locale chosen', function () {
         beforeEach(function () {
           component
-            .find('input[type="checkbox"]')
-            .at(1)
+            .find(customCollationSelector)
+            .at(0)
             .simulate('change', { target: { checked: true } });
           component.update();
           component.find(Select).at(0).props().onChange('af');
@@ -196,7 +267,7 @@ describe('CollectionFields [Component]', function () {
       describe('when the capped collection checkbox is clicked', function () {
         beforeEach(function () {
           component
-            .find('input[type="checkbox"]')
+            .find(cappedCollectionSelector)
             .at(0)
             .simulate('change', { target: { checked: true } });
           component.update();
@@ -217,12 +288,12 @@ describe('CollectionFields [Component]', function () {
       describe('when the capped collection checkbox is clicked twice', function () {
         beforeEach(function () {
           component
-            .find('input[type="checkbox"]')
+            .find(cappedCollectionSelector)
             .at(0)
             .simulate('change', { target: { checked: true } });
           component.update();
           component
-            .find('input[type="checkbox"]')
+            .find(cappedCollectionSelector)
             .at(0)
             .simulate('change', { target: { checked: false } });
           component.update();