From b99b2d574024146c8fede19b4a77dc72e9e31463 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Mon, 17 May 2021 11:43:46 +0200
Subject: [PATCH 01/20] chore: fix dev setup

---
 .../electron/renderer/index.js                | 106 +++++++++++++++++-
 1 file changed, 101 insertions(+), 5 deletions(-)

diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index 4d11445f5a3..62b3ac31038 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -4,12 +4,103 @@ import app from 'hadron-app';
 import AppRegistry from 'hadron-app-registry';
 import { AppContainer } from 'react-hot-loader';
 import DatabasePlugin, { activate } from 'plugin';
-import { activate as daActivate } from '@mongodb-js/compass-deployment-awareness';
 import { NamespaceStore } from 'mongodb-reflux-store';
 import CollectionStore from './stores/collection-store';
 import CollectionModel from 'mongodb-collection-model';
 import CreateCollectionPlugin from 'components/create-collection-plugin';
 import DropCollectionPlugin from 'components/drop-collection-plugin';
+import PropTypes from 'prop-types';
+import { TextButton } from 'hadron-react-buttons';
+import { Tooltip } from 'hadron-react-components';
+
+
+/**
+ * The wrapper class.
+ */
+const WRAPPER = 'tooltip-button-wrapper';
+
+/**
+ * Button component that is aware of the write state of the application.
+ * This button contains only text, no icons, no animations.
+ */
+class TextWriteButton extends React.Component {
+  static displayName = 'TextWriteButton';
+
+  static propTypes = {
+    className: PropTypes.string.isRequired,
+    clickHandler: PropTypes.func.isRequired,
+    dataTestId: PropTypes.string,
+    isCollectionLevel: PropTypes.bool,
+    text: PropTypes.string.isRequired,
+    tooltipId: PropTypes.string.isRequired
+  }
+
+  /**
+   * Subscribe to the state changing stores.
+   */
+  componentDidMount() {
+  }
+
+  /**
+   * Unsubscribe from the stores.
+   */
+  componentWillUnmount() {
+    this.unsubscribeWriteState();
+  }
+
+  /**
+   * Determine if the application is in a writable state.
+   *
+   * @returns {Boolean} If the application is writable.
+   */
+  isWritable() {
+    const isWritable = true;
+    return isWritable;
+  }
+
+  /**
+   * Handle write state changes.
+   *
+   * @param {Object} state - The write state.
+   */
+  writeStateChanged(state) {
+    this.setState(state);
+  }
+
+  /**
+   * Get the tooltip text.
+   *
+   * @returns {String} The tooltip text.
+   */
+  tooltipText() {
+    if (!this.isWritable()) {
+      return 'Not writable';
+    }
+  }
+
+  /**
+   * Render the component.
+   *
+   * @returns {React.Component} The rendered component.
+   */
+  render() {
+    const tooltip = (this.isWritable()) ? null : (<Tooltip id={this.props.tooltipId} />);
+    return (
+      <div className={WRAPPER} data-tip={this.tooltipText()} data-for={this.props.tooltipId}>
+        <TextButton
+          className={this.props.className}
+          dataTestId={this.props.dataTestId}
+          disabled={!this.isWritable()}
+          clickHandler={this.props.clickHandler}
+          text={this.props.text} />
+        {tooltip}
+      </div>
+    );
+  }
+}
+
+export default TextWriteButton;
+
 
 // Import global less file. Note: these styles WILL NOT be used in compass, as compass provides its own set
 // of global styles. If you are wishing to style a given component, you should be writing a less file per
@@ -24,10 +115,10 @@ global.hadronApp.appRegistry = appRegistry;
 
 appRegistry.registerStore('App.NamespaceStore', NamespaceStore);
 appRegistry.registerStore('App.CollectionStore', CollectionStore);
+appRegistry.registerComponent('DeploymentAwareness.TextWriteButton', TextWriteButton);
 
 // Activate our plugin with the Hadron App Registry
 activate(appRegistry);
-daActivate(appRegistry);
 appRegistry.onActivated();
 
 // Since we are using HtmlWebpackPlugin WITHOUT a template,
@@ -64,16 +155,21 @@ import Connection from 'mongodb-connection-model';
 import DataService from 'mongodb-data-service';
 
 const connection = new Connection({
-  hostname: '127.0.0.1',
+  hostname: 'localhost',
   port: 27017,
-  ns: 'admin'
+  ns: 'test'
 });
+
+console.log('***', 'here0', connection);
 const dataService = new DataService(connection);
 
 appRegistry.emit('data-service-initialized', dataService);
 dataService.connect((error, ds) => {
+  console.log('***', 'here1');
   appRegistry.emit('data-service-connected', error, ds);
   dataService.instance({}, (err, data) => {
+    console.log('***', 'here2', data.databases);
+
     const dbs = data.databases;
     dbs.forEach((db) => {
       db.collections = db.collections.map((collection) => {
@@ -90,7 +186,7 @@ dataService.connect((error, ds) => {
         dataLake: { isDataLake: false }
       }
     });
-    appRegistry.emit('database-changed', 'echo');
+    appRegistry.emit('database-changed', 'test');
   });
 });
 

From 05ac453b9f1c1d032d8fb9e32463c4aefd76b133 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Mon, 17 May 2021 12:53:03 +0200
Subject: [PATCH 02/20] chore: fix local dev

---
 .../electron/renderer/index.js                | 110 ++----------------
 .../{stores => mocks}/collection-store.js     |   0
 .../renderer/mocks/text-write-button.js       |  91 +++++++++++++++
 .../renderer/stores/deployment-state-store.js |  36 ------
 4 files changed, 102 insertions(+), 135 deletions(-)
 rename packages/compass-collections-ddl/electron/renderer/{stores => mocks}/collection-store.js (100%)
 create mode 100644 packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js
 delete mode 100644 packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js

diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index 62b3ac31038..353f835d0b4 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -5,102 +5,12 @@ import AppRegistry from 'hadron-app-registry';
 import { AppContainer } from 'react-hot-loader';
 import DatabasePlugin, { activate } from 'plugin';
 import { NamespaceStore } from 'mongodb-reflux-store';
-import CollectionStore from './stores/collection-store';
 import CollectionModel from 'mongodb-collection-model';
 import CreateCollectionPlugin from 'components/create-collection-plugin';
 import DropCollectionPlugin from 'components/drop-collection-plugin';
-import PropTypes from 'prop-types';
-import { TextButton } from 'hadron-react-buttons';
-import { Tooltip } from 'hadron-react-components';
-
-
-/**
- * The wrapper class.
- */
-const WRAPPER = 'tooltip-button-wrapper';
-
-/**
- * Button component that is aware of the write state of the application.
- * This button contains only text, no icons, no animations.
- */
-class TextWriteButton extends React.Component {
-  static displayName = 'TextWriteButton';
-
-  static propTypes = {
-    className: PropTypes.string.isRequired,
-    clickHandler: PropTypes.func.isRequired,
-    dataTestId: PropTypes.string,
-    isCollectionLevel: PropTypes.bool,
-    text: PropTypes.string.isRequired,
-    tooltipId: PropTypes.string.isRequired
-  }
-
-  /**
-   * Subscribe to the state changing stores.
-   */
-  componentDidMount() {
-  }
-
-  /**
-   * Unsubscribe from the stores.
-   */
-  componentWillUnmount() {
-    this.unsubscribeWriteState();
-  }
-
-  /**
-   * Determine if the application is in a writable state.
-   *
-   * @returns {Boolean} If the application is writable.
-   */
-  isWritable() {
-    const isWritable = true;
-    return isWritable;
-  }
-
-  /**
-   * Handle write state changes.
-   *
-   * @param {Object} state - The write state.
-   */
-  writeStateChanged(state) {
-    this.setState(state);
-  }
-
-  /**
-   * Get the tooltip text.
-   *
-   * @returns {String} The tooltip text.
-   */
-  tooltipText() {
-    if (!this.isWritable()) {
-      return 'Not writable';
-    }
-  }
-
-  /**
-   * Render the component.
-   *
-   * @returns {React.Component} The rendered component.
-   */
-  render() {
-    const tooltip = (this.isWritable()) ? null : (<Tooltip id={this.props.tooltipId} />);
-    return (
-      <div className={WRAPPER} data-tip={this.tooltipText()} data-for={this.props.tooltipId}>
-        <TextButton
-          className={this.props.className}
-          dataTestId={this.props.dataTestId}
-          disabled={!this.isWritable()}
-          clickHandler={this.props.clickHandler}
-          text={this.props.text} />
-        {tooltip}
-      </div>
-    );
-  }
-}
-
-export default TextWriteButton;
 
+import CollectionStore from './mocks/collection-store';
+import TextWriteButton from './mocks/text-write-button';
 
 // Import global less file. Note: these styles WILL NOT be used in compass, as compass provides its own set
 // of global styles. If you are wishing to style a given component, you should be writing a less file per
@@ -157,19 +67,15 @@ import DataService from 'mongodb-data-service';
 const connection = new Connection({
   hostname: 'localhost',
   port: 27017,
-  ns: 'test'
+  ns: 'admin'
 });
 
-console.log('***', 'here0', connection);
 const dataService = new DataService(connection);
 
 appRegistry.emit('data-service-initialized', dataService);
 dataService.connect((error, ds) => {
-  console.log('***', 'here1');
   appRegistry.emit('data-service-connected', error, ds);
   dataService.instance({}, (err, data) => {
-    console.log('***', 'here2', data.databases);
-
     const dbs = data.databases;
     dbs.forEach((db) => {
       db.collections = db.collections.map((collection) => {
@@ -177,7 +83,12 @@ dataService.connect((error, ds) => {
       });
     });
 
-    if (err) console.log(err);
+    if (err) {
+      // eslint-disable-next-line no-console
+      console.log(err);
+      process.exit(1);
+    }
+
     appRegistry.emit('instance-refreshed', {
       instance: {
         databases: {
@@ -186,7 +97,8 @@ dataService.connect((error, ds) => {
         dataLake: { isDataLake: false }
       }
     });
-    appRegistry.emit('database-changed', 'test');
+
+    appRegistry.emit('select-database', 'test');
   });
 });
 
diff --git a/packages/compass-collections-ddl/electron/renderer/stores/collection-store.js b/packages/compass-collections-ddl/electron/renderer/mocks/collection-store.js
similarity index 100%
rename from packages/compass-collections-ddl/electron/renderer/stores/collection-store.js
rename to packages/compass-collections-ddl/electron/renderer/mocks/collection-store.js
diff --git a/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js b/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js
new file mode 100644
index 00000000000..d72222ced89
--- /dev/null
+++ b/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextButton } from 'hadron-react-buttons';
+import { Tooltip } from 'hadron-react-components';
+
+/**
+ * The wrapper class.
+ */
+const WRAPPER = 'tooltip-button-wrapper';
+
+/**
+  * Button component that is aware of the write state of the application.
+  * This button contains only text, no icons, no animations.
+  */
+class TextWriteButton extends React.Component {
+   static displayName = 'TextWriteButton';
+
+   static propTypes = {
+     className: PropTypes.string.isRequired,
+     clickHandler: PropTypes.func.isRequired,
+     dataTestId: PropTypes.string,
+     isCollectionLevel: PropTypes.bool,
+     text: PropTypes.string.isRequired,
+     tooltipId: PropTypes.string.isRequired
+   }
+
+   /**
+    * Subscribe to the state changing stores.
+    */
+   componentDidMount() {
+   }
+
+   /**
+    * Unsubscribe from the stores.
+    */
+   componentWillUnmount() {
+     this.unsubscribeWriteState();
+   }
+
+   /**
+    * Determine if the application is in a writable state.
+    *
+    * @returns {Boolean} If the application is writable.
+    */
+   isWritable() {
+     const isWritable = true;
+     return isWritable;
+   }
+
+   /**
+    * Handle write state changes.
+    *
+    * @param {Object} state - The write state.
+    */
+   writeStateChanged(state) {
+     this.setState(state);
+   }
+
+   /**
+    * Get the tooltip text.
+    *
+    * @returns {String} The tooltip text.
+    */
+   tooltipText() {
+     if (!this.isWritable()) {
+       return 'Not writable';
+     }
+   }
+
+   /**
+    * Render the component.
+    *
+    * @returns {React.Component} The rendered component.
+    */
+   render() {
+     const tooltip = (this.isWritable()) ? null : (<Tooltip id={this.props.tooltipId} />);
+     return (
+       <div className={WRAPPER} data-tip={this.tooltipText()} data-for={this.props.tooltipId}>
+         <TextButton
+           className={this.props.className}
+           dataTestId={this.props.dataTestId}
+           disabled={!this.isWritable()}
+           clickHandler={this.props.clickHandler}
+           text={this.props.text} />
+         {tooltip}
+       </div>
+     );
+   }
+}
+
+export default TextWriteButton;
diff --git a/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js b/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js
deleted file mode 100644
index f723a4b5f8b..00000000000
--- a/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const Reflux = require('reflux');
-const StateMixin = require('reflux-state-mixin');
-
-/**
- * The default description.
- */
-const DEFAULT_DESCRIPTION = 'Topology type not yet discovered.';
-
-/**
- * Deployment State store.
- */
-const DeploymentStateStore = Reflux.createStore({
-  /**
-   * adds a state to the store, similar to React.Component's state
-   * @see https://github.com/yonatanmn/Super-Simple-Flux#reflux-state-mixin
-   *
-   * If you call `this.setState({...})` this will cause the store to trigger
-   * and push down its state as props to connected components.
-   */
-  mixins: [StateMixin.store],
-
-  /**
-   * Initialize the Deployment State store state. The returned object must
-   * contain all keys that you might want to modify with this.setState().
-   *
-   * @return {Object} initial store state.
-   */
-  getInitialState() {
-    return {
-      isWritable: true,
-      description: DEFAULT_DESCRIPTION
-    };
-  }
-});
-
-module.exports = DeploymentStateStore;

From 7c77edce01e796c13b3dbaf07dcf84896cf37bb5 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Mon, 17 May 2021 19:01:36 +0200
Subject: [PATCH 03/20] feat: add badges for view and ts

---
 .../collections-table/collections-table.jsx   | 100 ++++++++++--------
 .../collections-table/property-badge.jsx      |  42 ++++++++
 .../collections-table/property-badge.less     |  20 ++++
 .../src/modules/collections.js                |  81 ++++++++++----
 .../src/modules/collections.spec.js           |  21 +++-
 5 files changed, 201 insertions(+), 63 deletions(-)
 create mode 100644 packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
 create mode 100644 packages/compass-collections-ddl/src/components/collections-table/property-badge.less

diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
index da8a5a7c183..81212c796cb 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
-import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
 import assign from 'lodash.assign';
-import isEmpty from 'lodash.isempty';
 import isNaN from 'lodash.isnan';
 import classnames from 'classnames';
-import { SortableTable, InfoSprinkle } from 'hadron-react-components';
+import { SortableTable } from 'hadron-react-components';
 import dropCollectionStore from 'stores/drop-collection';
 
 import styles from './collections-table.less';
+import { PROPERTIES_CAPPED, PROPERTIES_COLLATION, PROPERTIES_TIME_SERIES, PROPERTIES_VIEW } from '../../modules/collections';
+import PropertyBadge from './property-badge';
 
 /**
  * The name constant.
@@ -51,11 +51,6 @@ const PROPS = 'Properties';
  */
 const DASH = '-';
 
-/**
- * Tooltip ID constant.
- */
-const TOOLTIP_ID = 'collation-property';
-
 /**
  * The help URL for collation.
  */
@@ -64,7 +59,7 @@ const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/
 /**
  * Collation option mappings.
  */
-const COLLATION_OPTIONS = {
+const PROPERTY_OPTIONS = {
   locale: 'Locale',
   caseLevel: 'Case Level',
   caseFirst: 'Case First',
@@ -133,15 +128,22 @@ class CollectionsTable extends PureComponent {
    *
    * @returns {Object} The mapped properties.
    */
-  renderCollationOptions(properties) {
-    let collation = '';
-    Object.keys(properties).forEach((key) => {
-      if (collation !== '') {
-        collation = `${collation}<br />`;
+  renderOptions(options) {
+    const knownOptions = Object.keys(options)
+      .filter((key) => PROPERTY_OPTIONS[key]);
+
+    if (!knownOptions.length) {
+      return;
+    }
+
+    let text = '';
+    knownOptions.forEach((key) => {
+      if (text !== '') {
+        text = `${text}<br />`;
       }
-      collation = `${collation}${COLLATION_OPTIONS[key]}: ${properties[key]}`;
+      text = `${text}${PROPERTY_OPTIONS[key]}: ${options[key]}`;
     });
-    return collation;
+    return text;
   }
 
   /**
@@ -155,47 +157,61 @@ class CollectionsTable extends PureComponent {
     const collName = coll[NAME];
     let viewInfo = null;
 
-    if (coll.view_on) {
+    if (coll.type === 'view' && coll.view_on) {
       viewInfo = <span className={styles['collections-table-view-on']}>(view on: {coll.view_on})</span>;
     }
 
     return (
-      <span>
+      <div>
         <a
           className={classnames(styles['collections-table-link'])}
           onClick={this.onNameClicked.bind(this, collName)}>
           {collName}
         </a>
         {viewInfo}
-      </span>
+      </div>
     );
   }
 
-  /**
-   * Render the collation properties.
-   *
-   * @param {Object} properties - The properties.
-   *
-   * @returns {Component} The component.
-   */
-  renderProperty(properties) {
-    if (!isEmpty(properties)) {
-      const tooltipOptions = {
-        'data-tip': this.renderCollationOptions(properties),
-        'data-for': TOOLTIP_ID,
-        'data-effect': 'solid',
-        'data-border': true
-      };
-      return (
-        <div {...tooltipOptions} className={styles['collections-table-property']}>
-          <span className={styles['collections-table-tooltip']}>Collation</span>
-          <ReactTooltip id={TOOLTIP_ID} html />
-          <InfoSprinkle helpLink={HELP_URL_COLLATION} onClickHandler={this.props.openLink} />
-        </div>
-      );
+  renderProperty = (key, property) => {
+    const { name, options } = property || {};
+
+    if (name === PROPERTIES_COLLATION) {
+      return (<PropertyBadge
+        key={key}
+        label="Collation"
+        tooltip={this.renderOptions(options)}
+      />);
+    }
+
+    if (name === PROPERTIES_VIEW) {
+      return (<PropertyBadge
+        key={key}
+        label="View"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_CAPPED) {
+      return (<PropertyBadge
+        key={key}
+        label="Capped"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_TIME_SERIES) {
+      return (<PropertyBadge
+        key={key}
+        label="Time-Series"
+        tooltip={this.renderOptions(options)} />);
     }
   }
 
+  renderProperties = (coll) => {
+    return (coll.Properties || []).map((property, i) => {
+      return this.renderProperty(`${coll._id}-prop-${i}`, property);
+    });
+  }
+
   /**
    * Render Collections Table component.
    *
@@ -214,7 +230,7 @@ class CollectionsTable extends PureComponent {
         [NUM_INDEX]: isNaN(coll[NUM_INDEX]) ? DASH : coll[NUM_INDEX],
         [TOT_INDEX_SIZE]: isNaN(coll[TOT_INDEX_SIZE]) ?
           DASH : numeral(coll[TOT_INDEX_SIZE]).format('0.0 b'),
-        [PROPS]: this.renderProperty(coll.Properties)
+        [PROPS]: this.renderProperties(coll)
       });
     });
 
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
new file mode 100644
index 00000000000..2f748c8cce0
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import ReactTooltip from 'react-tooltip';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import styles from './property-badge.less';
+
+export default class PropertyBadge extends PureComponent {
+  static displayName = 'PropertyBadge';
+
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    tooltip: PropTypes.string
+  }
+
+  renderTooltip() {
+    if (!this.props.tooltip) {
+      return [{}, ''];
+    }
+
+    const tooltipId = `property-badge-tooltip-${_.kebabCase(this.props.label)}`;
+
+    return [
+      {
+        'data-tip': this.props.tooltip,
+        'data-for': tooltipId,
+        'data-effect': 'solid',
+        'data-border': true
+      },
+      <ReactTooltip id={tooltipId} html />
+    ];
+  }
+
+  render() {
+    const [tooltipOptions, tooltipContents] = this.renderTooltip();
+    return (
+      <div {...tooltipOptions} className={styles['property-badge-shape']}>
+        <span className={styles['property-badge-label']}>{this.props.label}</span>
+        {tooltipContents}
+      </div>
+    );
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.less b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
new file mode 100644
index 00000000000..758d649ce36
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
@@ -0,0 +1,20 @@
+@import (reference) "~less/compass/_theme.less";
+
+.property-badge {
+  &-shape {
+    cursor: default;
+    color: #545383;
+    background-color: #E6E4ED;
+    font-size: 11px;
+    font-weight: bold;
+    border-radius: 20px;
+    padding: 3px 10px;
+    min-width: 30px;
+    margin-right: 15px;
+    white-space: nowrap;
+  }
+
+  &-label {
+    text-transform: uppercase;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/modules/collections.js b/packages/compass-collections-ddl/src/modules/collections.js
index d25aa9ed7f7..ce017985976 100644
--- a/packages/compass-collections-ddl/src/modules/collections.js
+++ b/packages/compass-collections-ddl/src/modules/collections.js
@@ -2,6 +2,7 @@ import { parallel } from 'async';
 import zipObject from 'lodash.zipobject';
 import sortByOrder from 'lodash.sortbyorder';
 import { INITIAL_STATE as COLUMNS } from 'modules/columns';
+import { isEmpty } from 'lodash';
 
 /**
  * Need extra columns to map.
@@ -15,6 +16,11 @@ const EXTRA_COLUMNS = COLUMNS.concat([
   'pipeline'
 ]);
 
+export const PROPERTIES_COLLATION = 'collation';
+export const PROPERTIES_TIME_SERIES = 'time-series';
+export const PROPERTIES_CAPPED = 'capped';
+export const PROPERTIES_VIEW = 'view';
+
 /**
  * The module prefix.
  */
@@ -62,6 +68,10 @@ export default function reducer(state = INITIAL_STATE, action) {
   return state;
 }
 
+function filterOutSystemCollections(collections) {
+  return collections.filter(({ name }) => name && !name.startsWith('system.'));
+}
+
 /**
  * Sort the collection list by column and order.
  *
@@ -75,6 +85,40 @@ const sort = (collections, column, order) => {
   return sortByOrder(collections, column || NAME, order || ASC);
 };
 
+function getProperties(coll) {
+  const properties = [];
+
+  if (!isEmpty(coll.collation)) {
+    properties.push({
+      name: PROPERTIES_COLLATION,
+      options: coll.collation
+    });
+  }
+
+  if (coll.type === 'timeseries') {
+    properties.push({
+      name: PROPERTIES_TIME_SERIES,
+      options: {}
+    });
+  }
+
+  if (coll.type === 'view') {
+    properties.push({
+      name: PROPERTIES_VIEW,
+      options: {}
+    });
+  }
+
+  if (coll.capped) {
+    properties.push({
+      name: PROPERTIES_CAPPED,
+      options: {}
+    });
+  }
+
+  return properties;
+}
+
 /**
  * Load collections to the UI friendly form.
  *
@@ -83,23 +127,24 @@ const sort = (collections, column, order) => {
  * @return {Array} The mapped collections for the UI.
  */
 export const load = (collections) => {
-  return collections.map((coll) => {
-    return zipObject(EXTRA_COLUMNS, [
-      coll.name,
-      coll.document_count,
-      coll.size / coll.document_count,
-      coll.size,
-      coll.index_count,
-      coll.index_size,
-      coll.collation,
-      coll.ns || coll._id,
-      coll.readonly,
-      coll.is_capped || coll.capped,
-      coll.view_on,
-      coll.type,
-      coll.pipeline
-    ]);
-  });
+  return filterOutSystemCollections(collections)
+    .map((coll) => {
+      return zipObject(EXTRA_COLUMNS, [
+        coll.name, // Collection Name
+        coll.document_count, // Documents
+        coll.size / coll.document_count, // Avg. Document Size
+        coll.size, // Total Document Size
+        coll.index_count, // Num. Indexes
+        coll.index_size, // Total Index Size
+        getProperties(coll), // Properties
+        coll.ns || coll._id, // _id
+        coll.readonly, // readonly
+        coll.is_capped || coll.capped, // capped
+        coll.view_on, // view_on
+        coll.type, // type
+        coll.pipeline // pipeline
+      ]);
+    });
 };
 
 /**
@@ -111,7 +156,7 @@ export const load = (collections) => {
  */
 export const loadCollections = (collections) => ({
   type: LOAD_COLLECTIONS,
-  collections: collections
+  collections: filterOutSystemCollections(collections)
 });
 
 /**
diff --git a/packages/compass-collections-ddl/src/modules/collections.spec.js b/packages/compass-collections-ddl/src/modules/collections.spec.js
index b4e573d467e..d4ed7cb2d5d 100644
--- a/packages/compass-collections-ddl/src/modules/collections.spec.js
+++ b/packages/compass-collections-ddl/src/modules/collections.spec.js
@@ -30,6 +30,15 @@ const DEEZER = {
   collation: { locale: 'us' }
 };
 
+const SYSTEM = {
+  name: 'system.coll1',
+  document_count: 5,
+  size: 20,
+  index_count: 3,
+  index_size: 1,
+  collation: { locale: 'us' }
+};
+
 const SPOTIFY_MAPPED = {
   'Collection Name': 'spotify',
   'Documents': 10,
@@ -37,7 +46,7 @@ const SPOTIFY_MAPPED = {
   'Total Document Size': 200,
   'Num. Indexes': 1,
   'Total Index Size': 15,
-  'Properties': { locale: 'se' },
+  'Properties': [{ name: 'collation', options: { locale: 'se' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -52,7 +61,7 @@ const SOUNDCLOUD_MAPPED = {
   'Total Document Size': 20000,
   'Num. Indexes': 2,
   'Total Index Size': 20,
-  'Properties': { locale: 'de' },
+  'Properties': [{ name: 'collation', options: { locale: 'de' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -67,7 +76,7 @@ const DEEZER_MAPPED = {
   'Total Document Size': 20,
   'Num. Indexes': 3,
   'Total Index Size': 1,
-  'Properties': { locale: 'us' },
+  'Properties': [{ name: 'collation', options: { locale: 'us' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -78,6 +87,12 @@ const DEEZER_MAPPED = {
 
 describe('collections module', () => {
   describe('#reducer', () => {
+    it('filters system collections out', () => {
+      const collections = [ SPOTIFY, SYSTEM ];
+      expect(reducer(undefined, loadCollections(collections))).
+        to.deep.equal([ SPOTIFY_MAPPED ]);
+    });
+
     context('when an action is provided', () => {
       context('when the action is LOAD_COLLECTIONS', () => {
         const collections = [ SPOTIFY, SOUNDCLOUD, DEEZER ];

From 8a97b90c6abc8f8b86a05970d96c8eecba3729fb Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Mon, 17 May 2021 19:36:27 +0200
Subject: [PATCH 04/20] add leafygreen

---
 .../compass-collections-ddl/package-lock.json | 566 ++++++++++++++++--
 packages/compass-collections-ddl/package.json |   3 +
 .../collections-table/collections-table.jsx   |  23 +-
 .../collections-table/property-badge.jsx      |  48 +-
 .../collections-table/property-badge.less     |  20 -
 5 files changed, 535 insertions(+), 125 deletions(-)
 delete mode 100644 packages/compass-collections-ddl/src/components/collections-table/property-badge.less

diff --git a/packages/compass-collections-ddl/package-lock.json b/packages/compass-collections-ddl/package-lock.json
index d1c29af536f..ac43c99465e 100644
--- a/packages/compass-collections-ddl/package-lock.json
+++ b/packages/compass-collections-ddl/package-lock.json
@@ -8,7 +8,6 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
       "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.8.3"
       }
@@ -99,6 +98,35 @@
         "@babel/types": "^7.8.3"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+        }
+      }
+    },
     "@babel/helper-split-export-declaration": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
@@ -129,7 +157,6 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz",
       "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.0",
         "esutils": "^2.0.2",
@@ -146,7 +173,6 @@
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
       "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -216,6 +242,71 @@
         }
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.17",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -342,6 +433,165 @@
       "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
       "dev": true
     },
+    "@leafygreen-ui/badge": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/badge/-/badge-4.0.3.tgz",
+      "integrity": "sha512-CAEavAfcM8G6TaFW6LLQ+YGXa8ODxxjtu06uCxg61MjSZJQ7FvGVlvVfd2T6Mz9A6Jm6ZDmW8JpqHrjau/DDkQ==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1"
+      }
+    },
+    "@leafygreen-ui/emotion": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-3.0.1.tgz",
+      "integrity": "sha512-h0VaYrbwC7jNpGKXq81qu4QveT9lyPQFDRrcePIL+UoDA8nLRzs+5T2oxyJkHqulmgHrRTmLEXv2pIuJinbKHA==",
+      "requires": {
+        "create-emotion": "^10.0.7",
+        "create-emotion-server": "10.0.27",
+        "emotion": "^10.0.7"
+      }
+    },
+    "@leafygreen-ui/hooks": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-6.0.1.tgz",
+      "integrity": "sha512-u0Egx2IWGK4LNMsEbB49atD7MMv20Z6TuY0iGwtjwDMfSbaN5yLG4hvok7qG7kyHNUFbLlN2Yz15rk7/mPvcHQ==",
+      "requires": {
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
+    "@leafygreen-ui/icon": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/icon/-/icon-11.0.0.tgz",
+      "integrity": "sha512-FeMK9pIpIsK++wqWLhVCuAk0mDSJLlmey8C01L/nqVopR3H9a3zcGGFIX182Mbah6BA9+DLLQW+X2sj3qmQdIg==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/leafygreen-provider": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-2.1.0.tgz",
+      "integrity": "sha512-GEEH8IFJvEc9zXTjVouFjbEZPdiF1ZNb0hI0P5bE1f8pRoIStbvuHEAZNoGdCRU27hgn7DbREqoyp9J05ewUEw==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.0",
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/lib": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-7.0.0.tgz",
+      "integrity": "sha512-ZIqfa+XLD77KEDSPZPtuLxk2VuktFfLFghUViZEBissQ790gq2V9BXAzRgU5MCtaP6HlJ+kQ2BA5iv6iD5KgIQ==",
+      "requires": {
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "facepaint": "^1.2.1",
+        "polished": "^2.3.0",
+        "prop-types": "^15.0.0"
+      }
+    },
+    "@leafygreen-ui/palette": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-3.2.1.tgz",
+      "integrity": "sha512-E7gAN6eEWqsNIQrySABesXckJDJMLnzr3Z0BDQOBEmUdnYzXefvBY1e/zhHE6jb4rxwiOWnzwi1Zb2me50nOmQ=="
+    },
+    "@leafygreen-ui/popover": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-7.2.0.tgz",
+      "integrity": "sha512-FHWr8f04B8thhVwJ6yqD0KKsWqwmupDN+hCD0AExYaVLxeANhrjnPtkkiAc174HG3zencrlsR4kZexCxDCKXfQ==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.1",
+        "@leafygreen-ui/leafygreen-provider": "^2.1.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/portal": "^3.1.2",
+        "lodash": "^4.17.21",
+        "react-transition-group": "^4.4.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.14.0",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+              "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+              "requires": {
+                "regenerator-runtime": "^0.13.4"
+              }
+            }
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "react-transition-group": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@leafygreen-ui/portal": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-3.1.2.tgz",
+      "integrity": "sha512-AcpDz3iKcZ1+IdClyAO0f5z0m+1PBCQyvkC5kckqbhgZNi4QX0v6chFp7l7EvaW1hXyyPSDP1SQcBwlvHMqKhQ==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/tokens": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-0.5.1.tgz",
+      "integrity": "sha512-ggfkuG7TEGoRjve1qGpWlvLpIRqcMjdpjwd9KqwOL/JFdnyIuxvVnCwC4tnUqncszWCOBtsdeqJ6ZkuU3BIMtA==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/tooltip": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-6.2.1.tgz",
+      "integrity": "sha512-VCH1XwFE4ckkCIeDva63EWdI41H6rNd0XEEZ8HMSwvq3rc71ll9JaeNHGTcUftCaPHKpDXKHNjnBdUDwPVUZWg==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.1",
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/popover": "^7.2.0",
+        "@leafygreen-ui/tokens": "^0.5.1",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
     "@mongodb-js/compass-deployment-awareness": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/compass-deployment-awareness/-/compass-deployment-awareness-10.1.0.tgz",
@@ -457,8 +707,7 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/prop-types": {
       "version": "15.7.3",
@@ -2014,6 +2263,89 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
+      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "find-root": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+          "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "babel-plugin-minify-builtins": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.2.0.tgz",
@@ -2144,8 +2476,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -3372,8 +3703,7 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "camel-case": {
       "version": "3.0.0",
@@ -3478,7 +3808,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3489,7 +3818,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -3498,7 +3826,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -3506,8 +3833,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         }
       }
     },
@@ -4138,7 +4464,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
       "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       },
@@ -4146,8 +4471,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         }
       }
     },
@@ -4203,8 +4527,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -4256,6 +4579,28 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz",
+      "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==",
+      "requires": {
+        "@emotion/cache": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "create-emotion-server": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion-server/-/create-emotion-server-10.0.27.tgz",
+      "integrity": "sha512-1EbZgdjiho9ue1BSTpAez8SIdfbTXomtz0bg+LPOEvf/5OV7xqCGJaoSCDCB+y7kZ73hwoEhLsoPmqKSGIQMXg==",
+      "requires": {
+        "@emotion/utils": "0.11.3",
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4671,8 +5016,7 @@
     "csstype": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
-      "dev": true
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -5629,6 +5973,48 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -5962,6 +6348,15 @@
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "dev": true
     },
+    "emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz",
+      "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==",
+      "requires": {
+        "babel-plugin-emotion": "^10.0.27",
+        "create-emotion": "^10.0.27"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -6289,7 +6684,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -6345,8 +6739,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.14.1",
@@ -7177,8 +7570,7 @@
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "etag": {
       "version": "1.8.1",
@@ -7508,6 +7900,11 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "facepaint": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
+      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ=="
+    },
     "fast-deep-equal": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
@@ -9371,8 +9768,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -9703,6 +10099,52 @@
         }
       }
     },
+    "html-tokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+      "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+      "requires": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~1.2.5",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+          "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
+        },
+        "through2": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+          "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+          "requires": {
+            "readable-stream": "~1.0.17",
+            "xtend": "~2.1.1"
+          }
+        },
+        "xtend": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+          "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+          "requires": {
+            "object-keys": "~0.4.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -10405,8 +10847,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.5",
@@ -10588,8 +11029,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -10895,8 +11335,7 @@
     "isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-      "dev": true
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
     },
     "isbinaryfile": {
       "version": "3.0.3",
@@ -11146,8 +11585,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -11245,8 +11683,7 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "json-schema": {
       "version": "0.2.3",
@@ -11928,8 +12365,7 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
     "load-json-file": {
       "version": "1.1.0",
@@ -13071,7 +13507,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -15334,6 +15769,15 @@
         }
       }
     },
+    "multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "requires": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -15951,8 +16395,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-component": {
       "version": "0.0.3",
@@ -16425,7 +16868,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -16556,8 +16998,7 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
     "path-to-regexp": {
       "version": "1.8.0",
@@ -16720,6 +17161,14 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "polished": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-2.3.3.tgz",
+      "integrity": "sha512-59V4fDbdxtH4I1m9TWxFsoGJbC8nnOpUYo5uFmvMfKp9Qh+6suo4VMUle1TGIIUZIGxfkW+Rs485zPk0wcwR2Q==",
+      "requires": {
+        "@babel/runtime": "^7.2.0"
+      }
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -18972,8 +19421,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "process-on-spawn": {
       "version": "1.0.0",
@@ -19059,7 +19507,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -19458,8 +19905,7 @@
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
-      "dev": true
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
     "react-lifecycles-compat": {
       "version": "3.0.4",
@@ -19595,7 +20041,6 @@
       "version": "1.0.34",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
       "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.1",
@@ -20053,8 +20498,7 @@
     "regenerator-runtime": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-      "dev": true
+      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -20292,7 +20736,6 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
       "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
-      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -21887,8 +22330,7 @@
     "string_decoder": {
       "version": "0.10.31",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
     "stringstream": {
       "version": "0.0.6",
@@ -21994,7 +22436,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -22316,8 +22757,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
       "version": "0.6.5",
@@ -22799,8 +23239,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.1",
@@ -24916,8 +25355,7 @@
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
     "yargs": {
       "version": "15.1.0",
diff --git a/packages/compass-collections-ddl/package.json b/packages/compass-collections-ddl/package.json
index a3f0b223d82..1409dbc1c21 100644
--- a/packages/compass-collections-ddl/package.json
+++ b/packages/compass-collections-ddl/package.json
@@ -144,6 +144,9 @@
     "xvfb-maybe": "^0.2.1"
   },
   "dependencies": {
+    "@leafygreen-ui/badge": "^4.0.3",
+    "@leafygreen-ui/icon": "^11.0.0",
+    "@leafygreen-ui/tooltip": "^6.2.1",
     "async": "^3.1.1",
     "lodash.assign": "^4.2.0",
     "lodash.find": "^4.6.0",
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
index 81212c796cb..e00c6aab400 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
@@ -11,6 +11,8 @@ import styles from './collections-table.less';
 import { PROPERTIES_CAPPED, PROPERTIES_COLLATION, PROPERTIES_TIME_SERIES, PROPERTIES_VIEW } from '../../modules/collections';
 import PropertyBadge from './property-badge';
 
+import Icon from '@leafygreen-ui/icon';
+
 /**
  * The name constant.
  */
@@ -51,11 +53,6 @@ const PROPS = 'Properties';
  */
 const DASH = '-';
 
-/**
- * The help URL for collation.
- */
-const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/';
-
 /**
  * Collation option mappings.
  */
@@ -136,14 +133,11 @@ class CollectionsTable extends PureComponent {
       return;
     }
 
-    let text = '';
-    knownOptions.forEach((key) => {
-      if (text !== '') {
-        text = `${text}<br />`;
+    return (<div>{knownOptions.map(
+      (key) => {
+        return <div key={key}><b>{PROPERTY_OPTIONS[key]}</b>: {`${options[key]}`}</div>;
       }
-      text = `${text}${PROPERTY_OPTIONS[key]}: ${options[key]}`;
-    });
-    return text;
+    )}</div>);
   }
 
   /**
@@ -180,6 +174,7 @@ class CollectionsTable extends PureComponent {
       return (<PropertyBadge
         key={key}
         label="Collation"
+        variant="darkgray"
         tooltip={this.renderOptions(options)}
       />);
     }
@@ -188,6 +183,8 @@ class CollectionsTable extends PureComponent {
       return (<PropertyBadge
         key={key}
         label="View"
+        icon={<Icon glyph="Visibility" />}
+        variant="darkgray"
         tooltip={this.renderOptions(options)} />);
     }
 
@@ -195,6 +192,7 @@ class CollectionsTable extends PureComponent {
       return (<PropertyBadge
         key={key}
         label="Capped"
+        variant="darkgray"
         tooltip={this.renderOptions(options)} />);
     }
 
@@ -202,6 +200,7 @@ class CollectionsTable extends PureComponent {
       return (<PropertyBadge
         key={key}
         label="Time-Series"
+        variant="darkgray"
         tooltip={this.renderOptions(options)} />);
     }
   }
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
index 2f748c8cce0..cf0181ed737 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -1,42 +1,32 @@
 import React, { PureComponent } from 'react';
-import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
-import styles from './property-badge.less';
-
-export default class PropertyBadge extends PureComponent {
+import Badge from '@leafygreen-ui/badge';
+import Tooltip from '@leafygreen-ui/tooltip';export default class PropertyBadge extends PureComponent {
   static displayName = 'PropertyBadge';
 
   static propTypes = {
     label: PropTypes.string.isRequired,
-    tooltip: PropTypes.string
+    variant: PropTypes.string.isRequired,
+    tooltip: PropTypes.element,
+    icon: PropTypes.element
   }
 
-  renderTooltip() {
-    if (!this.props.tooltip) {
-      return [{}, ''];
-    }
-
-    const tooltipId = `property-badge-tooltip-${_.kebabCase(this.props.label)}`;
-
-    return [
-      {
-        'data-tip': this.props.tooltip,
-        'data-for': tooltipId,
-        'data-effect': 'solid',
-        'data-border': true
-      },
-      <ReactTooltip id={tooltipId} html />
-    ];
+  renderBadge = () => {
+    const space = this.props.icon ? (<span>&nbsp;</span>) : '';
+    return (<Badge variant={this.props.variant}>{this.props.icon}{space}{this.props.label}</Badge>);
   }
 
   render() {
-    const [tooltipOptions, tooltipContents] = this.renderTooltip();
-    return (
-      <div {...tooltipOptions} className={styles['property-badge-shape']}>
-        <span className={styles['property-badge-label']}>{this.props.label}</span>
-        {tooltipContents}
-      </div>
-    );
+    if (!this.props.tooltip) {
+      return this.renderBadge();
+    }
+
+    return (<Tooltip
+      align="top"
+      justify="start"
+      trigger={this.renderBadge()}
+      triggerEvent="hover"
+      darkMode
+    >{this.props.tooltip}</Tooltip>);
   }
 }
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.less b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
deleted file mode 100644
index 758d649ce36..00000000000
--- a/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
+++ /dev/null
@@ -1,20 +0,0 @@
-@import (reference) "~less/compass/_theme.less";
-
-.property-badge {
-  &-shape {
-    cursor: default;
-    color: #545383;
-    background-color: #E6E4ED;
-    font-size: 11px;
-    font-weight: bold;
-    border-radius: 20px;
-    padding: 3px 10px;
-    min-width: 30px;
-    margin-right: 15px;
-    white-space: nowrap;
-  }
-
-  &-label {
-    text-transform: uppercase;
-  }
-}

From 3377fe41e57cddec9ffaced76f001b120998c079 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Mon, 17 May 2021 19:56:04 +0200
Subject: [PATCH 05/20] lint

---
 .../components/collections-table/collections-table.jsx | 10 ----------
 .../components/collections-table/property-badge.jsx    |  4 +++-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
index e00c6aab400..a5a6473ee83 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
@@ -69,9 +69,6 @@ const PROPERTY_OPTIONS = {
   version: 'Version'
 };
 
-/**
- * The collections table component.
- */
 class CollectionsTable extends PureComponent {
   static displayName = 'CollectionsTableComponent';
 
@@ -118,13 +115,6 @@ class CollectionsTable extends PureComponent {
     this.props.showCollection(name);
   }
 
-  /**
-   * Render the collation properties.
-   *
-   * @param {Object} properties - The properties.
-   *
-   * @returns {Object} The mapped properties.
-   */
   renderOptions(options) {
     const knownOptions = Object.keys(options)
       .filter((key) => PROPERTY_OPTIONS[key]);
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
index cf0181ed737..89563487e41 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -1,7 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Badge from '@leafygreen-ui/badge';
-import Tooltip from '@leafygreen-ui/tooltip';export default class PropertyBadge extends PureComponent {
+import Tooltip from '@leafygreen-ui/tooltip';
+
+export default class PropertyBadge extends PureComponent {
   static displayName = 'PropertyBadge';
 
   static propTypes = {

From eaa0dc1d48f43be7daa2dc62798b6ec305fb2834 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Tue, 18 May 2021 18:20:32 +0200
Subject: [PATCH 06/20] wip: add modal

---
 .../collections-table/property-badge.jsx      |  2 +-
 .../create-collection-modal.jsx               | 80 +++++++++++++++----
 .../create-collection-modal.less              |  9 +--
 .../src/modules/create-collection/index.js    | 46 ++++++-----
 .../create-collection/is-time-series.js       | 36 +++++++++
 .../create-collection/is-time-series.spec.js  | 30 +++++++
 .../modules/create-collection/time-series.js  | 38 +++++++++
 .../create-collection/time-series.spec.js     | 32 ++++++++
 8 files changed, 228 insertions(+), 45 deletions(-)
 create mode 100644 packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js
 create mode 100644 packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js
 create mode 100644 packages/compass-collections-ddl/src/modules/create-collection/time-series.js
 create mode 100644 packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js

diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
index 89563487e41..b8b1d09498c 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -26,7 +26,7 @@ export default class PropertyBadge extends PureComponent {
     return (<Tooltip
       align="top"
       justify="start"
-      trigger={this.renderBadge()}
+      trigger={<span>{this.renderBadge()}</span>}
       triggerEvent="hover"
       darkMode
     >{this.props.tooltip}</Tooltip>);
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 0d309fa1465..47f88eb4249 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -6,6 +6,7 @@ import { createCollection } from 'modules/create-collection';
 import { changeCappedSize } from 'modules/create-collection/capped-size';
 import { changeCollationOption } from 'modules/create-collection/collation';
 import { toggleIsCapped } from 'modules/create-collection/is-capped';
+import { toggleIsTimeSeries } from 'modules/create-collection/is-time-series';
 import { toggleIsCustomCollation } from 'modules/create-collection/is-custom-collation';
 import { changeCollectionName } from 'modules/create-collection/name';
 import { clearError } from 'modules/error';
@@ -28,6 +29,11 @@ const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections
  */
 const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/';
 
+/**
+ * The help URL for time series.
+ */
+const HELP_URL_TIME_SERIES = 'https://docs.mongodb.com/manual/reference/method/db.createCollection/';
+
 /**
  * The modal to create a collection.
  */
@@ -37,6 +43,7 @@ class CreateCollectionModal extends PureComponent {
   static propTypes = {
     isCapped: PropTypes.bool.isRequired,
     isCustomCollation: PropTypes.bool.isRequired,
+    isTimeSeries: PropTypes.bool.isRequired,
     isRunning: PropTypes.bool.isRequired,
     isVisible: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
@@ -50,6 +57,7 @@ class CreateCollectionModal extends PureComponent {
     createCollection: PropTypes.func.isRequired,
     toggleIsCapped: PropTypes.func.isRequired,
     toggleIsCustomCollation: PropTypes.func.isRequired,
+    toggleIsTimeSeries: PropTypes.func.isRequired,
     toggleIsVisible: PropTypes.func.isRequired,
     clearError: PropTypes.func
   }
@@ -86,6 +94,10 @@ class CreateCollectionModal extends PureComponent {
     this.props.toggleIsCustomCollation(!this.props.isCustomCollation);
   }
 
+  onToggleIsTimeSeries = () => {
+    this.props.toggleIsTimeSeries(!this.props.isTimeSeries);
+  }
+
   /**
    * When user hits enter to submit the form we need to prevent the default bhaviour.
    *
@@ -130,6 +142,17 @@ class CreateCollectionModal extends PureComponent {
     }
   }
 
+
+  renderTimeSeries() {
+    if (this.props.isTimeSeries) {
+      return (
+        <div className={classnames(styles['create-collection-modal-is-time-series-wrapper'])}>
+          Time Series!
+        </div>
+      );
+    }
+  }
+
   /**
    * Render the collation component when collation is selected.
    *
@@ -145,6 +168,42 @@ class CreateCollectionModal extends PureComponent {
     }
   }
 
+  renderCappedSizeCheckbox() {
+    return (<div><ModalCheckbox
+      name="Capped Collection"
+      titleClassName={classnames(styles['create-collection-modal-is-capped'])}
+      checked={this.props.isCapped}
+      helpUrl={HELP_URL_CAPPED}
+      onClickHandler={this.onToggleIsCapped}
+      onLinkClickHandler={this.props.openLink} />
+    {this.renderCappedSize()}
+    </div>);
+  }
+
+  renderTimeSeriesCheckbox() {
+    return (<div>
+      <ModalCheckbox
+        name="Time-Series"
+        titleClassName={classnames(styles['create-collection-time-series'])}
+        checked={this.props.isTimeSeries}
+        helpUrl={HELP_URL_TIME_SERIES}
+        onClickHandler={this.onToggleIsTimeSeries}
+        onLinkClickHandler={this.props.openLink} />
+      {this.renderTimeSeries()}</div>);
+  }
+
+  renderCustomCollationCheckbox() {
+    return (<div>
+      <ModalCheckbox
+        name="Use Custom Collation"
+        titleClassName={classnames(styles['create-collection-modal-is-custom-collation'])}
+        checked={this.props.isCustomCollation}
+        helpUrl={HELP_URL_COLLATION}
+        onClickHandler={this.onToggleIsCustomCollation}
+        onLinkClickHandler={this.props.openLink} />
+      {this.renderCollation()}</div>);
+  }
+
   /**
    * Render the modal dialog.
    *
@@ -175,22 +234,9 @@ class CreateCollectionModal extends PureComponent {
               value={this.props.name}
               onChangeHandler={this.onNameChange} />
             <div className="form-group">
-              <ModalCheckbox
-                name="Capped Collection"
-                titleClassName={classnames(styles['create-collection-modal-is-capped'])}
-                checked={this.props.isCapped}
-                helpUrl={HELP_URL_CAPPED}
-                onClickHandler={this.onToggleIsCapped}
-                onLinkClickHandler={this.props.openLink} />
-              {this.renderCappedSize()}
-              <ModalCheckbox
-                name="Use Custom Collation"
-                titleClassName={classnames(styles['create-collection-modal-is-custom-collation'])}
-                checked={this.props.isCustomCollation}
-                helpUrl={HELP_URL_COLLATION}
-                onClickHandler={this.onToggleIsCustomCollation}
-                onLinkClickHandler={this.props.openLink} />
-              {this.renderCollation()}
+              {this.renderCappedSizeCheckbox()}
+              {this.renderCustomCollationCheckbox()}
+              {this.renderTimeSeriesCheckbox()}
             </div>
             {this.props.error ?
               <ModalStatusMessage
@@ -231,6 +277,7 @@ class CreateCollectionModal extends PureComponent {
 const mapStateToProps = (state) => ({
   isCapped: state.isCapped,
   isCustomCollation: state.isCustomCollation,
+  isTimeSeries: state.isTimeSeries,
   isRunning: state.isRunning,
   isVisible: state.isVisible,
   name: state.name,
@@ -252,6 +299,7 @@ const MappedCreateCollectionModal = connect(
     createCollection,
     openLink,
     toggleIsCapped,
+    toggleIsTimeSeries,
     toggleIsCustomCollation,
     toggleIsVisible,
     clearError
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
index a3ced1d9712..6a7e8608919 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
@@ -19,14 +19,13 @@
     overflow: auto;
   }
 
-  p {
+  label > p {
+    margin-left: 5px;
     font-weight: bold;
     display: inline-block;
   }
 
   &-is-capped {
-    margin-left: 5px;
-
     &-wrapper {
 
       :global {
@@ -50,8 +49,4 @@
       }
     }
   }
-
-  &-is-custom-collation {
-    margin-left: 5px;
-  }
 }
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.js b/packages/compass-collections-ddl/src/modules/create-collection/index.js
index d4bb5bff569..6d4297ce72a 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.js
@@ -9,6 +9,9 @@ import isCapped, {
 import isCustomCollation, {
   INITIAL_STATE as IS_CUSTOM_COLLATION_INITIAL_STATE
 } from 'modules/create-collection/is-custom-collation';
+import isTimeSeries, {
+  INITIAL_STATE as IS_TIME_SERIES_INITIAL_STATE
+} from 'modules/create-collection/is-time-series';
 import isRunning, {
   toggleIsRunning,
   INITIAL_STATE as IS_RUNNING_INITIAL_STATE
@@ -19,6 +22,9 @@ import isVisible, {
 import collation, {
   INITIAL_STATE as COLLATION_INITIAL_STATE
 } from 'modules/create-collection/collation';
+import timeSeries, {
+  INITIAL_STATE as TIME_SERIES_INITIAL_STATE
+} from 'modules/create-collection/time-series';
 import name, {
   INITIAL_STATE as NAME_INITIAL_STATE
 } from 'modules/create-collection/name';
@@ -44,10 +50,12 @@ const reducer = combineReducers({
   isCustomCollation,
   isRunning,
   isVisible,
+  isTimeSeries,
   name,
   databaseName,
   error,
   collation,
+  timeSeries,
   dataService
 });
 
@@ -60,31 +68,27 @@ const reducer = combineReducers({
  * @returns {Object} The new state.
  */
 const rootReducer = (state, action) => {
+  const initialState = {
+    cappedSize: CAPPED_SIZE_INITIAL_STATE,
+    isCapped: IS_CAPPED_INITIAL_STATE,
+    isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
+    isTimeSeries: IS_TIME_SERIES_INITIAL_STATE,
+    isRunning: IS_RUNNING_INITIAL_STATE,
+    isVisible: IS_VISIBLE_INITIAL_STATE,
+    name: NAME_INITIAL_STATE,
+    databaseName: DATABASE_NAME_INITIAL_STATE,
+    error: ERROR_INITIAL_STATE,
+    collation: COLLATION_INITIAL_STATE,
+    timeSeries: TIME_SERIES_INITIAL_STATE
+  };
+
   if (action.type === RESET) {
-    return {
-      ...state,
-      cappedSize: CAPPED_SIZE_INITIAL_STATE,
-      isCapped: IS_CAPPED_INITIAL_STATE,
-      isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
-      isRunning: IS_RUNNING_INITIAL_STATE,
-      isVisible: IS_VISIBLE_INITIAL_STATE,
-      name: NAME_INITIAL_STATE,
-      databaseName: DATABASE_NAME_INITIAL_STATE,
-      error: ERROR_INITIAL_STATE,
-      collation: COLLATION_INITIAL_STATE
-    };
+    return initialState;
   } else if (action.type === OPEN) {
     return {
-      ...state,
+      ...initialState,
       isVisible: true,
-      databaseName: action.databaseName,
-      cappedSize: CAPPED_SIZE_INITIAL_STATE,
-      isCapped: IS_CAPPED_INITIAL_STATE,
-      isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
-      isRunning: IS_RUNNING_INITIAL_STATE,
-      name: NAME_INITIAL_STATE,
-      error: ERROR_INITIAL_STATE,
-      collation: COLLATION_INITIAL_STATE
+      databaseName: action.databaseName
     };
   }
   return reducer(state, action);
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js
new file mode 100644
index 00000000000..3d076f00cd8
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js
@@ -0,0 +1,36 @@
+/**
+ * Change is time-series action name.
+ */
+export const TOGGLE_IS_TIME_SERIES = 'ddl/create-collection/is-time-series/TOGGLE_IS_TIME_SERIES';
+
+/**
+ * The initial state of the is writable attribute.
+ */
+export const INITIAL_STATE = false;
+
+/**
+ * Reducer function for handle state changes to is time-series.
+ *
+ * @param {Boolean} state - The is time-series state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Array} The new state.
+ */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === TOGGLE_IS_TIME_SERIES) {
+    return action.isTimeSeries;
+  }
+  return state;
+}
+
+/**
+ * The toggle is time-series action creator.
+ *
+ * @param {Boolean} isTimeSeries - Is time-series.
+ *
+ * @returns {Object} The action.
+ */
+export const toggleIsTimeSeries = (isTimeSeries) => ({
+  type: TOGGLE_IS_TIME_SERIES,
+  isTimeSeries: isTimeSeries
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js
new file mode 100644
index 00000000000..2beddebb373
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js
@@ -0,0 +1,30 @@
+import reducer, {
+  INITIAL_STATE,
+  toggleIsTimeSeries,
+  TOGGLE_IS_TIME_SERIES
+} from 'modules/create-collection/is-time-series';
+
+describe('create collection is capped module', () => {
+  describe('#reducer', () => {
+    context('when an action is provided', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, toggleIsTimeSeries(true))).to.equal(true);
+      });
+    });
+
+    context('when an action is not provided', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
+      });
+    });
+  });
+
+  describe('#toggleIsTimeSeries', () => {
+    it('returns the action', () => {
+      expect(toggleIsTimeSeries(false)).to.deep.equal({
+        type: TOGGLE_IS_TIME_SERIES,
+        isTimeSeries: false
+      });
+    });
+  });
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/time-series.js b/packages/compass-collections-ddl/src/modules/create-collection/time-series.js
new file mode 100644
index 00000000000..a27cfdae57f
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/time-series.js
@@ -0,0 +1,38 @@
+/**
+ * Change timeseries option action name.
+ */
+export const CHANGE_TIME_SERIES_OPTION = 'ddl/create-collection/timeseries/CHANGE_TIME_SERIES_OPTION';
+
+/**
+ * The initial state of the timeseries.
+ */
+export const INITIAL_STATE = {};
+
+/**
+ * Reducer function for handle state changes to timeseries.
+ *
+ * @param {Array} state - The timeseries state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Array} The new state.
+ */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === CHANGE_TIME_SERIES_OPTION) {
+    return { ...state, [action.field]: action.value };
+  }
+  return state;
+}
+
+/**
+ * The change capped size action creator.
+ *
+ * @param {String} field - The timeseries option.
+ * @param {String} value - The timeseries option value.
+ *
+ * @returns {Object} The action.
+ */
+export const changeTimeSeriesOption = (field, value) => ({
+  type: CHANGE_TIME_SERIES_OPTION,
+  field: field,
+  value: value
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js
new file mode 100644
index 00000000000..ecd717f1ecc
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js
@@ -0,0 +1,32 @@
+import reducer, {
+  INITIAL_STATE,
+  changeTimeSeriesOption,
+  CHANGE_TIME_SERIES_OPTION
+} from 'modules/create-collection/time-series';
+
+describe('create collection time-series module', () => {
+  describe('#reducer', () => {
+    context('when an action is provided', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, changeTimeSeriesOption('locale', 'ar'))).
+          to.deep.equal({ locale: 'ar' });
+      });
+    });
+
+    context('when an action is not provided', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
+      });
+    });
+  });
+
+  describe('#changeTimeSeriesOption', () => {
+    it('returns the action', () => {
+      expect(changeTimeSeriesOption('locale', 'ar')).to.deep.equal({
+        type: CHANGE_TIME_SERIES_OPTION,
+        field: 'locale',
+        value: 'ar'
+      });
+    });
+  });
+});

From 4fd35a99b2a516cfdc72754d28ac8d124f3fa1fa Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 12:40:27 +0200
Subject: [PATCH 07/20] create time series modal

---
 .../compass-collections-ddl/package-lock.json | 157 +++++++++++++++++-
 packages/compass-collections-ddl/package.json |   2 +
 .../src/components/collation/collation.jsx    |   4 +-
 .../create-collection-modal.jsx               |  37 +++--
 .../src/components/time-series/index.js       |   2 +
 .../components/time-series/time-series.jsx    |  77 +++++++++
 .../components/time-series/time-series.less   |   8 +
 .../time-series/time-series.spec.js           |  26 +++
 .../src/constants/collation.js                |   5 -
 .../src/modules/create-collection/index.js    |  44 +++--
 .../modules/create-collection/index.spec.js   |   2 +
 11 files changed, 327 insertions(+), 37 deletions(-)
 create mode 100644 packages/compass-collections-ddl/src/components/time-series/index.js
 create mode 100644 packages/compass-collections-ddl/src/components/time-series/time-series.jsx
 create mode 100644 packages/compass-collections-ddl/src/components/time-series/time-series.less
 create mode 100644 packages/compass-collections-ddl/src/components/time-series/time-series.spec.js

diff --git a/packages/compass-collections-ddl/package-lock.json b/packages/compass-collections-ddl/package-lock.json
index ac43c99465e..77e89e0738f 100644
--- a/packages/compass-collections-ddl/package-lock.json
+++ b/packages/compass-collections-ddl/package-lock.json
@@ -442,6 +442,35 @@
         "@leafygreen-ui/palette": "^3.2.1"
       }
     },
+    "@leafygreen-ui/box": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/box/-/box-3.0.4.tgz",
+      "integrity": "sha512-/qMa1zPvsUBwtLfmpHy5WLAL5gfYs6Kh4ynnHV6Pd4lmcHQFAI44C3s/8/QSmsO1GZXcAWQuW31dvZCqoexyqg==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
+    "@leafygreen-ui/button": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/button/-/button-12.0.2.tgz",
+      "integrity": "sha512-PGo//TaHFLsm/2MM49woCfYXGyE3M2YQ6p12n3wNTW2YyxtQBNoL3/51VVQi7/rnrrv4ynMfDdSWQsRq9W6fww==",
+      "requires": {
+        "@leafygreen-ui/box": "^3.0.4",
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/ripple": "^1.1.1",
+        "@leafygreen-ui/tokens": "^0.5.1"
+      }
+    },
     "@leafygreen-ui/emotion": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-3.0.1.tgz",
@@ -475,6 +504,17 @@
         "@leafygreen-ui/lib": "^7.0.0"
       }
     },
+    "@leafygreen-ui/interaction-ring": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/interaction-ring/-/interaction-ring-1.0.3.tgz",
+      "integrity": "sha512-D1/Jtt/WAj+sHzc0e51BdhtqJ0lCfx1759UMKhK7MOADS8/DG68ybRlaAO4wbaZ9dvumJr5eDS9Rt/Zghkuaaw==",
+      "requires": {
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "@leafygreen-ui/leafygreen-provider": "^2.0.3",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1"
+      }
+    },
     "@leafygreen-ui/leafygreen-provider": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-2.1.0.tgz",
@@ -563,6 +603,96 @@
         "@leafygreen-ui/lib": "^7.0.0"
       }
     },
+    "@leafygreen-ui/ripple": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-1.1.1.tgz",
+      "integrity": "sha512-BfAUwDHS1nF5LRH8zXcRJWlWCkUwSUyrjwm1XSQhsF57YM5A6caOOZCMOrXVv5UELzGxrIX9b9MYr0qaHqNt7w==",
+      "requires": {
+        "@leafygreen-ui/palette": "^3.2.1",
+        "polished": "^4.1.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "polished": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.2.tgz",
+          "integrity": "sha512-jq4t3PJUpVRcveC53nnbEX35VyQI05x3tniwp26WFdm1dwaNUBHAi5awa/roBlwQxx1uRhwNSYeAi/aMbfiJCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.17"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@leafygreen-ui/select": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-3.0.1.tgz",
+      "integrity": "sha512-3DQ8WgYsMQXL1IljIofHXmOf4aWl/vCuzRqxR4Xsh1/RUADz8R8me5DDSOJp2ezl9zB8JmbntHSH/dbz/tJmXQ==",
+      "requires": {
+        "@leafygreen-ui/button": "^12.0.1",
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "@leafygreen-ui/hooks": "^6.0.0",
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/popover": "^7.2.0",
+        "@leafygreen-ui/tokens": "0.5.1",
+        "@types/react-is": "^17.0.0",
+        "polished": "^4.0.3",
+        "react-is": "^17.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "polished": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.2.tgz",
+          "integrity": "sha512-jq4t3PJUpVRcveC53nnbEX35VyQI05x3tniwp26WFdm1dwaNUBHAi5awa/roBlwQxx1uRhwNSYeAi/aMbfiJCQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.17"
+          }
+        },
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@leafygreen-ui/text-input": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-6.0.2.tgz",
+      "integrity": "sha512-bnhhU3IRNQrrUZf2ri4TcIh1YW6VQpfumfxQVhqmTkQO7Ju1mG6KrcyHaakOAKyAHFunly/XBTaS/lfSGT+LcQ==",
+      "requires": {
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/interaction-ring": "^1.0.3",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/typography": "^8.0.1"
+      }
+    },
     "@leafygreen-ui/tokens": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-0.5.1.tgz",
@@ -592,6 +722,18 @@
         }
       }
     },
+    "@leafygreen-ui/typography": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-8.0.1.tgz",
+      "integrity": "sha512-H2ti9wrYumWeuNg0HBKc+ROec5J63oRxf9MFCqDBFv/zonz/Yg7xqYLq5lI4GDBLA9LjhrtoA5MX7ktX/1JTOA==",
+      "requires": {
+        "@leafygreen-ui/box": "^3.0.4",
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/tokens": "^0.5.1"
+      }
+    },
     "@mongodb-js/compass-deployment-awareness": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/compass-deployment-awareness/-/compass-deployment-awareness-10.1.0.tgz",
@@ -712,25 +854,30 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/react": {
       "version": "17.0.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
       "integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-is": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.0.tgz",
+      "integrity": "sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
-      "dev": true
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
     },
     "@vue/compiler-core": {
       "version": "3.0.11",
diff --git a/packages/compass-collections-ddl/package.json b/packages/compass-collections-ddl/package.json
index 1409dbc1c21..fcb39698fb1 100644
--- a/packages/compass-collections-ddl/package.json
+++ b/packages/compass-collections-ddl/package.json
@@ -146,6 +146,8 @@
   "dependencies": {
     "@leafygreen-ui/badge": "^4.0.3",
     "@leafygreen-ui/icon": "^11.0.0",
+    "@leafygreen-ui/select": "^3.0.1",
+    "@leafygreen-ui/text-input": "^6.0.2",
     "@leafygreen-ui/tooltip": "^6.2.1",
     "async": "^3.1.1",
     "lodash.assign": "^4.2.0",
diff --git a/packages/compass-collections-ddl/src/components/collation/collation.jsx b/packages/compass-collections-ddl/src/components/collation/collation.jsx
index 8c44f5c15ef..75430d77c69 100644
--- a/packages/compass-collections-ddl/src/components/collation/collation.jsx
+++ b/packages/compass-collections-ddl/src/components/collation/collation.jsx
@@ -51,11 +51,11 @@ class Collation extends PureComponent {
     const options = COLLATION_OPTIONS.map((element) => {
       return (
         <div key={element.field} className={classnames(styles['collation-field'])}>
-          <p className={classnames(styles['collation-label'])}>{element.label}</p>
+          <p className={classnames(styles['collation-label'])}>{element.field}</p>
           <Select
             value={this.props.collation[element.field]}
             name={element.field}
-            placeholder={`Select a ${element.field}`}
+            placeholder={'Select a value'}
             options={this.getDropdownFieldsSelect(element.values)}
             onChange={this.onChangeCollationOption.bind(this, element.field)}
             className={classnames(styles['collation-select'])}
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 47f88eb4249..9dd536fe7b5 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -1,10 +1,12 @@
 import classnames from 'classnames';
 import Collation from 'components/collation';
+import TimeSeries from 'components/time-series';
 import { TextButton } from 'hadron-react-buttons';
-import { ModalCheckbox, ModalInput, ModalStatusMessage } from 'hadron-react-components';
+import { ModalCheckbox, ModalStatusMessage } from 'hadron-react-components';
 import { createCollection } from 'modules/create-collection';
 import { changeCappedSize } from 'modules/create-collection/capped-size';
 import { changeCollationOption } from 'modules/create-collection/collation';
+import { changeTimeSeriesOption } from 'modules/create-collection/time-series';
 import { toggleIsCapped } from 'modules/create-collection/is-capped';
 import { toggleIsTimeSeries } from 'modules/create-collection/is-time-series';
 import { toggleIsCustomCollation } from 'modules/create-collection/is-custom-collation';
@@ -17,6 +19,7 @@ import React, { PureComponent } from 'react';
 import { Modal } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import styles from './create-collection-modal.less';
+import TextInput from '@leafygreen-ui/text-input';
 
 
 /**
@@ -54,6 +57,7 @@ class CreateCollectionModal extends PureComponent {
     changeCappedSize: PropTypes.func.isRequired,
     changeCollectionName: PropTypes.func.isRequired,
     changeCollationOption: PropTypes.func.isRequired,
+    changeTimeSeriesOption: PropTypes.func.isRequired,
     createCollection: PropTypes.func.isRequired,
     toggleIsCapped: PropTypes.func.isRequired,
     toggleIsCustomCollation: PropTypes.func.isRequired,
@@ -131,12 +135,14 @@ class CreateCollectionModal extends PureComponent {
   renderCappedSize() {
     if (this.props.isCapped) {
       return (
-        <div className={classnames(styles['create-collection-modal-is-capped-wrapper'])}>
-          <ModalInput
-            id="capped-size-value"
-            name="Maximum Size (Bytes)"
+        <div className="form-group">
+          <TextInput
+            label="size"
+            type="number"
+            description="Maximum size in bytes for the capped collection."
+            onChange={this.onCappedSizeChange}
             value={this.props.cappedSize}
-            onChangeHandler={this.onCappedSizeChange} />
+          />
         </div>
       );
     }
@@ -147,7 +153,8 @@ class CreateCollectionModal extends PureComponent {
     if (this.props.isTimeSeries) {
       return (
         <div className={classnames(styles['create-collection-modal-is-time-series-wrapper'])}>
-          Time Series!
+          <TimeSeries changeTimeSeriesOption={this.props.changeTimeSeriesOption}
+            timeSeries={this.props.collation}/>
         </div>
       );
     }
@@ -227,12 +234,15 @@ class CreateCollectionModal extends PureComponent {
             onSubmit={this.onFormSubmit}
             data-test-id="create-collection-modal">
 
-            <ModalInput
-              autoFocus
-              id="create-collection-name"
-              name="Collection Name"
-              value={this.props.name}
-              onChangeHandler={this.onNameChange} />
+            <div className="form-group">
+              <TextInput
+                id="create-collection-name"
+                autoFocus
+                label="Collection Name"
+                onChange={this.onNameChange}
+                value={this.props.name}
+              />
+            </div>
             <div className="form-group">
               {this.renderCappedSizeCheckbox()}
               {this.renderCustomCollationCheckbox()}
@@ -296,6 +306,7 @@ const MappedCreateCollectionModal = connect(
     changeCappedSize,
     changeCollectionName,
     changeCollationOption,
+    changeTimeSeriesOption,
     createCollection,
     openLink,
     toggleIsCapped,
diff --git a/packages/compass-collections-ddl/src/components/time-series/index.js b/packages/compass-collections-ddl/src/components/time-series/index.js
new file mode 100644
index 00000000000..1a551e9fcc7
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/index.js
@@ -0,0 +1,2 @@
+import TimeSeries from './time-series';
+export default TimeSeries;
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
new file mode 100644
index 00000000000..fb31852cf7a
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import TextInput from '@leafygreen-ui/text-input';
+
+import styles from './time-series.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.';
+
+const META_FIELD_INPUT_DESCRIPTION = 'The metaField is the designated field ' +
+  'for metadata.';
+
+const EXPIRE_AFTER_SECONDS_DESCRIPTION = 'The expireAfterSeconds field enables ' +
+  'automatic deletion of documents older than the specified number of seconds.';
+
+class Collation extends PureComponent {
+  static displayName = 'CollationComponent';
+
+  static propTypes = {
+    timeSeries: PropTypes.object.isRequired,
+    changeTimeSeriesOption: PropTypes.func.isRequired
+  }
+
+  onChangeTimeSeriesOption(field, value) {
+    this.props.changeTimeSeriesOption(field, value.value);
+  }
+
+  render() {
+    return (
+      <div className={classnames(styles.timeSeries)}>
+        <div className="form-group">
+          <TextInput
+            label="timeField"
+            description={TIME_FIELD_INPUT_DESCRIPTION}
+            onChange={event => {
+              this.props.changeTimeSeriesOption('timeField', event.target.value);
+            }}
+            value={this.props.timeSeries.timeField}
+          />
+        </div>
+
+        <div className="form-group">
+          <TextInput
+            label="metaField"
+            description={META_FIELD_INPUT_DESCRIPTION}
+            optional
+            onChange={event => {
+              this.props.changeTimeSeriesOption('metaField', event.target.value);
+            }}
+            value={this.props.timeSeries.metaField}
+          />
+        </div>
+
+        <div className="form-group">
+          <TextInput
+            label="expireAfterSeconds"
+            description={EXPIRE_AFTER_SECONDS_DESCRIPTION}
+            optional
+            type="number"
+            onChange={event => {
+              this.props.changeTimeSeriesOption(
+                'expireAfterSeconds',
+                event.target.value ?
+                  +event.target.value : null
+              );
+            }}
+            value={this.props.timeSeries.expireAfterSeconds}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Collation;
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.less b/packages/compass-collections-ddl/src/components/time-series/time-series.less
new file mode 100644
index 00000000000..990d2a48b81
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.less
@@ -0,0 +1,8 @@
+.timeSeries {
+  display: block;
+
+  :global(p) {
+      display: block;
+      margin: 0;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
new file mode 100644
index 00000000000..b913158fee8
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TimeSeries from 'components/time-series';
+import styles from './time-series.less';
+
+describe('TimeSeries [Component]', () => {
+  let component;
+  let changeTimeSeriesOptionSpy;
+
+  beforeEach(() => {
+    changeTimeSeriesOptionSpy = sinon.spy();
+    component = mount(
+      <TimeSeries timeSeries={{}} changeTimeSeriesOption={changeTimeSeriesOptionSpy} />
+    );
+  });
+
+  afterEach(() => {
+    changeTimeSeriesOptionSpy = null;
+    component = null;
+  });
+
+  it('renders the correct root classname', () => {
+    expect(component.find(`.${styles.timeSeries}`)).to.be.present();
+  });
+});
diff --git a/packages/compass-collections-ddl/src/constants/collation.js b/packages/compass-collections-ddl/src/constants/collation.js
index badad5d8006..8e3a5a67839 100644
--- a/packages/compass-collections-ddl/src/constants/collation.js
+++ b/packages/compass-collections-ddl/src/constants/collation.js
@@ -2,7 +2,6 @@ const LOADING_STATE = null;
 const COLLATION_OPTIONS = [
   {
     field: 'locale',
-    label: 'Locale',
     values: [
       {value: 'af', label: 'af - Afrikaans'},
       {value: 'sq', label: 'sq - Albanian'},
@@ -163,25 +162,21 @@ const COLLATION_OPTIONS = [
   {field: 'strength', label: 'Strength', values: [1, 2, 3, 4, 5]},
   {
     field: 'caseLevel',
-    label: 'Use Case-Level',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {field: 'caseFirst', label: 'Case First', values: ['upper', 'lower', 'off']},
   {
     field: 'numericOrdering',
-    label: 'Numeric Ordering',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {field: 'alternate', label: 'Alternate', values: ['non-ignorable', 'shifted']},
   {field: 'maxVariable', label: 'Max-Variable', values: ['punct', 'space']},
   {
     field: 'backwards',
-    label: 'Backwards',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {
     field: 'normalization',
-    label: 'Normalization',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   }
 ];
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.js b/packages/compass-collections-ddl/src/modules/create-collection/index.js
index 6d4297ce72a..54bf944b013 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.js
@@ -68,7 +68,8 @@ const reducer = combineReducers({
  * @returns {Object} The new state.
  */
 const rootReducer = (state, action) => {
-  const initialState = {
+  const resetState = {
+    ...state,
     cappedSize: CAPPED_SIZE_INITIAL_STATE,
     isCapped: IS_CAPPED_INITIAL_STATE,
     isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
@@ -83,10 +84,10 @@ const rootReducer = (state, action) => {
   };
 
   if (action.type === RESET) {
-    return initialState;
+    return resetState;
   } else if (action.type === OPEN) {
     return {
-      ...initialState,
+      ...resetState,
       isVisible: true,
       databaseName: action.databaseName
     };
@@ -121,26 +122,43 @@ export const open = (dbName) => ({
   databaseName: dbName
 });
 
-/**
- * The create collection action.
- *
- * @returns {Function} The thunk function.
- */
+
+function buildOptions(state) {
+  const cappedOptions = state.isCapped ? {
+    capped: true,
+    size: parseInt(state.cappedSize, 10)
+  } : {};
+
+  const collationOptions = state.isCustomCollation ? {
+    collation: state.collation
+  } : {};
+
+  const timeSeriesOptions = state.isTimeSeries ? {
+    timeseries: state.timeSeries
+  } : {};
+
+  return {
+    ...collationOptions,
+    ...cappedOptions,
+    ...timeSeriesOptions
+  };
+}
+
 export const createCollection = () => {
   return (dispatch, getState) => {
     const state = getState();
     const ds = state.dataService.dataService;
     const collectionName = state.name;
     const dbName = state.databaseName;
-    const coll = state.collation;
+    const namespace = `${dbName}.${collectionName}`;
 
     dispatch(clearError());
 
-    let options = state.isCapped ? { capped: true, size: parseInt(state.cappedSize, 10) } : {};
-    options = state.isCustomCollation ? { ...options, collation: coll } : options;
     try {
+      const options = buildOptions(state);
       dispatch(toggleIsRunning(true));
-      ds.createCollection(`${dbName}.${collectionName}`, options, (e) => {
+
+      ds.createCollection(namespace, options, (e) => {
         if (e) {
           return stopWithError(dispatch, e);
         }
@@ -152,3 +170,5 @@ export const createCollection = () => {
     }
   };
 };
+
+
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
index d813fb7b37e..9858d028339 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
@@ -11,6 +11,8 @@ describe('create collection module', () => {
           expect(reducer({ dataService: dataService }, reset())).to.deep.equal({
             cappedSize: '',
             collation: {},
+            isTimeSeries: false,
+            timeSeries: {},
             dataService: 'data-service',
             error: null,
             isCapped: false,

From 42fd87e686b9cba1fb9cda8cf63e8fc13f39bfd2 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 14:33:49 +0200
Subject: [PATCH 08/20] collection properties

---
 .../collection-properties.jsx                 | 92 +++++++++++++++++++
 .../collection-properties.less                | 11 +++
 .../collections-table/collections-table.jsx   | 86 +----------------
 .../collections-table/collections-table.less  | 17 ----
 .../collections-table/property-badge.jsx      |  9 +-
 .../collections-table/property-badge.less     |  4 +
 .../src/modules/collections.js                |  8 ++
 7 files changed, 125 insertions(+), 102 deletions(-)
 create mode 100644 packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx
 create mode 100644 packages/compass-collections-ddl/src/components/collections-table/collection-properties.less
 create mode 100644 packages/compass-collections-ddl/src/components/collections-table/property-badge.less

diff --git a/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx
new file mode 100644
index 00000000000..953ea18184d
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx
@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from './collection-properties.less';
+
+import {
+  PROPERTIES_CAPPED,
+  PROPERTIES_COLLATION,
+  PROPERTIES_READ_ONLY,
+  PROPERTIES_TIME_SERIES,
+  PROPERTIES_VIEW
+} from '../../modules/collections';
+
+import PropertyBadge from './property-badge';
+import Icon from '@leafygreen-ui/icon';
+
+export default class CollectionProperties extends PureComponent {
+  static propTypes = {
+    collection: PropTypes.shape({
+      Properties: PropTypes.array.isRequired,
+      _id: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  renderProperty = (property) => {
+    const { name, options } = property || {};
+
+    if (name === PROPERTIES_COLLATION) {
+      return (<PropertyBadge
+        label="Collation"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)}
+      />);
+    }
+
+    if (name === PROPERTIES_VIEW) {
+      return (<PropertyBadge
+        label="View"
+        icon={<Icon glyph="Visibility" />}
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_CAPPED) {
+      return (<PropertyBadge
+        label="Capped"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_TIME_SERIES) {
+      return (<PropertyBadge
+        label="Time-series"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_READ_ONLY) {
+      return (<PropertyBadge
+        label="Read-only"
+        variant="lightgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+  }
+
+  renderOptions(options) {
+    const entries = Object.entries(options || {});
+
+    if (!entries.length) {
+      return;
+    }
+
+    return (<div>{entries.map(
+      ([key, value]) => {
+        return <div key={key}><b>{key}</b>: {`${value}`}</div>;
+      }
+    )}</div>);
+  }
+
+  render() {
+    const properties = (this.props.collection.Properties || []);
+    const propertyElements = properties.map((property, i) => {
+      return (
+        <div key={`${this.props.collection._id}-prop-${i}`}
+          className={styles['collection-properties-property']}>
+          {this.renderProperty(property)}
+        </div>
+      );
+    });
+
+    return <div className={styles['collection-properties']}>{propertyElements}</div>;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less
new file mode 100644
index 00000000000..da9f984e330
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less
@@ -0,0 +1,11 @@
+.collection-properties {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  flex-wrap: wrap;
+
+  &-property {
+    display: inline-flex;
+    margin: 3px;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
index a5a6473ee83..3036965b542 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
@@ -3,15 +3,11 @@ import PropTypes from 'prop-types';
 import numeral from 'numeral';
 import assign from 'lodash.assign';
 import isNaN from 'lodash.isnan';
-import classnames from 'classnames';
 import { SortableTable } from 'hadron-react-components';
 import dropCollectionStore from 'stores/drop-collection';
-
 import styles from './collections-table.less';
-import { PROPERTIES_CAPPED, PROPERTIES_COLLATION, PROPERTIES_TIME_SERIES, PROPERTIES_VIEW } from '../../modules/collections';
-import PropertyBadge from './property-badge';
+import CollectionProperties from './collection-properties';
 
-import Icon from '@leafygreen-ui/icon';
 
 /**
  * The name constant.
@@ -52,23 +48,6 @@ const PROPS = 'Properties';
  * Dash constant.
  */
 const DASH = '-';
-
-/**
- * Collation option mappings.
- */
-const PROPERTY_OPTIONS = {
-  locale: 'Locale',
-  caseLevel: 'Case Level',
-  caseFirst: 'Case First',
-  strength: 'Strength',
-  numericOrdering: 'Numeric Ordering',
-  alternate: 'Alternate',
-  maxVariable: 'MaxVariable',
-  normalization: 'Normalization',
-  backwards: 'Backwards',
-  version: 'Version'
-};
-
 class CollectionsTable extends PureComponent {
   static displayName = 'CollectionsTableComponent';
 
@@ -115,21 +94,6 @@ class CollectionsTable extends PureComponent {
     this.props.showCollection(name);
   }
 
-  renderOptions(options) {
-    const knownOptions = Object.keys(options)
-      .filter((key) => PROPERTY_OPTIONS[key]);
-
-    if (!knownOptions.length) {
-      return;
-    }
-
-    return (<div>{knownOptions.map(
-      (key) => {
-        return <div key={key}><b>{PROPERTY_OPTIONS[key]}</b>: {`${options[key]}`}</div>;
-      }
-    )}</div>);
-  }
-
   /**
    * Render the collection link.
    *
@@ -148,7 +112,7 @@ class CollectionsTable extends PureComponent {
     return (
       <div>
         <a
-          className={classnames(styles['collections-table-link'])}
+          className={styles['collections-table-link']}
           onClick={this.onNameClicked.bind(this, collName)}>
           {collName}
         </a>
@@ -157,50 +121,6 @@ class CollectionsTable extends PureComponent {
     );
   }
 
-  renderProperty = (key, property) => {
-    const { name, options } = property || {};
-
-    if (name === PROPERTIES_COLLATION) {
-      return (<PropertyBadge
-        key={key}
-        label="Collation"
-        variant="darkgray"
-        tooltip={this.renderOptions(options)}
-      />);
-    }
-
-    if (name === PROPERTIES_VIEW) {
-      return (<PropertyBadge
-        key={key}
-        label="View"
-        icon={<Icon glyph="Visibility" />}
-        variant="darkgray"
-        tooltip={this.renderOptions(options)} />);
-    }
-
-    if (name === PROPERTIES_CAPPED) {
-      return (<PropertyBadge
-        key={key}
-        label="Capped"
-        variant="darkgray"
-        tooltip={this.renderOptions(options)} />);
-    }
-
-    if (name === PROPERTIES_TIME_SERIES) {
-      return (<PropertyBadge
-        key={key}
-        label="Time-Series"
-        variant="darkgray"
-        tooltip={this.renderOptions(options)} />);
-    }
-  }
-
-  renderProperties = (coll) => {
-    return (coll.Properties || []).map((property, i) => {
-      return this.renderProperty(`${coll._id}-prop-${i}`, property);
-    });
-  }
-
   /**
    * Render Collections Table component.
    *
@@ -219,7 +139,7 @@ class CollectionsTable extends PureComponent {
         [NUM_INDEX]: isNaN(coll[NUM_INDEX]) ? DASH : coll[NUM_INDEX],
         [TOT_INDEX_SIZE]: isNaN(coll[TOT_INDEX_SIZE]) ?
           DASH : numeral(coll[TOT_INDEX_SIZE]).format('0.0 b'),
-        [PROPS]: this.renderProperties(coll)
+        [PROPS]: <CollectionProperties collection={coll} />
       });
     });
 
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.less b/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
index e9c40c443fa..0a1e0af12f5 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
@@ -6,23 +6,6 @@
     cursor: pointer;
   }
 
-  &-property {
-    cursor: default;
-    color: #545383;
-    background-color: #E6E4ED;
-    font-size: 11px;
-    font-weight: bold;
-    border-radius: 20px;
-    padding: 3px 10px;
-    min-width: 30px;
-    margin-right: 15px;
-    white-space: nowrap;
-  }
-
-  &-tooltip {
-    text-transform: uppercase;
-  }
-
   &-view-on {
     display: block;
   }
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
index b8b1d09498c..7029006a168 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Badge from '@leafygreen-ui/badge';
 import Tooltip from '@leafygreen-ui/tooltip';
+import styles from './property-badge.less';
 
 export default class PropertyBadge extends PureComponent {
   static displayName = 'PropertyBadge';
@@ -15,7 +16,11 @@ export default class PropertyBadge extends PureComponent {
 
   renderBadge = () => {
     const space = this.props.icon ? (<span>&nbsp;</span>) : '';
-    return (<Badge variant={this.props.variant}>{this.props.icon}{space}{this.props.label}</Badge>);
+    return (
+      <div className={styles['property-badge']}>
+        <Badge variant={this.props.variant}>{this.props.icon}{space}{this.props.label}</Badge>
+      </div>
+    );
   }
 
   render() {
@@ -26,7 +31,7 @@ export default class PropertyBadge extends PureComponent {
     return (<Tooltip
       align="top"
       justify="start"
-      trigger={<span>{this.renderBadge()}</span>}
+      trigger={this.renderBadge()}
       triggerEvent="hover"
       darkMode
     >{this.props.tooltip}</Tooltip>);
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.less b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
new file mode 100644
index 00000000000..5a43b175284
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
@@ -0,0 +1,4 @@
+.property-badge {
+  white-space: nowrap;
+  display: inline-flex;
+}
diff --git a/packages/compass-collections-ddl/src/modules/collections.js b/packages/compass-collections-ddl/src/modules/collections.js
index ce017985976..bdcb64096c0 100644
--- a/packages/compass-collections-ddl/src/modules/collections.js
+++ b/packages/compass-collections-ddl/src/modules/collections.js
@@ -20,6 +20,7 @@ export const PROPERTIES_COLLATION = 'collation';
 export const PROPERTIES_TIME_SERIES = 'time-series';
 export const PROPERTIES_CAPPED = 'capped';
 export const PROPERTIES_VIEW = 'view';
+export const PROPERTIES_READ_ONLY = 'readonly';
 
 /**
  * The module prefix.
@@ -116,6 +117,13 @@ function getProperties(coll) {
     });
   }
 
+  if (coll.readonly) {
+    properties.push({
+      name: PROPERTIES_READ_ONLY,
+      options: {}
+    });
+  }
+
   return properties;
 }
 

From 800fbca12a42f424e18cf8fb0f59520afabdd00f Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 14:36:24 +0200
Subject: [PATCH 09/20] remove unnecessary classnames

---
 .../create-collection-modal.jsx                       | 11 +++++------
 .../src/components/time-series/time-series.jsx        |  3 +--
 .../src/components/time-series/time-series.less       |  2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 9dd536fe7b5..84b21971d86 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import Collation from 'components/collation';
 import TimeSeries from 'components/time-series';
 import { TextButton } from 'hadron-react-buttons';
@@ -152,7 +151,7 @@ class CreateCollectionModal extends PureComponent {
   renderTimeSeries() {
     if (this.props.isTimeSeries) {
       return (
-        <div className={classnames(styles['create-collection-modal-is-time-series-wrapper'])}>
+        <div className={styles['create-collection-modal-is-time-series-wrapper']}>
           <TimeSeries changeTimeSeriesOption={this.props.changeTimeSeriesOption}
             timeSeries={this.props.collation}/>
         </div>
@@ -178,7 +177,7 @@ class CreateCollectionModal extends PureComponent {
   renderCappedSizeCheckbox() {
     return (<div><ModalCheckbox
       name="Capped Collection"
-      titleClassName={classnames(styles['create-collection-modal-is-capped'])}
+      titleClassName={styles['create-collection-modal-is-capped']}
       checked={this.props.isCapped}
       helpUrl={HELP_URL_CAPPED}
       onClickHandler={this.onToggleIsCapped}
@@ -191,7 +190,7 @@ class CreateCollectionModal extends PureComponent {
     return (<div>
       <ModalCheckbox
         name="Time-Series"
-        titleClassName={classnames(styles['create-collection-time-series'])}
+        titleClassName={styles['create-collection-time-series']}
         checked={this.props.isTimeSeries}
         helpUrl={HELP_URL_TIME_SERIES}
         onClickHandler={this.onToggleIsTimeSeries}
@@ -203,7 +202,7 @@ class CreateCollectionModal extends PureComponent {
     return (<div>
       <ModalCheckbox
         name="Use Custom Collation"
-        titleClassName={classnames(styles['create-collection-modal-is-custom-collation'])}
+        titleClassName={styles['create-collection-modal-is-custom-collation']}
         checked={this.props.isCustomCollation}
         helpUrl={HELP_URL_COLLATION}
         onClickHandler={this.onToggleIsCustomCollation}
@@ -222,7 +221,7 @@ class CreateCollectionModal extends PureComponent {
         show={this.props.isVisible}
         backdrop="static"
         onHide={this.onHide}
-        dialogClassName={classnames(styles['create-collection-modal'])}>
+        dialogClassName={styles['create-collection-modal']}>
 
         <Modal.Header>
           <Modal.Title>Create Collection</Modal.Title>
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
index fb31852cf7a..084fd1db2f1 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import TextInput from '@leafygreen-ui/text-input';
 
 import styles from './time-series.less';
@@ -29,7 +28,7 @@ class Collation extends PureComponent {
 
   render() {
     return (
-      <div className={classnames(styles.timeSeries)}>
+      <div className={styles['time-series']}>
         <div className="form-group">
           <TextInput
             label="timeField"
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.less b/packages/compass-collections-ddl/src/components/time-series/time-series.less
index 990d2a48b81..da05f374fc6 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.less
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.less
@@ -1,4 +1,4 @@
-.timeSeries {
+.time-series {
   display: block;
 
   :global(p) {

From d8ebe317025782e71a1c598362e15a7e665c1727 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 15:15:32 +0200
Subject: [PATCH 10/20] add tests for properties

---
 .../components/time-series/time-series.jsx    |  2 +-
 .../time-series/time-series.spec.js           |  2 +-
 .../src/modules/collections.spec.js           | 45 +++++++++++++++++++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
index 084fd1db2f1..e9040f89975 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
@@ -15,7 +15,7 @@ const EXPIRE_AFTER_SECONDS_DESCRIPTION = 'The expireAfterSeconds field enables '
   'automatic deletion of documents older than the specified number of seconds.';
 
 class Collation extends PureComponent {
-  static displayName = 'CollationComponent';
+  static displayName = 'TimeSeriesComponent';
 
   static propTypes = {
     timeSeries: PropTypes.object.isRequired,
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
index b913158fee8..f0bb9a806d8 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
@@ -21,6 +21,6 @@ describe('TimeSeries [Component]', () => {
   });
 
   it('renders the correct root classname', () => {
-    expect(component.find(`.${styles.timeSeries}`)).to.be.present();
+    expect(component.find(`.${styles['time-series']}`)).to.be.present();
   });
 });
diff --git a/packages/compass-collections-ddl/src/modules/collections.spec.js b/packages/compass-collections-ddl/src/modules/collections.spec.js
index d4ed7cb2d5d..85820717ad9 100644
--- a/packages/compass-collections-ddl/src/modules/collections.spec.js
+++ b/packages/compass-collections-ddl/src/modules/collections.spec.js
@@ -93,6 +93,51 @@ describe('collections module', () => {
         to.deep.equal([ SPOTIFY_MAPPED ]);
     });
 
+    it('parses properties', () => {
+      const parseProperties = (coll) => {
+        return reducer(undefined, loadCollections([
+          coll
+        ]))[0].Properties;
+      };
+
+      expect(parseProperties({
+        name: 'coll1', readonly: true
+      })).to.deep.equal([
+        { name: 'readonly', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'timeseries'
+      })).to.deep.equal([
+        { name: 'time-series', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', capped: true,
+      })).to.deep.equal([
+        { name: 'capped', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', collation: { locale: 'se' }
+      })).to.deep.equal([
+        { name: 'collation', options: { locale: 'se' }}
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'view'
+      })).to.deep.equal([
+        { name: 'view', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'view', readonly: true
+      })).to.deep.equal([
+        { name: 'view', options: {} },
+        { name: 'readonly', options: {} }
+      ]);
+    });
+
     context('when an action is provided', () => {
       context('when the action is LOAD_COLLECTIONS', () => {
         const collections = [ SPOTIFY, SOUNDCLOUD, DEEZER ];

From 24fb5de582dce21ccd350eb11c41860324ede7a3 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 17:52:43 +0200
Subject: [PATCH 11/20] add tests for create collection

---
 .../src/components/toolbar/toolbar.spec.js    |   2 +
 .../src/modules/create-collection/index.js    |   1 -
 .../modules/create-collection/index.spec.js   | 187 ++++++++++++++++--
 .../src/stores/store.spec.js                  |   1 +
 4 files changed, 169 insertions(+), 22 deletions(-)

diff --git a/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js b/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
index badeb66d13c..1230ad0f9d3 100644
--- a/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
+++ b/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
@@ -15,6 +15,7 @@ describe('Toolbar [Component]', () => {
         <Toolbar
           isReadonly
           databaseName="test"
+          isDataLake={false}
           open={openSpy} />
       );
     });
@@ -43,6 +44,7 @@ describe('Toolbar [Component]', () => {
         <Toolbar
           isReadonly={false}
           databaseName="test"
+          isDataLake={false}
           open={openSpy} />
       );
     });
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.js b/packages/compass-collections-ddl/src/modules/create-collection/index.js
index 54bf944b013..4e7d08a9010 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.js
@@ -157,7 +157,6 @@ export const createCollection = () => {
     try {
       const options = buildOptions(state);
       dispatch(toggleIsRunning(true));
-
       ds.createCollection(namespace, options, (e) => {
         if (e) {
           return stopWithError(dispatch, e);
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
index 9858d028339..d9888fe3054 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
@@ -1,6 +1,20 @@
-import reducer from 'modules/create-collection';
+import sinon from 'sinon';
+import reducer, { createCollection as makeCreateCollection } from './index';
 import { reset } from 'modules/reset';
 
+import {
+  CLEAR_ERROR,
+  HANDLE_ERROR
+} from '../error';
+
+import {
+  TOGGLE_IS_RUNNING
+} from '../is-running';
+
+import {
+  RESET
+} from '../reset';
+
 describe('create collection module', () => {
   describe('#reducer', () => {
     context('when an action is provided', () => {
@@ -28,38 +42,169 @@ describe('create collection module', () => {
   });
 
   describe('#createCollection', () => {
-    context('when no error exists in the state', () => {
-      context('when the collection name is valid', () => {
-        context('when the collection contains no special options', () => {
-          context('when the create is a success', () => {
+    let appRegistryEmitSpy;
+    const hadronAppBkp = global.hadronApp;
 
-          });
+    beforeEach(() => {
+      appRegistryEmitSpy = sinon.spy();
+      global.hadronApp = {
+        appRegistry: {emit: appRegistryEmitSpy}
+      };
+    });
 
-          context('when the create errors', () => {
+    afterEach(() => {
+      global.hadronApp = hadronAppBkp;
+    });
 
-          });
-        });
+    const testCreateCollection = (createCollectionSpy, state) => {
+      const dispatched = [];
+      makeCreateCollection()(
+        (evt) => { dispatched.push(evt); },
+        () => ({
+          dataService: {
+            dataService: {
+              createCollection: createCollectionSpy
+            }
+          },
+          ...state
+        })
+      );
 
-        context('when the collection is capped', () => {
-          context('when the create is a success', () => {
+      return dispatched;
+    };
 
-          });
+    it('creates a simple collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
 
-          context('when the create errors', () => {
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1'
+      });
 
-          });
-        });
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {});
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
 
-        context('when the collection has a collation', () => {
-          context('when the create is a success', () => {
+    it('creates a capped collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
 
-          });
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isCapped: true,
+        cappedSize: '123'
+      });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        capped: true,
+        size: 123
+      });
 
-          context('when the create errors', () => {
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
 
-          });
-        });
+    it('creates a time-series collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isTimeSeries: true,
+        timeSeries: { timeField: 't' }
       });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        timeseries: { timeField: 't' }
+      });
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
+
+    it('creates a time-series collection with collation', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isCustomCollation: true,
+        collation: { locale: 'es' }
+      });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        collation: { locale: 'es' }
+      });
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
+
+    it('handles errors from data service', () => {
+      const err = new Error('error');
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(err)
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {});
+
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: TOGGLE_IS_RUNNING, isRunning: false },
+          { type: HANDLE_ERROR, error: err }
+        ]
+      );
+    });
+
+    it('handles synchronous exceptions', () => {
+      const err = new Error('error');
+      const createCollectionSpy = sinon.spy(
+        () => { throw err; }
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {});
+
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: TOGGLE_IS_RUNNING, isRunning: false },
+          { type: HANDLE_ERROR, error: err }
+        ]
+      );
     });
   });
 });
diff --git a/packages/compass-collections-ddl/src/stores/store.spec.js b/packages/compass-collections-ddl/src/stores/store.spec.js
index c4235a545c9..851b5f0ea6c 100644
--- a/packages/compass-collections-ddl/src/stores/store.spec.js
+++ b/packages/compass-collections-ddl/src/stores/store.spec.js
@@ -34,6 +34,7 @@ describe('DdlStore [Store]', () => {
 
     context('when the instance store triggers', () => {
       const coll = {
+        _id: 'coll1',
         name: 'spotify',
         document_count: 10,
         size: 200,

From 33428b75070ea56241b4f0c8fa3a1ac30a41915d Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 18:16:06 +0200
Subject: [PATCH 12/20] fix dev after rebase

---
 packages/compass-collections-ddl/config/webpack.dev.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/compass-collections-ddl/config/webpack.dev.config.js b/packages/compass-collections-ddl/config/webpack.dev.config.js
index 0caba4ff8ee..d8b99f247fe 100644
--- a/packages/compass-collections-ddl/config/webpack.dev.config.js
+++ b/packages/compass-collections-ddl/config/webpack.dev.config.js
@@ -93,6 +93,9 @@ const config = {
         .on('close', () => process.exit(0))
         .on('error', spawnError => console.error(spawnError)); // eslint-disable-line no-console
     }
+  },
+  externals: {
+    'mongodb-client-encryption': 'commonjs2 mongodb-client-encryption'
   }
 };
 

From c71669cc1269916996f7c88a4642aa044261b037 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 19:28:06 +0200
Subject: [PATCH 13/20] hide timeseries before 5.0

---
 .../electron/renderer/index.js                |  1 +
 packages/compass-collections-ddl/package.json |  2 +-
 .../create-collection-modal.jsx               | 12 ++++--
 .../src/modules/create-collection/index.js    | 32 +++++++++------
 .../src/modules/has-time-series-support.js    | 11 +++++
 .../modules/has-time-series-support.spec.js   | 19 +++++++++
 .../src/modules/index.js                      | 24 +++++------
 .../src/modules/server-version.js             | 41 +++++++++++++++++++
 .../src/modules/server-version.spec.js        | 29 +++++++++++++
 .../src/stores/create-collection.js           |  9 +++-
 10 files changed, 149 insertions(+), 31 deletions(-)
 create mode 100644 packages/compass-collections-ddl/src/modules/has-time-series-support.js
 create mode 100644 packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js
 create mode 100644 packages/compass-collections-ddl/src/modules/server-version.js
 create mode 100644 packages/compass-collections-ddl/src/modules/server-version.spec.js

diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index 353f835d0b4..c41055fffd2 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -98,6 +98,7 @@ dataService.connect((error, ds) => {
       }
     });
 
+    appRegistry.emit('server-version-changed', '4.0.0');
     appRegistry.emit('select-database', 'test');
   });
 });
diff --git a/packages/compass-collections-ddl/package.json b/packages/compass-collections-ddl/package.json
index fcb39698fb1..a5d89f63d79 100644
--- a/packages/compass-collections-ddl/package.json
+++ b/packages/compass-collections-ddl/package.json
@@ -128,7 +128,7 @@
     "reflux-state-mixin": "^0.8.0",
     "resolve": "^1.15.1",
     "rimraf": "^3.0.2",
-    "semver": "^5.4.1",
+    "semver": "^5.7.1",
     "shebang-loader": "0.0.1",
     "sinon": "^9.0.0",
     "sinon-chai": "^3.5.0",
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 84b21971d86..1ac7eadbbdf 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -19,7 +19,7 @@ import { Modal } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import styles from './create-collection-modal.less';
 import TextInput from '@leafygreen-ui/text-input';
-
+import hasTimeSeriesSupport from '../../modules/has-time-series-support';
 
 /**
  * The help icon for capped collections url.
@@ -62,7 +62,8 @@ class CreateCollectionModal extends PureComponent {
     toggleIsCustomCollation: PropTypes.func.isRequired,
     toggleIsTimeSeries: PropTypes.func.isRequired,
     toggleIsVisible: PropTypes.func.isRequired,
-    clearError: PropTypes.func
+    clearError: PropTypes.func,
+    serverVersion: PropTypes.string.isRequired
   }
 
   /**
@@ -187,6 +188,10 @@ class CreateCollectionModal extends PureComponent {
   }
 
   renderTimeSeriesCheckbox() {
+    if (!hasTimeSeriesSupport(this.props.serverVersion)) {
+      return;
+    }
+
     return (<div>
       <ModalCheckbox
         name="Time-Series"
@@ -292,7 +297,8 @@ const mapStateToProps = (state) => ({
   name: state.name,
   collation: state.collation,
   cappedSize: state.cappedSize,
-  error: state.error
+  error: state.error,
+  serverVersion: state.serverVersion
 });
 
 /**
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.js b/packages/compass-collections-ddl/src/modules/create-collection/index.js
index 4e7d08a9010..63723aeaf98 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.js
@@ -1,40 +1,44 @@
 import { combineReducers } from 'redux';
-import dataService from 'modules/data-service';
+import dataService from '../data-service';
+import serverVersion from '../server-version';
 import cappedSize, {
   INITIAL_STATE as CAPPED_SIZE_INITIAL_STATE
-} from 'modules/create-collection/capped-size';
+} from '../create-collection/capped-size';
 import isCapped, {
   INITIAL_STATE as IS_CAPPED_INITIAL_STATE
-} from 'modules/create-collection/is-capped';
+} from '../create-collection/is-capped';
 import isCustomCollation, {
   INITIAL_STATE as IS_CUSTOM_COLLATION_INITIAL_STATE
-} from 'modules/create-collection/is-custom-collation';
+} from '../create-collection/is-custom-collation';
 import isTimeSeries, {
   INITIAL_STATE as IS_TIME_SERIES_INITIAL_STATE
-} from 'modules/create-collection/is-time-series';
+} from '../create-collection/is-time-series';
 import isRunning, {
   toggleIsRunning,
   INITIAL_STATE as IS_RUNNING_INITIAL_STATE
-} from 'modules/is-running';
+} from '../is-running';
 import isVisible, {
   INITIAL_STATE as IS_VISIBLE_INITIAL_STATE
-} from 'modules/is-visible';
+} from '../is-visible';
 import collation, {
   INITIAL_STATE as COLLATION_INITIAL_STATE
-} from 'modules/create-collection/collation';
+} from '../create-collection/collation';
 import timeSeries, {
   INITIAL_STATE as TIME_SERIES_INITIAL_STATE
-} from 'modules/create-collection/time-series';
+} from '../create-collection/time-series';
 import name, {
   INITIAL_STATE as NAME_INITIAL_STATE
-} from 'modules/create-collection/name';
+} from '../create-collection/name';
 import databaseName, {
   INITIAL_STATE as DATABASE_NAME_INITIAL_STATE
-} from 'modules/database-name';
+} from '../database-name';
 import error, {
   clearError, handleError, INITIAL_STATE as ERROR_INITIAL_STATE
-} from 'modules/error';
-import { reset, RESET } from 'modules/reset';
+} from '../error';
+import { reset, RESET } from '../reset';
+
+import createDebug from 'debug';
+const debug = createDebug('compass-collections-ddl:create-collection');
 
 /**
  * Open action name.
@@ -56,6 +60,7 @@ const reducer = combineReducers({
   error,
   collation,
   timeSeries,
+  serverVersion,
   dataService
 });
 
@@ -106,6 +111,7 @@ export default rootReducer;
  * @return {Object} The result.
  */
 const stopWithError = (dispatch, err) => {
+  debug('create collection failed', err);
   dispatch(toggleIsRunning(false));
   return dispatch(handleError(err));
 };
diff --git a/packages/compass-collections-ddl/src/modules/has-time-series-support.js b/packages/compass-collections-ddl/src/modules/has-time-series-support.js
new file mode 100644
index 00000000000..e1311c313da
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/has-time-series-support.js
@@ -0,0 +1,11 @@
+import semver from 'semver';
+
+const MIN_TIME_SERIES_SERVER_VERSION = '5.0.0-alpha0';
+
+export default function hasTimeSeriesSupport(serverVersion) {
+  try {
+    return semver.gte(serverVersion, MIN_TIME_SERIES_SERVER_VERSION);
+  } catch (e) {
+    return true;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js b/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js
new file mode 100644
index 00000000000..02f9d60ab6b
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js
@@ -0,0 +1,19 @@
+import hasTimeSeriesSupport from './has-time-series-support';
+
+describe('hasTimeSeriesSupport', () => {
+  describe('returns false for < 5.0', () => {
+    expect(hasTimeSeriesSupport('5.0.0')).to.be.true;
+  });
+
+  describe('returns true for >= 5.0', () => {
+    expect(hasTimeSeriesSupport('5.0.0')).to.be.true;
+    expect(hasTimeSeriesSupport('5.0.0-alpha0-277-g02d6940')).to.be.true;
+  });
+
+  describe('returns true for invalid versions', () => {
+    expect(hasTimeSeriesSupport('')).to.be.true;
+    expect(hasTimeSeriesSupport('notasemver')).to.be.true;
+    expect(hasTimeSeriesSupport(undefined)).to.be.true;
+    expect(hasTimeSeriesSupport(null)).to.be.true;
+  });
+});
diff --git a/packages/compass-collections-ddl/src/modules/index.js b/packages/compass-collections-ddl/src/modules/index.js
index faa946ccac7..4422252e27d 100644
--- a/packages/compass-collections-ddl/src/modules/index.js
+++ b/packages/compass-collections-ddl/src/modules/index.js
@@ -1,34 +1,34 @@
 import { combineReducers } from 'redux';
-import appRegistry from 'modules/app-registry';
-import dataService from 'modules/data-service';
+import appRegistry from './app-registry';
+import dataService from './data-service';
 import columns, {
   INITIAL_STATE as COLUMNS_INITIAL_STATE
-} from 'modules/columns';
+} from './columns';
 import collections, {
   INITIAL_STATE as COLLECTIONS_INITIAL_STATE
-} from 'modules/collections';
+} from './collections';
 import databases, {
   INITIAL_STATE as DATABASES_INITIAL_STATE
-} from 'modules/databases';
+} from './databases';
 import databaseName, {
   INITIAL_STATE as DATABASE_NAME_INITIAL_STATE
-} from 'modules/database-name';
+} from './database-name';
 import isReadonly, {
   INITIAL_STATE as READONLY_INITIAL_STATE
-} from 'modules/is-readonly';
+} from './is-readonly';
 import isWritable, {
   INITIAL_STATE as WRITABLE_INITIAL_STATE
-} from 'modules/is-writable';
+} from './is-writable';
 import sortColumn, {
   INITIAL_STATE as SORT_COLUMN_INITIAL_STATE
-} from 'modules/sort-column';
+} from './sort-column';
 import sortOrder, {
   INITIAL_STATE as SORT_ORDER_INITIAL_STATE
-} from 'modules/sort-order';
+} from './sort-order';
 import isDataLake, {
   INITIAL_STATE as DATA_LAKE_INITIAL_STATE
-} from 'modules/is-data-lake';
-import { RESET } from 'modules/reset';
+} from './is-data-lake';
+import { RESET } from './reset';
 
 /**
  * The main reducer.
diff --git a/packages/compass-collections-ddl/src/modules/server-version.js b/packages/compass-collections-ddl/src/modules/server-version.js
new file mode 100644
index 00000000000..581853b40eb
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/server-version.js
@@ -0,0 +1,41 @@
+/**
+ * The prefix.
+ */
+const PREFIX = 'collections-ddl';
+
+/**
+  * Server version changed action.
+  */
+export const SERVER_VERSION_CHANGED = `${PREFIX}/server-version/SERVER_VERSION_CHANGED`;
+
+/**
+  * The initial state.
+  */
+export const INITIAL_STATE = '4.0.0';
+
+/**
+  * Reducer function for handle state changes to server version.
+  *
+  * @param {String} state - The version state.
+  * @param {Object} action - The action.
+  *
+  * @returns {String} The new state.
+  */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === SERVER_VERSION_CHANGED) {
+    return action.version || state;
+  }
+  return state;
+}
+
+/**
+  * Action creator for server version changed events.
+  *
+  * @param {String} version - The version value.
+  *
+  * @returns {Object} The server version changed action.
+  */
+export const serverVersionChanged = (version) => ({
+  type: SERVER_VERSION_CHANGED,
+  version: version
+});
diff --git a/packages/compass-collections-ddl/src/modules/server-version.spec.js b/packages/compass-collections-ddl/src/modules/server-version.spec.js
new file mode 100644
index 00000000000..40082b4a64c
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/server-version.spec.js
@@ -0,0 +1,29 @@
+import reducer, {
+  serverVersionChanged,
+  SERVER_VERSION_CHANGED
+} from './server-version';
+
+describe('server version module', () => {
+  describe('#serverVersionChanged', () => {
+    it('returns the SERVER_VERSION_CHANGED action', () => {
+      expect(serverVersionChanged('3.0.0')).to.deep.equal({
+        type: SERVER_VERSION_CHANGED,
+        version: '3.0.0'
+      });
+    });
+  });
+
+  describe('#reducer', () => {
+    context('when the action is not server version changed', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, { type: 'test' })).to.equal('4.0.0');
+      });
+    });
+
+    context('when the action is server version changed', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, serverVersionChanged('3.0.0'))).to.equal('3.0.0');
+      });
+    });
+  });
+});
diff --git a/packages/compass-collections-ddl/src/stores/create-collection.js b/packages/compass-collections-ddl/src/stores/create-collection.js
index 43441ca66a2..5cb34df9172 100644
--- a/packages/compass-collections-ddl/src/stores/create-collection.js
+++ b/packages/compass-collections-ddl/src/stores/create-collection.js
@@ -1,7 +1,8 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import { dataServiceConnected } from 'modules/data-service';
-import reducer, { open } from 'modules/create-collection';
+import { dataServiceConnected } from '../modules/data-service';
+import { serverVersionChanged } from '../modules/server-version';
+import reducer, { open } from '../modules/create-collection';
 
 const store = createStore(reducer, applyMiddleware(thunk));
 
@@ -16,6 +17,10 @@ store.onActivated = (appRegistry) => {
     store.dispatch(dataServiceConnected(error, dataService));
   });
 
+  appRegistry.on('server-version-changed', (version) => {
+    store.dispatch(serverVersionChanged(version));
+  });
+
   /**
    * When needing to create a collection from elsewhere, the app registry
    * event is emitted.

From 02aece0b1f95685dcd5e07e934cfe6d68ebed178 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 19:43:47 +0200
Subject: [PATCH 14/20] get actual server version in dev

---
 .../electron/renderer/index.js                      | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index c41055fffd2..d28ab51a384 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import app from 'hadron-app';
@@ -84,7 +85,6 @@ dataService.connect((error, ds) => {
     });
 
     if (err) {
-      // eslint-disable-next-line no-console
       console.log(err);
       process.exit(1);
     }
@@ -98,7 +98,16 @@ dataService.connect((error, ds) => {
       }
     });
 
-    appRegistry.emit('server-version-changed', '4.0.0');
+
+    dataService.client.client.db('admin').command({buildinfo: 1}, (buildInfoError, info) => {
+      if (buildInfoError) {
+        console.log(buildInfoError);
+        return;
+      }
+
+      appRegistry.emit('server-version-changed', info.version);
+    });
+
     appRegistry.emit('select-database', 'test');
   });
 });

From d0c0518383b3cff9bbc6a0cd8e46bcf4cf33bd33 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 20:00:44 +0200
Subject: [PATCH 15/20] allow timeseries as type in sidebar-collection

---
 .../src/components/sidebar-collection/sidebar-collection.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 fc63d1088ea..6bff98d33d5 100644
--- a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
@@ -23,7 +23,7 @@ class SidebarCollection extends PureComponent {
     sourcePipeline: PropTypes.array,
     pipeline: PropTypes.any, // undefined or array if view
     collections: PropTypes.array.isRequired,
-    type: PropTypes.oneOf(['collection', 'view']),
+    type: PropTypes.string,
     isDataLake: PropTypes.bool.isRequired
   };
 

From a06e1a21f0077290a63cf98caa6ac569a3ca859c Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 21:33:22 +0200
Subject: [PATCH 16/20] fix wrong load action

---
 .../compass-collections-ddl/src/modules/collections.js    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/compass-collections-ddl/src/modules/collections.js b/packages/compass-collections-ddl/src/modules/collections.js
index bdcb64096c0..25c88dd70ec 100644
--- a/packages/compass-collections-ddl/src/modules/collections.js
+++ b/packages/compass-collections-ddl/src/modules/collections.js
@@ -69,10 +69,6 @@ export default function reducer(state = INITIAL_STATE, action) {
   return state;
 }
 
-function filterOutSystemCollections(collections) {
-  return collections.filter(({ name }) => name && !name.startsWith('system.'));
-}
-
 /**
  * Sort the collection list by column and order.
  *
@@ -135,7 +131,7 @@ function getProperties(coll) {
  * @return {Array} The mapped collections for the UI.
  */
 export const load = (collections) => {
-  return filterOutSystemCollections(collections)
+  return collections
     .map((coll) => {
       return zipObject(EXTRA_COLUMNS, [
         coll.name, // Collection Name
@@ -164,7 +160,7 @@ export const load = (collections) => {
  */
 export const loadCollections = (collections) => ({
   type: LOAD_COLLECTIONS,
-  collections: filterOutSystemCollections(collections)
+  collections: collections
 });
 
 /**

From a126ab15ac8d8b5eee2abfa22638e8e4033a82f0 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 21:38:37 +0200
Subject: [PATCH 17/20] filter systems collections in dev

---
 .../compass-collections-ddl/electron/renderer/index.js    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index d28ab51a384..286670a22a6 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -79,9 +79,11 @@ dataService.connect((error, ds) => {
   dataService.instance({}, (err, data) => {
     const dbs = data.databases;
     dbs.forEach((db) => {
-      db.collections = db.collections.map((collection) => {
-        return new CollectionModel(collection);
-      });
+      db.collections = db.collections
+        .filter(({ name }) => name && !name.startsWith('system.'))
+        .map((collection) => {
+          return new CollectionModel(collection);
+        });
     });
 
     if (err) {

From 70fa08744c9fe5a774a83aaaf0f8fb580011edbd Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Wed, 19 May 2021 22:12:48 +0200
Subject: [PATCH 18/20] remove unused dependency

---
 .../compass-collections-ddl/package-lock.json | 106 +-----------------
 packages/compass-collections-ddl/package.json |   1 -
 2 files changed, 5 insertions(+), 102 deletions(-)

diff --git a/packages/compass-collections-ddl/package-lock.json b/packages/compass-collections-ddl/package-lock.json
index 77e89e0738f..42855430b03 100644
--- a/packages/compass-collections-ddl/package-lock.json
+++ b/packages/compass-collections-ddl/package-lock.json
@@ -458,19 +458,6 @@
         }
       }
     },
-    "@leafygreen-ui/button": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/button/-/button-12.0.2.tgz",
-      "integrity": "sha512-PGo//TaHFLsm/2MM49woCfYXGyE3M2YQ6p12n3wNTW2YyxtQBNoL3/51VVQi7/rnrrv4ynMfDdSWQsRq9W6fww==",
-      "requires": {
-        "@leafygreen-ui/box": "^3.0.4",
-        "@leafygreen-ui/emotion": "^3.0.1",
-        "@leafygreen-ui/lib": "^7.0.0",
-        "@leafygreen-ui/palette": "^3.2.1",
-        "@leafygreen-ui/ripple": "^1.1.1",
-        "@leafygreen-ui/tokens": "^0.5.1"
-      }
-    },
     "@leafygreen-ui/emotion": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-3.0.1.tgz",
@@ -603,84 +590,6 @@
         "@leafygreen-ui/lib": "^7.0.0"
       }
     },
-    "@leafygreen-ui/ripple": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/ripple/-/ripple-1.1.1.tgz",
-      "integrity": "sha512-BfAUwDHS1nF5LRH8zXcRJWlWCkUwSUyrjwm1XSQhsF57YM5A6caOOZCMOrXVv5UELzGxrIX9b9MYr0qaHqNt7w==",
-      "requires": {
-        "@leafygreen-ui/palette": "^3.2.1",
-        "polished": "^4.1.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.0",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
-          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "polished": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.2.tgz",
-          "integrity": "sha512-jq4t3PJUpVRcveC53nnbEX35VyQI05x3tniwp26WFdm1dwaNUBHAi5awa/roBlwQxx1uRhwNSYeAi/aMbfiJCQ==",
-          "requires": {
-            "@babel/runtime": "^7.13.17"
-          }
-        },
-        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-        }
-      }
-    },
-    "@leafygreen-ui/select": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/select/-/select-3.0.1.tgz",
-      "integrity": "sha512-3DQ8WgYsMQXL1IljIofHXmOf4aWl/vCuzRqxR4Xsh1/RUADz8R8me5DDSOJp2ezl9zB8JmbntHSH/dbz/tJmXQ==",
-      "requires": {
-        "@leafygreen-ui/button": "^12.0.1",
-        "@leafygreen-ui/emotion": "^3.0.1",
-        "@leafygreen-ui/hooks": "^6.0.0",
-        "@leafygreen-ui/icon": "^11.0.0",
-        "@leafygreen-ui/lib": "^7.0.0",
-        "@leafygreen-ui/palette": "^3.2.1",
-        "@leafygreen-ui/popover": "^7.2.0",
-        "@leafygreen-ui/tokens": "0.5.1",
-        "@types/react-is": "^17.0.0",
-        "polished": "^4.0.3",
-        "react-is": "^17.0.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.0",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
-          "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "polished": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.2.tgz",
-          "integrity": "sha512-jq4t3PJUpVRcveC53nnbEX35VyQI05x3tniwp26WFdm1dwaNUBHAi5awa/roBlwQxx1uRhwNSYeAi/aMbfiJCQ==",
-          "requires": {
-            "@babel/runtime": "^7.13.17"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        },
-        "regenerator-runtime": {
-          "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-        }
-      }
-    },
     "@leafygreen-ui/text-input": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-6.0.2.tgz",
@@ -854,30 +763,25 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
     },
     "@types/react": {
       "version": "17.0.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.4.tgz",
       "integrity": "sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==",
+      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "@types/react-is": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.0.tgz",
-      "integrity": "sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/scheduler": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
-      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
+      "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==",
+      "dev": true
     },
     "@vue/compiler-core": {
       "version": "3.0.11",
diff --git a/packages/compass-collections-ddl/package.json b/packages/compass-collections-ddl/package.json
index a5d89f63d79..64d63bd83e4 100644
--- a/packages/compass-collections-ddl/package.json
+++ b/packages/compass-collections-ddl/package.json
@@ -146,7 +146,6 @@
   "dependencies": {
     "@leafygreen-ui/badge": "^4.0.3",
     "@leafygreen-ui/icon": "^11.0.0",
-    "@leafygreen-ui/select": "^3.0.1",
     "@leafygreen-ui/text-input": "^6.0.2",
     "@leafygreen-ui/tooltip": "^6.2.1",
     "async": "^3.1.1",

From 380494b874e32a72b850f21bcc5738ec888590a0 Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Thu, 20 May 2021 09:17:22 +0200
Subject: [PATCH 19/20] remove invalid test

---
 .../src/modules/collections.spec.js               | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/packages/compass-collections-ddl/src/modules/collections.spec.js b/packages/compass-collections-ddl/src/modules/collections.spec.js
index 85820717ad9..7b95098a29d 100644
--- a/packages/compass-collections-ddl/src/modules/collections.spec.js
+++ b/packages/compass-collections-ddl/src/modules/collections.spec.js
@@ -30,15 +30,6 @@ const DEEZER = {
   collation: { locale: 'us' }
 };
 
-const SYSTEM = {
-  name: 'system.coll1',
-  document_count: 5,
-  size: 20,
-  index_count: 3,
-  index_size: 1,
-  collation: { locale: 'us' }
-};
-
 const SPOTIFY_MAPPED = {
   'Collection Name': 'spotify',
   'Documents': 10,
@@ -87,12 +78,6 @@ const DEEZER_MAPPED = {
 
 describe('collections module', () => {
   describe('#reducer', () => {
-    it('filters system collections out', () => {
-      const collections = [ SPOTIFY, SYSTEM ];
-      expect(reducer(undefined, loadCollections(collections))).
-        to.deep.equal([ SPOTIFY_MAPPED ]);
-    });
-
     it('parses properties', () => {
       const parseProperties = (coll) => {
         return reducer(undefined, loadCollections([

From 2784094efaf39d0cd32885c9cfafe0c73a6b2f6a Mon Sep 17 00:00:00 2001
From: mcasimir <maurizio.cas@gmail.com>
Date: Fri, 21 May 2021 11:29:45 +0200
Subject: [PATCH 20/20] remove unused property

---
 .../create-collection-modal/create-collection-modal.jsx   | 3 +--
 .../src/components/time-series/time-series.jsx            | 8 ++------
 .../src/components/time-series/time-series.spec.js        | 2 +-
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 1ac7eadbbdf..bad15efe14f 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -153,8 +153,7 @@ class CreateCollectionModal extends PureComponent {
     if (this.props.isTimeSeries) {
       return (
         <div className={styles['create-collection-modal-is-time-series-wrapper']}>
-          <TimeSeries changeTimeSeriesOption={this.props.changeTimeSeriesOption}
-            timeSeries={this.props.collation}/>
+          <TimeSeries changeTimeSeriesOption={this.props.changeTimeSeriesOption} />
         </div>
       );
     }
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
index e9040f89975..61bd98ccc1c 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
@@ -14,11 +14,10 @@ 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.';
 
-class Collation extends PureComponent {
+class TimeSeries extends PureComponent {
   static displayName = 'TimeSeriesComponent';
 
   static propTypes = {
-    timeSeries: PropTypes.object.isRequired,
     changeTimeSeriesOption: PropTypes.func.isRequired
   }
 
@@ -36,7 +35,6 @@ class Collation extends PureComponent {
             onChange={event => {
               this.props.changeTimeSeriesOption('timeField', event.target.value);
             }}
-            value={this.props.timeSeries.timeField}
           />
         </div>
 
@@ -48,7 +46,6 @@ class Collation extends PureComponent {
             onChange={event => {
               this.props.changeTimeSeriesOption('metaField', event.target.value);
             }}
-            value={this.props.timeSeries.metaField}
           />
         </div>
 
@@ -65,7 +62,6 @@ class Collation extends PureComponent {
                   +event.target.value : null
               );
             }}
-            value={this.props.timeSeries.expireAfterSeconds}
           />
         </div>
       </div>
@@ -73,4 +69,4 @@ class Collation extends PureComponent {
   }
 }
 
-export default Collation;
+export default TimeSeries;
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
index f0bb9a806d8..97871b151dc 100644
--- a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
@@ -11,7 +11,7 @@ describe('TimeSeries [Component]', () => {
   beforeEach(() => {
     changeTimeSeriesOptionSpy = sinon.spy();
     component = mount(
-      <TimeSeries timeSeries={{}} changeTimeSeriesOption={changeTimeSeriesOptionSpy} />
+      <TimeSeries changeTimeSeriesOption={changeTimeSeriesOptionSpy} />
     );
   });