wip

Author: paula-stacho

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

@@ -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,26 @@ 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 }) => {
+  resultId?: number;
+  startAnalysis: () => Promise<void>;
+  stopAnalysis: () => void;
+}> = ({ analysisState, errorMessage, schema, resultId }) => {
   const onApplyClicked = useCallback(() => {
-    actions.startAnalysis();
-  }, [actions]);
+    startAnalysis();
+  }, []);
 
   const onCancelClicked = useCallback(() => {
-    actions.stopAnalysis();
-  }, [actions]);
+    stopAnalysis();
+  }, []);
 
   const onResetClicked = useCallback(() => {
-    actions.startAnalysis();
-  }, [actions]);
+    startAnalysis();
+  }, []);
 
   const outdated = useIsLastAppliedQueryOutdated('schema');
 
@@ -403,7 +405,7 @@ const Schema: React.FunctionComponent<{
             errorMessage={errorMessage || ''}
             isOutdated={!!outdated}
             sampleSize={schema ? schema.count : 0}
-            schemaResultId={resultId || ''}
+            schemaResultId={String(resultId) || ''}
           />
         }
       >
@@ -416,16 +418,23 @@ const Schema: React.FunctionComponent<{
             <AnalyzingScreen onCancelClicked={onCancelClicked} />
           )}
           {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/components/coordinates-minichart/coordinates-minichart.jsx

@@ -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(() => {}, {
+  geoLayerAdded,
+  geoLayersEdited,
+  geoLayersDeleted,
+})(CoordinatesMinichart);
+
+export default ConnectedCoordinatesMinichart;

packages/compass-schema/src/components/field.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/minichart/minichart.jsx

@@ -7,6 +7,7 @@ import CoordinatesMinichart from '../coordinates-minichart';
 import D3Component from '../d3-component';
 import vizFns from '../../modules';
 import CONSTANTS from '../../constants/schema';
+import { connect } from 'react-redux';
 
 class MiniChart extends PureComponent {
   static displayName = 'MiniChartComponent';
@@ -34,8 +35,8 @@ 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);
+    // this.unsubscribeMiniChartResize =
+    //   this.props.actions.resizeMiniCharts.listen(this.resizeListener);
   }
 
   componentWillUnmount() {
@@ -149,4 +150,4 @@ class MiniChart extends PureComponent {
   }
 }
 
-export default MiniChart;
+export default connect(() => {}, {})(MiniChart);

packages/compass-schema/src/modules/schema-analysis.ts

@@ -55,8 +55,6 @@ export const analyzeSchema = async (
       ns,
     });
 
-    console.log({ aggregateOptions });
-
     const docs = await dataService.sample(
       ns,
       query,