chore(compass-components): use darkMode with LeafyGreenProvider COMPASS-6331 (#3858)

Author: Anemy

packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-empty-results.tsx

@@ -1,15 +1,10 @@
 import React, { useMemo } from 'react';
 import {
-  EmptyContent, palette, withTheme
+  EmptyContent, palette, useDarkMode
 } from '@mongodb-js/compass-components';
 
-type ZeroGraphicProps = {
-  darkMode?: boolean;
-};
-
-const UnthemedZeroGraphic: React.FunctionComponent<
-  ZeroGraphicProps
-> = ({ darkMode }) => {
+const ZeroGraphic: React.FunctionComponent = () => {
+  const darkMode = useDarkMode();
   const fillColor = useMemo(
     () => (darkMode ? palette.white : palette.black),
     [darkMode]
@@ -26,10 +21,6 @@ const UnthemedZeroGraphic: React.FunctionComponent<
   );
 };
 
-const ZeroGraphic = withTheme(
-  UnthemedZeroGraphic
-) as typeof UnthemedZeroGraphic;
-
 export const PipelineEmptyResults: React.FunctionComponent = () => {
   return (
     <div data-testid="pipeline-empty-results">

packages/compass-aggregations/src/components/pipeline-toolbar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { css, cx, spacing, palette, withTheme } from '@mongodb-js/compass-components';
+import { css, cx, spacing, palette, useDarkMode } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 
 import PipelineHeader from './pipeline-header';
@@ -47,7 +47,6 @@ const optionsStyles = css({
 });
 
 type PipelineToolbarProps = {
-  darkMode?: boolean;
   isBuilderView: boolean;
   showRunButton: boolean;
   showExportButton: boolean;
@@ -57,14 +56,14 @@ type PipelineToolbarProps = {
 };
 
 export const PipelineToolbar: React.FunctionComponent<PipelineToolbarProps> = ({
-  darkMode,
   isBuilderView,
   showRunButton,
   showExportButton,
   showExplainButton,
   onChangePipelineOutputOption,
   pipelineOutputOption,
 }) => {
+  const darkMode = useDarkMode();
   const [isOptionsVisible, setIsOptionsVisible] = useState(false);
   return (
     <div
@@ -74,44 +73,42 @@ export const PipelineToolbar: React.FunctionComponent<PipelineToolbarProps> = ({
       )}
       data-testid="pipeline-toolbar"
     >
-      <>
-        <div
-          className={cx(
-            headerAndOptionsRowStyles,
-            darkMode && headerAndOptionsRowDarkStyles
-          )}
-        >
-          <PipelineHeader
-            isOptionsVisible={isOptionsVisible}
-            onToggleOptions={() => setIsOptionsVisible(!isOptionsVisible)}
-            showRunButton={showRunButton}
-            showExportButton={showExportButton}
-            showExplainButton={showExplainButton}
-          />
-          {isOptionsVisible && (
-            <div className={optionsStyles}>
-              <PipelineOptions />
-            </div>
-          )}
-        </div>
-        {isBuilderView ? (
-          <div className={settingsRowStyles}>
-            <PipelineSettings />
-          </div>
-        ) : (
-          <div className={settingsRowStyles}>
-            <PipelineResultsHeader
-              onChangePipelineOutputOption={onChangePipelineOutputOption}
-              pipelineOutputOption={pipelineOutputOption}
-            />
+      <div
+        className={cx(
+          headerAndOptionsRowStyles,
+          darkMode && headerAndOptionsRowDarkStyles
+        )}
+      >
+        <PipelineHeader
+          isOptionsVisible={isOptionsVisible}
+          onToggleOptions={() => setIsOptionsVisible(!isOptionsVisible)}
+          showRunButton={showRunButton}
+          showExportButton={showExportButton}
+          showExplainButton={showExplainButton}
+        />
+        {isOptionsVisible && (
+          <div className={optionsStyles}>
+            <PipelineOptions />
           </div>
         )}
-      </>
+      </div>
+      {isBuilderView ? (
+        <div className={settingsRowStyles}>
+          <PipelineSettings />
+        </div>
+      ) : (
+        <div className={settingsRowStyles}>
+          <PipelineResultsHeader
+            onChangePipelineOutputOption={onChangePipelineOutputOption}
+            pipelineOutputOption={pipelineOutputOption}
+          />
+        </div>
+      )}
     </div>
   );
 };
 
 const mapState = ({ workspace }: RootState) => ({
   isBuilderView: workspace === 'builder'
 });
-export default withTheme(connect(mapState)(PipelineToolbar));
+export default connect(mapState)(PipelineToolbar);

packages/compass-aggregations/src/components/saved-pipelines/saved-pipelines.tsx

@@ -4,7 +4,7 @@ import {
   spacing,
   palette,
   Body,
-  withTheme
+  useDarkMode
 } from '@mongodb-js/compass-components';
 import SavePipelineCard from './saved-pipeline-card';
 
@@ -49,16 +49,15 @@ const emptyMessageStyles = css({
 });
 
 type SavedPipelinesProps = {
-  darkMode?: boolean;
   namespace: string;
   savedPipelines: { id: string; name: string }[];
 };
 
-function UnthemedSavedPipelines({
-  darkMode,
+function SavedPipelines({
   namespace,
   savedPipelines,
 }: SavedPipelinesProps) {
+  const darkMode = useDarkMode();
   return (
     <div className={savedPipelinesStyles}>
       <div className={toolbarContentStyles}>
@@ -94,6 +93,4 @@ function UnthemedSavedPipelines({
   );
 };
 
-const SavedPipelines = withTheme(UnthemedSavedPipelines);
-
 export { SavedPipelines };

packages/compass-collection/src/components/collection-header-actions/view-information.tsx

@@ -3,7 +3,7 @@ import {
   Subtitle,
   palette,
   cx,
-  withTheme,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 
@@ -24,14 +24,14 @@ const collectionHeaderActionsReadonlyDarkStyles = css({
 });
 
 type ViewInformationProps = {
-  darkMode?: boolean;
   sourceName: string;
 };
 
 const ViewInformation: React.FunctionComponent<ViewInformationProps> = ({
-  darkMode,
   sourceName,
 }: ViewInformationProps) => {
+  const darkMode = useDarkMode();
+
   return (
     <Subtitle
       data-testid="collection-view-on"
@@ -48,4 +48,4 @@ const ViewInformation: React.FunctionComponent<ViewInformationProps> = ({
   );
 };
 
-export default withTheme(ViewInformation);
+export default ViewInformation;

packages/compass-collection/src/components/collection-header/collection-header.tsx

@@ -2,7 +2,7 @@ import type AppRegistry from 'hadron-app-registry';
 import {
   css,
   palette,
-  withTheme,
+  withDarkMode,
   Link,
   spacing,
   H3,
@@ -237,4 +237,4 @@ class CollectionHeader extends Component<CollectionHeaderProps> {
   }
 }
 
-export default withTheme(CollectionHeader);
+export default withDarkMode(CollectionHeader);

packages/compass-collection/src/components/collection-stats-item/collection-stats-item.tsx

@@ -5,7 +5,7 @@ import {
   spacing,
   Disclaimer,
   H3,
-  withTheme,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 
 const collectionStatsItemStyles = css({
@@ -42,7 +42,6 @@ const lightThemeValueStyles = css({
 });
 
 type CollectionStatsItemProps = {
-  darkMode?: boolean;
   label: string;
   value: string;
   dataTestId: string;
@@ -53,7 +52,9 @@ type CollectionStatsItemProps = {
  */
 const CollectionStatsItem: React.FunctionComponent<
   CollectionStatsItemProps
-> = ({ darkMode, dataTestId, label, value }: CollectionStatsItemProps) => {
+> = ({ dataTestId, label, value }: CollectionStatsItemProps) => {
+  const darkMode = useDarkMode();
+
   return (
     <div className={collectionStatsItemStyles} data-testid={dataTestId}>
       <H3
@@ -72,4 +73,4 @@ const CollectionStatsItem: React.FunctionComponent<
   );
 };
 
-export default withTheme(CollectionStatsItem);
+export default CollectionStatsItem;

packages/compass-components/src/components/accordion.tsx

@@ -3,9 +3,9 @@ import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { useId } from '@react-aria/utils';
+import { useDarkMode } from '../hooks/use-theme';
 
 import { Description, Icon } from './leafygreen';
-import { withTheme } from '../hooks/use-theme';
 
 const buttonStyles = css({
   fontWeight: 'bold',
@@ -48,16 +48,15 @@ const buttonHintStyles = css({
   display: 'inline',
 });
 interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
-  darkMode?: boolean;
   text: string | React.ReactNode;
   hintText?: string;
 }
-function UnthemedAccordion({
+function Accordion({
   text,
-  darkMode,
   hintText,
   ...props
 }: React.PropsWithChildren<AccordionProps>): React.ReactElement {
+  const darkMode = useDarkMode();
   const [open, setOpen] = useState(false);
   const regionId = useId('region-');
   const labelId = useId('label-');
@@ -98,6 +97,4 @@ function UnthemedAccordion({
   );
 }
 
-const Accordion = withTheme(UnthemedAccordion);
-
 export { Accordion };

packages/compass-components/src/components/bson-value.tsx

@@ -7,7 +7,7 @@ import { variantColors } from '@leafygreen-ui/code';
 import { Icon, Link } from './leafygreen';
 import { spacing } from '@leafygreen-ui/tokens';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { Theme, useTheme } from '../hooks/use-theme';
+import { Theme, useDarkMode } from '../hooks/use-theme';
 
 type ValueProps =
   | {
@@ -67,20 +67,23 @@ export const BSONValueContainer: React.FunctionComponent<
     chidren?: React.ReactChildren;
   }
 > = ({ type, children, className, ...props }) => {
-  const { theme } = useTheme();
+  const darkMode = useDarkMode();
   const textColorStyle = useMemo(() => {
     if (!type) {
       return '';
     }
 
-    const color = VALUE_COLOR_BY_THEME_AND_TYPE[theme]?.[type];
+    const color =
+      VALUE_COLOR_BY_THEME_AND_TYPE[darkMode ? Theme.Dark : Theme.Light]?.[
+        type
+      ];
 
     if (!color) {
       return '';
     }
 
     return css({ color });
-  }, [type, theme]);
+  }, [type, darkMode]);
 
   return (
     <div

packages/compass-components/src/components/checkbox.tsx

@@ -3,7 +3,7 @@ import path from 'path';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { spacing } from '@leafygreen-ui/tokens';
-import { withTheme } from '../hooks/use-theme';
+import { useDarkMode } from '../hooks/use-theme';
 
 import {
   Button,
@@ -128,7 +128,6 @@ function FileInput({
   id,
   label,
   dataTestId,
-  darkMode,
   onChange,
   disabled,
   multi = false,
@@ -149,7 +148,6 @@ function FileInput({
   label: string;
   dataTestId?: string;
   onChange: (files: string[]) => void;
-  darkMode?: boolean;
   disabled?: boolean;
   multi?: boolean;
   optional?: boolean;
@@ -165,6 +163,8 @@ function FileInput({
   accept?: string;
   backend?: FileInputBackend;
 }): React.ReactElement {
+  const darkMode = useDarkMode();
+
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const buttonText = React.useMemo(() => {
@@ -312,7 +312,7 @@ function FileInput({
   );
 }
 
-export default withTheme(FileInput);
+export default FileInput;
 
 // Matches Electron's file dialog options
 export type ElectronFileDialogOptions = {