From 01a633abc670fb6ec33b36e71f8c0c1a4e3ce0ae Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Mon, 27 Jun 2022 14:24:45 +0200
Subject: [PATCH 1/7] fix: align elements on the create collection modal
 COMPASS-5921

---
 packages/compass-sidebar/.gitignore            | 13 +++++++++++++
 .../collation-fields/collation-fields.jsx      | 15 +++++++++++----
 .../collation-fields.module.less               |  7 -------
 .../capped-collection-fields.jsx               |  6 ++++++
 .../collection-fields/time-series-fields.jsx   | 18 ++++++++++++++++--
 .../time-series-fields.module.less             |  7 -------
 6 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 packages/compass-sidebar/.gitignore
 delete mode 100644 packages/databases-collections/src/components/collation-fields/collation-fields.module.less
 delete mode 100644 packages/databases-collections/src/components/collection-fields/time-series-fields.module.less

diff --git a/packages/compass-sidebar/.gitignore b/packages/compass-sidebar/.gitignore
new file mode 100644
index 00000000000..8b1c9433382
--- /dev/null
+++ b/packages/compass-sidebar/.gitignore
@@ -0,0 +1,13 @@
+.DS_Store
+npm-debug.log
+node_modules/
+lib/
+lib-cov
+coverage
+.lock-wscript
+.idea/
+*.iml
+.nvmrc
+.nyc_output
+*.swp
+src/assets/fonts/akzid*
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
index 373531ecaf7..b886a3f30c6 100644
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
@@ -1,13 +1,20 @@
+import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
-import _ from 'lodash';
+import { spacing, css } from '@mongodb-js/compass-components';
+
+const optionsSelectDropdownStyles = css({
+  paddingLeft: spacing[4],
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 import COLLATION_OPTIONS from '../../constants/collation';
 import FieldSet from '../field-set/field-set';
 
-import styles from './collation-fields.module.less';
-
 function CollationOptions(values) {
   const unifiedValues = values.map((elem) => ({
     value: (typeof elem === 'object') ? elem.value : elem,
@@ -57,7 +64,7 @@ function CollationFields({
       <FieldSet key={element.field}>
         <Select
           id={`collation-field-${element.field}`}
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label={element.field}
           name={element.field}
           placeholder={`Select a value${
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less b/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file
diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
index 54396b21807..08e262042f0 100644
--- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 import FieldSet from '../field-set/field-set';
 
 const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections/';
 
+const maximumSizeStyles = css({
+  paddingLeft: spacing[4]
+});
+
 function CappedCollectionFields({
   cappedSize,
   isCapped,
@@ -28,6 +33,7 @@ function CappedCollectionFields({
     >
       <FieldSet>
         <TextInput
+          className={maximumSizeStyles}
           value={cappedSize}
           label="size"
           data-testid="capped-size"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
index 22652c3ab92..9ea7d09415d 100644
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -1,11 +1,22 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
-import styles from './time-series-fields.module.less';
+const optionsInputStyles = css({
+  paddingLeft: spacing[4]
+});
+
+const optionsSelectDropdownStyles = css({
+  paddingLeft: spacing[4],
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
   'as timeField for the time-series collection. ' +
@@ -65,6 +76,7 @@ function TimeSeriesFields({
     >
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           value={timeField}
           label="timeField"
           name="timeSeries.timeField"
@@ -77,6 +89,7 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           label="metaField"
           name="timeSeries.metaField"
           description={META_FIELD_INPUT_DESCRIPTION}
@@ -90,7 +103,7 @@ function TimeSeriesFields({
       <FieldSet>
         <Select
           id="timeSeries-granularity"
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label="granularity"
           name="timeSeries.granularity"
           placeholder="Select a value [optional]"
@@ -113,6 +126,7 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           value={expireAfterSeconds}
           label="expireAfterSeconds"
           name="expireAfterSeconds"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less b/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file

From 3630de88a4fefdc8695ff2af7644fd7f5a59c6b4 Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 11:43:40 +0200
Subject: [PATCH 2/7] fix: align text to the baseline

---
 .../src/components/accordion.tsx              |  15 ++-
 packages/compass-sidebar/.mocharc.js          |   6 +-
 .../csfle-connection-modal.jsx                | 108 ++++++++++--------
 .../components/csfle-marker/csfle-marker.jsx  |  18 ++-
 .../favorite-button/favorite-button.jsx       |  34 +++---
 .../favorite-button/favorite-button.spec.jsx  |  14 ++-
 .../non-genuine-warning-modal.jsx             |  41 +++----
 .../non-genuine-warning-modal.module.less     |   4 +-
 .../non-genuine-warning-modal.spec.jsx        |  16 ++-
 .../non-genuine-warning-pill.jsx              |   6 +-
 .../non-genuine-warning-pill.module.less      |   6 +-
 .../non-genuine-warning-pill.spec.jsx         |  27 ++++-
 .../sidebar-databases-navigation/index.js     |   2 +-
 .../sidebar-instance-details.jsx              |   4 +-
 .../sidebar-instance-details.module.less      |   2 +-
 .../sidebar-instance-details.spec.jsx         |  15 ++-
 .../sidebar-instance-stats.jsx                |  50 ++++----
 .../sidebar-instance-stats.module.less        |   2 +-
 .../sidebar-instance-stats.spec.jsx           |  28 +++--
 .../sidebar-instance/sidebar-instance.jsx     |  37 +++---
 .../sidebar-title/sidebar-title.jsx           |  54 ++++-----
 .../sidebar-title/sidebar-title.module.less   |   2 +-
 .../components/sidebar/navigation-items.jsx   |   6 +-
 .../src/components/sidebar/sidebar.jsx        |  94 +++++++++------
 .../components/sidebar/sidebar.module.less    |  13 ++-
 .../src/constants/sidebar-constants.js        |   2 +-
 .../src/modules/collection.spec.js            |  20 ++--
 .../src/modules/connection-info.js            |  94 ++++++++-------
 .../src/modules/connection-info.spec.js       |  75 ++++++------
 .../compass-sidebar/src/modules/databases.js  |  13 +--
 .../src/modules/databases.spec.js             |  61 +++++-----
 .../src/modules/description.js                |   2 +-
 .../src/modules/description.spec.js           |   8 +-
 .../src/modules/details-plugins.js            |   2 +-
 .../src/modules/details-plugins.spec.js       |  20 ++--
 packages/compass-sidebar/src/modules/index.js |  26 ++---
 .../compass-sidebar/src/modules/instance.js   |   2 +-
 .../src/modules/instance.spec.js              |   4 +-
 .../src/modules/is-data-lake.js               |   2 +-
 .../src/modules/is-data-lake.spec.js          |   6 +-
 .../src/modules/is-details-expanded.js        |   5 +-
 .../src/modules/is-details-expanded.spec.js   |   8 +-
 .../src/modules/is-genuine-mongodb-visible.js |   2 +-
 .../is-genuine-mongodb-visible.spec.js        |   8 +-
 .../src/modules/is-genuine-mongodb.js         |   5 +-
 .../src/modules/is-genuine-mongodb.spec.js    |   4 +-
 .../src/modules/is-writable.js                |   2 +-
 .../src/modules/is-writable.spec.js           |   4 +-
 packages/compass-sidebar/src/modules/reset.js |   2 +-
 packages/compass-sidebar/src/plugin.jsx       |   1 -
 packages/compass-sidebar/src/stores/store.js  |  10 +-
 .../compass-sidebar/src/stores/store.spec.js  |  37 +++---
 .../test/mocks/collection-store.js            |   3 +-
 .../test/mocks/deployment-state-store.js      |   9 +-
 .../test/mocks/namespace-store.js             |   8 +-
 .../components/sidebar-instance.spec.jsx      |  34 +++---
 .../components/sidebar-title.spec.jsx         |  33 ++++--
 .../test/renderer/components/sidebar.spec.jsx |  77 ++++++++-----
 packages/compass-sidebar/test/setup.js        |   5 +-
 59 files changed, 679 insertions(+), 519 deletions(-)

diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx
index 5c6c501a530..6cc6766b7fc 100644
--- a/packages/compass-components/src/components/accordion.tsx
+++ b/packages/compass-components/src/components/accordion.tsx
@@ -34,11 +34,14 @@ const buttonDarkThemeStyles = css({
 });
 const containerStyles = css({
   display: 'flex',
-  alignItems: 'center',
 });
 const buttonIconStyles = css({
   marginRight: spacing[1],
 });
+const buttonTextStyles = css({
+  alignItems: 'baseline',
+  display: 'flex',
+});
 const buttonHintStyles = css({
   margin: 0,
   marginLeft: spacing[1],
@@ -80,10 +83,12 @@ function UnthemedAccordion({
             className={buttonIconStyles}
             glyph={open ? 'ChevronDown' : 'ChevronRight'}
           />
-          {text}
-          {hintText && (
-            <Description className={buttonHintStyles}>{hintText}</Description>
-          )}
+          <div className={buttonTextStyles}>
+            {text}
+            {hintText && (
+              <Description className={buttonHintStyles}>{hintText}</Description>
+            )}
+          </div>
         </button>
       </div>
 
diff --git a/packages/compass-sidebar/.mocharc.js b/packages/compass-sidebar/.mocharc.js
index afcff13a8df..accc49db7cd 100644
--- a/packages/compass-sidebar/.mocharc.js
+++ b/packages/compass-sidebar/.mocharc.js
@@ -2,7 +2,5 @@ const base = require('@mongodb-js/mocha-config-compass/compass-plugin');
 
 module.exports = {
   ...base,
-  require: base.require.concat([
-    'test/setup.js'
-  ])
-}
+  require: base.require.concat(['test/setup.js']),
+};
diff --git a/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx b/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
index 15505471e64..f7b81b3641e 100644
--- a/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
+++ b/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
@@ -1,71 +1,83 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  css, spacing, Banner, Body, Description, ModalTitle, Label, Link, Toggle, Modal
+  css,
+  spacing,
+  Banner,
+  Body,
+  Description,
+  ModalTitle,
+  Label,
+  Link,
+  Toggle,
+  Modal,
 } from '@mongodb-js/compass-components';
 
 const toggleStyles = css({
   marginTop: spacing[3],
   marginBottom: spacing[3],
-  marginRight: spacing[3]
+  marginRight: spacing[3],
 });
 
 const toggleContainerStyles = css({
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
 });
 
 const csfleBannerStyles = css({
-  marginTop: spacing[3]
+  marginTop: spacing[3],
 });
 
-function CSFLEConnectionModal({ csfleMode, open, setOpen, setConnectionIsCSFLEEnabled }) {
-  return (<Modal
-    open={open}
-    title="In-Use Encryption"
-    trackingId="csfle_connection_modal"
-    setOpen={setOpen}
-    data-test-id="csfle-connection-modal"
-  >
-    <div>
-      <ModalTitle>In-Use Encryption Connection Options</ModalTitle>
-      <Body>
+function CSFLEConnectionModal({
+  csfleMode,
+  open,
+  setOpen,
+  setConnectionIsCSFLEEnabled,
+}) {
+  return (
+    <Modal
+      open={open}
+      title="In-Use Encryption"
+      trackingId="csfle_connection_modal"
+      setOpen={setOpen}
+      data-test-id="csfle-connection-modal"
+    >
+      <div>
+        <ModalTitle>In-Use Encryption Connection Options</ModalTitle>
+        <Body>
           This connection is configured with In-Use Encryption enabled.
-      </Body>
-      <div className={toggleContainerStyles}>
-        <Toggle
-          className={toggleStyles}
-          id="set-csfle-enabled"
-          aria-labelledby="set-csfle-enabled-label"
-          size="small"
-          type="button"
-          checked={csfleMode === 'enabled'}
-          onChange={(checked) => {
-            setConnectionIsCSFLEEnabled(checked);
-          }}
-        />
-        <Label
-          id="set-csfle-enabled-label"
-          htmlFor="set-csfle-enabled"
-        >
+        </Body>
+        <div className={toggleContainerStyles}>
+          <Toggle
+            className={toggleStyles}
+            id="set-csfle-enabled"
+            aria-labelledby="set-csfle-enabled-label"
+            size="small"
+            type="button"
+            checked={csfleMode === 'enabled'}
+            onChange={(checked) => {
+              setConnectionIsCSFLEEnabled(checked);
+            }}
+          />
+          <Label id="set-csfle-enabled-label" htmlFor="set-csfle-enabled">
             Enable In-Use Encryption for this connection
-        </Label>
+          </Label>
+        </div>
+        <Description>
+          Disabling In-Use Encryption only affects how Compass accesses data. In
+          order to make Compass forget KMS credentials, the connection must be
+          fully closed.
+        </Description>
       </div>
-      <Description>
-          Disabling In-Use Encryption only affects how Compass accesses data.
-          In order to make Compass forget KMS credentials, the
-          connection must be fully closed.
-      </Description>
-    </div>
-    <Banner className={csfleBannerStyles}>
-        In-Use Encryption is an Enterprise/Atlas-only feature
-        of MongoDB.&nbsp;
-      {/* TODO(COMPASS-5777): Use generic In-Use Encryption documentation URL instead of FLE1-specific one */}
-      <Link href="https://www.mongodb.com/docs/drivers/security/client-side-field-level-encryption-guide/">
+      <Banner className={csfleBannerStyles}>
+        In-Use Encryption is an Enterprise/Atlas-only feature of MongoDB.&nbsp;
+        {/* TODO(COMPASS-5777): Use generic In-Use Encryption documentation URL instead of FLE1-specific one */}
+        <Link href="https://www.mongodb.com/docs/drivers/security/client-side-field-level-encryption-guide/">
           Learn More
-      </Link>
-    </Banner>
-  </Modal>);
+        </Link>
+      </Banner>
+    </Modal>
+  );
 }
 
 CSFLEConnectionModal.displayName = 'CSFLEConnectionModal';
@@ -73,7 +85,7 @@ CSFLEConnectionModal.propTypes = {
   csfleMode: PropTypes.string,
   open: PropTypes.bool.isRequired,
   setOpen: PropTypes.func.isRequired,
-  setConnectionIsCSFLEEnabled: PropTypes.func.isRequired
+  setConnectionIsCSFLEEnabled: PropTypes.func.isRequired,
 };
 
 export default CSFLEConnectionModal;
diff --git a/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx b/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
index a332e785df1..dc67af65558 100644
--- a/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
+++ b/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
@@ -6,13 +6,13 @@ import {
   Badge,
   BadgeVariant,
   mergeProps,
-  useFocusRing
+  useFocusRing,
 } from '@mongodb-js/compass-components';
 
 // Let's not worry too much about styling here until
 // the sidebar is redone soon anyway.
 const badgeContainerStyles = css({
-  padding: '0px 0px 6px 36px'
+  padding: '0px 0px 6px 36px',
 });
 
 const badgeButtonStyles = css({
@@ -21,8 +21,8 @@ const badgeButtonStyles = css({
   margin: 0,
   border: 'none',
   '&:hover': {
-    cursor: 'pointer'
-  }
+    cursor: 'pointer',
+  },
 });
 
 function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
@@ -39,7 +39,7 @@ function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
       title: 'Connection In-Use Encryption configuration',
       'data-test-id': 'fle-connection-configuration',
       className: badgeButtonStyles,
-      onClick: () => toggleCSFLEModalVisible()
+      onClick: () => toggleCSFLEModalVisible(),
     },
     focusRingProps
   );
@@ -47,7 +47,13 @@ function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
   return (
     <div className={badgeContainerStyles}>
       <button {...buttonProps}>
-        <Badge variant={csfleMode === 'enabled' ? BadgeVariant.DarkGray : BadgeVariant.LightGray}>
+        <Badge
+          variant={
+            csfleMode === 'enabled'
+              ? BadgeVariant.DarkGray
+              : BadgeVariant.LightGray
+          }
+        >
           <Icon glyph="Key" />
           In-Use Encryption
         </Badge>
diff --git a/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx b/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
index f7502d3da38..fe6d3e18c3c 100644
--- a/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
+++ b/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
@@ -3,36 +3,34 @@ import PropTypes from 'prop-types';
 import {
   FavoriteIcon,
   mergeProps,
-  useFocusRing
+  useFocusRing,
 } from '@mongodb-js/compass-components';
 
 import styles from './favorite-button.module.less';
 
-const FavoriteButton = ({
-  favoriteOptions,
-  toggleIsFavoriteModalVisible
-}) => {
+const FavoriteButton = ({ favoriteOptions, toggleIsFavoriteModalVisible }) => {
   const isFavorite = !!favoriteOptions;
   const style = {
     backgroundColor: '#243642',
-    color: isFavorite ? '#ffffff' : '#88989a'
+    color: isFavorite ? '#ffffff' : '#88989a',
   };
 
   const focusRingProps = useFocusRing();
-  const buttonProps = mergeProps({
-    type: 'button',
-    'aria-label': 'Edit saved connection',
-    title: 'Edit saved connection',
-    onClick: () => toggleIsFavoriteModalVisible(),
-    className: styles['favorite-button-text'],
-    style
-  }, focusRingProps);
+  const buttonProps = mergeProps(
+    {
+      type: 'button',
+      'aria-label': 'Edit saved connection',
+      title: 'Edit saved connection',
+      onClick: () => toggleIsFavoriteModalVisible(),
+      className: styles['favorite-button-text'],
+      style,
+    },
+    focusRingProps
+  );
 
   return (
     <div className={styles['favorite-button']}>
-      <button
-        {...buttonProps}
-      >
+      <button {...buttonProps}>
         <FavoriteIcon
           darkMode
           isFavorite={isFavorite}
@@ -50,7 +48,7 @@ FavoriteButton.displayName = 'FavoriteButton';
 FavoriteButton.propTypes = {
   // Can be undefined. See ConnectionFavoriteOptions of ConnectionInfo.
   favoriteOptions: PropTypes.object,
-  toggleIsFavoriteModalVisible: PropTypes.func.isRequired
+  toggleIsFavoriteModalVisible: PropTypes.func.isRequired,
 };
 
 export default FavoriteButton;
diff --git a/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx b/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
index 67a9c681486..5849672609f 100644
--- a/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
+++ b/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
@@ -12,7 +12,7 @@ describe('FavoriteButton [Component]', function () {
     beforeEach(function () {
       component = mount(
         <FavoriteButton
-          toggleIsFavoriteModalVisible={()=>{}}
+          toggleIsFavoriteModalVisible={() => {}}
           favoriteOptions={undefined}
         />
       );
@@ -24,7 +24,9 @@ describe('FavoriteButton [Component]', function () {
 
     it('displays the the default button without star filled in', function () {
       expect(component.find(`.${styles['favorite-button']}`)).to.be.present();
-      expect(component.find(`.${styles['favorite-button-text']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['favorite-button-text']}`)
+      ).to.be.present();
       let starStyle = component.find('#favoriteIconStar').get(0).props;
       expect(starStyle).to.have.property('fill', 'none');
     });
@@ -36,10 +38,10 @@ describe('FavoriteButton [Component]', function () {
     beforeEach(function () {
       component = mount(
         <FavoriteButton
-          toggleIsFavoriteModalVisible={()=>{}}
+          toggleIsFavoriteModalVisible={() => {}}
           favoriteOptions={{
             name: '123',
-            color: undefined
+            color: undefined,
           }}
         />
       );
@@ -51,7 +53,9 @@ describe('FavoriteButton [Component]', function () {
 
     it('displays the the filled in star', function () {
       expect(component.find(`.${styles['favorite-button']}`)).to.be.present();
-      expect(component.find(`.${styles['favorite-button-text']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['favorite-button-text']}`)
+      ).to.be.present();
 
       let starStyle = component.find('#favoriteIconStar').get(0).props;
       expect(starStyle).to.have.property('fill', '#ffffff');
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
index 73647ad7308..ae5395dc928 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
@@ -11,33 +11,32 @@ import {
   spacing,
   Body,
   ButtonVariant,
-  BannerVariant
+  BannerVariant,
 } from '@mongodb-js/compass-components';
 
 const modalContentWrapperStyles = css({
-  padding: 'initial'
+  padding: 'initial',
 });
 
 const modalContentStyles = css({
-  padding: spacing[5]
+  padding: spacing[5],
 });
 
 const modalBodyStyles = css({
   marginTop: spacing[3],
-  marginBottom: spacing[2]
+  marginBottom: spacing[2],
 });
 
-const DESCRIPTION = 'Some documented MongoDB features may work differently, be entirely missing'
-  + ' or incomplete, or have unexpected performance characteristics. ';
-const WARNING_BANNER = 'This server or service appears to be an emulation of MongoDB rather than an official MongoDB product.';
-const LEARN_MORE_URL = 'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine';
+const DESCRIPTION =
+  'Some documented MongoDB features may work differently, be entirely missing' +
+  ' or incomplete, or have unexpected performance characteristics. ';
+const WARNING_BANNER =
+  'This server or service appears to be an emulation of MongoDB rather than an official MongoDB product.';
+const LEARN_MORE_URL =
+  'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine';
 const MODAL_TITLE = 'Non-Genuine MongoDB Detected';
 
-function NonGenuineWarningModal({
-  isVisible,
-  toggleIsVisible,
-
-}) {
+function NonGenuineWarningModal({ isVisible, toggleIsVisible }) {
   const onClose = useCallback(() => {
     toggleIsVisible(false);
   }, [toggleIsVisible]);
@@ -49,21 +48,17 @@ function NonGenuineWarningModal({
       setOpen={onClose}
       contentClassName={modalContentWrapperStyles}
     >
-      <div
-        className={modalContentStyles}
-      >
+      <div className={modalContentStyles}>
         <ModalTitle>{MODAL_TITLE}</ModalTitle>
-        <Banner
-          variant={BannerVariant.Warning}
-        >
-          {WARNING_BANNER}
-        </Banner>
+        <Banner variant={BannerVariant.Warning}>{WARNING_BANNER}</Banner>
         <Body className={modalBodyStyles}>{DESCRIPTION}</Body>
         <Link
           href={LEARN_MORE_URL}
           target="_blank"
           data-test-id="non-genuine-warning-modal-learn-more-link"
-        >Learn more</Link>
+        >
+          Learn more
+        </Link>
       </div>
       <ModalFooter>
         <Button
@@ -81,7 +76,7 @@ function NonGenuineWarningModal({
 NonGenuineWarningModal.displayName = 'NonGenuineWarningModal';
 NonGenuineWarningModal.propTypes = {
   isVisible: PropTypes.bool.isRequired,
-  toggleIsVisible: PropTypes.func.isRequired
+  toggleIsVisible: PropTypes.func.isRequired,
 };
 
 export default NonGenuineWarningModal;
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
index 12265b4f1c5..6a6cca3b75f 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 .non-genuine-warning-modal {
   width: 500px;
@@ -6,7 +6,7 @@
   padding-right: 40px;
   display: flex;
   flex-direction: row;
-  font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 12px;
 
   .modal-content {
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
index 89b6596fbb0..0e7217d1693 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
@@ -34,17 +34,27 @@ describe('NonGenuineWarningModal [Component]', function () {
     });
 
     it('renders the continue button', function () {
-      expect(component.find('[data-test-id="continue-button"]').hostNodes()).to.have.text('Continue');
+      expect(
+        component.find('[data-test-id="continue-button"]').hostNodes()
+      ).to.have.text('Continue');
     });
 
     it('opens the learn more link', function () {
-      expect(component.find('[data-test-id="non-genuine-warning-modal-learn-more-link"]').hostNodes().props().href).to.equal(
+      expect(
+        component
+          .find('[data-test-id="non-genuine-warning-modal-learn-more-link"]')
+          .hostNodes()
+          .props().href
+      ).to.equal(
         'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine'
       );
     });
 
     it('closes on continue', function () {
-      component.find('[data-test-id="continue-button"]').hostNodes().simulate('click');
+      component
+        .find('[data-test-id="continue-button"]')
+        .hostNodes()
+        .simulate('click');
       expect(toggleIsVisibleSpy.calledOnce).to.equal(true);
     });
   });
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
index 8af9e9bf415..66cdc0a35c8 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
@@ -10,8 +10,8 @@ import styles from './non-genuine-warning-pill.module.less';
 class NonGenuineWarningPill extends PureComponent {
   static displayName = 'NonGenuineWarningPill';
   static propTypes = {
-    isGenuineMongoDB: PropTypes.bool.isRequired
-  }
+    isGenuineMongoDB: PropTypes.bool.isRequired,
+  };
 
   /**
    * Render the component.
@@ -25,7 +25,7 @@ class NonGenuineWarningPill extends PureComponent {
     return (
       <div className={styles['non-genuine-warning-pill']}>
         <div className={styles['non-genuine-warning-pill-text']}>
-          <FontAwesome name="exclamation-circle"/>
+          <FontAwesome name="exclamation-circle" />
           &nbsp;NON-GENUINE MONGODB
         </div>
       </div>
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
index 77aae43a48e..2d3f57e5fb1 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
@@ -1,9 +1,9 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 .non-genuine-warning-pill {
   display: flex;
   flex-direction: row;
-  font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 11px;
   padding: 0px 0px 12px 36px;
   align-items: center;
@@ -14,7 +14,7 @@
     text-transform: uppercase;
     color: @gray1;
     border-radius: 14px;
-    border: 1px solid rgba(0,0,0,.2);
+    border: 1px solid rgba(0, 0, 0, 0.2);
     padding: 0 8px;
     margin-right: 5px;
     font-weight: bold;
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
index e53c0f8ac18..e7584a6b35c 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
@@ -10,7 +10,12 @@ describe('NonGenuineWarningPill [Component]', function () {
 
   context('when the instance is a non genuine mongo', function () {
     beforeEach(function () {
-      component = mount(<NonGenuineWarningPill isGenuineMongoDB={false} isSidebarCollapsed={false} />);
+      component = mount(
+        <NonGenuineWarningPill
+          isGenuineMongoDB={false}
+          isSidebarCollapsed={false}
+        />
+      );
     });
 
     afterEach(function () {
@@ -18,7 +23,9 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('renders the pill', function () {
-      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['non-genuine-warning-pill']}`)
+      ).to.be.present();
     });
 
     it('renders the icon', function () {
@@ -28,7 +35,9 @@ describe('NonGenuineWarningPill [Component]', function () {
 
   context('when the instance is a genuine mongo', function () {
     beforeEach(function () {
-      component = mount(<NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed={false} />);
+      component = mount(
+        <NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed={false} />
+      );
     });
 
     afterEach(function () {
@@ -36,13 +45,17 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('does not render the pill', function () {
-      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.not.be.present();
+      expect(
+        component.find(`.${styles['non-genuine-warning-pill']}`)
+      ).to.not.be.present();
     });
   });
 
   context('when the instance is collapsed', function () {
     beforeEach(function () {
-      component = mount(<NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed />);
+      component = mount(
+        <NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed />
+      );
     });
 
     afterEach(function () {
@@ -50,7 +63,9 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('does not render the pill', function () {
-      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.not.be.present();
+      expect(
+        component.find(`.${styles['non-genuine-warning-pill']}`)
+      ).to.not.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js b/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
index 5e0b724c5aa..465084939ce 100644
--- a/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
+++ b/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
@@ -65,7 +65,7 @@ const onNamespaceAction = (namespace, action) => {
         emit('sidebar-duplicate-view', ns);
         break;
       default:
-        // no-op
+      // no-op
     }
   };
 };
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
index 4a956d6718c..24d77d362e9 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
@@ -7,13 +7,13 @@ class SidebarInstanceDetails extends PureComponent {
   static displayName = 'SidebarInstanceDetails';
   static propTypes = {
     isExpanded: PropTypes.bool.isRequired,
-    detailsPlugins: PropTypes.array.isRequired
+    detailsPlugins: PropTypes.array.isRequired,
   };
 
   constructor(props) {
     super(props);
     this.details = props.detailsPlugins.map((role, i) => {
-      return (<role.component key={i} />);
+      return <role.component key={i} />;
     });
   }
 
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
index 5bb98459343..2ab649eab00 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 @details-background-color: @gray1;
 @details-background-color: lighten(hsl(204, 29%, 18%), 2%);
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
index 31a54985ee1..71dbcb84682 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
@@ -17,7 +17,8 @@ describe('SidebarInstanceDetails [Component]', function () {
         <SidebarInstanceDetails
           isExpanded={isExpanded}
           detailsPlugins={detailsPlugins}
-          isSidebarCollapsed={isSidebarCollapsed} />
+          isSidebarCollapsed={isSidebarCollapsed}
+        />
       );
     });
 
@@ -26,7 +27,9 @@ describe('SidebarInstanceDetails [Component]', function () {
     });
 
     it('renders details', function () {
-      expect(component.find(`.${styles['sidebar-instance-details-container']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['sidebar-instance-details-container']}`)
+      ).to.be.present();
     });
   });
 
@@ -49,8 +52,12 @@ describe('SidebarInstanceDetails [Component]', function () {
     });
 
     it('does not render details', function () {
-      expect(component.find(`.${styles['sidebar-instance-details-container']}`)).to.be.not.present();
-      expect(component.find(`.${styles['sidebar-instance-details']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['sidebar-instance-details-container']}`)
+      ).to.be.not.present();
+      expect(
+        component.find(`.${styles['sidebar-instance-details']}`)
+      ).to.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
index 940dce0ee00..70e23af3166 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
@@ -10,16 +10,16 @@ class SidebarInstanceStats extends PureComponent {
     databases: PropTypes.array,
     isExpanded: PropTypes.bool.isRequired,
     toggleIsExpanded: PropTypes.func.isRequired,
-    globalAppRegistryEmit: PropTypes.func.isRequired
+    globalAppRegistryEmit: PropTypes.func.isRequired,
   };
 
   onRefresh = () => {
     this.props.globalAppRegistryEmit('refresh-data');
-  }
+  };
 
   onToggleExpanded = () => {
     this.props.toggleIsExpanded(!this.props.isExpanded);
-  }
+  };
 
   getArrowIconClasses() {
     const expanded = this.props.isExpanded ? 'fa fa-rotate-90' : '';
@@ -30,20 +30,18 @@ class SidebarInstanceStats extends PureComponent {
     const { instance, databases } = this.props;
 
     let numDbs = databases.length;
-    let numCollections =
-      databases
-        .map((db) => db.collectionsLength)
-        .reduce((acc, n) => acc + n, 0);
+    let numCollections = databases
+      .map((db) => db.collectionsLength)
+      .reduce((acc, n) => acc + n, 0);
 
     let refreshClassName = 'fa fa-repeat';
 
-    const isRefreshing = !instance || ['initial', 'fetching', 'refreshing'].includes(
-      instance.refreshingStatus
-    );
+    const isRefreshing =
+      !instance ||
+      ['initial', 'fetching', 'refreshing'].includes(instance.refreshingStatus);
 
-    const isInitialOrInitialFetching = !instance || ['initial', 'fetching'].includes(
-      instance.refreshingStatus
-    );
+    const isInitialOrInitialFetching =
+      !instance || ['initial', 'fetching'].includes(instance.refreshingStatus);
 
     if (isRefreshing) {
       refreshClassName = 'fa fa-refresh fa-spin';
@@ -60,31 +58,43 @@ class SidebarInstanceStats extends PureComponent {
       <div className={styles['sidebar-instance-stats']}>
         <div
           className={styles['sidebar-instance-stats-expand']}
-          onClick={this.onToggleExpanded}>
+          onClick={this.onToggleExpanded}
+        >
           <i className={this.getArrowIconClasses()} />
         </div>
         <div className={styles['sidebar-instance-stats-column']}>
           <span
             id="sidebar-instance-stats-dbs"
-            className={styles['sidebar-instance-stats-strong-property']}>
+            className={styles['sidebar-instance-stats-strong-property']}
+          >
             {numDbs}
-          </span> DBs
+          </span>{' '}
+          DBs
         </div>
         <div className={styles['sidebar-instance-stats-column']}>
           <span
             id="sidebar-instance-stats-collections"
-            className={styles['sidebar-instance-stats-strong-property']}>
+            className={styles['sidebar-instance-stats-strong-property']}
+          >
             {numCollections}
-          </span> Collections
+          </span>{' '}
+          Collections
         </div>
-        <div className={styles['sidebar-instance-stats-refresh-button-container']}>
+        <div
+          className={styles['sidebar-instance-stats-refresh-button-container']}
+        >
           <button
             onClick={this.onRefresh}
             data-test-id="sidebar-instance-stats-refresh-button"
             className={styles['sidebar-instance-stats-refresh-button']}
             disabled={isRefreshing}
           >
-            <i className={refreshClassName} data-test-id={`sidebar-instance-stats-refresh-${isRefreshing ? 'spinning' : 'idle'}`} />
+            <i
+              className={refreshClassName}
+              data-test-id={`sidebar-instance-stats-refresh-${
+                isRefreshing ? 'spinning' : 'idle'
+              }`}
+            />
           </button>
         </div>
       </div>
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
index a3043047dd2..1e0cb6afefe 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 @compass-sidebar-default-text-color: @gray5;
 @compass-sidebar-hover-background-color: @gray1;
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
index ccfdda688a1..74dd91bffde 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
@@ -14,13 +14,15 @@ describe('SidebarInstanceStats [Component]', function () {
     beforeEach(function () {
       toggleSpy = sinon.spy();
       emitSpy = sinon.spy();
-      component = mount(<SidebarInstanceStats
-        instance={null}
-        databases={[]}
-        isExpanded
-        toggleIsExpanded={toggleSpy}
-        globalAppRegistryEmit={emitSpy}
-      />);
+      component = mount(
+        <SidebarInstanceStats
+          instance={null}
+          databases={[]}
+          isExpanded
+          toggleIsExpanded={toggleSpy}
+          globalAppRegistryEmit={emitSpy}
+        />
+      );
     });
 
     afterEach(function () {
@@ -30,7 +32,9 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('counts collections correctly', function () {
-      expect(component.find('#sidebar-instance-stats-collections')).to.have.text('-');
+      expect(
+        component.find('#sidebar-instance-stats-collections')
+      ).to.have.text('-');
     });
 
     it('counts dbs correctly', function () {
@@ -64,7 +68,9 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('counts collections correctly', function () {
-      expect(component.find('#sidebar-instance-stats-collections')).to.have.text('5');
+      expect(
+        component.find('#sidebar-instance-stats-collections')
+      ).to.have.text('5');
     });
 
     it('counts dbs correctly', function () {
@@ -96,7 +102,9 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('refreshes', function () {
-      component.find(`.${styles['sidebar-instance-stats-refresh-button']}`).simulate('click');
+      component
+        .find(`.${styles['sidebar-instance-stats-refresh-button']}`)
+        .simulate('click');
       expect(emitSpy.calledWith('refresh-data')).to.equal(true);
     });
   });
diff --git a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
index afbe0249d66..4f5e8899f85 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
@@ -22,19 +22,22 @@ export const SidebarInstance = ({
   detailsPlugins,
   connectionInfo,
   updateConnectionInfo,
-  setConnectionIsCSFLEEnabled
+  setConnectionIsCSFLEEnabled,
 }) => {
-  const [ isFavoriteModalVisible, setIsFavoriteModalVisible ] = useState(false);
-  const [ isCSFLEModalVisible, setIsCSFLEModalVisible ] = useState(false);
+  const [isFavoriteModalVisible, setIsFavoriteModalVisible] = useState(false);
+  const [isCSFLEModalVisible, setIsCSFLEModalVisible] = useState(false);
 
-  const onClickSaveFavorite = useCallback((newFavoriteInfo) => {
-    updateConnectionInfo({
-      ...cloneDeep(connectionInfo),
-      favorite: newFavoriteInfo
-    });
+  const onClickSaveFavorite = useCallback(
+    (newFavoriteInfo) => {
+      updateConnectionInfo({
+        ...cloneDeep(connectionInfo),
+        favorite: newFavoriteInfo,
+      });
 
-    setIsFavoriteModalVisible(false);
-  }, [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]);
+      setIsFavoriteModalVisible(false);
+    },
+    [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]
+  );
 
   return (
     <div className={styles['sidebar-instance']}>
@@ -47,13 +50,15 @@ export const SidebarInstance = ({
       />
       <FavoriteButton
         favoriteOptions={connectionInfo.favorite}
-        toggleIsFavoriteModalVisible={() => setIsFavoriteModalVisible(
-          !isFavoriteModalVisible
-        )}
+        toggleIsFavoriteModalVisible={() =>
+          setIsFavoriteModalVisible(!isFavoriteModalVisible)
+        }
       />
       <CSFLEMarker
         csfleMode={instance?.csfleMode}
-        toggleCSFLEModalVisible={() => setIsCSFLEModalVisible(!isCSFLEModalVisible)}
+        toggleCSFLEModalVisible={() =>
+          setIsCSFLEModalVisible(!isCSFLEModalVisible)
+        }
       />
       <CSFLEConnectionModal
         open={isCSFLEModalVisible}
@@ -67,9 +72,7 @@ export const SidebarInstance = ({
         onCancelClicked={() => setIsFavoriteModalVisible(false)}
         onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)}
       />
-      <NonGenuineWarningPill
-        isGenuineMongoDB={isGenuineMongoDB}
-      />
+      <NonGenuineWarningPill isGenuineMongoDB={isGenuineMongoDB} />
       <SidebarInstanceDetails
         detailsPlugins={detailsPlugins}
         isExpanded={isExpanded}
diff --git a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
index 73918177323..412b383474c 100644
--- a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
@@ -3,42 +3,36 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-import {
-  MongoDBLogoMark
-} from '@mongodb-js/compass-components';
-import {
-  getConnectionTitle,
-} from 'mongodb-data-service';
+import { MongoDBLogoMark } from '@mongodb-js/compass-components';
+import { getConnectionTitle } from 'mongodb-data-service';
 
 import { NO_ACTIVE_NAMESPACE } from '../../modules/databases';
 import styles from './sidebar-title.module.less';
 
-const CollapsedTitle = ({
-  connectionInfo
-}) => {
+const CollapsedTitle = ({ connectionInfo }) => {
   const isFavorite = !!connectionInfo.favorite;
 
   return (
     <div
-      style={isFavorite ? {
-        backgroundColor: connectionInfo.favorite.color || 'transparent'
-      } : {}}
+      style={
+        isFavorite
+          ? {
+              backgroundColor: connectionInfo.favorite.color || 'transparent',
+            }
+          : {}
+      }
       className={styles['sidebar-title-logo']}
     >
-      <MongoDBLogoMark
-        color="white"
-      />
+      <MongoDBLogoMark color="white" />
     </div>
   );
 };
 
 CollapsedTitle.propTypes = {
-  connectionInfo: PropTypes.object.isRequired
+  connectionInfo: PropTypes.object.isRequired,
 };
 
-const ExpandedTitle = ({
-  connectionInfo
-}) => {
+const ExpandedTitle = ({ connectionInfo }) => {
   return (
     <div className={styles['sidebar-title-name']}>
       {getConnectionTitle(connectionInfo)}
@@ -47,33 +41,31 @@ const ExpandedTitle = ({
 };
 
 ExpandedTitle.propTypes = {
-  connectionInfo: PropTypes.object.isRequired
+  connectionInfo: PropTypes.object.isRequired,
 };
 
 const SidebarTitle = ({
   activeNamespace,
   connectionInfo,
   isSidebarExpanded,
-  onClick
+  onClick,
 }) => {
   return (
     // TODO: https://jira.mongodb.org/browse/COMPASS-5918
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       className={classnames(styles['sidebar-title'], {
-        [styles['sidebar-title-is-active']]: activeNamespace === NO_ACTIVE_NAMESPACE
+        [styles['sidebar-title-is-active']]:
+          activeNamespace === NO_ACTIVE_NAMESPACE,
       })}
       data-test-id="sidebar-title"
       onClick={onClick}
     >
-      {isSidebarExpanded
-        ? <ExpandedTitle
-          connectionInfo={connectionInfo}
-        />
-        : <CollapsedTitle
-          connectionInfo={connectionInfo}
-        />
-      }
+      {isSidebarExpanded ? (
+        <ExpandedTitle connectionInfo={connectionInfo} />
+      ) : (
+        <CollapsedTitle connectionInfo={connectionInfo} />
+      )}
     </div>
   );
 };
@@ -87,7 +79,7 @@ SidebarTitle.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  activeNamespace: state.databases.activeNamespace
+  activeNamespace: state.databases.activeNamespace,
 });
 
 export default connect(mapStateToProps)(SidebarTitle);
diff --git a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
index 197cd4168fd..a326ee136d5 100644
--- a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 @compass-sidebar-title-background-color: @gray1;
 @compass-sidebar-title-background-color: lighten(hsl(204, 29%, 18%), 5%);
diff --git a/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx b/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
index 75663d22f61..8dd134c76b5 100644
--- a/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
+++ b/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
@@ -6,7 +6,7 @@ import {
   Icon,
   useFocusRing,
   mergeProps,
-  uiColors
+  uiColors,
 } from '@mongodb-js/compass-components';
 
 const items = [
@@ -31,8 +31,8 @@ const navItemButton = css({
   backgroundColor: uiColors.gray.dark2,
   ':hover': {
     cursor: 'pointer',
-    backgroundColor: uiColors.gray.dark3
-  }
+    backgroundColor: uiColors.gray.dark3,
+  },
 });
 
 const iconStyle = css({
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
index 3054e338baf..74ae26caa30 100644
--- a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
+++ b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
@@ -51,12 +51,12 @@ class Sidebar extends PureComponent {
     toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
     globalAppRegistryEmit: PropTypes.func.isRequired,
     connectionInfo: PropTypes.object.isRequired,
-    updateAndSaveConnectionInfo: PropTypes.func.isRequired
+    updateAndSaveConnectionInfo: PropTypes.func.isRequired,
   };
 
   state = {
     width: defaultSidebarWidthOpened,
-    prevWidth: defaultSidebarWidthOpened
+    prevWidth: defaultSidebarWidthOpened,
   };
 
   onNavigationItemClick(tabName) {
@@ -65,15 +65,16 @@ class Sidebar extends PureComponent {
 
   updateWidth(width) {
     this.setState(
-      (width > sidebarMinWidthOpened)
+      width > sidebarMinWidthOpened
         ? {
-          width,
-          // Store the previous width to use when toggling open/close
-          // when we resize while the sidebar is expanded.
-          prevWidth: width
-        } : {
-          width
-        }
+            width,
+            // Store the previous width to use when toggling open/close
+            // when we resize while the sidebar is expanded.
+            prevWidth: width,
+          }
+        : {
+            width,
+          }
     );
   }
 
@@ -118,16 +119,28 @@ class Sidebar extends PureComponent {
 
   renderCreateDatabaseButton() {
     if (!this.isReadonlyDistro() && !this.props.isDataLake) {
-      const isW = !this.props.isWritable ? styles['compass-sidebar-button-is-disabled'] : '';
-      const className = classnames(styles['compass-sidebar-button-create-database'], styles[isW]);
+      const isW = !this.props.isWritable
+        ? styles['compass-sidebar-button-is-disabled']
+        : '';
+      const className = classnames(
+        styles['compass-sidebar-button-create-database'],
+        styles[isW]
+      );
       return (
         <div
-          className={classnames(styles['compass-sidebar-button-create-database-container'])}>
+          className={classnames(
+            styles['compass-sidebar-button-create-database-container']
+          )}
+        >
           <button
             className={className}
             title="Create Database"
             data-test-id="create-database-button"
-            onClick={this.handleCreateDatabaseClick.bind(this, this.props.isWritable)}>
+            onClick={this.handleCreateDatabaseClick.bind(
+              this,
+              this.props.isWritable
+            )}
+          >
             <i className="mms-icon-add" />
             <div className={classnames(styles['plus-button'])}>
               Create Database
@@ -142,17 +155,19 @@ class Sidebar extends PureComponent {
     const { width, prevWidth } = this.state;
 
     const isExpanded = width > sidebarMinWidthOpened;
-    const renderedWidth = isExpanded ? boundSidebarWidth(width) : sidebarWidthCollapsed;
+    const renderedWidth = isExpanded
+      ? boundSidebarWidth(width)
+      : sidebarWidthCollapsed;
 
-    const collapsedButton = 'fa' +
-      (isExpanded ? ' fa-caret-left' : ' fa-caret-right');
+    const collapsedButton =
+      'fa' + (isExpanded ? ' fa-caret-left' : ' fa-caret-right');
 
     // TODO: https://jira.mongodb.org/browse/COMPASS-5918
     /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, react/no-string-refs */
     return (
       <div
         className={classnames(styles['compass-sidebar'], {
-          [styles['compass-sidebar-collapsed']]: !isExpanded
+          [styles['compass-sidebar-collapsed']]: !isExpanded,
         })}
         data-test-id="compass-sidebar-panel"
         style={{ width: renderedWidth }}
@@ -166,14 +181,18 @@ class Sidebar extends PureComponent {
           title="sidebar"
         />
         <button
-          className={classnames(styles['compass-sidebar-toggle'], 'btn btn-default btn-sm')}
-          onClick={() => isExpanded
-            ? this.updateWidth(sidebarWidthCollapsed)
-            : this.updateWidth(prevWidth)
+          className={classnames(
+            styles['compass-sidebar-toggle'],
+            'btn btn-default btn-sm'
+          )}
+          onClick={() =>
+            isExpanded
+              ? this.updateWidth(sidebarWidthCollapsed)
+              : this.updateWidth(prevWidth)
           }
           data-test-id="toggle-sidebar"
         >
-          <i className={collapsedButton}/>
+          <i className={collapsedButton} />
         </button>
         <SidebarTitle
           connectionInfo={this.props.connectionInfo}
@@ -191,7 +210,9 @@ class Sidebar extends PureComponent {
             globalAppRegistryEmit={this.props.globalAppRegistryEmit}
             connectionInfo={this.props.connectionInfo}
             updateConnectionInfo={this.props.updateAndSaveConnectionInfo}
-            setConnectionIsCSFLEEnabled={(enabled) => this.handleSetConnectionIsCSFLEEnabled(enabled)}
+            setConnectionIsCSFLEEnabled={(enabled) =>
+              this.handleSetConnectionIsCSFLEEnabled(enabled)
+            }
           />
         )}
         <NavigationItems
@@ -202,7 +223,13 @@ class Sidebar extends PureComponent {
           className={styles['compass-sidebar-filter']}
           onClick={this.handleSearchFocus.bind(this)}
         >
-          <i className={classnames('fa', 'fa-search', styles['compass-sidebar-search-icon'])}/>
+          <i
+            className={classnames(
+              'fa',
+              'fa-search',
+              styles['compass-sidebar-search-icon']
+            )}
+          />
           <input
             data-test-id="sidebar-filter-input"
             ref="filter"
@@ -248,16 +275,13 @@ const mapStateToProps = (state) => ({
  * Connect the redux store to the component.
  * (dispatch)
  */
-const MappedSidebar = connect(
-  mapStateToProps,
-  {
-    toggleIsDetailsExpanded,
-    toggleIsGenuineMongoDBVisible,
-    changeFilterRegex,
-    globalAppRegistryEmit,
-    updateAndSaveConnectionInfo
-  },
-)(Sidebar);
+const MappedSidebar = connect(mapStateToProps, {
+  toggleIsDetailsExpanded,
+  toggleIsGenuineMongoDBVisible,
+  changeFilterRegex,
+  globalAppRegistryEmit,
+  updateAndSaveConnectionInfo,
+})(Sidebar);
 
 export default MappedSidebar;
 export { Sidebar };
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.module.less b/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
index 36bc1e11573..c18c5012d2d 100644
--- a/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
+++ b/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
 
 @compass-sidebar-default-text-color: @gray5;
 @compass-sidebar-base-background-color: @grayDark2;
@@ -33,7 +33,8 @@
     padding: 0;
     cursor: pointer;
     z-index: -5;
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       border-left: 0;
     }
   }
@@ -49,7 +50,7 @@
 
   &-filter {
     position: relative;
-    box-shadow: 0px 2px 2px rgba(0,0,0,.3);
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     z-index: 2;
   }
 
@@ -69,7 +70,7 @@
     width: 100%;
     border: none;
     font-size: 14px;
-    font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     outline: none;
   }
@@ -92,12 +93,12 @@
   *::-webkit-scrollbar-track {
     background-color: none;
     &:hover {
-      background-color: rgba(0,0,0,.16);
+      background-color: rgba(0, 0, 0, 0.16);
     }
   }
 
   *::-webkit-scrollbar-thumb {
-    background-color: rgba(255,255,255,.25);
+    background-color: rgba(255, 255, 255, 0.25);
     -webkit-border-radius: 10px;
     border-radius: 10px;
   }
diff --git a/packages/compass-sidebar/src/constants/sidebar-constants.js b/packages/compass-sidebar/src/constants/sidebar-constants.js
index 01c11cd26c9..3deadf4e0f8 100644
--- a/packages/compass-sidebar/src/constants/sidebar-constants.js
+++ b/packages/compass-sidebar/src/constants/sidebar-constants.js
@@ -3,5 +3,5 @@ export const TOOLTIP_IDS = Object.freeze({
   CREATE_COLLECTION: 'create-collection',
   CREATE_DATABASE_BUTTON: 'create-database-button',
   DROP_COLLECTION: 'drop-collection',
-  DROP_DATABASE: 'drop-database'
+  DROP_DATABASE: 'drop-database',
 });
diff --git a/packages/compass-sidebar/src/modules/collection.spec.js b/packages/compass-sidebar/src/modules/collection.spec.js
index 01137b60114..9eff48083e9 100644
--- a/packages/compass-sidebar/src/modules/collection.spec.js
+++ b/packages/compass-sidebar/src/modules/collection.spec.js
@@ -1,37 +1,33 @@
 import { expect } from 'chai';
 
-import {
-  getSource,
-  getSourceName,
-  getSourceViewOn,
-} from './collection';
+import { getSource, getSourceName, getSourceViewOn } from './collection';
 
 const COLL = {
   _id: 'db.test',
-  readonly: false
+  readonly: false,
 };
 
 const VIEW = {
   _id: 'db.testView',
   readonly: true,
   view_on: 'test',
-  pipeline: []
+  pipeline: [],
 };
 
 const VIEW_ON_VIEW = {
   _id: 'db.testViewOnView',
   readonly: true,
   view_on: 'testView',
-  pipeline: []
+  pipeline: [],
 };
 
 const TIME_SERIES = {
   _id: 'db.testTimeSeries',
   type: 'timeSeries',
-  readonly: false
+  readonly: false,
 };
 
-const COLLECTIONS = [ COLL, VIEW, VIEW_ON_VIEW, TIME_SERIES ];
+const COLLECTIONS = [COLL, VIEW, VIEW_ON_VIEW, TIME_SERIES];
 
 describe('collection module', function () {
   describe('#getSource', function () {
@@ -51,7 +47,9 @@ describe('collection module', function () {
   describe('#getSourceName', function () {
     context('when the collection is a view', function () {
       it('returns the source name', function () {
-        expect(getSourceName(VIEW.readonly, 'db', 'testView')).to.equal('db.testView');
+        expect(getSourceName(VIEW.readonly, 'db', 'testView')).to.equal(
+          'db.testView'
+        );
       });
     });
 
diff --git a/packages/compass-sidebar/src/modules/connection-info.js b/packages/compass-sidebar/src/modules/connection-info.js
index 1b3324cf958..d63721bde1f 100644
--- a/packages/compass-sidebar/src/modules/connection-info.js
+++ b/packages/compass-sidebar/src/modules/connection-info.js
@@ -1,6 +1,4 @@
-import {
-  ConnectionStorage
-} from 'mongodb-data-service';
+import { ConnectionStorage } from 'mongodb-data-service';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 
 const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
@@ -11,20 +9,20 @@ const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
 const CHANGE_CONNECTION_INFO = 'sidebar/connection/CHANGE_CONNECTION_INFO';
 
 /**
-* Save favorite connection action name.
-*/
+ * Save favorite connection action name.
+ */
 const SAVE_CONNECTION_INFO = 'sidebar/connection/SAVE_CONNECTION_INFO';
 
 /**
-* The initial state of the connection.
-*/
+ * The initial state of the connection.
+ */
 export const INITIAL_STATE = {
   connectionInfo: {
     connectionOptions: {
-      connectionString: 'mongodb://localhost:27017'
-    }
+      connectionString: 'mongodb://localhost:27017',
+    },
   },
-  connectionStorage: new ConnectionStorage()
+  connectionStorage: new ConnectionStorage(),
 };
 
 async function saveConnectionInfo(connectionInfo, connectionStorage) {
@@ -42,25 +40,25 @@ async function saveConnectionInfo(connectionInfo, connectionStorage) {
 }
 
 /**
-* Changes the connection.
-*
-* @param {Object} state - The state.
-* @param {Object} action - The action.
-*
-* @returns {Object} The new state.
-*/
+ * Changes the connection.
+ *
+ * @param {Object} state - The state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Object} The new state.
+ */
 const doChangeConnectionInfo = (state, action) => {
   return { ...state, connectionInfo: action.connectionInfo };
 };
 
 /**
-* Saves the new favorite connection info.
-*
-* @param {Object} state - The state.
-* @param {Object} action - The action.
-*
-* @returns {Object} The new state.
-*/
+ * Saves the new favorite connection info.
+ *
+ * @param {Object} state - The state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Object} The new state.
+ */
 const doSaveConnectionInfo = (state, action) => {
   saveConnectionInfo(action.connectionInfo, state.connectionStorage);
 
@@ -68,21 +66,21 @@ const doSaveConnectionInfo = (state, action) => {
 };
 
 /**
-* To not have a huge switch statement in the reducer.
-*/
+ * To not have a huge switch statement in the reducer.
+ */
 const MAPPINGS = {
   [CHANGE_CONNECTION_INFO]: doChangeConnectionInfo,
-  [SAVE_CONNECTION_INFO]: doSaveConnectionInfo
+  [SAVE_CONNECTION_INFO]: doSaveConnectionInfo,
 };
 
 /**
-* Reducer function for handle state changes.
-*
-* @param {String} state - The status state.
-* @param {Object} action - The action.
-*
-* @returns {String} The new state.
-*/
+ * Reducer function for handle state changes.
+ *
+ * @param {String} state - The status state.
+ * @param {Object} action - The action.
+ *
+ * @returns {String} The new state.
+ */
 export default function reducer(state = INITIAL_STATE, action) {
   const fn = MAPPINGS[action.type];
 
@@ -90,25 +88,25 @@ export default function reducer(state = INITIAL_STATE, action) {
 }
 
 /**
-* Change connection action creator.
-*
-* @param {Object} connectionInfo - The connection info object.
-*
-* @returns {Object} The action.
-*/
+ * Change connection action creator.
+ *
+ * @param {Object} connectionInfo - The connection info object.
+ *
+ * @returns {Object} The action.
+ */
 export const changeConnectionInfo = (connectionInfo) => ({
   type: CHANGE_CONNECTION_INFO,
-  connectionInfo
+  connectionInfo,
 });
 
 /**
-* Save connection info action creator.
-*
-* @param {Object} connectionInfo - The connection info object.
-*
-* @returns {Object} The action.
-*/
+ * Save connection info action creator.
+ *
+ * @param {Object} connectionInfo - The connection info object.
+ *
+ * @returns {Object} The action.
+ */
 export const updateAndSaveConnectionInfo = (connectionInfo) => ({
   type: SAVE_CONNECTION_INFO,
-  connectionInfo
+  connectionInfo,
 });
diff --git a/packages/compass-sidebar/src/modules/connection-info.spec.js b/packages/compass-sidebar/src/modules/connection-info.spec.js
index 3818e5a2c76..3b8efb12faf 100644
--- a/packages/compass-sidebar/src/modules/connection-info.spec.js
+++ b/packages/compass-sidebar/src/modules/connection-info.spec.js
@@ -4,33 +4,38 @@ import sinon from 'sinon';
 import reducer, {
   INITIAL_STATE,
   changeConnectionInfo,
-  updateAndSaveConnectionInfo
+  updateAndSaveConnectionInfo,
 } from './connection-info';
 
 describe('connection info module', function () {
   const connectionInfoNotFavorite = {
     connectionOptions: {
-      connectionString: 'mongodb://outerspace:27000'
+      connectionString: 'mongodb://outerspace:27000',
     },
-    id: '123'
+    id: '123',
   };
 
   describe('reducer', function () {
     context('when the action is changeConnectionInfo', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, changeConnectionInfo(connectionInfoNotFavorite))).to.deep.equal({
+        expect(
+          reducer(undefined, changeConnectionInfo(connectionInfoNotFavorite))
+        ).to.deep.equal({
           connectionInfo: connectionInfoNotFavorite,
-          connectionStorage: {}
+          connectionStorage: {},
         });
       });
 
       it('does not call the connection storage to save', function () {
         const saveSpy = sinon.spy();
-        reducer({
-          connectionStorage: {
-            save: saveSpy
-          }
-        }, changeConnectionInfo(connectionInfoNotFavorite));
+        reducer(
+          {
+            connectionStorage: {
+              save: saveSpy,
+            },
+          },
+          changeConnectionInfo(connectionInfoNotFavorite)
+        );
 
         expect(saveSpy.callCount).to.equal(0);
       });
@@ -42,46 +47,50 @@ describe('connection info module', function () {
           ...connectionInfoNotFavorite,
           favorite: {
             name: 'My Favorite',
-            color: '#d4366e'
-          }
+            color: '#d4366e',
+          },
         });
-        const state = reducer({
-          connectionStorage: {
-            save: function () {}
-          }
-        }, newConnection);
+        const state = reducer(
+          {
+            connectionStorage: {
+              save: function () {},
+            },
+          },
+          newConnection
+        );
 
         expect(state.connectionInfo.favorite.name).to.equal('My Favorite');
         expect(state.connectionInfo.favorite.color).to.equal('#d4366e');
       });
 
       it('calls to save the connection info in the connection storage', function () {
-        const newConnection = updateAndSaveConnectionInfo(
+        const newConnection = updateAndSaveConnectionInfo({
+          ...connectionInfoNotFavorite,
+          favorite: {
+            name: 'My Favorite',
+            color: '#d4366e',
+          },
+        });
+        const saveSpy = sinon.spy();
+        reducer(
           {
-            ...connectionInfoNotFavorite,
-            favorite: {
-              name: 'My Favorite',
-              color: '#d4366e'
-            }
-          }
+            connectionStorage: {
+              save: saveSpy,
+            },
+          },
+          newConnection
         );
-        const saveSpy = sinon.spy();
-        reducer({
-          connectionStorage: {
-            save: saveSpy
-          }
-        }, newConnection);
 
         expect(saveSpy.callCount).to.equal(1);
         expect(saveSpy.firstCall.args[0]).to.deep.equal({
           connectionOptions: {
-            connectionString: 'mongodb://outerspace:27000'
+            connectionString: 'mongodb://outerspace:27000',
           },
           id: '123',
           favorite: {
             name: 'My Favorite',
-            color: '#d4366e'
-          }
+            color: '#d4366e',
+          },
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/databases.js b/packages/compass-sidebar/src/modules/databases.js
index c2f7d7c7cda..edbdcb65af3 100644
--- a/packages/compass-sidebar/src/modules/databases.js
+++ b/packages/compass-sidebar/src/modules/databases.js
@@ -5,7 +5,8 @@ import toNS from 'mongodb-ns';
  */
 export const CHANGE_FILTER_REGEX = 'sidebar/databases/CHANGE_FILTER_REGEX';
 export const CHANGE_DATABASES = 'sidebar/databases/CHANGE_DATABASES';
-export const CHANGE_ACTIVE_NAMESPACE = 'sidebar/databases/CHANGE_ACTIVE_NAMESPACE';
+export const CHANGE_ACTIVE_NAMESPACE =
+  'sidebar/databases/CHANGE_ACTIVE_NAMESPACE';
 export const TOGGLE_DATABASE = 'sidebar/databases/TOGGLE_DATABASE';
 
 const NO_REGEX = null;
@@ -20,7 +21,7 @@ export const INITIAL_STATE = {
   filteredDatabases: [],
   expandedDbList: {},
   activeNamespace: NO_ACTIVE_NAMESPACE,
-  filterRegex: NO_REGEX
+  filterRegex: NO_REGEX,
 };
 
 /**
@@ -101,7 +102,7 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const changeDatabases = (databases) => ({
   type: CHANGE_DATABASES,
-  databases
+  databases,
 });
 
 /**
@@ -114,7 +115,7 @@ export const changeDatabases = (databases) => ({
 export const changeActiveNamespace = (activeNamespace) => ({
   type: CHANGE_ACTIVE_NAMESPACE,
   activeNamespace,
-  activeDatabase: toNS(activeNamespace).database
+  activeDatabase: toNS(activeNamespace).database,
 });
 
 export const toggleDatabaseExpanded = (id, force) => (dispatch, getState) => {
@@ -159,9 +160,7 @@ const filterDatabases = (databases, re) => {
     if (re.test(id)) {
       result.push(db);
     } else {
-      const collections = db.collections.filter((coll) =>
-        re.test(coll.name)
-      );
+      const collections = db.collections.filter((coll) => re.test(coll.name));
 
       if (collections.length > 0) {
         result.push({
diff --git a/packages/compass-sidebar/src/modules/databases.spec.js b/packages/compass-sidebar/src/modules/databases.spec.js
index be71e789f33..0d4aa334165 100644
--- a/packages/compass-sidebar/src/modules/databases.spec.js
+++ b/packages/compass-sidebar/src/modules/databases.spec.js
@@ -4,16 +4,16 @@ import databasesReducer, {
   INITIAL_STATE,
   changeDatabases,
   changeActiveNamespace,
-  changeFilterRegex
+  changeFilterRegex,
 } from './databases';
 
 import { createInstance } from '../../test/helpers';
 
 function createGetState(dbs) {
-  return function() {
+  return function () {
     return {
       instance: createInstance(dbs).toJSON(),
-      appRegistry: {}
+      appRegistry: {},
     };
   };
 }
@@ -22,15 +22,12 @@ function createDatabases(dbs) {
   return createInstance(dbs).databases.map((db) => {
     return {
       ...db.toJSON(),
-      collections: db.collections.toJSON()
+      collections: db.collections.toJSON(),
     };
   });
 }
 
-function createMockStoreSlice(
-  initialState = {},
-  reducer = databasesReducer
-) {
+function createMockStoreSlice(initialState = {}, reducer = databasesReducer) {
   let state = { ...INITIAL_STATE, ...initialState };
   return {
     get state() {
@@ -58,29 +55,39 @@ describe('sidebar databases', function () {
       });
     });
 
-    context('when changing databases and there is a filter in the state', function () {
-      it('filters databases in the state', function () {
-        const initialState = {
-          ...INITIAL_STATE,
-          filterRegex: /^foo$/,
-        };
-
-        const dbs = createDatabases([{ _id: 'foo' }, { _id: 'bar' }, { _id: 'buz' }]);
-
-        expect(
-          databasesReducer(initialState, changeDatabases(dbs))
-        ).to.deep.equal({
-          ...initialState,
-          filteredDatabases: dbs.filter(db => db._id === 'foo'),
-          databases: dbs,
+    context(
+      'when changing databases and there is a filter in the state',
+      function () {
+        it('filters databases in the state', function () {
+          const initialState = {
+            ...INITIAL_STATE,
+            filterRegex: /^foo$/,
+          };
+
+          const dbs = createDatabases([
+            { _id: 'foo' },
+            { _id: 'bar' },
+            { _id: 'buz' },
+          ]);
+
+          expect(
+            databasesReducer(initialState, changeDatabases(dbs))
+          ).to.deep.equal({
+            ...initialState,
+            filteredDatabases: dbs.filter((db) => db._id === 'foo'),
+            databases: dbs,
+          });
         });
-      });
-    });
+      }
+    );
 
     context('when active namespace changed', function () {
       it('changes active namespace and "expands" the namespace in the list', function () {
         expect(
-          databasesReducer(undefined, changeActiveNamespace('new_active.namespace'))
+          databasesReducer(
+            undefined,
+            changeActiveNamespace('new_active.namespace')
+          )
         ).to.deep.equal({
           ...INITIAL_STATE,
           activeNamespace: 'new_active.namespace',
@@ -102,7 +109,7 @@ describe('sidebar databases', function () {
         ]);
 
         const slice = createMockStoreSlice({
-          databases: dbs
+          databases: dbs,
         });
 
         changeFilterRegex(/^foo$/)(slice.dispatch, getState);
diff --git a/packages/compass-sidebar/src/modules/description.js b/packages/compass-sidebar/src/modules/description.js
index 9c373caf1bc..a7c7188fe21 100644
--- a/packages/compass-sidebar/src/modules/description.js
+++ b/packages/compass-sidebar/src/modules/description.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const changeDescription = (description) => ({
   type: CHANGE_DESCRIPTION,
-  description: description
+  description: description,
 });
diff --git a/packages/compass-sidebar/src/modules/description.spec.js b/packages/compass-sidebar/src/modules/description.spec.js
index 8438717d089..a37c8d2cd1d 100644
--- a/packages/compass-sidebar/src/modules/description.spec.js
+++ b/packages/compass-sidebar/src/modules/description.spec.js
@@ -3,14 +3,16 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   changeDescription,
-  CHANGE_DESCRIPTION
+  CHANGE_DESCRIPTION,
 } from './description';
 
 describe('sidebar description', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, changeDescription('new description'))).to.equal('new description');
+        expect(
+          reducer(undefined, changeDescription('new description'))
+        ).to.equal('new description');
       });
     });
 
@@ -25,7 +27,7 @@ describe('sidebar description', function () {
     it('returns the action', function () {
       expect(changeDescription('new description w action')).to.deep.equal({
         type: CHANGE_DESCRIPTION,
-        description: 'new description w action'
+        description: 'new description w action',
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/details-plugins.js b/packages/compass-sidebar/src/modules/details-plugins.js
index 004d54ad1ce..28999c231c4 100644
--- a/packages/compass-sidebar/src/modules/details-plugins.js
+++ b/packages/compass-sidebar/src/modules/details-plugins.js
@@ -36,5 +36,5 @@ export default reducer;
  */
 export const loadDetailsPlugins = (appRegistry) => ({
   type: LOAD_DETAILS_PLUGINS,
-  roles: appRegistry.getRole('InstanceDetails.Item') || []
+  roles: appRegistry.getRole('InstanceDetails.Item') || [],
 });
diff --git a/packages/compass-sidebar/src/modules/details-plugins.spec.js b/packages/compass-sidebar/src/modules/details-plugins.spec.js
index 33e1d299398..8584edef44b 100644
--- a/packages/compass-sidebar/src/modules/details-plugins.spec.js
+++ b/packages/compass-sidebar/src/modules/details-plugins.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   LOAD_DETAILS_PLUGINS,
-  loadDetailsPlugins
+  loadDetailsPlugins,
 } from './details-plugins';
 import AppRegistry from 'hadron-app-registry';
 
@@ -21,7 +21,9 @@ describe('details-plugins module', function () {
 
     context('when the action is loadDetailsPlugins', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, loadDetailsPlugins(appRegistry))).to.deep.equal(INITIAL_STATE);
+        expect(
+          reducer(undefined, loadDetailsPlugins(appRegistry))
+        ).to.deep.equal(INITIAL_STATE);
       });
     });
 
@@ -37,7 +39,7 @@ describe('details-plugins module', function () {
       it('sets the empty array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: INITIAL_STATE
+          roles: INITIAL_STATE,
         });
       });
     });
@@ -54,24 +56,28 @@ describe('details-plugins module', function () {
       it('sets the empty array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: INITIAL_STATE
+          roles: INITIAL_STATE,
         });
       });
     });
 
     context('when `InstanceDetails.Item` is present', function () {
       before(function () {
-        appRegistry.registerRole('InstanceDetails.Item', { name: 'INSTANCEDETAILS' });
+        appRegistry.registerRole('InstanceDetails.Item', {
+          name: 'INSTANCEDETAILS',
+        });
       });
 
       after(function () {
-        appRegistry.deregisterRole('InstanceDetails.Item', { name: 'INSTANCEDETAILS' });
+        appRegistry.deregisterRole('InstanceDetails.Item', {
+          name: 'INSTANCEDETAILS',
+        });
       });
 
       it('sets the roles array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: [{ name: 'INSTANCEDETAILS' }]
+          roles: [{ name: 'INSTANCEDETAILS' }],
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/index.js b/packages/compass-sidebar/src/modules/index.js
index 19daf15a188..e4124b83d8d 100644
--- a/packages/compass-sidebar/src/modules/index.js
+++ b/packages/compass-sidebar/src/modules/index.js
@@ -3,32 +3,28 @@ import { combineReducers } from 'redux';
 import appRegistry from '@mongodb-js/mongodb-redux-common/app-registry';
 import detailsPlugins from './details-plugins';
 import databases, {
-  INITIAL_STATE as DATABASES_INITIAL_STATE
+  INITIAL_STATE as DATABASES_INITIAL_STATE,
 } from './databases';
 import description, {
-  INITIAL_STATE as DESCRIPTION_INITIAL_STATE
+  INITIAL_STATE as DESCRIPTION_INITIAL_STATE,
 } from './description';
-import instance, {
-  INITIAL_STATE as INSTANCE_INITIAL_STATE
-} from './instance';
+import instance, { INITIAL_STATE as INSTANCE_INITIAL_STATE } from './instance';
 import isDetailsExpanded, {
-  INITIAL_STATE as IS_DETAILS_EXPANDED_INITIAL_STATE
+  INITIAL_STATE as IS_DETAILS_EXPANDED_INITIAL_STATE,
 } from './is-details-expanded';
 import isWritable, {
-  INITIAL_STATE as IS_WRITABLE_INITIAL_STATE
+  INITIAL_STATE as IS_WRITABLE_INITIAL_STATE,
 } from './is-writable';
-import isDataLake, {
-  INITIAL_STATE as DL_INITIAL_STATE
-} from './is-data-lake';
+import isDataLake, { INITIAL_STATE as DL_INITIAL_STATE } from './is-data-lake';
 import { RESET } from './reset';
 import isGenuineMongoDB, {
-  INITIAL_STATE as GENUINE_IS
+  INITIAL_STATE as GENUINE_IS,
 } from './is-genuine-mongodb';
 import isGenuineMongoDBVisible, {
-  INITIAL_STATE as IS_VISIBLE_IS
+  INITIAL_STATE as IS_VISIBLE_IS,
 } from './is-genuine-mongodb-visible';
 import connectionInfo, {
-  INITIAL_STATE as CONNECTION_INFO_IS
+  INITIAL_STATE as CONNECTION_INFO_IS,
 } from './connection-info';
 
 /**
@@ -45,7 +41,7 @@ const reducer = combineReducers({
   isWritable,
   isGenuineMongoDB,
   isGenuineMongoDBVisible,
-  isDataLake
+  isDataLake,
 });
 
 /**
@@ -68,7 +64,7 @@ const rootReducer = (state, action) => {
       isWritable: IS_WRITABLE_INITIAL_STATE,
       isGenuineMongoDB: GENUINE_IS,
       isGenuineMongoDBVisible: IS_VISIBLE_IS,
-      isDataLake: DL_INITIAL_STATE
+      isDataLake: DL_INITIAL_STATE,
     };
   }
   return reducer(state, action);
diff --git a/packages/compass-sidebar/src/modules/instance.js b/packages/compass-sidebar/src/modules/instance.js
index f97b80aa9f3..c1b79f360a8 100644
--- a/packages/compass-sidebar/src/modules/instance.js
+++ b/packages/compass-sidebar/src/modules/instance.js
@@ -32,5 +32,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const changeInstance = (instance) => ({
   type: CHANGE_INSTANCE,
-  instance: instance
+  instance: instance,
 });
diff --git a/packages/compass-sidebar/src/modules/instance.spec.js b/packages/compass-sidebar/src/modules/instance.spec.js
index bd2f978dad1..d868b22e6c8 100644
--- a/packages/compass-sidebar/src/modules/instance.spec.js
+++ b/packages/compass-sidebar/src/modules/instance.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   changeInstance,
-  CHANGE_INSTANCE
+  CHANGE_INSTANCE,
 } from './instance';
 
 const instance = {
@@ -31,7 +31,7 @@ describe('sidebar instance', function () {
     it('returns the action', function () {
       expect(changeInstance('new instance w action')).to.deep.equal({
         type: CHANGE_INSTANCE,
-        instance: 'new instance w action'
+        instance: 'new instance w action',
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-data-lake.js b/packages/compass-sidebar/src/modules/is-data-lake.js
index d1c356b5d0e..09f6700aa3a 100644
--- a/packages/compass-sidebar/src/modules/is-data-lake.js
+++ b/packages/compass-sidebar/src/modules/is-data-lake.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const toggleIsDataLake = (isDataLake) => ({
   type: TOGGLE_IS_DATA_LAKE,
-  isDataLake: isDataLake
+  isDataLake: isDataLake,
 });
diff --git a/packages/compass-sidebar/src/modules/is-data-lake.spec.js b/packages/compass-sidebar/src/modules/is-data-lake.spec.js
index c4e68b84a7a..d5241afe447 100644
--- a/packages/compass-sidebar/src/modules/is-data-lake.spec.js
+++ b/packages/compass-sidebar/src/modules/is-data-lake.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   TOGGLE_IS_DATA_LAKE,
-  toggleIsDataLake
+  toggleIsDataLake,
 } from './is-data-lake';
 
 describe('is-data-lake module', function () {
@@ -26,7 +26,7 @@ describe('is-data-lake module', function () {
       it('sets true in the action', function () {
         expect(toggleIsDataLake(true)).to.deep.equal({
           type: TOGGLE_IS_DATA_LAKE,
-          isDataLake: true
+          isDataLake: true,
         });
       });
     });
@@ -35,7 +35,7 @@ describe('is-data-lake module', function () {
       it('sets false in the action', function () {
         expect(toggleIsDataLake(false)).to.deep.equal({
           type: TOGGLE_IS_DATA_LAKE,
-          isDataLake: false
+          isDataLake: false,
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/is-details-expanded.js b/packages/compass-sidebar/src/modules/is-details-expanded.js
index f333a4e41d7..feecc04e66d 100644
--- a/packages/compass-sidebar/src/modules/is-details-expanded.js
+++ b/packages/compass-sidebar/src/modules/is-details-expanded.js
@@ -1,7 +1,8 @@
 /**
  * Change is details expanded
  */
-export const TOGGLE_IS_DETAILS_EXPANDED = 'sidebar/is-details-expanded/TOGGLE_IS_DETAILS_EXPANDED';
+export const TOGGLE_IS_DETAILS_EXPANDED =
+  'sidebar/is-details-expanded/TOGGLE_IS_DETAILS_EXPANDED';
 
 /**
  * The initial state of the is expanded attribute.
@@ -32,5 +33,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsDetailsExpanded = (isExpanded) => ({
   type: TOGGLE_IS_DETAILS_EXPANDED,
-  isExpanded: isExpanded
+  isExpanded: isExpanded,
 });
diff --git a/packages/compass-sidebar/src/modules/is-details-expanded.spec.js b/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
index 19f6c284dd3..dba77973854 100644
--- a/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
+++ b/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
@@ -3,14 +3,16 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsDetailsExpanded,
-  TOGGLE_IS_DETAILS_EXPANDED
+  TOGGLE_IS_DETAILS_EXPANDED,
 } from './is-details-expanded';
 
 describe('sidebar isDetailsExpanded', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, toggleIsDetailsExpanded(true))).to.equal(true);
+        expect(reducer(undefined, toggleIsDetailsExpanded(true))).to.equal(
+          true
+        );
       });
     });
 
@@ -25,7 +27,7 @@ describe('sidebar isDetailsExpanded', function () {
     it('returns the action', function () {
       expect(toggleIsDetailsExpanded(false)).to.deep.equal({
         type: TOGGLE_IS_DETAILS_EXPANDED,
-        isExpanded: false
+        isExpanded: false,
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
index bd57045ab20..2ea68ac320f 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
@@ -37,5 +37,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsGenuineMongoDBVisible = (isVisible) => ({
   type: TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
-  isVisible: isVisible
+  isVisible: isVisible,
 });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
index ec163ae1052..d35fa1542b3 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
@@ -3,14 +3,16 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsGenuineMongoDBVisible,
-  TOGGLE_IS_GENUINE_MONGODB_VISIBLE
+  TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
 } from './is-genuine-mongodb-visible';
 
 describe('is genuine mongodb visible module', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, toggleIsGenuineMongoDBVisible(true))).to.equal(true);
+        expect(
+          reducer(undefined, toggleIsGenuineMongoDBVisible(true))
+        ).to.equal(true);
       });
     });
 
@@ -25,7 +27,7 @@ describe('is genuine mongodb visible module', function () {
     it('returns the action', function () {
       expect(toggleIsGenuineMongoDBVisible(false)).to.deep.equal({
         type: TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
-        isVisible: false
+        isVisible: false,
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
index 6b355cad915..63a4da48ebd 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
@@ -1,7 +1,8 @@
 /**
  * Create is genuine MongoDB action.
  */
-export const TOGGLE_IS_GENUINE_MONGODB = 'sidebar/is-genuine-mongodb/TOGGLE_IS_GENUINE_MONGODB';
+export const TOGGLE_IS_GENUINE_MONGODB =
+  'sidebar/is-genuine-mongodb/TOGGLE_IS_GENUINE_MONGODB';
 
 /**
  * The initial state of the instance header is genuine MongoDB.
@@ -32,5 +33,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsGenuineMongoDB = (isGenuineMongoDB) => ({
   type: TOGGLE_IS_GENUINE_MONGODB,
-  isGenuineMongoDB: isGenuineMongoDB
+  isGenuineMongoDB: isGenuineMongoDB,
 });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
index 94f8030cb7a..af19caa5e95 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsGenuineMongoDB,
-  TOGGLE_IS_GENUINE_MONGODB
+  TOGGLE_IS_GENUINE_MONGODB,
 } from './is-genuine-mongodb';
 
 describe('is genuine mongodb module', function () {
@@ -25,7 +25,7 @@ describe('is genuine mongodb module', function () {
     it('returns the action', function () {
       expect(toggleIsGenuineMongoDB(false)).to.deep.equal({
         type: TOGGLE_IS_GENUINE_MONGODB,
-        isGenuineMongoDB: false
+        isGenuineMongoDB: false,
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-writable.js b/packages/compass-sidebar/src/modules/is-writable.js
index b201831656c..0a3c3c98ca4 100644
--- a/packages/compass-sidebar/src/modules/is-writable.js
+++ b/packages/compass-sidebar/src/modules/is-writable.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const toggleIsWritable = (isWritable) => ({
   type: TOGGLE_IS_WRITABLE,
-  isWritable: isWritable
+  isWritable: isWritable,
 });
diff --git a/packages/compass-sidebar/src/modules/is-writable.spec.js b/packages/compass-sidebar/src/modules/is-writable.spec.js
index 9cfee04a5b9..034e4cea30f 100644
--- a/packages/compass-sidebar/src/modules/is-writable.spec.js
+++ b/packages/compass-sidebar/src/modules/is-writable.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsWritable,
-  TOGGLE_IS_WRITABLE
+  TOGGLE_IS_WRITABLE,
 } from './is-writable';
 
 describe('sidebar isWritable', function () {
@@ -25,7 +25,7 @@ describe('sidebar isWritable', function () {
     it('returns the action', function () {
       expect(toggleIsWritable(false)).to.deep.equal({
         type: TOGGLE_IS_WRITABLE,
-        isWritable: false
+        isWritable: false,
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/reset.js b/packages/compass-sidebar/src/modules/reset.js
index 3be41aa1b51..b9c69a92b39 100644
--- a/packages/compass-sidebar/src/modules/reset.js
+++ b/packages/compass-sidebar/src/modules/reset.js
@@ -9,5 +9,5 @@ export const RESET = 'sidebar/reset';
  * @return {Object} The action creator.
  */
 export const reset = () => ({
-  type: RESET
+  type: RESET,
 });
diff --git a/packages/compass-sidebar/src/plugin.jsx b/packages/compass-sidebar/src/plugin.jsx
index aa8c1d12936..479ab138c11 100644
--- a/packages/compass-sidebar/src/plugin.jsx
+++ b/packages/compass-sidebar/src/plugin.jsx
@@ -4,7 +4,6 @@ import { Provider } from 'react-redux';
 import Sidebar from './components/sidebar';
 import store from './stores';
 
-
 /**
  * Connect the Plugin to the store and render.
  *
diff --git a/packages/compass-sidebar/src/stores/store.js b/packages/compass-sidebar/src/stores/store.js
index e699db97cc2..869c5a19507 100644
--- a/packages/compass-sidebar/src/stores/store.js
+++ b/packages/compass-sidebar/src/stores/store.js
@@ -123,10 +123,12 @@ store.onActivated = (appRegistry) => {
     });
   });
 
-  appRegistry.getStore('DeploymentAwareness.WriteStateStore').listen((state) => {
-    store.dispatch(toggleIsWritable(state.isWritable));
-    store.dispatch(changeDescription(state.description));
-  });
+  appRegistry
+    .getStore('DeploymentAwareness.WriteStateStore')
+    .listen((state) => {
+      store.dispatch(toggleIsWritable(state.isWritable));
+      store.dispatch(changeDescription(state.description));
+    });
 
   appRegistry.on('select-namespace', ({ namespace }) => {
     store.dispatch(changeActiveNamespace(namespace));
diff --git a/packages/compass-sidebar/src/stores/store.spec.js b/packages/compass-sidebar/src/stores/store.spec.js
index 5f3eb1e89b3..18ac5d2357c 100644
--- a/packages/compass-sidebar/src/stores/store.spec.js
+++ b/packages/compass-sidebar/src/stores/store.spec.js
@@ -10,7 +10,7 @@ const WriteStateStore = Reflux.createStore({
   mixins: [StateMixin.store],
   getInitialState() {
     return { isWritable: true, description: 'store initial state description' };
-  }
+  },
 });
 
 const instance = createInstance();
@@ -44,7 +44,10 @@ describe('SidebarStore [Store]', function () {
 
   describe('#onActivated', function () {
     const appRegistry = new AppRegistry();
-    appRegistry.registerStore('DeploymentAwareness.WriteStateStore', WriteStateStore);
+    appRegistry.registerStore(
+      'DeploymentAwareness.WriteStateStore',
+      WriteStateStore
+    );
 
     before(function () {
       store.onActivated(appRegistry);
@@ -55,7 +58,7 @@ describe('SidebarStore [Store]', function () {
         expect(store.getState().isWritable).to.equal(true); // initial state
         WriteStateStore.setState({
           isWritable: false,
-          description: 'test description'
+          description: 'test description',
         });
       });
 
@@ -73,26 +76,26 @@ describe('SidebarStore [Store]', function () {
           filteredDatabases: [],
           expandedDbList: {},
           filterRegex: null,
-          activeNamespace: ''
+          activeNamespace: '',
         }); // initial state
         appRegistry.emit('instance-created', { instance });
       });
 
       it('updates the instance and databases state', function () {
+        expect(store.getState()).to.have.property('instance').deep.equal({
+          databasesStatus: instance.databasesStatus,
+          refreshingStatus: instance.refreshingStatus,
+          csfleMode: instance.csfleMode,
+        });
         expect(store.getState())
-          .to.have.property('instance')
+          .to.have.property('databases')
           .deep.equal({
-            databasesStatus: instance.databasesStatus,
-            refreshingStatus: instance.refreshingStatus,
-            csfleMode: instance.csfleMode,
+            databases: getDatabases(instance),
+            filteredDatabases: getDatabases(instance),
+            activeNamespace: '',
+            expandedDbList: {},
+            filterRegex: null,
           });
-        expect(store.getState()).to.have.property('databases').deep.equal({
-          databases: getDatabases(instance),
-          filteredDatabases: getDatabases(instance),
-          activeNamespace: '',
-          expandedDbList: {},
-          filterRegex: null,
-        });
       });
     });
 
@@ -102,7 +105,9 @@ describe('SidebarStore [Store]', function () {
         appRegistry.emit('select-namespace', { namespace: 'test.coll' });
       });
       it('updates databases.activeNamespace', function () {
-        expect(store.getState().databases.activeNamespace).to.equal('test.coll');
+        expect(store.getState().databases.activeNamespace).to.equal(
+          'test.coll'
+        );
       });
     });
 
diff --git a/packages/compass-sidebar/test/mocks/collection-store.js b/packages/compass-sidebar/test/mocks/collection-store.js
index fd11b1f4704..2a308020a13 100644
--- a/packages/compass-sidebar/test/mocks/collection-store.js
+++ b/packages/compass-sidebar/test/mocks/collection-store.js
@@ -5,7 +5,6 @@ const { NamespaceStore } = require('mongodb-reflux-store');
  * Sets global collection information.
  */
 const CollectionStore = Reflux.createStore({
-
   /**
    * Initialize the store.
    */
@@ -58,7 +57,7 @@ const CollectionStore = Reflux.createStore({
    */
   isReadonly() {
     return this.collection.readonly;
-  }
+  },
 });
 
 module.exports = CollectionStore;
diff --git a/packages/compass-sidebar/test/mocks/deployment-state-store.js b/packages/compass-sidebar/test/mocks/deployment-state-store.js
index d4bf231f8ef..8f8d5e31eb1 100644
--- a/packages/compass-sidebar/test/mocks/deployment-state-store.js
+++ b/packages/compass-sidebar/test/mocks/deployment-state-store.js
@@ -28,12 +28,15 @@ const DeploymentStateStore = Reflux.createStore({
   getInitialState() {
     return {
       isWritable: true,
-      description: DEFAULT_DESCRIPTION
+      description: DEFAULT_DESCRIPTION,
     };
   },
   setToInitial() {
-    this.setState({isWritable: true, description: 'description set from renderer'});
-  }
+    this.setState({
+      isWritable: true,
+      description: 'description set from renderer',
+    });
+  },
 });
 
 module.exports = DeploymentStateStore;
diff --git a/packages/compass-sidebar/test/mocks/namespace-store.js b/packages/compass-sidebar/test/mocks/namespace-store.js
index 9dfed5e7e8b..8078245eab4 100644
--- a/packages/compass-sidebar/test/mocks/namespace-store.js
+++ b/packages/compass-sidebar/test/mocks/namespace-store.js
@@ -10,7 +10,6 @@ const DEFAULT_NAMESPACE = '';
  * The store holds the source of truth for the namespace being worked on.
  */
 const NamespaceStore = Reflux.createStore({
-
   /**
    * Initializing the store should set up the default namespace.
    */
@@ -39,14 +38,17 @@ const NamespaceStore = Reflux.createStore({
       if (oldNs.database !== newNs.database) {
         registry.emit('database-changed', ns);
       }
-      if (oldNs.database !== newNs.database || oldNs.collection !== newNs.collection) {
+      if (
+        oldNs.database !== newNs.database ||
+        oldNs.collection !== newNs.collection
+      ) {
         registry.emit('collection-changed', ns);
       }
     }
     // TODO: still trigger if appRegistry is not available?
     this._ns = ns;
     this.trigger(this._ns);
-  }
+  },
 });
 
 module.exports = NamespaceStore;
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
index d0c60aad19f..1874aa669fa 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
@@ -9,22 +9,24 @@ describe.skip('SidebarInstance [Component]', function () {
 
   describe('empty instance', function () {
     beforeEach(function () {
-      component = mount(<SidebarInstance
-        instance={{databases: null, collections: null}}
-        isExpanded
-        isGenuineMongoDB
-        isSidebarCollapsed={false}
-        detailsPlugins={[]}
-        globalAppRegistryEmit={() => {}}
-        toggleIsDetailsExpanded={() => {}}
-        connectionInfo={{
-          connectionOptions: {
-            connectionString: 'mongodb://localhost:27017'
-          },
-          id: '123'
-        }}
-        updateConnectionInfo={() => {}}
-      />);
+      component = mount(
+        <SidebarInstance
+          instance={{ databases: null, collections: null }}
+          isExpanded
+          isGenuineMongoDB
+          isSidebarCollapsed={false}
+          detailsPlugins={[]}
+          globalAppRegistryEmit={() => {}}
+          toggleIsDetailsExpanded={() => {}}
+          connectionInfo={{
+            connectionOptions: {
+              connectionString: 'mongodb://localhost:27017',
+            },
+            id: '123',
+          }}
+          updateConnectionInfo={() => {}}
+        />
+      );
     });
 
     afterEach(function () {
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
index 8b2809e5ecd..c9719961408 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
@@ -2,9 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
-import {
-  LogoMark
-} from '@mongodb-js/compass-components';
+import { LogoMark } from '@mongodb-js/compass-components';
 
 import { SidebarTitle as SidebarTitleClass } from '../../../src/components/sidebar-title/sidebar-title';
 import styles from '../../../src/components/sidebar-title/sidebar-title.module.less';
@@ -12,9 +10,10 @@ import styles from '../../../src/components/sidebar-title/sidebar-title.module.l
 describe('SidebarTitle [Component]', function () {
   const connectionInfo = {
     connectionOptions: {
-      connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
+      connectionString:
+        'mongodb://localhost:27020?readPreference=primaryPreferred',
     },
-    id: '123'
+    id: '123',
   };
 
   context('when sidebar is collapsed', function () {
@@ -38,9 +37,15 @@ describe('SidebarTitle [Component]', function () {
 
     it.skip('renders icon', function () {
       expect(component.find(`.${styles['sidebar-title']}`)).to.be.present();
-      expect(component.find(`.${styles['sidebar-title-name']}`)).to.not.be.present();
-      expect(component.find(`.${styles['sidebar-title-logo']}`)).to.be.present();
-      expect(component.find(`.${styles['sidebar-title-is-active']}`)).to.not.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-name']}`)
+      ).to.not.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-logo']}`)
+      ).to.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-is-active']}`)
+      ).to.not.be.present();
       expect(component.find(LogoMark)).to.be.present();
     });
   });
@@ -66,8 +71,12 @@ describe('SidebarTitle [Component]', function () {
 
     it.skip('renders icon', function () {
       expect(component.find(`.${styles['sidebar-title']}`)).to.be.present();
-      expect(component.find(`.${styles['sidebar-title-name']}`)).to.be.present();
-      expect(component.find(`.${styles['sidebar-title-logo']}`)).to.not.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-name']}`)
+      ).to.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-logo']}`)
+      ).to.not.be.present();
       expect(component.find(LogoMark)).to.be.not.present();
     });
   });
@@ -124,7 +133,9 @@ describe('SidebarTitle [Component]', function () {
     });
 
     it('has an active class', function () {
-      expect(component.find(`.${styles['sidebar-title-is-active']}`)).to.be.present();
+      expect(
+        component.find(`.${styles['sidebar-title-is-active']}`)
+      ).to.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
index 5113e134cd0..dc1187e88b3 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
@@ -5,19 +5,22 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import SidebarStore from '../../../src/stores';
-import Sidebar, { Sidebar as UnconnectedSidebar } from '../../../src/components/sidebar';
+import Sidebar, {
+  Sidebar as UnconnectedSidebar,
+} from '../../../src/components/sidebar';
 import SidebarInstance from '../../../src/components/sidebar-instance';
 import styles from '../../../src/components/sidebar/sidebar.module.less';
 
 describe('Sidebar [Component]', function () {
   const connectionInfo = {
     connectionOptions: {
-      connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
+      connectionString:
+        'mongodb://localhost:27020?readPreference=primaryPreferred',
     },
     id: '123',
     favorite: {
-      name: 'my favorite'
-    }
+      name: 'my favorite',
+    },
   };
 
   describe('when rendered with the store', function () {
@@ -26,9 +29,7 @@ describe('Sidebar [Component]', function () {
     beforeEach(function () {
       component = mount(
         <Provider store={SidebarStore}>
-          <Sidebar
-            onCollapse={()=>{}}
-          />
+          <Sidebar onCollapse={() => {}} />
         </Provider>
       );
     });
@@ -57,11 +58,11 @@ describe('Sidebar [Component]', function () {
             connectionInfo={connectionInfo}
             description="Topology type not yet discovered."
             databases={{
-              databases: []
+              databases: [],
             }}
             instance={{
               databases: null,
-              collections: null
+              collections: null,
             }}
             filterRegex={/(?:)/}
             power_of_two={false}
@@ -72,7 +73,7 @@ describe('Sidebar [Component]', function () {
             globalAppRegistryEmit={emitSpy}
             isGenuineMongoDB
             isGenuineMongoDBVisible={false}
-            toggleIsGenuineMongoDBVisible={()=>{}}
+            toggleIsGenuineMongoDBVisible={() => {}}
             openLink={function () {}}
             isDetailsExpanded={false}
             toggleIsDetailsExpanded={function () {}}
@@ -80,8 +81,8 @@ describe('Sidebar [Component]', function () {
             filterDatabases={function () {}}
             changeDatabases={function () {}}
             changeFilterRegex={function () {}}
-            updateAndSaveConnectionInfo={()=>{}}
-            setConnectionIsCSFLEEnabled={function (){}}
+            updateAndSaveConnectionInfo={() => {}}
+            setConnectionIsCSFLEEnabled={function () {}}
             saveFavorite={saveFavoriteSpy}
           />
         </Provider>
@@ -105,9 +106,9 @@ describe('Sidebar [Component]', function () {
     });
 
     it('renders the sidebar content', function () {
-      expect(component.find(
-        `.${styles['compass-sidebar-content']}`
-      )).to.be.present();
+      expect(
+        component.find(`.${styles['compass-sidebar-content']}`)
+      ).to.be.present();
     });
   });
 
@@ -135,9 +136,9 @@ describe('Sidebar [Component]', function () {
     });
 
     it.skip('does not render the sidebar content', function () {
-      expect(component.find(
-        `.${styles['compass-sidebar-content']}`
-      )).to.not.be.present();
+      expect(
+        component.find(`.${styles['compass-sidebar-content']}`)
+      ).to.not.be.present();
     });
   });
 
@@ -155,7 +156,10 @@ describe('Sidebar [Component]', function () {
     });
 
     it('sets the collapsed width to 36', function () {
-      expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
+      expect(
+        component.find('[data-test-id="compass-sidebar-panel"]').prop('style')
+          .width
+      ).to.equal(36);
     });
 
     context('when it is expanded again', function () {
@@ -165,7 +169,10 @@ describe('Sidebar [Component]', function () {
       });
 
       it('sets the collapsed width to 250', function () {
-        expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(250);
+        expect(
+          component.find('[data-test-id="compass-sidebar-panel"]').prop('style')
+            .width
+        ).to.equal(250);
       });
     });
   });
@@ -177,7 +184,7 @@ describe('Sidebar [Component]', function () {
       component = mount(
         <Provider store={SidebarStore}>
           <Sidebar
-            updateAndSaveConnectionInfo={()=>{}}
+            updateAndSaveConnectionInfo={() => {}}
             setConnectionIsCSFLEEnabled={function () {}}
             connectionInfo={connectionInfo}
           />
@@ -196,7 +203,11 @@ describe('Sidebar [Component]', function () {
         });
 
         it('updates the width', function () {
-          expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(189);
+          expect(
+            component
+              .find('[data-test-id="compass-sidebar-panel"]')
+              .prop('style').width
+          ).to.equal(189);
         });
 
         context('when it hits the lower bound', function () {
@@ -207,7 +218,11 @@ describe('Sidebar [Component]', function () {
           });
 
           it('collapses the sidebar', function () {
-            expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
+            expect(
+              component
+                .find('[data-test-id="compass-sidebar-panel"]')
+                .prop('style').width
+            ).to.equal(36);
           });
         });
       });
@@ -227,8 +242,14 @@ describe('Sidebar [Component]', function () {
         });
 
         it('updates the width', function () {
-          expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
-          expect(component.find('[type="range"]').at(0).prop('value')).to.equal(55);
+          expect(
+            component
+              .find('[data-test-id="compass-sidebar-panel"]')
+              .prop('style').width
+          ).to.equal(36);
+          expect(component.find('[type="range"]').at(0).prop('value')).to.equal(
+            55
+          );
         });
 
         context('when it hits the expand threshold bound', function () {
@@ -239,7 +260,11 @@ describe('Sidebar [Component]', function () {
           });
 
           it('expands the sidebar', function () {
-            expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(171);
+            expect(
+              component
+                .find('[data-test-id="compass-sidebar-panel"]')
+                .prop('style').width
+            ).to.equal(171);
           });
         });
       });
diff --git a/packages/compass-sidebar/test/setup.js b/packages/compass-sidebar/test/setup.js
index 10bd43da659..76481dd3c68 100644
--- a/packages/compass-sidebar/test/setup.js
+++ b/packages/compass-sidebar/test/setup.js
@@ -10,7 +10,10 @@ const appRegistry = new AppRegistry();
 global.hadronApp = hadronApp;
 global.hadronApp.appRegistry = new AppRegistry();
 
-appRegistry.registerStore('DeploymentAwareness.WriteStateStore', WriteStateStore);
+appRegistry.registerStore(
+  'DeploymentAwareness.WriteStateStore',
+  WriteStateStore
+);
 appRegistry.registerStore('App.CollectionStore', CollectionStore);
 appRegistry.registerStore('App.NamespaceStore', NamespaceStore);
 

From a751fa2075922ee85a1373ea74a8d18956d54cbc Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 12:02:16 +0200
Subject: [PATCH 3/7] refactor: reverse npm run reformat

---
 packages/compass-sidebar/.gitignore           |  13 ---
 packages/compass-sidebar/.mocharc.js          |   6 +-
 .../csfle-connection-modal.jsx                | 108 ++++++++----------
 .../components/csfle-marker/csfle-marker.jsx  |  18 +--
 .../favorite-button/favorite-button.jsx       |  34 +++---
 .../favorite-button/favorite-button.spec.jsx  |  14 +--
 .../non-genuine-warning-modal.jsx             |  41 ++++---
 .../non-genuine-warning-modal.module.less     |   4 +-
 .../non-genuine-warning-modal.spec.jsx        |  16 +--
 .../non-genuine-warning-pill.jsx              |   6 +-
 .../non-genuine-warning-pill.module.less      |   6 +-
 .../non-genuine-warning-pill.spec.jsx         |  27 +----
 .../sidebar-databases-navigation/index.js     |   2 +-
 .../sidebar-instance-details.jsx              |   4 +-
 .../sidebar-instance-details.module.less      |   2 +-
 .../sidebar-instance-details.spec.jsx         |  15 +--
 .../sidebar-instance-stats.jsx                |  50 ++++----
 .../sidebar-instance-stats.module.less        |   2 +-
 .../sidebar-instance-stats.spec.jsx           |  28 ++---
 .../sidebar-instance/sidebar-instance.jsx     |  37 +++---
 .../sidebar-title/sidebar-title.jsx           |  54 +++++----
 .../sidebar-title/sidebar-title.module.less   |   2 +-
 .../components/sidebar/navigation-items.jsx   |   6 +-
 .../src/components/sidebar/sidebar.jsx        |  94 ++++++---------
 .../components/sidebar/sidebar.module.less    |  13 +--
 .../src/constants/sidebar-constants.js        |   2 +-
 .../src/modules/collection.spec.js            |  20 ++--
 .../src/modules/connection-info.js            |  94 +++++++--------
 .../src/modules/connection-info.spec.js       |  75 ++++++------
 .../compass-sidebar/src/modules/databases.js  |  13 ++-
 .../src/modules/databases.spec.js             |  61 +++++-----
 .../src/modules/description.js                |   2 +-
 .../src/modules/description.spec.js           |   8 +-
 .../src/modules/details-plugins.js            |   2 +-
 .../src/modules/details-plugins.spec.js       |  20 ++--
 packages/compass-sidebar/src/modules/index.js |  26 +++--
 .../compass-sidebar/src/modules/instance.js   |   2 +-
 .../src/modules/instance.spec.js              |   4 +-
 .../src/modules/is-data-lake.js               |   2 +-
 .../src/modules/is-data-lake.spec.js          |   6 +-
 .../src/modules/is-details-expanded.js        |   5 +-
 .../src/modules/is-details-expanded.spec.js   |   8 +-
 .../src/modules/is-genuine-mongodb-visible.js |   2 +-
 .../is-genuine-mongodb-visible.spec.js        |   8 +-
 .../src/modules/is-genuine-mongodb.js         |   5 +-
 .../src/modules/is-genuine-mongodb.spec.js    |   4 +-
 .../src/modules/is-writable.js                |   2 +-
 .../src/modules/is-writable.spec.js           |   4 +-
 packages/compass-sidebar/src/modules/reset.js |   2 +-
 packages/compass-sidebar/src/plugin.jsx       |   1 +
 packages/compass-sidebar/src/stores/store.js  |  10 +-
 .../compass-sidebar/src/stores/store.spec.js  |  37 +++---
 .../test/mocks/collection-store.js            |   3 +-
 .../test/mocks/deployment-state-store.js      |   9 +-
 .../test/mocks/namespace-store.js             |   8 +-
 .../components/sidebar-instance.spec.jsx      |  34 +++---
 .../components/sidebar-title.spec.jsx         |  33 ++----
 .../test/renderer/components/sidebar.spec.jsx |  77 +++++--------
 packages/compass-sidebar/test/setup.js        |   5 +-
 .../collation-fields/collation-fields.jsx     |  15 +--
 .../collation-fields.module.less              |   7 ++
 .../capped-collection-fields.jsx              |   6 -
 .../collection-fields/time-series-fields.jsx  |  18 +--
 .../time-series-fields.module.less            |   7 ++
 64 files changed, 534 insertions(+), 715 deletions(-)
 delete mode 100644 packages/compass-sidebar/.gitignore
 create mode 100644 packages/databases-collections/src/components/collation-fields/collation-fields.module.less
 create mode 100644 packages/databases-collections/src/components/collection-fields/time-series-fields.module.less

diff --git a/packages/compass-sidebar/.gitignore b/packages/compass-sidebar/.gitignore
deleted file mode 100644
index 8b1c9433382..00000000000
--- a/packages/compass-sidebar/.gitignore
+++ /dev/null
@@ -1,13 +0,0 @@
-.DS_Store
-npm-debug.log
-node_modules/
-lib/
-lib-cov
-coverage
-.lock-wscript
-.idea/
-*.iml
-.nvmrc
-.nyc_output
-*.swp
-src/assets/fonts/akzid*
diff --git a/packages/compass-sidebar/.mocharc.js b/packages/compass-sidebar/.mocharc.js
index accc49db7cd..afcff13a8df 100644
--- a/packages/compass-sidebar/.mocharc.js
+++ b/packages/compass-sidebar/.mocharc.js
@@ -2,5 +2,7 @@ const base = require('@mongodb-js/mocha-config-compass/compass-plugin');
 
 module.exports = {
   ...base,
-  require: base.require.concat(['test/setup.js']),
-};
+  require: base.require.concat([
+    'test/setup.js'
+  ])
+}
diff --git a/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx b/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
index f7b81b3641e..15505471e64 100644
--- a/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
+++ b/packages/compass-sidebar/src/components/csfle-connection-modal/csfle-connection-modal.jsx
@@ -1,83 +1,71 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  css,
-  spacing,
-  Banner,
-  Body,
-  Description,
-  ModalTitle,
-  Label,
-  Link,
-  Toggle,
-  Modal,
+  css, spacing, Banner, Body, Description, ModalTitle, Label, Link, Toggle, Modal
 } from '@mongodb-js/compass-components';
 
 const toggleStyles = css({
   marginTop: spacing[3],
   marginBottom: spacing[3],
-  marginRight: spacing[3],
+  marginRight: spacing[3]
 });
 
 const toggleContainerStyles = css({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'center'
 });
 
 const csfleBannerStyles = css({
-  marginTop: spacing[3],
+  marginTop: spacing[3]
 });
 
-function CSFLEConnectionModal({
-  csfleMode,
-  open,
-  setOpen,
-  setConnectionIsCSFLEEnabled,
-}) {
-  return (
-    <Modal
-      open={open}
-      title="In-Use Encryption"
-      trackingId="csfle_connection_modal"
-      setOpen={setOpen}
-      data-test-id="csfle-connection-modal"
-    >
-      <div>
-        <ModalTitle>In-Use Encryption Connection Options</ModalTitle>
-        <Body>
+function CSFLEConnectionModal({ csfleMode, open, setOpen, setConnectionIsCSFLEEnabled }) {
+  return (<Modal
+    open={open}
+    title="In-Use Encryption"
+    trackingId="csfle_connection_modal"
+    setOpen={setOpen}
+    data-test-id="csfle-connection-modal"
+  >
+    <div>
+      <ModalTitle>In-Use Encryption Connection Options</ModalTitle>
+      <Body>
           This connection is configured with In-Use Encryption enabled.
-        </Body>
-        <div className={toggleContainerStyles}>
-          <Toggle
-            className={toggleStyles}
-            id="set-csfle-enabled"
-            aria-labelledby="set-csfle-enabled-label"
-            size="small"
-            type="button"
-            checked={csfleMode === 'enabled'}
-            onChange={(checked) => {
-              setConnectionIsCSFLEEnabled(checked);
-            }}
-          />
-          <Label id="set-csfle-enabled-label" htmlFor="set-csfle-enabled">
+      </Body>
+      <div className={toggleContainerStyles}>
+        <Toggle
+          className={toggleStyles}
+          id="set-csfle-enabled"
+          aria-labelledby="set-csfle-enabled-label"
+          size="small"
+          type="button"
+          checked={csfleMode === 'enabled'}
+          onChange={(checked) => {
+            setConnectionIsCSFLEEnabled(checked);
+          }}
+        />
+        <Label
+          id="set-csfle-enabled-label"
+          htmlFor="set-csfle-enabled"
+        >
             Enable In-Use Encryption for this connection
-          </Label>
-        </div>
-        <Description>
-          Disabling In-Use Encryption only affects how Compass accesses data. In
-          order to make Compass forget KMS credentials, the connection must be
-          fully closed.
-        </Description>
+        </Label>
       </div>
-      <Banner className={csfleBannerStyles}>
-        In-Use Encryption is an Enterprise/Atlas-only feature of MongoDB.&nbsp;
-        {/* TODO(COMPASS-5777): Use generic In-Use Encryption documentation URL instead of FLE1-specific one */}
-        <Link href="https://www.mongodb.com/docs/drivers/security/client-side-field-level-encryption-guide/">
+      <Description>
+          Disabling In-Use Encryption only affects how Compass accesses data.
+          In order to make Compass forget KMS credentials, the
+          connection must be fully closed.
+      </Description>
+    </div>
+    <Banner className={csfleBannerStyles}>
+        In-Use Encryption is an Enterprise/Atlas-only feature
+        of MongoDB.&nbsp;
+      {/* TODO(COMPASS-5777): Use generic In-Use Encryption documentation URL instead of FLE1-specific one */}
+      <Link href="https://www.mongodb.com/docs/drivers/security/client-side-field-level-encryption-guide/">
           Learn More
-        </Link>
-      </Banner>
-    </Modal>
-  );
+      </Link>
+    </Banner>
+  </Modal>);
 }
 
 CSFLEConnectionModal.displayName = 'CSFLEConnectionModal';
@@ -85,7 +73,7 @@ CSFLEConnectionModal.propTypes = {
   csfleMode: PropTypes.string,
   open: PropTypes.bool.isRequired,
   setOpen: PropTypes.func.isRequired,
-  setConnectionIsCSFLEEnabled: PropTypes.func.isRequired,
+  setConnectionIsCSFLEEnabled: PropTypes.func.isRequired
 };
 
 export default CSFLEConnectionModal;
diff --git a/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx b/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
index dc67af65558..a332e785df1 100644
--- a/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
+++ b/packages/compass-sidebar/src/components/csfle-marker/csfle-marker.jsx
@@ -6,13 +6,13 @@ import {
   Badge,
   BadgeVariant,
   mergeProps,
-  useFocusRing,
+  useFocusRing
 } from '@mongodb-js/compass-components';
 
 // Let's not worry too much about styling here until
 // the sidebar is redone soon anyway.
 const badgeContainerStyles = css({
-  padding: '0px 0px 6px 36px',
+  padding: '0px 0px 6px 36px'
 });
 
 const badgeButtonStyles = css({
@@ -21,8 +21,8 @@ const badgeButtonStyles = css({
   margin: 0,
   border: 'none',
   '&:hover': {
-    cursor: 'pointer',
-  },
+    cursor: 'pointer'
+  }
 });
 
 function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
@@ -39,7 +39,7 @@ function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
       title: 'Connection In-Use Encryption configuration',
       'data-test-id': 'fle-connection-configuration',
       className: badgeButtonStyles,
-      onClick: () => toggleCSFLEModalVisible(),
+      onClick: () => toggleCSFLEModalVisible()
     },
     focusRingProps
   );
@@ -47,13 +47,7 @@ function CSFLEMarker({ csfleMode, toggleCSFLEModalVisible }) {
   return (
     <div className={badgeContainerStyles}>
       <button {...buttonProps}>
-        <Badge
-          variant={
-            csfleMode === 'enabled'
-              ? BadgeVariant.DarkGray
-              : BadgeVariant.LightGray
-          }
-        >
+        <Badge variant={csfleMode === 'enabled' ? BadgeVariant.DarkGray : BadgeVariant.LightGray}>
           <Icon glyph="Key" />
           In-Use Encryption
         </Badge>
diff --git a/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx b/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
index fe6d3e18c3c..f7502d3da38 100644
--- a/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
+++ b/packages/compass-sidebar/src/components/favorite-button/favorite-button.jsx
@@ -3,34 +3,36 @@ import PropTypes from 'prop-types';
 import {
   FavoriteIcon,
   mergeProps,
-  useFocusRing,
+  useFocusRing
 } from '@mongodb-js/compass-components';
 
 import styles from './favorite-button.module.less';
 
-const FavoriteButton = ({ favoriteOptions, toggleIsFavoriteModalVisible }) => {
+const FavoriteButton = ({
+  favoriteOptions,
+  toggleIsFavoriteModalVisible
+}) => {
   const isFavorite = !!favoriteOptions;
   const style = {
     backgroundColor: '#243642',
-    color: isFavorite ? '#ffffff' : '#88989a',
+    color: isFavorite ? '#ffffff' : '#88989a'
   };
 
   const focusRingProps = useFocusRing();
-  const buttonProps = mergeProps(
-    {
-      type: 'button',
-      'aria-label': 'Edit saved connection',
-      title: 'Edit saved connection',
-      onClick: () => toggleIsFavoriteModalVisible(),
-      className: styles['favorite-button-text'],
-      style,
-    },
-    focusRingProps
-  );
+  const buttonProps = mergeProps({
+    type: 'button',
+    'aria-label': 'Edit saved connection',
+    title: 'Edit saved connection',
+    onClick: () => toggleIsFavoriteModalVisible(),
+    className: styles['favorite-button-text'],
+    style
+  }, focusRingProps);
 
   return (
     <div className={styles['favorite-button']}>
-      <button {...buttonProps}>
+      <button
+        {...buttonProps}
+      >
         <FavoriteIcon
           darkMode
           isFavorite={isFavorite}
@@ -48,7 +50,7 @@ FavoriteButton.displayName = 'FavoriteButton';
 FavoriteButton.propTypes = {
   // Can be undefined. See ConnectionFavoriteOptions of ConnectionInfo.
   favoriteOptions: PropTypes.object,
-  toggleIsFavoriteModalVisible: PropTypes.func.isRequired,
+  toggleIsFavoriteModalVisible: PropTypes.func.isRequired
 };
 
 export default FavoriteButton;
diff --git a/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx b/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
index 5849672609f..67a9c681486 100644
--- a/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
+++ b/packages/compass-sidebar/src/components/favorite-button/favorite-button.spec.jsx
@@ -12,7 +12,7 @@ describe('FavoriteButton [Component]', function () {
     beforeEach(function () {
       component = mount(
         <FavoriteButton
-          toggleIsFavoriteModalVisible={() => {}}
+          toggleIsFavoriteModalVisible={()=>{}}
           favoriteOptions={undefined}
         />
       );
@@ -24,9 +24,7 @@ describe('FavoriteButton [Component]', function () {
 
     it('displays the the default button without star filled in', function () {
       expect(component.find(`.${styles['favorite-button']}`)).to.be.present();
-      expect(
-        component.find(`.${styles['favorite-button-text']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['favorite-button-text']}`)).to.be.present();
       let starStyle = component.find('#favoriteIconStar').get(0).props;
       expect(starStyle).to.have.property('fill', 'none');
     });
@@ -38,10 +36,10 @@ describe('FavoriteButton [Component]', function () {
     beforeEach(function () {
       component = mount(
         <FavoriteButton
-          toggleIsFavoriteModalVisible={() => {}}
+          toggleIsFavoriteModalVisible={()=>{}}
           favoriteOptions={{
             name: '123',
-            color: undefined,
+            color: undefined
           }}
         />
       );
@@ -53,9 +51,7 @@ describe('FavoriteButton [Component]', function () {
 
     it('displays the the filled in star', function () {
       expect(component.find(`.${styles['favorite-button']}`)).to.be.present();
-      expect(
-        component.find(`.${styles['favorite-button-text']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['favorite-button-text']}`)).to.be.present();
 
       let starStyle = component.find('#favoriteIconStar').get(0).props;
       expect(starStyle).to.have.property('fill', '#ffffff');
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
index ae5395dc928..73647ad7308 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.jsx
@@ -11,32 +11,33 @@ import {
   spacing,
   Body,
   ButtonVariant,
-  BannerVariant,
+  BannerVariant
 } from '@mongodb-js/compass-components';
 
 const modalContentWrapperStyles = css({
-  padding: 'initial',
+  padding: 'initial'
 });
 
 const modalContentStyles = css({
-  padding: spacing[5],
+  padding: spacing[5]
 });
 
 const modalBodyStyles = css({
   marginTop: spacing[3],
-  marginBottom: spacing[2],
+  marginBottom: spacing[2]
 });
 
-const DESCRIPTION =
-  'Some documented MongoDB features may work differently, be entirely missing' +
-  ' or incomplete, or have unexpected performance characteristics. ';
-const WARNING_BANNER =
-  'This server or service appears to be an emulation of MongoDB rather than an official MongoDB product.';
-const LEARN_MORE_URL =
-  'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine';
+const DESCRIPTION = 'Some documented MongoDB features may work differently, be entirely missing'
+  + ' or incomplete, or have unexpected performance characteristics. ';
+const WARNING_BANNER = 'This server or service appears to be an emulation of MongoDB rather than an official MongoDB product.';
+const LEARN_MORE_URL = 'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine';
 const MODAL_TITLE = 'Non-Genuine MongoDB Detected';
 
-function NonGenuineWarningModal({ isVisible, toggleIsVisible }) {
+function NonGenuineWarningModal({
+  isVisible,
+  toggleIsVisible,
+
+}) {
   const onClose = useCallback(() => {
     toggleIsVisible(false);
   }, [toggleIsVisible]);
@@ -48,17 +49,21 @@ function NonGenuineWarningModal({ isVisible, toggleIsVisible }) {
       setOpen={onClose}
       contentClassName={modalContentWrapperStyles}
     >
-      <div className={modalContentStyles}>
+      <div
+        className={modalContentStyles}
+      >
         <ModalTitle>{MODAL_TITLE}</ModalTitle>
-        <Banner variant={BannerVariant.Warning}>{WARNING_BANNER}</Banner>
+        <Banner
+          variant={BannerVariant.Warning}
+        >
+          {WARNING_BANNER}
+        </Banner>
         <Body className={modalBodyStyles}>{DESCRIPTION}</Body>
         <Link
           href={LEARN_MORE_URL}
           target="_blank"
           data-test-id="non-genuine-warning-modal-learn-more-link"
-        >
-          Learn more
-        </Link>
+        >Learn more</Link>
       </div>
       <ModalFooter>
         <Button
@@ -76,7 +81,7 @@ function NonGenuineWarningModal({ isVisible, toggleIsVisible }) {
 NonGenuineWarningModal.displayName = 'NonGenuineWarningModal';
 NonGenuineWarningModal.propTypes = {
   isVisible: PropTypes.bool.isRequired,
-  toggleIsVisible: PropTypes.func.isRequired,
+  toggleIsVisible: PropTypes.func.isRequired
 };
 
 export default NonGenuineWarningModal;
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
index 6a6cca3b75f..12265b4f1c5 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.module.less
@@ -1,4 +1,4 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 .non-genuine-warning-modal {
   width: 500px;
@@ -6,7 +6,7 @@
   padding-right: 40px;
   display: flex;
   flex-direction: row;
-  font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
 
   .modal-content {
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
index 0e7217d1693..89b6596fbb0 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-modal/non-genuine-warning-modal.spec.jsx
@@ -34,27 +34,17 @@ describe('NonGenuineWarningModal [Component]', function () {
     });
 
     it('renders the continue button', function () {
-      expect(
-        component.find('[data-test-id="continue-button"]').hostNodes()
-      ).to.have.text('Continue');
+      expect(component.find('[data-test-id="continue-button"]').hostNodes()).to.have.text('Continue');
     });
 
     it('opens the learn more link', function () {
-      expect(
-        component
-          .find('[data-test-id="non-genuine-warning-modal-learn-more-link"]')
-          .hostNodes()
-          .props().href
-      ).to.equal(
+      expect(component.find('[data-test-id="non-genuine-warning-modal-learn-more-link"]').hostNodes().props().href).to.equal(
         'https://docs.mongodb.com/compass/master/faq/#how-does-compass-determine-a-connection-is-not-genuine'
       );
     });
 
     it('closes on continue', function () {
-      component
-        .find('[data-test-id="continue-button"]')
-        .hostNodes()
-        .simulate('click');
+      component.find('[data-test-id="continue-button"]').hostNodes().simulate('click');
       expect(toggleIsVisibleSpy.calledOnce).to.equal(true);
     });
   });
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
index 66cdc0a35c8..8af9e9bf415 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.jsx
@@ -10,8 +10,8 @@ import styles from './non-genuine-warning-pill.module.less';
 class NonGenuineWarningPill extends PureComponent {
   static displayName = 'NonGenuineWarningPill';
   static propTypes = {
-    isGenuineMongoDB: PropTypes.bool.isRequired,
-  };
+    isGenuineMongoDB: PropTypes.bool.isRequired
+  }
 
   /**
    * Render the component.
@@ -25,7 +25,7 @@ class NonGenuineWarningPill extends PureComponent {
     return (
       <div className={styles['non-genuine-warning-pill']}>
         <div className={styles['non-genuine-warning-pill-text']}>
-          <FontAwesome name="exclamation-circle" />
+          <FontAwesome name="exclamation-circle"/>
           &nbsp;NON-GENUINE MONGODB
         </div>
       </div>
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
index 2d3f57e5fb1..77aae43a48e 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.module.less
@@ -1,9 +1,9 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 .non-genuine-warning-pill {
   display: flex;
   flex-direction: row;
-  font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 11px;
   padding: 0px 0px 12px 36px;
   align-items: center;
@@ -14,7 +14,7 @@
     text-transform: uppercase;
     color: @gray1;
     border-radius: 14px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0,0,0,.2);
     padding: 0 8px;
     margin-right: 5px;
     font-weight: bold;
diff --git a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
index e7584a6b35c..e53c0f8ac18 100644
--- a/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
+++ b/packages/compass-sidebar/src/components/non-genuine-warning-pill/non-genuine-warning-pill.spec.jsx
@@ -10,12 +10,7 @@ describe('NonGenuineWarningPill [Component]', function () {
 
   context('when the instance is a non genuine mongo', function () {
     beforeEach(function () {
-      component = mount(
-        <NonGenuineWarningPill
-          isGenuineMongoDB={false}
-          isSidebarCollapsed={false}
-        />
-      );
+      component = mount(<NonGenuineWarningPill isGenuineMongoDB={false} isSidebarCollapsed={false} />);
     });
 
     afterEach(function () {
@@ -23,9 +18,7 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('renders the pill', function () {
-      expect(
-        component.find(`.${styles['non-genuine-warning-pill']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.be.present();
     });
 
     it('renders the icon', function () {
@@ -35,9 +28,7 @@ describe('NonGenuineWarningPill [Component]', function () {
 
   context('when the instance is a genuine mongo', function () {
     beforeEach(function () {
-      component = mount(
-        <NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed={false} />
-      );
+      component = mount(<NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed={false} />);
     });
 
     afterEach(function () {
@@ -45,17 +36,13 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('does not render the pill', function () {
-      expect(
-        component.find(`.${styles['non-genuine-warning-pill']}`)
-      ).to.not.be.present();
+      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.not.be.present();
     });
   });
 
   context('when the instance is collapsed', function () {
     beforeEach(function () {
-      component = mount(
-        <NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed />
-      );
+      component = mount(<NonGenuineWarningPill isGenuineMongoDB isSidebarCollapsed />);
     });
 
     afterEach(function () {
@@ -63,9 +50,7 @@ describe('NonGenuineWarningPill [Component]', function () {
     });
 
     it('does not render the pill', function () {
-      expect(
-        component.find(`.${styles['non-genuine-warning-pill']}`)
-      ).to.not.be.present();
+      expect(component.find(`.${styles['non-genuine-warning-pill']}`)).to.not.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js b/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
index 465084939ce..5e0b724c5aa 100644
--- a/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
+++ b/packages/compass-sidebar/src/components/sidebar-databases-navigation/index.js
@@ -65,7 +65,7 @@ const onNamespaceAction = (namespace, action) => {
         emit('sidebar-duplicate-view', ns);
         break;
       default:
-      // no-op
+        // no-op
     }
   };
 };
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
index 24d77d362e9..4a956d6718c 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.jsx
@@ -7,13 +7,13 @@ class SidebarInstanceDetails extends PureComponent {
   static displayName = 'SidebarInstanceDetails';
   static propTypes = {
     isExpanded: PropTypes.bool.isRequired,
-    detailsPlugins: PropTypes.array.isRequired,
+    detailsPlugins: PropTypes.array.isRequired
   };
 
   constructor(props) {
     super(props);
     this.details = props.detailsPlugins.map((role, i) => {
-      return <role.component key={i} />;
+      return (<role.component key={i} />);
     });
   }
 
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
index 2ab649eab00..5bb98459343 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.module.less
@@ -1,4 +1,4 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 @details-background-color: @gray1;
 @details-background-color: lighten(hsl(204, 29%, 18%), 2%);
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
index 71dbcb84682..31a54985ee1 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-details/sidebar-instance-details.spec.jsx
@@ -17,8 +17,7 @@ describe('SidebarInstanceDetails [Component]', function () {
         <SidebarInstanceDetails
           isExpanded={isExpanded}
           detailsPlugins={detailsPlugins}
-          isSidebarCollapsed={isSidebarCollapsed}
-        />
+          isSidebarCollapsed={isSidebarCollapsed} />
       );
     });
 
@@ -27,9 +26,7 @@ describe('SidebarInstanceDetails [Component]', function () {
     });
 
     it('renders details', function () {
-      expect(
-        component.find(`.${styles['sidebar-instance-details-container']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['sidebar-instance-details-container']}`)).to.be.present();
     });
   });
 
@@ -52,12 +49,8 @@ describe('SidebarInstanceDetails [Component]', function () {
     });
 
     it('does not render details', function () {
-      expect(
-        component.find(`.${styles['sidebar-instance-details-container']}`)
-      ).to.be.not.present();
-      expect(
-        component.find(`.${styles['sidebar-instance-details']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['sidebar-instance-details-container']}`)).to.be.not.present();
+      expect(component.find(`.${styles['sidebar-instance-details']}`)).to.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
index 70e23af3166..940dce0ee00 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.jsx
@@ -10,16 +10,16 @@ class SidebarInstanceStats extends PureComponent {
     databases: PropTypes.array,
     isExpanded: PropTypes.bool.isRequired,
     toggleIsExpanded: PropTypes.func.isRequired,
-    globalAppRegistryEmit: PropTypes.func.isRequired,
+    globalAppRegistryEmit: PropTypes.func.isRequired
   };
 
   onRefresh = () => {
     this.props.globalAppRegistryEmit('refresh-data');
-  };
+  }
 
   onToggleExpanded = () => {
     this.props.toggleIsExpanded(!this.props.isExpanded);
-  };
+  }
 
   getArrowIconClasses() {
     const expanded = this.props.isExpanded ? 'fa fa-rotate-90' : '';
@@ -30,18 +30,20 @@ class SidebarInstanceStats extends PureComponent {
     const { instance, databases } = this.props;
 
     let numDbs = databases.length;
-    let numCollections = databases
-      .map((db) => db.collectionsLength)
-      .reduce((acc, n) => acc + n, 0);
+    let numCollections =
+      databases
+        .map((db) => db.collectionsLength)
+        .reduce((acc, n) => acc + n, 0);
 
     let refreshClassName = 'fa fa-repeat';
 
-    const isRefreshing =
-      !instance ||
-      ['initial', 'fetching', 'refreshing'].includes(instance.refreshingStatus);
+    const isRefreshing = !instance || ['initial', 'fetching', 'refreshing'].includes(
+      instance.refreshingStatus
+    );
 
-    const isInitialOrInitialFetching =
-      !instance || ['initial', 'fetching'].includes(instance.refreshingStatus);
+    const isInitialOrInitialFetching = !instance || ['initial', 'fetching'].includes(
+      instance.refreshingStatus
+    );
 
     if (isRefreshing) {
       refreshClassName = 'fa fa-refresh fa-spin';
@@ -58,43 +60,31 @@ class SidebarInstanceStats extends PureComponent {
       <div className={styles['sidebar-instance-stats']}>
         <div
           className={styles['sidebar-instance-stats-expand']}
-          onClick={this.onToggleExpanded}
-        >
+          onClick={this.onToggleExpanded}>
           <i className={this.getArrowIconClasses()} />
         </div>
         <div className={styles['sidebar-instance-stats-column']}>
           <span
             id="sidebar-instance-stats-dbs"
-            className={styles['sidebar-instance-stats-strong-property']}
-          >
+            className={styles['sidebar-instance-stats-strong-property']}>
             {numDbs}
-          </span>{' '}
-          DBs
+          </span> DBs
         </div>
         <div className={styles['sidebar-instance-stats-column']}>
           <span
             id="sidebar-instance-stats-collections"
-            className={styles['sidebar-instance-stats-strong-property']}
-          >
+            className={styles['sidebar-instance-stats-strong-property']}>
             {numCollections}
-          </span>{' '}
-          Collections
+          </span> Collections
         </div>
-        <div
-          className={styles['sidebar-instance-stats-refresh-button-container']}
-        >
+        <div className={styles['sidebar-instance-stats-refresh-button-container']}>
           <button
             onClick={this.onRefresh}
             data-test-id="sidebar-instance-stats-refresh-button"
             className={styles['sidebar-instance-stats-refresh-button']}
             disabled={isRefreshing}
           >
-            <i
-              className={refreshClassName}
-              data-test-id={`sidebar-instance-stats-refresh-${
-                isRefreshing ? 'spinning' : 'idle'
-              }`}
-            />
+            <i className={refreshClassName} data-test-id={`sidebar-instance-stats-refresh-${isRefreshing ? 'spinning' : 'idle'}`} />
           </button>
         </div>
       </div>
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
index 1e0cb6afefe..a3043047dd2 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.module.less
@@ -1,4 +1,4 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 @compass-sidebar-default-text-color: @gray5;
 @compass-sidebar-hover-background-color: @gray1;
diff --git a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
index 74dd91bffde..ccfdda688a1 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance-stats/sidebar-instance-stats.spec.jsx
@@ -14,15 +14,13 @@ describe('SidebarInstanceStats [Component]', function () {
     beforeEach(function () {
       toggleSpy = sinon.spy();
       emitSpy = sinon.spy();
-      component = mount(
-        <SidebarInstanceStats
-          instance={null}
-          databases={[]}
-          isExpanded
-          toggleIsExpanded={toggleSpy}
-          globalAppRegistryEmit={emitSpy}
-        />
-      );
+      component = mount(<SidebarInstanceStats
+        instance={null}
+        databases={[]}
+        isExpanded
+        toggleIsExpanded={toggleSpy}
+        globalAppRegistryEmit={emitSpy}
+      />);
     });
 
     afterEach(function () {
@@ -32,9 +30,7 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('counts collections correctly', function () {
-      expect(
-        component.find('#sidebar-instance-stats-collections')
-      ).to.have.text('-');
+      expect(component.find('#sidebar-instance-stats-collections')).to.have.text('-');
     });
 
     it('counts dbs correctly', function () {
@@ -68,9 +64,7 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('counts collections correctly', function () {
-      expect(
-        component.find('#sidebar-instance-stats-collections')
-      ).to.have.text('5');
+      expect(component.find('#sidebar-instance-stats-collections')).to.have.text('5');
     });
 
     it('counts dbs correctly', function () {
@@ -102,9 +96,7 @@ describe('SidebarInstanceStats [Component]', function () {
     });
 
     it('refreshes', function () {
-      component
-        .find(`.${styles['sidebar-instance-stats-refresh-button']}`)
-        .simulate('click');
+      component.find(`.${styles['sidebar-instance-stats-refresh-button']}`).simulate('click');
       expect(emitSpy.calledWith('refresh-data')).to.equal(true);
     });
   });
diff --git a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
index 4f5e8899f85..afbe0249d66 100644
--- a/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-instance/sidebar-instance.jsx
@@ -22,22 +22,19 @@ export const SidebarInstance = ({
   detailsPlugins,
   connectionInfo,
   updateConnectionInfo,
-  setConnectionIsCSFLEEnabled,
+  setConnectionIsCSFLEEnabled
 }) => {
-  const [isFavoriteModalVisible, setIsFavoriteModalVisible] = useState(false);
-  const [isCSFLEModalVisible, setIsCSFLEModalVisible] = useState(false);
+  const [ isFavoriteModalVisible, setIsFavoriteModalVisible ] = useState(false);
+  const [ isCSFLEModalVisible, setIsCSFLEModalVisible ] = useState(false);
 
-  const onClickSaveFavorite = useCallback(
-    (newFavoriteInfo) => {
-      updateConnectionInfo({
-        ...cloneDeep(connectionInfo),
-        favorite: newFavoriteInfo,
-      });
+  const onClickSaveFavorite = useCallback((newFavoriteInfo) => {
+    updateConnectionInfo({
+      ...cloneDeep(connectionInfo),
+      favorite: newFavoriteInfo
+    });
 
-      setIsFavoriteModalVisible(false);
-    },
-    [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]
-  );
+    setIsFavoriteModalVisible(false);
+  }, [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]);
 
   return (
     <div className={styles['sidebar-instance']}>
@@ -50,15 +47,13 @@ export const SidebarInstance = ({
       />
       <FavoriteButton
         favoriteOptions={connectionInfo.favorite}
-        toggleIsFavoriteModalVisible={() =>
-          setIsFavoriteModalVisible(!isFavoriteModalVisible)
-        }
+        toggleIsFavoriteModalVisible={() => setIsFavoriteModalVisible(
+          !isFavoriteModalVisible
+        )}
       />
       <CSFLEMarker
         csfleMode={instance?.csfleMode}
-        toggleCSFLEModalVisible={() =>
-          setIsCSFLEModalVisible(!isCSFLEModalVisible)
-        }
+        toggleCSFLEModalVisible={() => setIsCSFLEModalVisible(!isCSFLEModalVisible)}
       />
       <CSFLEConnectionModal
         open={isCSFLEModalVisible}
@@ -72,7 +67,9 @@ export const SidebarInstance = ({
         onCancelClicked={() => setIsFavoriteModalVisible(false)}
         onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)}
       />
-      <NonGenuineWarningPill isGenuineMongoDB={isGenuineMongoDB} />
+      <NonGenuineWarningPill
+        isGenuineMongoDB={isGenuineMongoDB}
+      />
       <SidebarInstanceDetails
         detailsPlugins={detailsPlugins}
         isExpanded={isExpanded}
diff --git a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
index 412b383474c..73918177323 100644
--- a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.jsx
@@ -3,36 +3,42 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-import { MongoDBLogoMark } from '@mongodb-js/compass-components';
-import { getConnectionTitle } from 'mongodb-data-service';
+import {
+  MongoDBLogoMark
+} from '@mongodb-js/compass-components';
+import {
+  getConnectionTitle,
+} from 'mongodb-data-service';
 
 import { NO_ACTIVE_NAMESPACE } from '../../modules/databases';
 import styles from './sidebar-title.module.less';
 
-const CollapsedTitle = ({ connectionInfo }) => {
+const CollapsedTitle = ({
+  connectionInfo
+}) => {
   const isFavorite = !!connectionInfo.favorite;
 
   return (
     <div
-      style={
-        isFavorite
-          ? {
-              backgroundColor: connectionInfo.favorite.color || 'transparent',
-            }
-          : {}
-      }
+      style={isFavorite ? {
+        backgroundColor: connectionInfo.favorite.color || 'transparent'
+      } : {}}
       className={styles['sidebar-title-logo']}
     >
-      <MongoDBLogoMark color="white" />
+      <MongoDBLogoMark
+        color="white"
+      />
     </div>
   );
 };
 
 CollapsedTitle.propTypes = {
-  connectionInfo: PropTypes.object.isRequired,
+  connectionInfo: PropTypes.object.isRequired
 };
 
-const ExpandedTitle = ({ connectionInfo }) => {
+const ExpandedTitle = ({
+  connectionInfo
+}) => {
   return (
     <div className={styles['sidebar-title-name']}>
       {getConnectionTitle(connectionInfo)}
@@ -41,31 +47,33 @@ const ExpandedTitle = ({ connectionInfo }) => {
 };
 
 ExpandedTitle.propTypes = {
-  connectionInfo: PropTypes.object.isRequired,
+  connectionInfo: PropTypes.object.isRequired
 };
 
 const SidebarTitle = ({
   activeNamespace,
   connectionInfo,
   isSidebarExpanded,
-  onClick,
+  onClick
 }) => {
   return (
     // TODO: https://jira.mongodb.org/browse/COMPASS-5918
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
       className={classnames(styles['sidebar-title'], {
-        [styles['sidebar-title-is-active']]:
-          activeNamespace === NO_ACTIVE_NAMESPACE,
+        [styles['sidebar-title-is-active']]: activeNamespace === NO_ACTIVE_NAMESPACE
       })}
       data-test-id="sidebar-title"
       onClick={onClick}
     >
-      {isSidebarExpanded ? (
-        <ExpandedTitle connectionInfo={connectionInfo} />
-      ) : (
-        <CollapsedTitle connectionInfo={connectionInfo} />
-      )}
+      {isSidebarExpanded
+        ? <ExpandedTitle
+          connectionInfo={connectionInfo}
+        />
+        : <CollapsedTitle
+          connectionInfo={connectionInfo}
+        />
+      }
     </div>
   );
 };
@@ -79,7 +87,7 @@ SidebarTitle.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  activeNamespace: state.databases.activeNamespace,
+  activeNamespace: state.databases.activeNamespace
 });
 
 export default connect(mapStateToProps)(SidebarTitle);
diff --git a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
index a326ee136d5..197cd4168fd 100644
--- a/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
+++ b/packages/compass-sidebar/src/components/sidebar-title/sidebar-title.module.less
@@ -1,4 +1,4 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 @compass-sidebar-title-background-color: @gray1;
 @compass-sidebar-title-background-color: lighten(hsl(204, 29%, 18%), 5%);
diff --git a/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx b/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
index 8dd134c76b5..75663d22f61 100644
--- a/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
+++ b/packages/compass-sidebar/src/components/sidebar/navigation-items.jsx
@@ -6,7 +6,7 @@ import {
   Icon,
   useFocusRing,
   mergeProps,
-  uiColors,
+  uiColors
 } from '@mongodb-js/compass-components';
 
 const items = [
@@ -31,8 +31,8 @@ const navItemButton = css({
   backgroundColor: uiColors.gray.dark2,
   ':hover': {
     cursor: 'pointer',
-    backgroundColor: uiColors.gray.dark3,
-  },
+    backgroundColor: uiColors.gray.dark3
+  }
 });
 
 const iconStyle = css({
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
index 74ae26caa30..3054e338baf 100644
--- a/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
+++ b/packages/compass-sidebar/src/components/sidebar/sidebar.jsx
@@ -51,12 +51,12 @@ class Sidebar extends PureComponent {
     toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
     globalAppRegistryEmit: PropTypes.func.isRequired,
     connectionInfo: PropTypes.object.isRequired,
-    updateAndSaveConnectionInfo: PropTypes.func.isRequired,
+    updateAndSaveConnectionInfo: PropTypes.func.isRequired
   };
 
   state = {
     width: defaultSidebarWidthOpened,
-    prevWidth: defaultSidebarWidthOpened,
+    prevWidth: defaultSidebarWidthOpened
   };
 
   onNavigationItemClick(tabName) {
@@ -65,16 +65,15 @@ class Sidebar extends PureComponent {
 
   updateWidth(width) {
     this.setState(
-      width > sidebarMinWidthOpened
+      (width > sidebarMinWidthOpened)
         ? {
-            width,
-            // Store the previous width to use when toggling open/close
-            // when we resize while the sidebar is expanded.
-            prevWidth: width,
-          }
-        : {
-            width,
-          }
+          width,
+          // Store the previous width to use when toggling open/close
+          // when we resize while the sidebar is expanded.
+          prevWidth: width
+        } : {
+          width
+        }
     );
   }
 
@@ -119,28 +118,16 @@ class Sidebar extends PureComponent {
 
   renderCreateDatabaseButton() {
     if (!this.isReadonlyDistro() && !this.props.isDataLake) {
-      const isW = !this.props.isWritable
-        ? styles['compass-sidebar-button-is-disabled']
-        : '';
-      const className = classnames(
-        styles['compass-sidebar-button-create-database'],
-        styles[isW]
-      );
+      const isW = !this.props.isWritable ? styles['compass-sidebar-button-is-disabled'] : '';
+      const className = classnames(styles['compass-sidebar-button-create-database'], styles[isW]);
       return (
         <div
-          className={classnames(
-            styles['compass-sidebar-button-create-database-container']
-          )}
-        >
+          className={classnames(styles['compass-sidebar-button-create-database-container'])}>
           <button
             className={className}
             title="Create Database"
             data-test-id="create-database-button"
-            onClick={this.handleCreateDatabaseClick.bind(
-              this,
-              this.props.isWritable
-            )}
-          >
+            onClick={this.handleCreateDatabaseClick.bind(this, this.props.isWritable)}>
             <i className="mms-icon-add" />
             <div className={classnames(styles['plus-button'])}>
               Create Database
@@ -155,19 +142,17 @@ class Sidebar extends PureComponent {
     const { width, prevWidth } = this.state;
 
     const isExpanded = width > sidebarMinWidthOpened;
-    const renderedWidth = isExpanded
-      ? boundSidebarWidth(width)
-      : sidebarWidthCollapsed;
+    const renderedWidth = isExpanded ? boundSidebarWidth(width) : sidebarWidthCollapsed;
 
-    const collapsedButton =
-      'fa' + (isExpanded ? ' fa-caret-left' : ' fa-caret-right');
+    const collapsedButton = 'fa' +
+      (isExpanded ? ' fa-caret-left' : ' fa-caret-right');
 
     // TODO: https://jira.mongodb.org/browse/COMPASS-5918
     /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, react/no-string-refs */
     return (
       <div
         className={classnames(styles['compass-sidebar'], {
-          [styles['compass-sidebar-collapsed']]: !isExpanded,
+          [styles['compass-sidebar-collapsed']]: !isExpanded
         })}
         data-test-id="compass-sidebar-panel"
         style={{ width: renderedWidth }}
@@ -181,18 +166,14 @@ class Sidebar extends PureComponent {
           title="sidebar"
         />
         <button
-          className={classnames(
-            styles['compass-sidebar-toggle'],
-            'btn btn-default btn-sm'
-          )}
-          onClick={() =>
-            isExpanded
-              ? this.updateWidth(sidebarWidthCollapsed)
-              : this.updateWidth(prevWidth)
+          className={classnames(styles['compass-sidebar-toggle'], 'btn btn-default btn-sm')}
+          onClick={() => isExpanded
+            ? this.updateWidth(sidebarWidthCollapsed)
+            : this.updateWidth(prevWidth)
           }
           data-test-id="toggle-sidebar"
         >
-          <i className={collapsedButton} />
+          <i className={collapsedButton}/>
         </button>
         <SidebarTitle
           connectionInfo={this.props.connectionInfo}
@@ -210,9 +191,7 @@ class Sidebar extends PureComponent {
             globalAppRegistryEmit={this.props.globalAppRegistryEmit}
             connectionInfo={this.props.connectionInfo}
             updateConnectionInfo={this.props.updateAndSaveConnectionInfo}
-            setConnectionIsCSFLEEnabled={(enabled) =>
-              this.handleSetConnectionIsCSFLEEnabled(enabled)
-            }
+            setConnectionIsCSFLEEnabled={(enabled) => this.handleSetConnectionIsCSFLEEnabled(enabled)}
           />
         )}
         <NavigationItems
@@ -223,13 +202,7 @@ class Sidebar extends PureComponent {
           className={styles['compass-sidebar-filter']}
           onClick={this.handleSearchFocus.bind(this)}
         >
-          <i
-            className={classnames(
-              'fa',
-              'fa-search',
-              styles['compass-sidebar-search-icon']
-            )}
-          />
+          <i className={classnames('fa', 'fa-search', styles['compass-sidebar-search-icon'])}/>
           <input
             data-test-id="sidebar-filter-input"
             ref="filter"
@@ -275,13 +248,16 @@ const mapStateToProps = (state) => ({
  * Connect the redux store to the component.
  * (dispatch)
  */
-const MappedSidebar = connect(mapStateToProps, {
-  toggleIsDetailsExpanded,
-  toggleIsGenuineMongoDBVisible,
-  changeFilterRegex,
-  globalAppRegistryEmit,
-  updateAndSaveConnectionInfo,
-})(Sidebar);
+const MappedSidebar = connect(
+  mapStateToProps,
+  {
+    toggleIsDetailsExpanded,
+    toggleIsGenuineMongoDBVisible,
+    changeFilterRegex,
+    globalAppRegistryEmit,
+    updateAndSaveConnectionInfo
+  },
+)(Sidebar);
 
 export default MappedSidebar;
 export { Sidebar };
diff --git a/packages/compass-sidebar/src/components/sidebar/sidebar.module.less b/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
index c18c5012d2d..36bc1e11573 100644
--- a/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
+++ b/packages/compass-sidebar/src/components/sidebar/sidebar.module.less
@@ -1,4 +1,4 @@
-@import (reference) 'mongodb-compass/src/app/styles/index.less';
+@import (reference) "mongodb-compass/src/app/styles/index.less";
 
 @compass-sidebar-default-text-color: @gray5;
 @compass-sidebar-base-background-color: @grayDark2;
@@ -33,8 +33,7 @@
     padding: 0;
     cursor: pointer;
     z-index: -5;
-    &:hover,
-    &:focus {
+    &:hover, &:focus {
       border-left: 0;
     }
   }
@@ -50,7 +49,7 @@
 
   &-filter {
     position: relative;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 2px 2px rgba(0,0,0,.3);
     z-index: 2;
   }
 
@@ -70,7 +69,7 @@
     width: 100%;
     border: none;
     font-size: 14px;
-    font-family: 'Akzidenz', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     outline: none;
   }
@@ -93,12 +92,12 @@
   *::-webkit-scrollbar-track {
     background-color: none;
     &:hover {
-      background-color: rgba(0, 0, 0, 0.16);
+      background-color: rgba(0,0,0,.16);
     }
   }
 
   *::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.25);
+    background-color: rgba(255,255,255,.25);
     -webkit-border-radius: 10px;
     border-radius: 10px;
   }
diff --git a/packages/compass-sidebar/src/constants/sidebar-constants.js b/packages/compass-sidebar/src/constants/sidebar-constants.js
index 3deadf4e0f8..01c11cd26c9 100644
--- a/packages/compass-sidebar/src/constants/sidebar-constants.js
+++ b/packages/compass-sidebar/src/constants/sidebar-constants.js
@@ -3,5 +3,5 @@ export const TOOLTIP_IDS = Object.freeze({
   CREATE_COLLECTION: 'create-collection',
   CREATE_DATABASE_BUTTON: 'create-database-button',
   DROP_COLLECTION: 'drop-collection',
-  DROP_DATABASE: 'drop-database',
+  DROP_DATABASE: 'drop-database'
 });
diff --git a/packages/compass-sidebar/src/modules/collection.spec.js b/packages/compass-sidebar/src/modules/collection.spec.js
index 9eff48083e9..01137b60114 100644
--- a/packages/compass-sidebar/src/modules/collection.spec.js
+++ b/packages/compass-sidebar/src/modules/collection.spec.js
@@ -1,33 +1,37 @@
 import { expect } from 'chai';
 
-import { getSource, getSourceName, getSourceViewOn } from './collection';
+import {
+  getSource,
+  getSourceName,
+  getSourceViewOn,
+} from './collection';
 
 const COLL = {
   _id: 'db.test',
-  readonly: false,
+  readonly: false
 };
 
 const VIEW = {
   _id: 'db.testView',
   readonly: true,
   view_on: 'test',
-  pipeline: [],
+  pipeline: []
 };
 
 const VIEW_ON_VIEW = {
   _id: 'db.testViewOnView',
   readonly: true,
   view_on: 'testView',
-  pipeline: [],
+  pipeline: []
 };
 
 const TIME_SERIES = {
   _id: 'db.testTimeSeries',
   type: 'timeSeries',
-  readonly: false,
+  readonly: false
 };
 
-const COLLECTIONS = [COLL, VIEW, VIEW_ON_VIEW, TIME_SERIES];
+const COLLECTIONS = [ COLL, VIEW, VIEW_ON_VIEW, TIME_SERIES ];
 
 describe('collection module', function () {
   describe('#getSource', function () {
@@ -47,9 +51,7 @@ describe('collection module', function () {
   describe('#getSourceName', function () {
     context('when the collection is a view', function () {
       it('returns the source name', function () {
-        expect(getSourceName(VIEW.readonly, 'db', 'testView')).to.equal(
-          'db.testView'
-        );
+        expect(getSourceName(VIEW.readonly, 'db', 'testView')).to.equal('db.testView');
       });
     });
 
diff --git a/packages/compass-sidebar/src/modules/connection-info.js b/packages/compass-sidebar/src/modules/connection-info.js
index d63721bde1f..1b3324cf958 100644
--- a/packages/compass-sidebar/src/modules/connection-info.js
+++ b/packages/compass-sidebar/src/modules/connection-info.js
@@ -1,4 +1,6 @@
-import { ConnectionStorage } from 'mongodb-data-service';
+import {
+  ConnectionStorage
+} from 'mongodb-data-service';
 import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 
 const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
@@ -9,20 +11,20 @@ const { debug } = createLoggerAndTelemetry('COMPASS-SIDEBAR');
 const CHANGE_CONNECTION_INFO = 'sidebar/connection/CHANGE_CONNECTION_INFO';
 
 /**
- * Save favorite connection action name.
- */
+* Save favorite connection action name.
+*/
 const SAVE_CONNECTION_INFO = 'sidebar/connection/SAVE_CONNECTION_INFO';
 
 /**
- * The initial state of the connection.
- */
+* The initial state of the connection.
+*/
 export const INITIAL_STATE = {
   connectionInfo: {
     connectionOptions: {
-      connectionString: 'mongodb://localhost:27017',
-    },
+      connectionString: 'mongodb://localhost:27017'
+    }
   },
-  connectionStorage: new ConnectionStorage(),
+  connectionStorage: new ConnectionStorage()
 };
 
 async function saveConnectionInfo(connectionInfo, connectionStorage) {
@@ -40,25 +42,25 @@ async function saveConnectionInfo(connectionInfo, connectionStorage) {
 }
 
 /**
- * Changes the connection.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
- */
+* Changes the connection.
+*
+* @param {Object} state - The state.
+* @param {Object} action - The action.
+*
+* @returns {Object} The new state.
+*/
 const doChangeConnectionInfo = (state, action) => {
   return { ...state, connectionInfo: action.connectionInfo };
 };
 
 /**
- * Saves the new favorite connection info.
- *
- * @param {Object} state - The state.
- * @param {Object} action - The action.
- *
- * @returns {Object} The new state.
- */
+* Saves the new favorite connection info.
+*
+* @param {Object} state - The state.
+* @param {Object} action - The action.
+*
+* @returns {Object} The new state.
+*/
 const doSaveConnectionInfo = (state, action) => {
   saveConnectionInfo(action.connectionInfo, state.connectionStorage);
 
@@ -66,21 +68,21 @@ const doSaveConnectionInfo = (state, action) => {
 };
 
 /**
- * To not have a huge switch statement in the reducer.
- */
+* To not have a huge switch statement in the reducer.
+*/
 const MAPPINGS = {
   [CHANGE_CONNECTION_INFO]: doChangeConnectionInfo,
-  [SAVE_CONNECTION_INFO]: doSaveConnectionInfo,
+  [SAVE_CONNECTION_INFO]: doSaveConnectionInfo
 };
 
 /**
- * Reducer function for handle state changes.
- *
- * @param {String} state - The status state.
- * @param {Object} action - The action.
- *
- * @returns {String} The new state.
- */
+* Reducer function for handle state changes.
+*
+* @param {String} state - The status state.
+* @param {Object} action - The action.
+*
+* @returns {String} The new state.
+*/
 export default function reducer(state = INITIAL_STATE, action) {
   const fn = MAPPINGS[action.type];
 
@@ -88,25 +90,25 @@ export default function reducer(state = INITIAL_STATE, action) {
 }
 
 /**
- * Change connection action creator.
- *
- * @param {Object} connectionInfo - The connection info object.
- *
- * @returns {Object} The action.
- */
+* Change connection action creator.
+*
+* @param {Object} connectionInfo - The connection info object.
+*
+* @returns {Object} The action.
+*/
 export const changeConnectionInfo = (connectionInfo) => ({
   type: CHANGE_CONNECTION_INFO,
-  connectionInfo,
+  connectionInfo
 });
 
 /**
- * Save connection info action creator.
- *
- * @param {Object} connectionInfo - The connection info object.
- *
- * @returns {Object} The action.
- */
+* Save connection info action creator.
+*
+* @param {Object} connectionInfo - The connection info object.
+*
+* @returns {Object} The action.
+*/
 export const updateAndSaveConnectionInfo = (connectionInfo) => ({
   type: SAVE_CONNECTION_INFO,
-  connectionInfo,
+  connectionInfo
 });
diff --git a/packages/compass-sidebar/src/modules/connection-info.spec.js b/packages/compass-sidebar/src/modules/connection-info.spec.js
index 3b8efb12faf..3818e5a2c76 100644
--- a/packages/compass-sidebar/src/modules/connection-info.spec.js
+++ b/packages/compass-sidebar/src/modules/connection-info.spec.js
@@ -4,38 +4,33 @@ import sinon from 'sinon';
 import reducer, {
   INITIAL_STATE,
   changeConnectionInfo,
-  updateAndSaveConnectionInfo,
+  updateAndSaveConnectionInfo
 } from './connection-info';
 
 describe('connection info module', function () {
   const connectionInfoNotFavorite = {
     connectionOptions: {
-      connectionString: 'mongodb://outerspace:27000',
+      connectionString: 'mongodb://outerspace:27000'
     },
-    id: '123',
+    id: '123'
   };
 
   describe('reducer', function () {
     context('when the action is changeConnectionInfo', function () {
       it('returns the new state', function () {
-        expect(
-          reducer(undefined, changeConnectionInfo(connectionInfoNotFavorite))
-        ).to.deep.equal({
+        expect(reducer(undefined, changeConnectionInfo(connectionInfoNotFavorite))).to.deep.equal({
           connectionInfo: connectionInfoNotFavorite,
-          connectionStorage: {},
+          connectionStorage: {}
         });
       });
 
       it('does not call the connection storage to save', function () {
         const saveSpy = sinon.spy();
-        reducer(
-          {
-            connectionStorage: {
-              save: saveSpy,
-            },
-          },
-          changeConnectionInfo(connectionInfoNotFavorite)
-        );
+        reducer({
+          connectionStorage: {
+            save: saveSpy
+          }
+        }, changeConnectionInfo(connectionInfoNotFavorite));
 
         expect(saveSpy.callCount).to.equal(0);
       });
@@ -47,50 +42,46 @@ describe('connection info module', function () {
           ...connectionInfoNotFavorite,
           favorite: {
             name: 'My Favorite',
-            color: '#d4366e',
-          },
+            color: '#d4366e'
+          }
         });
-        const state = reducer(
-          {
-            connectionStorage: {
-              save: function () {},
-            },
-          },
-          newConnection
-        );
+        const state = reducer({
+          connectionStorage: {
+            save: function () {}
+          }
+        }, newConnection);
 
         expect(state.connectionInfo.favorite.name).to.equal('My Favorite');
         expect(state.connectionInfo.favorite.color).to.equal('#d4366e');
       });
 
       it('calls to save the connection info in the connection storage', function () {
-        const newConnection = updateAndSaveConnectionInfo({
-          ...connectionInfoNotFavorite,
-          favorite: {
-            name: 'My Favorite',
-            color: '#d4366e',
-          },
-        });
-        const saveSpy = sinon.spy();
-        reducer(
+        const newConnection = updateAndSaveConnectionInfo(
           {
-            connectionStorage: {
-              save: saveSpy,
-            },
-          },
-          newConnection
+            ...connectionInfoNotFavorite,
+            favorite: {
+              name: 'My Favorite',
+              color: '#d4366e'
+            }
+          }
         );
+        const saveSpy = sinon.spy();
+        reducer({
+          connectionStorage: {
+            save: saveSpy
+          }
+        }, newConnection);
 
         expect(saveSpy.callCount).to.equal(1);
         expect(saveSpy.firstCall.args[0]).to.deep.equal({
           connectionOptions: {
-            connectionString: 'mongodb://outerspace:27000',
+            connectionString: 'mongodb://outerspace:27000'
           },
           id: '123',
           favorite: {
             name: 'My Favorite',
-            color: '#d4366e',
-          },
+            color: '#d4366e'
+          }
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/databases.js b/packages/compass-sidebar/src/modules/databases.js
index edbdcb65af3..c2f7d7c7cda 100644
--- a/packages/compass-sidebar/src/modules/databases.js
+++ b/packages/compass-sidebar/src/modules/databases.js
@@ -5,8 +5,7 @@ import toNS from 'mongodb-ns';
  */
 export const CHANGE_FILTER_REGEX = 'sidebar/databases/CHANGE_FILTER_REGEX';
 export const CHANGE_DATABASES = 'sidebar/databases/CHANGE_DATABASES';
-export const CHANGE_ACTIVE_NAMESPACE =
-  'sidebar/databases/CHANGE_ACTIVE_NAMESPACE';
+export const CHANGE_ACTIVE_NAMESPACE = 'sidebar/databases/CHANGE_ACTIVE_NAMESPACE';
 export const TOGGLE_DATABASE = 'sidebar/databases/TOGGLE_DATABASE';
 
 const NO_REGEX = null;
@@ -21,7 +20,7 @@ export const INITIAL_STATE = {
   filteredDatabases: [],
   expandedDbList: {},
   activeNamespace: NO_ACTIVE_NAMESPACE,
-  filterRegex: NO_REGEX,
+  filterRegex: NO_REGEX
 };
 
 /**
@@ -102,7 +101,7 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const changeDatabases = (databases) => ({
   type: CHANGE_DATABASES,
-  databases,
+  databases
 });
 
 /**
@@ -115,7 +114,7 @@ export const changeDatabases = (databases) => ({
 export const changeActiveNamespace = (activeNamespace) => ({
   type: CHANGE_ACTIVE_NAMESPACE,
   activeNamespace,
-  activeDatabase: toNS(activeNamespace).database,
+  activeDatabase: toNS(activeNamespace).database
 });
 
 export const toggleDatabaseExpanded = (id, force) => (dispatch, getState) => {
@@ -160,7 +159,9 @@ const filterDatabases = (databases, re) => {
     if (re.test(id)) {
       result.push(db);
     } else {
-      const collections = db.collections.filter((coll) => re.test(coll.name));
+      const collections = db.collections.filter((coll) =>
+        re.test(coll.name)
+      );
 
       if (collections.length > 0) {
         result.push({
diff --git a/packages/compass-sidebar/src/modules/databases.spec.js b/packages/compass-sidebar/src/modules/databases.spec.js
index 0d4aa334165..be71e789f33 100644
--- a/packages/compass-sidebar/src/modules/databases.spec.js
+++ b/packages/compass-sidebar/src/modules/databases.spec.js
@@ -4,16 +4,16 @@ import databasesReducer, {
   INITIAL_STATE,
   changeDatabases,
   changeActiveNamespace,
-  changeFilterRegex,
+  changeFilterRegex
 } from './databases';
 
 import { createInstance } from '../../test/helpers';
 
 function createGetState(dbs) {
-  return function () {
+  return function() {
     return {
       instance: createInstance(dbs).toJSON(),
-      appRegistry: {},
+      appRegistry: {}
     };
   };
 }
@@ -22,12 +22,15 @@ function createDatabases(dbs) {
   return createInstance(dbs).databases.map((db) => {
     return {
       ...db.toJSON(),
-      collections: db.collections.toJSON(),
+      collections: db.collections.toJSON()
     };
   });
 }
 
-function createMockStoreSlice(initialState = {}, reducer = databasesReducer) {
+function createMockStoreSlice(
+  initialState = {},
+  reducer = databasesReducer
+) {
   let state = { ...INITIAL_STATE, ...initialState };
   return {
     get state() {
@@ -55,39 +58,29 @@ describe('sidebar databases', function () {
       });
     });
 
-    context(
-      'when changing databases and there is a filter in the state',
-      function () {
-        it('filters databases in the state', function () {
-          const initialState = {
-            ...INITIAL_STATE,
-            filterRegex: /^foo$/,
-          };
-
-          const dbs = createDatabases([
-            { _id: 'foo' },
-            { _id: 'bar' },
-            { _id: 'buz' },
-          ]);
-
-          expect(
-            databasesReducer(initialState, changeDatabases(dbs))
-          ).to.deep.equal({
-            ...initialState,
-            filteredDatabases: dbs.filter((db) => db._id === 'foo'),
-            databases: dbs,
-          });
+    context('when changing databases and there is a filter in the state', function () {
+      it('filters databases in the state', function () {
+        const initialState = {
+          ...INITIAL_STATE,
+          filterRegex: /^foo$/,
+        };
+
+        const dbs = createDatabases([{ _id: 'foo' }, { _id: 'bar' }, { _id: 'buz' }]);
+
+        expect(
+          databasesReducer(initialState, changeDatabases(dbs))
+        ).to.deep.equal({
+          ...initialState,
+          filteredDatabases: dbs.filter(db => db._id === 'foo'),
+          databases: dbs,
         });
-      }
-    );
+      });
+    });
 
     context('when active namespace changed', function () {
       it('changes active namespace and "expands" the namespace in the list', function () {
         expect(
-          databasesReducer(
-            undefined,
-            changeActiveNamespace('new_active.namespace')
-          )
+          databasesReducer(undefined, changeActiveNamespace('new_active.namespace'))
         ).to.deep.equal({
           ...INITIAL_STATE,
           activeNamespace: 'new_active.namespace',
@@ -109,7 +102,7 @@ describe('sidebar databases', function () {
         ]);
 
         const slice = createMockStoreSlice({
-          databases: dbs,
+          databases: dbs
         });
 
         changeFilterRegex(/^foo$/)(slice.dispatch, getState);
diff --git a/packages/compass-sidebar/src/modules/description.js b/packages/compass-sidebar/src/modules/description.js
index a7c7188fe21..9c373caf1bc 100644
--- a/packages/compass-sidebar/src/modules/description.js
+++ b/packages/compass-sidebar/src/modules/description.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const changeDescription = (description) => ({
   type: CHANGE_DESCRIPTION,
-  description: description,
+  description: description
 });
diff --git a/packages/compass-sidebar/src/modules/description.spec.js b/packages/compass-sidebar/src/modules/description.spec.js
index a37c8d2cd1d..8438717d089 100644
--- a/packages/compass-sidebar/src/modules/description.spec.js
+++ b/packages/compass-sidebar/src/modules/description.spec.js
@@ -3,16 +3,14 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   changeDescription,
-  CHANGE_DESCRIPTION,
+  CHANGE_DESCRIPTION
 } from './description';
 
 describe('sidebar description', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(
-          reducer(undefined, changeDescription('new description'))
-        ).to.equal('new description');
+        expect(reducer(undefined, changeDescription('new description'))).to.equal('new description');
       });
     });
 
@@ -27,7 +25,7 @@ describe('sidebar description', function () {
     it('returns the action', function () {
       expect(changeDescription('new description w action')).to.deep.equal({
         type: CHANGE_DESCRIPTION,
-        description: 'new description w action',
+        description: 'new description w action'
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/details-plugins.js b/packages/compass-sidebar/src/modules/details-plugins.js
index 28999c231c4..004d54ad1ce 100644
--- a/packages/compass-sidebar/src/modules/details-plugins.js
+++ b/packages/compass-sidebar/src/modules/details-plugins.js
@@ -36,5 +36,5 @@ export default reducer;
  */
 export const loadDetailsPlugins = (appRegistry) => ({
   type: LOAD_DETAILS_PLUGINS,
-  roles: appRegistry.getRole('InstanceDetails.Item') || [],
+  roles: appRegistry.getRole('InstanceDetails.Item') || []
 });
diff --git a/packages/compass-sidebar/src/modules/details-plugins.spec.js b/packages/compass-sidebar/src/modules/details-plugins.spec.js
index 8584edef44b..33e1d299398 100644
--- a/packages/compass-sidebar/src/modules/details-plugins.spec.js
+++ b/packages/compass-sidebar/src/modules/details-plugins.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   LOAD_DETAILS_PLUGINS,
-  loadDetailsPlugins,
+  loadDetailsPlugins
 } from './details-plugins';
 import AppRegistry from 'hadron-app-registry';
 
@@ -21,9 +21,7 @@ describe('details-plugins module', function () {
 
     context('when the action is loadDetailsPlugins', function () {
       it('returns the new state', function () {
-        expect(
-          reducer(undefined, loadDetailsPlugins(appRegistry))
-        ).to.deep.equal(INITIAL_STATE);
+        expect(reducer(undefined, loadDetailsPlugins(appRegistry))).to.deep.equal(INITIAL_STATE);
       });
     });
 
@@ -39,7 +37,7 @@ describe('details-plugins module', function () {
       it('sets the empty array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: INITIAL_STATE,
+          roles: INITIAL_STATE
         });
       });
     });
@@ -56,28 +54,24 @@ describe('details-plugins module', function () {
       it('sets the empty array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: INITIAL_STATE,
+          roles: INITIAL_STATE
         });
       });
     });
 
     context('when `InstanceDetails.Item` is present', function () {
       before(function () {
-        appRegistry.registerRole('InstanceDetails.Item', {
-          name: 'INSTANCEDETAILS',
-        });
+        appRegistry.registerRole('InstanceDetails.Item', { name: 'INSTANCEDETAILS' });
       });
 
       after(function () {
-        appRegistry.deregisterRole('InstanceDetails.Item', {
-          name: 'INSTANCEDETAILS',
-        });
+        appRegistry.deregisterRole('InstanceDetails.Item', { name: 'INSTANCEDETAILS' });
       });
 
       it('sets the roles array', function () {
         expect(loadDetailsPlugins(appRegistry)).to.deep.equal({
           type: LOAD_DETAILS_PLUGINS,
-          roles: [{ name: 'INSTANCEDETAILS' }],
+          roles: [{ name: 'INSTANCEDETAILS' }]
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/index.js b/packages/compass-sidebar/src/modules/index.js
index e4124b83d8d..19daf15a188 100644
--- a/packages/compass-sidebar/src/modules/index.js
+++ b/packages/compass-sidebar/src/modules/index.js
@@ -3,28 +3,32 @@ import { combineReducers } from 'redux';
 import appRegistry from '@mongodb-js/mongodb-redux-common/app-registry';
 import detailsPlugins from './details-plugins';
 import databases, {
-  INITIAL_STATE as DATABASES_INITIAL_STATE,
+  INITIAL_STATE as DATABASES_INITIAL_STATE
 } from './databases';
 import description, {
-  INITIAL_STATE as DESCRIPTION_INITIAL_STATE,
+  INITIAL_STATE as DESCRIPTION_INITIAL_STATE
 } from './description';
-import instance, { INITIAL_STATE as INSTANCE_INITIAL_STATE } from './instance';
+import instance, {
+  INITIAL_STATE as INSTANCE_INITIAL_STATE
+} from './instance';
 import isDetailsExpanded, {
-  INITIAL_STATE as IS_DETAILS_EXPANDED_INITIAL_STATE,
+  INITIAL_STATE as IS_DETAILS_EXPANDED_INITIAL_STATE
 } from './is-details-expanded';
 import isWritable, {
-  INITIAL_STATE as IS_WRITABLE_INITIAL_STATE,
+  INITIAL_STATE as IS_WRITABLE_INITIAL_STATE
 } from './is-writable';
-import isDataLake, { INITIAL_STATE as DL_INITIAL_STATE } from './is-data-lake';
+import isDataLake, {
+  INITIAL_STATE as DL_INITIAL_STATE
+} from './is-data-lake';
 import { RESET } from './reset';
 import isGenuineMongoDB, {
-  INITIAL_STATE as GENUINE_IS,
+  INITIAL_STATE as GENUINE_IS
 } from './is-genuine-mongodb';
 import isGenuineMongoDBVisible, {
-  INITIAL_STATE as IS_VISIBLE_IS,
+  INITIAL_STATE as IS_VISIBLE_IS
 } from './is-genuine-mongodb-visible';
 import connectionInfo, {
-  INITIAL_STATE as CONNECTION_INFO_IS,
+  INITIAL_STATE as CONNECTION_INFO_IS
 } from './connection-info';
 
 /**
@@ -41,7 +45,7 @@ const reducer = combineReducers({
   isWritable,
   isGenuineMongoDB,
   isGenuineMongoDBVisible,
-  isDataLake,
+  isDataLake
 });
 
 /**
@@ -64,7 +68,7 @@ const rootReducer = (state, action) => {
       isWritable: IS_WRITABLE_INITIAL_STATE,
       isGenuineMongoDB: GENUINE_IS,
       isGenuineMongoDBVisible: IS_VISIBLE_IS,
-      isDataLake: DL_INITIAL_STATE,
+      isDataLake: DL_INITIAL_STATE
     };
   }
   return reducer(state, action);
diff --git a/packages/compass-sidebar/src/modules/instance.js b/packages/compass-sidebar/src/modules/instance.js
index c1b79f360a8..f97b80aa9f3 100644
--- a/packages/compass-sidebar/src/modules/instance.js
+++ b/packages/compass-sidebar/src/modules/instance.js
@@ -32,5 +32,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const changeInstance = (instance) => ({
   type: CHANGE_INSTANCE,
-  instance: instance,
+  instance: instance
 });
diff --git a/packages/compass-sidebar/src/modules/instance.spec.js b/packages/compass-sidebar/src/modules/instance.spec.js
index d868b22e6c8..bd2f978dad1 100644
--- a/packages/compass-sidebar/src/modules/instance.spec.js
+++ b/packages/compass-sidebar/src/modules/instance.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   changeInstance,
-  CHANGE_INSTANCE,
+  CHANGE_INSTANCE
 } from './instance';
 
 const instance = {
@@ -31,7 +31,7 @@ describe('sidebar instance', function () {
     it('returns the action', function () {
       expect(changeInstance('new instance w action')).to.deep.equal({
         type: CHANGE_INSTANCE,
-        instance: 'new instance w action',
+        instance: 'new instance w action'
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-data-lake.js b/packages/compass-sidebar/src/modules/is-data-lake.js
index 09f6700aa3a..d1c356b5d0e 100644
--- a/packages/compass-sidebar/src/modules/is-data-lake.js
+++ b/packages/compass-sidebar/src/modules/is-data-lake.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const toggleIsDataLake = (isDataLake) => ({
   type: TOGGLE_IS_DATA_LAKE,
-  isDataLake: isDataLake,
+  isDataLake: isDataLake
 });
diff --git a/packages/compass-sidebar/src/modules/is-data-lake.spec.js b/packages/compass-sidebar/src/modules/is-data-lake.spec.js
index d5241afe447..c4e68b84a7a 100644
--- a/packages/compass-sidebar/src/modules/is-data-lake.spec.js
+++ b/packages/compass-sidebar/src/modules/is-data-lake.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   TOGGLE_IS_DATA_LAKE,
-  toggleIsDataLake,
+  toggleIsDataLake
 } from './is-data-lake';
 
 describe('is-data-lake module', function () {
@@ -26,7 +26,7 @@ describe('is-data-lake module', function () {
       it('sets true in the action', function () {
         expect(toggleIsDataLake(true)).to.deep.equal({
           type: TOGGLE_IS_DATA_LAKE,
-          isDataLake: true,
+          isDataLake: true
         });
       });
     });
@@ -35,7 +35,7 @@ describe('is-data-lake module', function () {
       it('sets false in the action', function () {
         expect(toggleIsDataLake(false)).to.deep.equal({
           type: TOGGLE_IS_DATA_LAKE,
-          isDataLake: false,
+          isDataLake: false
         });
       });
     });
diff --git a/packages/compass-sidebar/src/modules/is-details-expanded.js b/packages/compass-sidebar/src/modules/is-details-expanded.js
index feecc04e66d..f333a4e41d7 100644
--- a/packages/compass-sidebar/src/modules/is-details-expanded.js
+++ b/packages/compass-sidebar/src/modules/is-details-expanded.js
@@ -1,8 +1,7 @@
 /**
  * Change is details expanded
  */
-export const TOGGLE_IS_DETAILS_EXPANDED =
-  'sidebar/is-details-expanded/TOGGLE_IS_DETAILS_EXPANDED';
+export const TOGGLE_IS_DETAILS_EXPANDED = 'sidebar/is-details-expanded/TOGGLE_IS_DETAILS_EXPANDED';
 
 /**
  * The initial state of the is expanded attribute.
@@ -33,5 +32,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsDetailsExpanded = (isExpanded) => ({
   type: TOGGLE_IS_DETAILS_EXPANDED,
-  isExpanded: isExpanded,
+  isExpanded: isExpanded
 });
diff --git a/packages/compass-sidebar/src/modules/is-details-expanded.spec.js b/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
index dba77973854..19f6c284dd3 100644
--- a/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
+++ b/packages/compass-sidebar/src/modules/is-details-expanded.spec.js
@@ -3,16 +3,14 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsDetailsExpanded,
-  TOGGLE_IS_DETAILS_EXPANDED,
+  TOGGLE_IS_DETAILS_EXPANDED
 } from './is-details-expanded';
 
 describe('sidebar isDetailsExpanded', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(reducer(undefined, toggleIsDetailsExpanded(true))).to.equal(
-          true
-        );
+        expect(reducer(undefined, toggleIsDetailsExpanded(true))).to.equal(true);
       });
     });
 
@@ -27,7 +25,7 @@ describe('sidebar isDetailsExpanded', function () {
     it('returns the action', function () {
       expect(toggleIsDetailsExpanded(false)).to.deep.equal({
         type: TOGGLE_IS_DETAILS_EXPANDED,
-        isExpanded: false,
+        isExpanded: false
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
index 2ea68ac320f..bd57045ab20 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.js
@@ -37,5 +37,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsGenuineMongoDBVisible = (isVisible) => ({
   type: TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
-  isVisible: isVisible,
+  isVisible: isVisible
 });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
index d35fa1542b3..ec163ae1052 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb-visible.spec.js
@@ -3,16 +3,14 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsGenuineMongoDBVisible,
-  TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
+  TOGGLE_IS_GENUINE_MONGODB_VISIBLE
 } from './is-genuine-mongodb-visible';
 
 describe('is genuine mongodb visible module', function () {
   describe('#reducer', function () {
     context('when an action is provided', function () {
       it('returns the new state', function () {
-        expect(
-          reducer(undefined, toggleIsGenuineMongoDBVisible(true))
-        ).to.equal(true);
+        expect(reducer(undefined, toggleIsGenuineMongoDBVisible(true))).to.equal(true);
       });
     });
 
@@ -27,7 +25,7 @@ describe('is genuine mongodb visible module', function () {
     it('returns the action', function () {
       expect(toggleIsGenuineMongoDBVisible(false)).to.deep.equal({
         type: TOGGLE_IS_GENUINE_MONGODB_VISIBLE,
-        isVisible: false,
+        isVisible: false
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
index 63a4da48ebd..6b355cad915 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb.js
@@ -1,8 +1,7 @@
 /**
  * Create is genuine MongoDB action.
  */
-export const TOGGLE_IS_GENUINE_MONGODB =
-  'sidebar/is-genuine-mongodb/TOGGLE_IS_GENUINE_MONGODB';
+export const TOGGLE_IS_GENUINE_MONGODB = 'sidebar/is-genuine-mongodb/TOGGLE_IS_GENUINE_MONGODB';
 
 /**
  * The initial state of the instance header is genuine MongoDB.
@@ -33,5 +32,5 @@ export default function reducer(state = INITIAL_STATE, action) {
  */
 export const toggleIsGenuineMongoDB = (isGenuineMongoDB) => ({
   type: TOGGLE_IS_GENUINE_MONGODB,
-  isGenuineMongoDB: isGenuineMongoDB,
+  isGenuineMongoDB: isGenuineMongoDB
 });
diff --git a/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js b/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
index af19caa5e95..94f8030cb7a 100644
--- a/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
+++ b/packages/compass-sidebar/src/modules/is-genuine-mongodb.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsGenuineMongoDB,
-  TOGGLE_IS_GENUINE_MONGODB,
+  TOGGLE_IS_GENUINE_MONGODB
 } from './is-genuine-mongodb';
 
 describe('is genuine mongodb module', function () {
@@ -25,7 +25,7 @@ describe('is genuine mongodb module', function () {
     it('returns the action', function () {
       expect(toggleIsGenuineMongoDB(false)).to.deep.equal({
         type: TOGGLE_IS_GENUINE_MONGODB,
-        isGenuineMongoDB: false,
+        isGenuineMongoDB: false
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/is-writable.js b/packages/compass-sidebar/src/modules/is-writable.js
index 0a3c3c98ca4..b201831656c 100644
--- a/packages/compass-sidebar/src/modules/is-writable.js
+++ b/packages/compass-sidebar/src/modules/is-writable.js
@@ -38,5 +38,5 @@ export default reducer;
  */
 export const toggleIsWritable = (isWritable) => ({
   type: TOGGLE_IS_WRITABLE,
-  isWritable: isWritable,
+  isWritable: isWritable
 });
diff --git a/packages/compass-sidebar/src/modules/is-writable.spec.js b/packages/compass-sidebar/src/modules/is-writable.spec.js
index 034e4cea30f..9cfee04a5b9 100644
--- a/packages/compass-sidebar/src/modules/is-writable.spec.js
+++ b/packages/compass-sidebar/src/modules/is-writable.spec.js
@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import reducer, {
   INITIAL_STATE,
   toggleIsWritable,
-  TOGGLE_IS_WRITABLE,
+  TOGGLE_IS_WRITABLE
 } from './is-writable';
 
 describe('sidebar isWritable', function () {
@@ -25,7 +25,7 @@ describe('sidebar isWritable', function () {
     it('returns the action', function () {
       expect(toggleIsWritable(false)).to.deep.equal({
         type: TOGGLE_IS_WRITABLE,
-        isWritable: false,
+        isWritable: false
       });
     });
   });
diff --git a/packages/compass-sidebar/src/modules/reset.js b/packages/compass-sidebar/src/modules/reset.js
index b9c69a92b39..3be41aa1b51 100644
--- a/packages/compass-sidebar/src/modules/reset.js
+++ b/packages/compass-sidebar/src/modules/reset.js
@@ -9,5 +9,5 @@ export const RESET = 'sidebar/reset';
  * @return {Object} The action creator.
  */
 export const reset = () => ({
-  type: RESET,
+  type: RESET
 });
diff --git a/packages/compass-sidebar/src/plugin.jsx b/packages/compass-sidebar/src/plugin.jsx
index 479ab138c11..aa8c1d12936 100644
--- a/packages/compass-sidebar/src/plugin.jsx
+++ b/packages/compass-sidebar/src/plugin.jsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import Sidebar from './components/sidebar';
 import store from './stores';
 
+
 /**
  * Connect the Plugin to the store and render.
  *
diff --git a/packages/compass-sidebar/src/stores/store.js b/packages/compass-sidebar/src/stores/store.js
index 869c5a19507..e699db97cc2 100644
--- a/packages/compass-sidebar/src/stores/store.js
+++ b/packages/compass-sidebar/src/stores/store.js
@@ -123,12 +123,10 @@ store.onActivated = (appRegistry) => {
     });
   });
 
-  appRegistry
-    .getStore('DeploymentAwareness.WriteStateStore')
-    .listen((state) => {
-      store.dispatch(toggleIsWritable(state.isWritable));
-      store.dispatch(changeDescription(state.description));
-    });
+  appRegistry.getStore('DeploymentAwareness.WriteStateStore').listen((state) => {
+    store.dispatch(toggleIsWritable(state.isWritable));
+    store.dispatch(changeDescription(state.description));
+  });
 
   appRegistry.on('select-namespace', ({ namespace }) => {
     store.dispatch(changeActiveNamespace(namespace));
diff --git a/packages/compass-sidebar/src/stores/store.spec.js b/packages/compass-sidebar/src/stores/store.spec.js
index 18ac5d2357c..5f3eb1e89b3 100644
--- a/packages/compass-sidebar/src/stores/store.spec.js
+++ b/packages/compass-sidebar/src/stores/store.spec.js
@@ -10,7 +10,7 @@ const WriteStateStore = Reflux.createStore({
   mixins: [StateMixin.store],
   getInitialState() {
     return { isWritable: true, description: 'store initial state description' };
-  },
+  }
 });
 
 const instance = createInstance();
@@ -44,10 +44,7 @@ describe('SidebarStore [Store]', function () {
 
   describe('#onActivated', function () {
     const appRegistry = new AppRegistry();
-    appRegistry.registerStore(
-      'DeploymentAwareness.WriteStateStore',
-      WriteStateStore
-    );
+    appRegistry.registerStore('DeploymentAwareness.WriteStateStore', WriteStateStore);
 
     before(function () {
       store.onActivated(appRegistry);
@@ -58,7 +55,7 @@ describe('SidebarStore [Store]', function () {
         expect(store.getState().isWritable).to.equal(true); // initial state
         WriteStateStore.setState({
           isWritable: false,
-          description: 'test description',
+          description: 'test description'
         });
       });
 
@@ -76,26 +73,26 @@ describe('SidebarStore [Store]', function () {
           filteredDatabases: [],
           expandedDbList: {},
           filterRegex: null,
-          activeNamespace: '',
+          activeNamespace: ''
         }); // initial state
         appRegistry.emit('instance-created', { instance });
       });
 
       it('updates the instance and databases state', function () {
-        expect(store.getState()).to.have.property('instance').deep.equal({
-          databasesStatus: instance.databasesStatus,
-          refreshingStatus: instance.refreshingStatus,
-          csfleMode: instance.csfleMode,
-        });
         expect(store.getState())
-          .to.have.property('databases')
+          .to.have.property('instance')
           .deep.equal({
-            databases: getDatabases(instance),
-            filteredDatabases: getDatabases(instance),
-            activeNamespace: '',
-            expandedDbList: {},
-            filterRegex: null,
+            databasesStatus: instance.databasesStatus,
+            refreshingStatus: instance.refreshingStatus,
+            csfleMode: instance.csfleMode,
           });
+        expect(store.getState()).to.have.property('databases').deep.equal({
+          databases: getDatabases(instance),
+          filteredDatabases: getDatabases(instance),
+          activeNamespace: '',
+          expandedDbList: {},
+          filterRegex: null,
+        });
       });
     });
 
@@ -105,9 +102,7 @@ describe('SidebarStore [Store]', function () {
         appRegistry.emit('select-namespace', { namespace: 'test.coll' });
       });
       it('updates databases.activeNamespace', function () {
-        expect(store.getState().databases.activeNamespace).to.equal(
-          'test.coll'
-        );
+        expect(store.getState().databases.activeNamespace).to.equal('test.coll');
       });
     });
 
diff --git a/packages/compass-sidebar/test/mocks/collection-store.js b/packages/compass-sidebar/test/mocks/collection-store.js
index 2a308020a13..fd11b1f4704 100644
--- a/packages/compass-sidebar/test/mocks/collection-store.js
+++ b/packages/compass-sidebar/test/mocks/collection-store.js
@@ -5,6 +5,7 @@ const { NamespaceStore } = require('mongodb-reflux-store');
  * Sets global collection information.
  */
 const CollectionStore = Reflux.createStore({
+
   /**
    * Initialize the store.
    */
@@ -57,7 +58,7 @@ const CollectionStore = Reflux.createStore({
    */
   isReadonly() {
     return this.collection.readonly;
-  },
+  }
 });
 
 module.exports = CollectionStore;
diff --git a/packages/compass-sidebar/test/mocks/deployment-state-store.js b/packages/compass-sidebar/test/mocks/deployment-state-store.js
index 8f8d5e31eb1..d4bf231f8ef 100644
--- a/packages/compass-sidebar/test/mocks/deployment-state-store.js
+++ b/packages/compass-sidebar/test/mocks/deployment-state-store.js
@@ -28,15 +28,12 @@ const DeploymentStateStore = Reflux.createStore({
   getInitialState() {
     return {
       isWritable: true,
-      description: DEFAULT_DESCRIPTION,
+      description: DEFAULT_DESCRIPTION
     };
   },
   setToInitial() {
-    this.setState({
-      isWritable: true,
-      description: 'description set from renderer',
-    });
-  },
+    this.setState({isWritable: true, description: 'description set from renderer'});
+  }
 });
 
 module.exports = DeploymentStateStore;
diff --git a/packages/compass-sidebar/test/mocks/namespace-store.js b/packages/compass-sidebar/test/mocks/namespace-store.js
index 8078245eab4..9dfed5e7e8b 100644
--- a/packages/compass-sidebar/test/mocks/namespace-store.js
+++ b/packages/compass-sidebar/test/mocks/namespace-store.js
@@ -10,6 +10,7 @@ const DEFAULT_NAMESPACE = '';
  * The store holds the source of truth for the namespace being worked on.
  */
 const NamespaceStore = Reflux.createStore({
+
   /**
    * Initializing the store should set up the default namespace.
    */
@@ -38,17 +39,14 @@ const NamespaceStore = Reflux.createStore({
       if (oldNs.database !== newNs.database) {
         registry.emit('database-changed', ns);
       }
-      if (
-        oldNs.database !== newNs.database ||
-        oldNs.collection !== newNs.collection
-      ) {
+      if (oldNs.database !== newNs.database || oldNs.collection !== newNs.collection) {
         registry.emit('collection-changed', ns);
       }
     }
     // TODO: still trigger if appRegistry is not available?
     this._ns = ns;
     this.trigger(this._ns);
-  },
+  }
 });
 
 module.exports = NamespaceStore;
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
index 1874aa669fa..d0c60aad19f 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-instance.spec.jsx
@@ -9,24 +9,22 @@ describe.skip('SidebarInstance [Component]', function () {
 
   describe('empty instance', function () {
     beforeEach(function () {
-      component = mount(
-        <SidebarInstance
-          instance={{ databases: null, collections: null }}
-          isExpanded
-          isGenuineMongoDB
-          isSidebarCollapsed={false}
-          detailsPlugins={[]}
-          globalAppRegistryEmit={() => {}}
-          toggleIsDetailsExpanded={() => {}}
-          connectionInfo={{
-            connectionOptions: {
-              connectionString: 'mongodb://localhost:27017',
-            },
-            id: '123',
-          }}
-          updateConnectionInfo={() => {}}
-        />
-      );
+      component = mount(<SidebarInstance
+        instance={{databases: null, collections: null}}
+        isExpanded
+        isGenuineMongoDB
+        isSidebarCollapsed={false}
+        detailsPlugins={[]}
+        globalAppRegistryEmit={() => {}}
+        toggleIsDetailsExpanded={() => {}}
+        connectionInfo={{
+          connectionOptions: {
+            connectionString: 'mongodb://localhost:27017'
+          },
+          id: '123'
+        }}
+        updateConnectionInfo={() => {}}
+      />);
     });
 
     afterEach(function () {
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
index c9719961408..8b2809e5ecd 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar-title.spec.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
-import { LogoMark } from '@mongodb-js/compass-components';
+import {
+  LogoMark
+} from '@mongodb-js/compass-components';
 
 import { SidebarTitle as SidebarTitleClass } from '../../../src/components/sidebar-title/sidebar-title';
 import styles from '../../../src/components/sidebar-title/sidebar-title.module.less';
@@ -10,10 +12,9 @@ import styles from '../../../src/components/sidebar-title/sidebar-title.module.l
 describe('SidebarTitle [Component]', function () {
   const connectionInfo = {
     connectionOptions: {
-      connectionString:
-        'mongodb://localhost:27020?readPreference=primaryPreferred',
+      connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
     },
-    id: '123',
+    id: '123'
   };
 
   context('when sidebar is collapsed', function () {
@@ -37,15 +38,9 @@ describe('SidebarTitle [Component]', function () {
 
     it.skip('renders icon', function () {
       expect(component.find(`.${styles['sidebar-title']}`)).to.be.present();
-      expect(
-        component.find(`.${styles['sidebar-title-name']}`)
-      ).to.not.be.present();
-      expect(
-        component.find(`.${styles['sidebar-title-logo']}`)
-      ).to.be.present();
-      expect(
-        component.find(`.${styles['sidebar-title-is-active']}`)
-      ).to.not.be.present();
+      expect(component.find(`.${styles['sidebar-title-name']}`)).to.not.be.present();
+      expect(component.find(`.${styles['sidebar-title-logo']}`)).to.be.present();
+      expect(component.find(`.${styles['sidebar-title-is-active']}`)).to.not.be.present();
       expect(component.find(LogoMark)).to.be.present();
     });
   });
@@ -71,12 +66,8 @@ describe('SidebarTitle [Component]', function () {
 
     it.skip('renders icon', function () {
       expect(component.find(`.${styles['sidebar-title']}`)).to.be.present();
-      expect(
-        component.find(`.${styles['sidebar-title-name']}`)
-      ).to.be.present();
-      expect(
-        component.find(`.${styles['sidebar-title-logo']}`)
-      ).to.not.be.present();
+      expect(component.find(`.${styles['sidebar-title-name']}`)).to.be.present();
+      expect(component.find(`.${styles['sidebar-title-logo']}`)).to.not.be.present();
       expect(component.find(LogoMark)).to.be.not.present();
     });
   });
@@ -133,9 +124,7 @@ describe('SidebarTitle [Component]', function () {
     });
 
     it('has an active class', function () {
-      expect(
-        component.find(`.${styles['sidebar-title-is-active']}`)
-      ).to.be.present();
+      expect(component.find(`.${styles['sidebar-title-is-active']}`)).to.be.present();
     });
   });
 });
diff --git a/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx b/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
index dc1187e88b3..5113e134cd0 100644
--- a/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
+++ b/packages/compass-sidebar/test/renderer/components/sidebar.spec.jsx
@@ -5,22 +5,19 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 
 import SidebarStore from '../../../src/stores';
-import Sidebar, {
-  Sidebar as UnconnectedSidebar,
-} from '../../../src/components/sidebar';
+import Sidebar, { Sidebar as UnconnectedSidebar } from '../../../src/components/sidebar';
 import SidebarInstance from '../../../src/components/sidebar-instance';
 import styles from '../../../src/components/sidebar/sidebar.module.less';
 
 describe('Sidebar [Component]', function () {
   const connectionInfo = {
     connectionOptions: {
-      connectionString:
-        'mongodb://localhost:27020?readPreference=primaryPreferred',
+      connectionString: 'mongodb://localhost:27020?readPreference=primaryPreferred'
     },
     id: '123',
     favorite: {
-      name: 'my favorite',
-    },
+      name: 'my favorite'
+    }
   };
 
   describe('when rendered with the store', function () {
@@ -29,7 +26,9 @@ describe('Sidebar [Component]', function () {
     beforeEach(function () {
       component = mount(
         <Provider store={SidebarStore}>
-          <Sidebar onCollapse={() => {}} />
+          <Sidebar
+            onCollapse={()=>{}}
+          />
         </Provider>
       );
     });
@@ -58,11 +57,11 @@ describe('Sidebar [Component]', function () {
             connectionInfo={connectionInfo}
             description="Topology type not yet discovered."
             databases={{
-              databases: [],
+              databases: []
             }}
             instance={{
               databases: null,
-              collections: null,
+              collections: null
             }}
             filterRegex={/(?:)/}
             power_of_two={false}
@@ -73,7 +72,7 @@ describe('Sidebar [Component]', function () {
             globalAppRegistryEmit={emitSpy}
             isGenuineMongoDB
             isGenuineMongoDBVisible={false}
-            toggleIsGenuineMongoDBVisible={() => {}}
+            toggleIsGenuineMongoDBVisible={()=>{}}
             openLink={function () {}}
             isDetailsExpanded={false}
             toggleIsDetailsExpanded={function () {}}
@@ -81,8 +80,8 @@ describe('Sidebar [Component]', function () {
             filterDatabases={function () {}}
             changeDatabases={function () {}}
             changeFilterRegex={function () {}}
-            updateAndSaveConnectionInfo={() => {}}
-            setConnectionIsCSFLEEnabled={function () {}}
+            updateAndSaveConnectionInfo={()=>{}}
+            setConnectionIsCSFLEEnabled={function (){}}
             saveFavorite={saveFavoriteSpy}
           />
         </Provider>
@@ -106,9 +105,9 @@ describe('Sidebar [Component]', function () {
     });
 
     it('renders the sidebar content', function () {
-      expect(
-        component.find(`.${styles['compass-sidebar-content']}`)
-      ).to.be.present();
+      expect(component.find(
+        `.${styles['compass-sidebar-content']}`
+      )).to.be.present();
     });
   });
 
@@ -136,9 +135,9 @@ describe('Sidebar [Component]', function () {
     });
 
     it.skip('does not render the sidebar content', function () {
-      expect(
-        component.find(`.${styles['compass-sidebar-content']}`)
-      ).to.not.be.present();
+      expect(component.find(
+        `.${styles['compass-sidebar-content']}`
+      )).to.not.be.present();
     });
   });
 
@@ -156,10 +155,7 @@ describe('Sidebar [Component]', function () {
     });
 
     it('sets the collapsed width to 36', function () {
-      expect(
-        component.find('[data-test-id="compass-sidebar-panel"]').prop('style')
-          .width
-      ).to.equal(36);
+      expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
     });
 
     context('when it is expanded again', function () {
@@ -169,10 +165,7 @@ describe('Sidebar [Component]', function () {
       });
 
       it('sets the collapsed width to 250', function () {
-        expect(
-          component.find('[data-test-id="compass-sidebar-panel"]').prop('style')
-            .width
-        ).to.equal(250);
+        expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(250);
       });
     });
   });
@@ -184,7 +177,7 @@ describe('Sidebar [Component]', function () {
       component = mount(
         <Provider store={SidebarStore}>
           <Sidebar
-            updateAndSaveConnectionInfo={() => {}}
+            updateAndSaveConnectionInfo={()=>{}}
             setConnectionIsCSFLEEnabled={function () {}}
             connectionInfo={connectionInfo}
           />
@@ -203,11 +196,7 @@ describe('Sidebar [Component]', function () {
         });
 
         it('updates the width', function () {
-          expect(
-            component
-              .find('[data-test-id="compass-sidebar-panel"]')
-              .prop('style').width
-          ).to.equal(189);
+          expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(189);
         });
 
         context('when it hits the lower bound', function () {
@@ -218,11 +207,7 @@ describe('Sidebar [Component]', function () {
           });
 
           it('collapses the sidebar', function () {
-            expect(
-              component
-                .find('[data-test-id="compass-sidebar-panel"]')
-                .prop('style').width
-            ).to.equal(36);
+            expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
           });
         });
       });
@@ -242,14 +227,8 @@ describe('Sidebar [Component]', function () {
         });
 
         it('updates the width', function () {
-          expect(
-            component
-              .find('[data-test-id="compass-sidebar-panel"]')
-              .prop('style').width
-          ).to.equal(36);
-          expect(component.find('[type="range"]').at(0).prop('value')).to.equal(
-            55
-          );
+          expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(36);
+          expect(component.find('[type="range"]').at(0).prop('value')).to.equal(55);
         });
 
         context('when it hits the expand threshold bound', function () {
@@ -260,11 +239,7 @@ describe('Sidebar [Component]', function () {
           });
 
           it('expands the sidebar', function () {
-            expect(
-              component
-                .find('[data-test-id="compass-sidebar-panel"]')
-                .prop('style').width
-            ).to.equal(171);
+            expect(component.find('[data-test-id="compass-sidebar-panel"]').prop('style').width).to.equal(171);
           });
         });
       });
diff --git a/packages/compass-sidebar/test/setup.js b/packages/compass-sidebar/test/setup.js
index 76481dd3c68..10bd43da659 100644
--- a/packages/compass-sidebar/test/setup.js
+++ b/packages/compass-sidebar/test/setup.js
@@ -10,10 +10,7 @@ const appRegistry = new AppRegistry();
 global.hadronApp = hadronApp;
 global.hadronApp.appRegistry = new AppRegistry();
 
-appRegistry.registerStore(
-  'DeploymentAwareness.WriteStateStore',
-  WriteStateStore
-);
+appRegistry.registerStore('DeploymentAwareness.WriteStateStore', WriteStateStore);
 appRegistry.registerStore('App.CollectionStore', CollectionStore);
 appRegistry.registerStore('App.NamespaceStore', NamespaceStore);
 
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
index b886a3f30c6..373531ecaf7 100644
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
@@ -1,20 +1,13 @@
-import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
-
-const optionsSelectDropdownStyles = css({
-  paddingLeft: spacing[4],
-  zIndex: 1,
-  'button:focus, button:focus-within': {
-    zIndex: 20
-  }
-});
+import _ from 'lodash';
 
 import COLLATION_OPTIONS from '../../constants/collation';
 import FieldSet from '../field-set/field-set';
 
+import styles from './collation-fields.module.less';
+
 function CollationOptions(values) {
   const unifiedValues = values.map((elem) => ({
     value: (typeof elem === 'object') ? elem.value : elem,
@@ -64,7 +57,7 @@ function CollationFields({
       <FieldSet key={element.field}>
         <Select
           id={`collation-field-${element.field}`}
-          className={optionsSelectDropdownStyles}
+          className={styles['options-select-dropdown']}
           label={element.field}
           name={element.field}
           placeholder={`Select a value${
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less b/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
new file mode 100644
index 00000000000..ea04cbe37cc
--- /dev/null
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
@@ -0,0 +1,7 @@
+.options-select-dropdown {
+  z-index: 1;
+
+  button:focus, button:focus-within {
+    z-index: 20;
+  }
+}
\ No newline at end of file
diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
index 08e262042f0..54396b21807 100644
--- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 import FieldSet from '../field-set/field-set';
 
 const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections/';
 
-const maximumSizeStyles = css({
-  paddingLeft: spacing[4]
-});
-
 function CappedCollectionFields({
   cappedSize,
   isCapped,
@@ -33,7 +28,6 @@ function CappedCollectionFields({
     >
       <FieldSet>
         <TextInput
-          className={maximumSizeStyles}
           value={cappedSize}
           label="size"
           data-testid="capped-size"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
index 9ea7d09415d..22652c3ab92 100644
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -1,22 +1,11 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, TextInput } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
 
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
-const optionsInputStyles = css({
-  paddingLeft: spacing[4]
-});
-
-const optionsSelectDropdownStyles = css({
-  paddingLeft: spacing[4],
-  zIndex: 1,
-  'button:focus, button:focus-within': {
-    zIndex: 20
-  }
-});
+import styles from './time-series-fields.module.less';
 
 const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
   'as timeField for the time-series collection. ' +
@@ -76,7 +65,6 @@ function TimeSeriesFields({
     >
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           value={timeField}
           label="timeField"
           name="timeSeries.timeField"
@@ -89,7 +77,6 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           label="metaField"
           name="timeSeries.metaField"
           description={META_FIELD_INPUT_DESCRIPTION}
@@ -103,7 +90,7 @@ function TimeSeriesFields({
       <FieldSet>
         <Select
           id="timeSeries-granularity"
-          className={optionsSelectDropdownStyles}
+          className={styles['options-select-dropdown']}
           label="granularity"
           name="timeSeries.granularity"
           placeholder="Select a value [optional]"
@@ -126,7 +113,6 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           value={expireAfterSeconds}
           label="expireAfterSeconds"
           name="expireAfterSeconds"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less b/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
new file mode 100644
index 00000000000..ea04cbe37cc
--- /dev/null
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
@@ -0,0 +1,7 @@
+.options-select-dropdown {
+  z-index: 1;
+
+  button:focus, button:focus-within {
+    z-index: 20;
+  }
+}
\ No newline at end of file

From c17f9d655fb3ad0a99be3804504db2c2942a9d8d Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 12:06:11 +0200
Subject: [PATCH 4/7] fix: fix paddings again

---
 .../collation-fields/collation-fields.jsx      | 15 +++++++++++----
 .../collation-fields.module.less               |  7 -------
 .../capped-collection-fields.jsx               |  6 ++++++
 .../collection-fields/time-series-fields.jsx   | 18 ++++++++++++++++--
 .../time-series-fields.module.less             |  7 -------
 5 files changed, 33 insertions(+), 20 deletions(-)
 delete mode 100644 packages/databases-collections/src/components/collation-fields/collation-fields.module.less
 delete mode 100644 packages/databases-collections/src/components/collection-fields/time-series-fields.module.less

diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
index 373531ecaf7..b886a3f30c6 100644
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
@@ -1,13 +1,20 @@
+import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
-import _ from 'lodash';
+import { spacing, css } from '@mongodb-js/compass-components';
+
+const optionsSelectDropdownStyles = css({
+  paddingLeft: spacing[4],
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 import COLLATION_OPTIONS from '../../constants/collation';
 import FieldSet from '../field-set/field-set';
 
-import styles from './collation-fields.module.less';
-
 function CollationOptions(values) {
   const unifiedValues = values.map((elem) => ({
     value: (typeof elem === 'object') ? elem.value : elem,
@@ -57,7 +64,7 @@ function CollationFields({
       <FieldSet key={element.field}>
         <Select
           id={`collation-field-${element.field}`}
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label={element.field}
           name={element.field}
           placeholder={`Select a value${
diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less b/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file
diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
index 54396b21807..08e262042f0 100644
--- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 import FieldSet from '../field-set/field-set';
 
 const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections/';
 
+const maximumSizeStyles = css({
+  paddingLeft: spacing[4]
+});
+
 function CappedCollectionFields({
   cappedSize,
   isCapped,
@@ -28,6 +33,7 @@ function CappedCollectionFields({
     >
       <FieldSet>
         <TextInput
+          className={maximumSizeStyles}
           value={cappedSize}
           label="size"
           data-testid="capped-size"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
index 22652c3ab92..9ea7d09415d 100644
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -1,11 +1,22 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, TextInput } from '@mongodb-js/compass-components';
+import { spacing, css } from '@mongodb-js/compass-components';
 
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
-import styles from './time-series-fields.module.less';
+const optionsInputStyles = css({
+  paddingLeft: spacing[4]
+});
+
+const optionsSelectDropdownStyles = css({
+  paddingLeft: spacing[4],
+  zIndex: 1,
+  'button:focus, button:focus-within': {
+    zIndex: 20
+  }
+});
 
 const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
   'as timeField for the time-series collection. ' +
@@ -65,6 +76,7 @@ function TimeSeriesFields({
     >
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           value={timeField}
           label="timeField"
           name="timeSeries.timeField"
@@ -77,6 +89,7 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           label="metaField"
           name="timeSeries.metaField"
           description={META_FIELD_INPUT_DESCRIPTION}
@@ -90,7 +103,7 @@ function TimeSeriesFields({
       <FieldSet>
         <Select
           id="timeSeries-granularity"
-          className={styles['options-select-dropdown']}
+          className={optionsSelectDropdownStyles}
           label="granularity"
           name="timeSeries.granularity"
           placeholder="Select a value [optional]"
@@ -113,6 +126,7 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
+          className={optionsInputStyles}
           value={expireAfterSeconds}
           label="expireAfterSeconds"
           name="expireAfterSeconds"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less b/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
deleted file mode 100644
index ea04cbe37cc..00000000000
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.module.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.options-select-dropdown {
-  z-index: 1;
-
-  button:focus, button:focus-within {
-    z-index: 20;
-  }
-}
\ No newline at end of file

From 2f5e9627639a7c4d942bd4a580b580b8251502c8 Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 12:25:59 +0200
Subject: [PATCH 5/7] refactor: set padding for fieldset child of fieldset

---
 .../collection-fields/capped-collection-fields.jsx        | 5 -----
 .../components/collection-fields/time-series-fields.jsx   | 8 --------
 .../src/components/field-set/field-set.module.less        | 4 ++++
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
index 08e262042f0..e42530f08cb 100644
--- a/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
@@ -8,10 +8,6 @@ import FieldSet from '../field-set/field-set';
 
 const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections/';
 
-const maximumSizeStyles = css({
-  paddingLeft: spacing[4]
-});
-
 function CappedCollectionFields({
   cappedSize,
   isCapped,
@@ -33,7 +29,6 @@ function CappedCollectionFields({
     >
       <FieldSet>
         <TextInput
-          className={maximumSizeStyles}
           value={cappedSize}
           label="size"
           data-testid="capped-size"
diff --git a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
index 9ea7d09415d..c536b789f9b 100644
--- a/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
+++ b/packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
@@ -6,12 +6,7 @@ import { spacing, css } from '@mongodb-js/compass-components';
 import FieldSet from '../field-set/field-set';
 import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
 
-const optionsInputStyles = css({
-  paddingLeft: spacing[4]
-});
-
 const optionsSelectDropdownStyles = css({
-  paddingLeft: spacing[4],
   zIndex: 1,
   'button:focus, button:focus-within': {
     zIndex: 20
@@ -76,7 +71,6 @@ function TimeSeriesFields({
     >
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           value={timeField}
           label="timeField"
           name="timeSeries.timeField"
@@ -89,7 +83,6 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           label="metaField"
           name="timeSeries.metaField"
           description={META_FIELD_INPUT_DESCRIPTION}
@@ -126,7 +119,6 @@ function TimeSeriesFields({
 
       <FieldSet>
         <TextInput
-          className={optionsInputStyles}
           value={expireAfterSeconds}
           label="expireAfterSeconds"
           name="expireAfterSeconds"
diff --git a/packages/databases-collections/src/components/field-set/field-set.module.less b/packages/databases-collections/src/components/field-set/field-set.module.less
index d21c87ebf90..6e83e991a4d 100644
--- a/packages/databases-collections/src/components/field-set/field-set.module.less
+++ b/packages/databases-collections/src/components/field-set/field-set.module.less
@@ -1,3 +1,7 @@
 .field-set {
   margin: 16px 0px;
+
+  fieldset {
+    padding-left: 24px;
+  }
 }

From c661b008c3a99f78a6b0f41287fe334f26252369 Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 12:34:56 +0200
Subject: [PATCH 6/7] fix: remove spacing from create db and collection modal

---
 .../src/components/collation-fields/collation-fields.jsx       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
index b886a3f30c6..72f421ca9be 100644
--- a/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
+++ b/packages/databases-collections/src/components/collation-fields/collation-fields.jsx
@@ -2,10 +2,9 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
-import { spacing, css } from '@mongodb-js/compass-components';
+import { css } from '@mongodb-js/compass-components';
 
 const optionsSelectDropdownStyles = css({
-  paddingLeft: spacing[4],
   zIndex: 1,
   'button:focus, button:focus-within': {
     zIndex: 20

From 6e56a8f17fabeec23d62baa207b154ea62c6e0fc Mon Sep 17 00:00:00 2001
From: Alena Khineika <alena.khineika@gmail.com>
Date: Tue, 28 Jun 2022 12:40:25 +0200
Subject: [PATCH 7/7] refactor: remove container

---
 .../src/components/accordion.tsx              | 53 +++++++++----------
 1 file changed, 24 insertions(+), 29 deletions(-)

diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx
index 6cc6766b7fc..f8248ebe731 100644
--- a/packages/compass-components/src/components/accordion.tsx
+++ b/packages/compass-components/src/components/accordion.tsx
@@ -32,9 +32,6 @@ const buttonLightThemeStyles = css({
 const buttonDarkThemeStyles = css({
   color: uiColors.white,
 });
-const containerStyles = css({
-  display: 'flex',
-});
 const buttonIconStyles = css({
   marginRight: spacing[1],
 });
@@ -64,33 +61,31 @@ function UnthemedAccordion({
   const labelId = useId('label-');
   return (
     <>
-      <div className={containerStyles}>
-        <button
-          data-testid={props['data-testid']}
-          className={cx(
-            darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
-            buttonStyles
+      <button
+        data-testid={props['data-testid']}
+        className={cx(
+          darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
+          buttonStyles
+        )}
+        id={labelId}
+        type="button"
+        aria-expanded={open ? 'true' : 'false'}
+        aria-controls={regionId}
+        onClick={() => {
+          setOpen((currentOpen) => !currentOpen);
+        }}
+      >
+        <Icon
+          className={buttonIconStyles}
+          glyph={open ? 'ChevronDown' : 'ChevronRight'}
+        />
+        <div className={buttonTextStyles}>
+          {text}
+          {hintText && (
+            <Description className={buttonHintStyles}>{hintText}</Description>
           )}
-          id={labelId}
-          type="button"
-          aria-expanded={open ? 'true' : 'false'}
-          aria-controls={regionId}
-          onClick={() => {
-            setOpen((currentOpen) => !currentOpen);
-          }}
-        >
-          <Icon
-            className={buttonIconStyles}
-            glyph={open ? 'ChevronDown' : 'ChevronRight'}
-          />
-          <div className={buttonTextStyles}>
-            {text}
-            {hintText && (
-              <Description className={buttonHintStyles}>{hintText}</Description>
-            )}
-          </div>
-        </button>
-      </div>
+        </div>
+      </button>
 
       {open && (
         <div role="region" aria-labelledby={labelId} id={regionId}>