fix(legacy-sidebar): Don't inherit the dark theme from the old sidebar for its modals (#3398)

Don't inherit the dark theme from the old sidebar for its modals

Author: lerouxb

packages/compass-sidebar/src/components-legacy/non-genuine-warning-modal/non-genuine-warning-modal.jsx

@@ -77,6 +77,7 @@ NonGenuineWarningModal.displayName = 'NonGenuineWarningModal';
 NonGenuineWarningModal.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   toggleIsVisible: PropTypes.func.isRequired,
+  darkMode: PropTypes.bool,
 };
 
 export default NonGenuineWarningModal;

packages/compass-sidebar/src/components-legacy/sidebar-instance/sidebar-instance.jsx

@@ -2,12 +2,15 @@ import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { SaveConnectionModal } from '@mongodb-js/connection-form';
 
+import { ThemeProvider, Theme } from '@mongodb-js/compass-components';
+
 import SidebarInstanceStats from '../sidebar-instance-stats';
 import SidebarInstanceDetails from '../sidebar-instance-details';
 import NonGenuineWarningPill from '../non-genuine-warning-pill';
 import FavoriteButton from '../favorite-button';
 import CSFLEMarker from '../csfle-marker';
 import CSFLEConnectionModal from '../csfle-connection-modal';
+import NonGenuineWarningModal from '../non-genuine-warning-modal';
 
 import styles from './sidebar-instance.module.less';
 import { cloneDeep } from 'lodash';
@@ -22,6 +25,8 @@ export const SidebarInstance = ({
   connectionOptions,
   updateConnectionInfo,
   setConnectionIsCSFLEEnabled,
+  isGenuineMongoDBVisible,
+  toggleIsGenuineMongoDBVisible,
 }) => {
   const [isFavoriteModalVisible, setIsFavoriteModalVisible] = useState(false);
   const [isCSFLEModalVisible, setIsCSFLEModalVisible] = useState(false);
@@ -38,6 +43,16 @@ export const SidebarInstance = ({
     [connectionInfo, updateConnectionInfo, setIsFavoriteModalVisible]
   );
 
+  // We have a separate theme provider here because this is still the old
+  // sidebar code which has the dark "reversed" theme. And unless we provide the
+  // light theme it will inherit the dark theme from the old sidebar for the
+  // modals.
+  const theme = useState({
+    theme:
+      process?.env?.COMPASS_LG_DARKMODE === 'true' ? Theme.Dark : Theme.Light,
+    enabled: true,
+  });
+
   return (
     <div className={styles['sidebar-instance']}>
       <SidebarInstanceStats
@@ -59,18 +74,6 @@ export const SidebarInstance = ({
           setIsCSFLEModalVisible(!isCSFLEModalVisible)
         }
       />
-      <CSFLEConnectionModal
-        open={isCSFLEModalVisible}
-        setOpen={(open) => setIsCSFLEModalVisible(open)}
-        csfleMode={instance?.csfleMode}
-        setConnectionIsCSFLEEnabled={setConnectionIsCSFLEEnabled}
-      />
-      <SaveConnectionModal
-        initialFavoriteInfo={connectionInfo.favorite}
-        open={isFavoriteModalVisible}
-        onCancelClicked={() => setIsFavoriteModalVisible(false)}
-        onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)}
-      />
       <NonGenuineWarningPill
         isGenuineMongoDB={instance?.genuineMongoDB.isGenuine}
       />
@@ -79,6 +82,25 @@ export const SidebarInstance = ({
         connectionOptions={connectionOptions}
         isExpanded={isExpanded}
       />
+
+      <ThemeProvider theme={theme}>
+        <SaveConnectionModal
+          initialFavoriteInfo={connectionInfo.favorite}
+          open={isFavoriteModalVisible}
+          onCancelClicked={() => setIsFavoriteModalVisible(false)}
+          onSaveClicked={(favoriteInfo) => onClickSaveFavorite(favoriteInfo)}
+        />
+        <CSFLEConnectionModal
+          open={isCSFLEModalVisible}
+          setOpen={(open) => setIsCSFLEModalVisible(open)}
+          csfleMode={instance?.csfleMode}
+          setConnectionIsCSFLEEnabled={setConnectionIsCSFLEEnabled}
+        />
+        <NonGenuineWarningModal
+          isVisible={isGenuineMongoDBVisible}
+          toggleIsVisible={toggleIsGenuineMongoDBVisible}
+        />
+      </ThemeProvider>
     </div>
   );
 };
@@ -94,6 +116,8 @@ SidebarInstance.propTypes = {
   connectionOptions: PropTypes.object.isRequired,
   updateConnectionInfo: PropTypes.func.isRequired,
   setConnectionIsCSFLEEnabled: PropTypes.func.isRequired,
+  isGenuineMongoDBVisible: PropTypes.bool.isRequired,
+  toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
 };
 
 export default SidebarInstance;

packages/compass-sidebar/src/components-legacy/sidebar/sidebar.jsx

@@ -14,7 +14,6 @@ import styles from './sidebar.module.less';
 
 import SidebarTitle from '../sidebar-title';
 import SidebarInstance from '../sidebar-instance';
-import NonGenuineWarningModal from '../non-genuine-warning-modal';
 import SidebarDatabasesNavigation from '../sidebar-databases-navigation';
 
 import { toggleIsDetailsExpanded } from '../../modules/is-details-expanded';
@@ -50,12 +49,12 @@ class Sidebar extends PureComponent {
     isDetailsExpanded: PropTypes.bool.isRequired,
     toggleIsDetailsExpanded: PropTypes.func.isRequired,
     changeFilterRegex: PropTypes.func.isRequired,
-    isGenuineMongoDBVisible: PropTypes.bool.isRequired,
-    toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
     globalAppRegistryEmit: PropTypes.func.isRequired,
     connectionInfo: PropTypes.object.isRequired,
     connectionOptions: PropTypes.object.isRequired,
     updateAndSaveConnectionInfo: PropTypes.func.isRequired,
+    isGenuineMongoDBVisible: PropTypes.bool.isRequired,
+    toggleIsGenuineMongoDBVisible: PropTypes.func.isRequired,
   };
 
   state = {
@@ -218,6 +217,10 @@ class Sidebar extends PureComponent {
               connectionInfo={this.props.connectionInfo}
               connectionOptions={this.props.connectionOptions}
               updateConnectionInfo={this.props.updateAndSaveConnectionInfo}
+              isGenuineMongoDBVisible={this.props.isGenuineMongoDBVisible}
+              toggleIsGenuineMongoDBVisible={
+                this.props.toggleIsGenuineMongoDBVisible
+              }
               setConnectionIsCSFLEEnabled={(enabled) =>
                 this.handleSetConnectionIsCSFLEEnabled(enabled)
               }
@@ -250,10 +253,6 @@ class Sidebar extends PureComponent {
             {isExpanded && <SidebarDatabasesNavigation />}
             {this.props.instance && this.renderCreateDatabaseButton()}
           </div>
-          <NonGenuineWarningModal
-            isVisible={this.props.isGenuineMongoDBVisible}
-            toggleIsVisible={this.props.toggleIsGenuineMongoDBVisible}
-          />
         </div>
       </ThemeProvider>
     );
@@ -283,10 +282,10 @@ const mapStateToProps = (state) => ({
  */
 const MappedSidebar = connect(mapStateToProps, {
   toggleIsDetailsExpanded,
-  toggleIsGenuineMongoDBVisible,
   changeFilterRegex,
   globalAppRegistryEmit,
   updateAndSaveConnectionInfo,
+  toggleIsGenuineMongoDBVisible,
 })(Sidebar);
 
 export default MappedSidebar;