refactor(compass-schema): replace reflux with redux COMPASS-8797 (#6656)

Author: paula-stacho

package-lock.json

@@ -97,8 +97,9 @@
     "react": "^17.0.2",
     "react-leaflet": "^2.4.0",
     "react-leaflet-draw": "^0.19.0",
-    "reflux": "^0.4.1",
-    "@mongodb-js/reflux-state-mixin": "^1.1.5"
+    "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2"
   },
   "is_compass_plugin": true
 }

packages/compass-schema/package.json

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-
+import type { Schema as MongodbSchema } from 'mongodb-schema';
+import { connect } from 'react-redux';
 import type { AnalysisState } from '../constants/analysis-states';
 import {
   ANALYSIS_STATE_INITIAL,
@@ -29,12 +30,13 @@ import {
   Badge,
   Icon,
 } from '@mongodb-js/compass-components';
-import type { configureActions } from '../actions';
 import { usePreference } from 'compass-preferences-model/provider';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import { getAtlasPerformanceAdvisorLink } from '../utils';
 import { useIsLastAppliedQueryOutdated } from '@mongodb-js/compass-query-bar';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
+import type { RootState } from '../stores/store';
+import { startAnalysis, stopAnalysis } from '../stores/reducer';
 
 const rootStyles = css({
   width: '100%',
@@ -296,10 +298,9 @@ const AnalyzingScreen: React.FunctionComponent<{
 };
 
 const FieldList: React.FunctionComponent<{
-  schema: any;
+  schema: MongodbSchema | null;
   analysisState: AnalysisState;
-  actions: Record<string, any>;
-}> = ({ schema, analysisState, actions }) => {
+}> = ({ schema, analysisState }) => {
   const darkMode = useDarkMode();
 
   if (analysisState !== ANALYSIS_STATE_COMPLETE) {
@@ -327,7 +328,7 @@ const FieldList: React.FunctionComponent<{
     >
       <div data-testid="schema-field-list">
         {fields.map((field: any) => (
-          <Field key={field.name} actions={actions} {...field} />
+          <Field key={field.name} {...field} />
         ))}
       </div>
     </div>
@@ -366,25 +367,25 @@ const PerformanceAdvisorBanner = () => {
 };
 
 const Schema: React.FunctionComponent<{
-  actions: ReturnType<typeof configureActions>;
   analysisState: AnalysisState;
   errorMessage?: string;
   maxTimeMS?: number;
-  schema?: any;
+  schema: MongodbSchema | null;
   count?: number;
   resultId?: string;
-}> = ({ actions, analysisState, errorMessage, schema, resultId }) => {
+  onStartAnalysis: () => Promise<void>;
+  onStopAnalysis: () => void;
+}> = ({
+  analysisState,
+  errorMessage,
+  schema,
+  resultId,
+  onStartAnalysis,
+  onStopAnalysis,
+}) => {
   const onApplyClicked = useCallback(() => {
-    actions.startAnalysis();
-  }, [actions]);
-
-  const onCancelClicked = useCallback(() => {
-    actions.stopAnalysis();
-  }, [actions]);
-
-  const onResetClicked = useCallback(() => {
-    actions.startAnalysis();
-  }, [actions]);
+    void onStartAnalysis();
+  }, [onStartAnalysis]);
 
   const outdated = useIsLastAppliedQueryOutdated('schema');
 
@@ -398,7 +399,7 @@ const Schema: React.FunctionComponent<{
         toolbar={
           <SchemaToolbar
             onAnalyzeSchemaClicked={onApplyClicked}
-            onResetClicked={onResetClicked}
+            onResetClicked={onApplyClicked}
             analysisState={analysisState}
             errorMessage={errorMessage || ''}
             isOutdated={!!outdated}
@@ -413,19 +414,26 @@ const Schema: React.FunctionComponent<{
             <InitialScreen onApplyClicked={onApplyClicked} />
           )}
           {analysisState === ANALYSIS_STATE_ANALYZING && (
-            <AnalyzingScreen onCancelClicked={onCancelClicked} />
+            <AnalyzingScreen onCancelClicked={onStopAnalysis} />
           )}
           {analysisState === ANALYSIS_STATE_COMPLETE && (
-            <FieldList
-              schema={schema}
-              analysisState={analysisState}
-              actions={actions}
-            />
+            <FieldList schema={schema} analysisState={analysisState} />
           )}
         </div>
       </WorkspaceContainer>
     </div>
   );
 };
 
-export default Schema;
+export default connect(
+  (state: RootState) => ({
+    analysisState: state.analysisState,
+    errorMessage: state.errorMessage,
+    schema: state.schema,
+    resultId: state.resultId,
+  }),
+  {
+    onStartAnalysis: startAnalysis,
+    onStopAnalysis: stopAnalysis,
+  }
+)(Schema);

packages/compass-schema/src/actions/index.spec.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent, useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import L from 'leaflet';
 
@@ -17,6 +18,11 @@ import GeoscatterMapItem from './marker';
 import { LIGHTMODE_TILE_URL, DARKMODE_TILE_URL } from './constants';
 import { getHereAttributionMessage } from './utils';
 import { debounce } from 'lodash';
+import {
+  geoLayerAdded,
+  geoLayersDeleted,
+  geoLayersEdited,
+} from '../../stores/reducer';
 
 // TODO: Disable boxZoom handler for circle lasso.
 //
@@ -124,10 +130,12 @@ class UnthemedCoordinatesMinichart extends PureComponent {
       unique: PropTypes.number,
       values: PropTypes.array,
     }),
-    actions: PropTypes.object.isRequired,
     fieldName: PropTypes.string.isRequired,
     darkMode: PropTypes.bool,
     onGeoQueryChanged: PropTypes.func.isRequired,
+    geoLayerAdded: PropTypes.func.isRequired,
+    geoLayersEdited: PropTypes.func.isRequired,
+    geoLayersDeleted: PropTypes.func.isRequired,
   };
 
   state = {
@@ -239,26 +247,23 @@ class UnthemedCoordinatesMinichart extends PureComponent {
   }
 
   onCreated = (evt) => {
-    this.props.actions.geoLayerAdded(
+    this.props.geoLayerAdded(
       this.props.fieldName,
       evt.layer,
       this.props.onGeoQueryChanged
     );
   };
 
   onEdited = (evt) => {
-    this.props.actions.geoLayersEdited(
+    this.props.geoLayersEdited(
       this.props.fieldName,
       evt.layers,
       this.props.onGeoQueryChanged
     );
   };
 
   onDeleted = (evt) => {
-    this.props.actions.geoLayersDeleted(
-      evt.layers,
-      this.props.onGeoQueryChanged
-    );
+    this.props.geoLayersDeleted(evt.layers, this.props.onGeoQueryChanged);
   };
 
   /**
@@ -328,5 +333,10 @@ CoordinatesMinichart.propTypes = {
   onQueryChanged: PropTypes.func,
 };
 
-export default CoordinatesMinichart;
-export { CoordinatesMinichart };
+const ConnectedCoordinatesMinichart = connect(undefined, {
+  geoLayerAdded,
+  geoLayersEdited,
+  geoLayersDeleted,
+})(CoordinatesMinichart);
+
+export default ConnectedCoordinatesMinichart;

packages/compass-schema/src/actions/index.ts

@@ -13,7 +13,6 @@ import {
   type SchemaType,
 } from 'mongodb-schema';
 import { BSON, Decimal128 } from 'bson';
-import { configureActions } from '../actions';
 import Field, { shouldShowUnboundArrayInsight } from './field';
 import QueryBarPlugin from '@mongodb-js/compass-query-bar';
 import {
@@ -44,7 +43,6 @@ function renderField(
     <MockQueryBarPlugin {...(queryBarProps as any)}>
       <Field
         enableMaps={false}
-        actions={configureActions()}
         name="testFieldName"
         path={['test']}
         {...props}

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

@@ -21,7 +21,6 @@ import type {
 import { FieldType, sortTypes } from './type';
 import Minichart from './minichart';
 import detectCoordinates from '../modules/detect-coordinates';
-import type { configureActions } from '../actions';
 import { useQueryBarQuery } from '@mongodb-js/compass-query-bar';
 import { useChangeQueryBarQuery } from '@mongodb-js/compass-query-bar';
 
@@ -110,7 +109,6 @@ const nestedFieldStyles = css({
 });
 
 type FieldProps = {
-  actions: ReturnType<typeof configureActions>;
   name: string;
   path: string[];
   types: SchemaType[];
@@ -196,7 +194,7 @@ export function shouldShowUnboundArrayInsight(
   );
 }
 
-function Field({ actions, name, path, types, enableMaps }: FieldProps) {
+function Field({ name, path, types, enableMaps }: FieldProps) {
   const query = useQueryBarQuery();
   const changeQuery = useChangeQueryBarQuery();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -308,7 +306,6 @@ function Field({ actions, name, path, types, enableMaps }: FieldProps) {
               fieldValue={query.filter?.[fieldName]}
               type={activeType}
               nestedDocType={nestedDocType}
-              actions={actions}
               onQueryChanged={debouncedChangeQuery}
             />
           </div>
@@ -326,7 +323,7 @@ function Field({ actions, name, path, types, enableMaps }: FieldProps) {
             {(getNestedDocType(types)?.fields || []).map(
               (field: SchemaField) => (
                 <div className={nestedFieldStyles} key={field.name}>
-                  <Field actions={actions} enableMaps={enableMaps} {...field} />
+                  <Field enableMaps={enableMaps} {...field} />
                 </div>
               )
             )}

packages/compass-schema/src/components/coordinates-minichart/coordinates-minichart.jsx

@@ -34,13 +34,10 @@ class MiniChart extends PureComponent {
     // but it is not noticable to the user.
     this.resizeListener();
     window.addEventListener('resize', this.resizeListener);
-    this.unsubscribeMiniChartResize =
-      this.props.actions.resizeMiniCharts.listen(this.resizeListener);
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.resizeListener);
-    this.unsubscribeMiniChartResize();
   }
 
   /**