refactor(crud): update store to redux from reflux COMPASS-6844

packages/compass-components/src/hooks/use-confirmation.spec.tsx

@@ -22,7 +22,7 @@ describe('use-confirmation', function () {
             onClick={() => {
               response = showConfirmation({
                 title: 'Are you sure?',
-                description: 'This action can not be undone.',
+                description: 'This action cannot be undone.',
                 buttonText: 'Yes',
               });
             }}
@@ -39,9 +39,7 @@ describe('use-confirmation', function () {
 
     it('renders modal contents', function () {
       expect(within(modal).getByText('Are you sure?')).to.exist;
-      expect(
-        within(modal).getByText('This action can not be undone.')
-      ).to.exist;
+      expect(within(modal).getByText('This action cannot be undone.')).to.exist;
       expect(within(modal).getByText('Yes')).to.exist;
       const cancelElement = within(modal).getByText('Cancel');
       expect(cancelElement).to.exist;

packages/compass-crud/README.md

@@ -65,27 +65,6 @@ class MyComponent extends React.Component {
 }
 ```
 
-Listen to the various CRUD actions.
-
-```javascript
-const app = require('hadron-app');
-const CrudActions = app.appRegistry.getAction('CRUD.Actions');
-
-CrudActions.documentRemoved.listen((id) => {
-  console.log(`Document with _id ${id} removed.`);
-});
-
-CrudActions.openInsertDocumentDialog((doc, clone) => {
-  if (clone) {
-    console.log('Opening insert dialog with cloned document');
-  }
-});
-
-CrudActions.insertDocument((doc) => {
-  console.log('Inserting document into db');
-});
-```
-
 ### App Registry Events Emmitted
 
 Various actions within this plugin will emit events for other parts of the
@@ -111,7 +90,6 @@ application can be listened to via [compass-app-registry][compass-app-registry].
   `insertMany` and `insertOne` complete.
 - **'document-updated'**: indicates a document was updated.
 - **'document-deleted'**: indicates a document was deleted.
-- **'documents-deleted'**: indicates multiple documents were deleted.
 
 ### App Registry Events Received
 

packages/compass-crud/package.json

@@ -82,7 +82,6 @@
     "@mongodb-js/compass-workspaces": "^1.1.0",
     "@mongodb-js/explain-plan-helper": "^1.5.12",
     "@mongodb-js/my-queries-storage": "^1.1.0",
-    "@mongodb-js/reflux-state-mixin": "^1.2.36",
     "@mongodb-js/shell-bson-parser": "^1.5.13",
     "ag-grid-community": "^20.2.0",
     "ag-grid-react": "^20.2.0",
@@ -97,6 +96,9 @@
     "mongodb-ns": "^3.2.0",
     "mongodb-query-parser": "^4.7.14",
     "react": "^17.0.2",
+    "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "reflux": "^0.4.1",
     "semver": "^7.6.3"
   },

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

@@ -1,43 +1,21 @@
 import Reflux from 'reflux';
 
+/**
+ * Reflux actions used by the grid-store. The main crud store is
+ * Redux-based, these actions are only for the still-Reflux grid store.
+ */
 const configureActions = () => {
   const actions = Reflux.createActions([
     'addColumn',
     'cleanCols',
-    'closeInsertDocumentDialog',
-    'closeBulkUpdateModal',
-    'copyToClipboard',
-    'documentRemoved',
-    'drillDown',
     'elementAdded',
     'elementMarkRemoved',
     'elementRemoved',
     'elementTypeChanged',
-    'getPage',
-    'insertDocument',
-    'insertMany',
-    'toggleInsertDocumentView',
-    'toggleInsertDocument',
-    'openInsertDocumentDialog',
-    'openBulkUpdateModal',
-    'updateBulkUpdatePreview',
-    'runBulkUpdate',
-    'openExportFileDialog',
-    'openImportFileDialog',
-    'pathChanged',
-    'refreshDocuments',
-    'cancelOperation',
-    'removeDocument',
     'removeColumn',
     'renameColumn',
     'replaceDoc',
-    'replaceDocument',
     'resetColumns',
-    'updateDocument',
-    'updateJsonDoc',
-    'viewChanged',
-    'updateComment',
-    'updateMaxDocumentsPerPage',
   ]);
 
   return actions;

packages/compass-crud/src/components/bulk-delete-modal.spec.tsx

@@ -7,7 +7,7 @@ import {
   cleanup,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
-import BulkDeleteModal from './bulk-delete-modal';
+import { BulkDeleteModal } from './bulk-delete-modal';
 
 function renderBulkDeleteModal(
   props?: Partial<React.ComponentProps<typeof BulkDeleteModal>>
@@ -18,7 +18,7 @@ function renderBulkDeleteModal(
       documentCount={0}
       filter={{ a: 1 }}
       namespace="mydb.mycoll"
-      sampleDocuments={[]}
+      sampleDocumentsEJSON={[]}
       onCancel={() => {}}
       onConfirmDeletion={() => {}}
       onExportToLanguage={() => {}}

packages/compass-crud/src/components/bulk-delete-modal.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { Document as HadronDocument } from 'hadron-document';
 import {
   Modal,
   ModalHeader,
@@ -12,11 +13,14 @@ import {
   spacing,
   useId,
 } from '@mongodb-js/compass-components';
-import type { BSONObject } from '../stores/crud-store';
+import { connect } from 'react-redux';
+import type { BSONObject, CrudState } from '../stores/crud-store';
 import { toJSString } from 'mongodb-query-parser';
 import { ReadonlyFilter } from './readonly-filter';
 import ReadonlyDocument from './readonly-document';
-import type { Document } from 'bson';
+import { useLastAppliedQuery } from '@mongodb-js/compass-query-bar';
+import { closeBulkDeleteDialog, runBulkDelete } from '../stores/bulk-delete';
+import { openDeleteQueryExportToLanguageDialog } from '../stores/documents';
 
 const footerStyles = css({
   display: 'flex',
@@ -61,33 +65,37 @@ const exportToLanguageButtonStyles = css({
   alignSelf: 'end',
 });
 
-type BulkDeleteModalProps = {
+export type BulkDeleteModalProps = {
   open: boolean;
   documentCount?: number;
   filter: BSONObject;
   namespace: string;
-  sampleDocuments: Document[];
+  sampleDocumentsEJSON: string[];
   onCancel: () => void;
   onConfirmDeletion: () => void;
   onExportToLanguage: () => void;
 };
 
-const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
+export const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
   open,
   documentCount,
   filter,
   namespace,
-  sampleDocuments,
+  sampleDocumentsEJSON,
   onCancel,
   onConfirmDeletion,
   onExportToLanguage,
 }) => {
+  const sampleDocuments = useMemo(
+    () => sampleDocumentsEJSON.map((ejson) => HadronDocument.FromEJSON(ejson)),
+    [sampleDocumentsEJSON]
+  );
   const preview = (
     <div className={documentListWrapper}>
       {sampleDocuments.map((doc, i) => {
         return (
           <KeylineCard key={i} className={cx(documentContainerStyles)}>
-            <ReadonlyDocument doc={doc as any} />
+            <ReadonlyDocument doc={doc} />
           </KeylineCard>
         );
       })}
@@ -155,4 +163,21 @@ const BulkDeleteModal: React.FunctionComponent<BulkDeleteModalProps> = ({
   );
 };
 
-export default BulkDeleteModal;
+function ConnectedBulkDeleteModal(props: Omit<BulkDeleteModalProps, 'filter'>) {
+  const { filter } = useLastAppliedQuery('crud');
+  return <BulkDeleteModal filter={filter ?? {}} {...props} />;
+}
+
+export default connect(
+  (state: CrudState) => ({
+    open: state.bulkDelete.isOpen,
+    documentCount: state.bulkDelete.affected,
+    namespace: state.documents.ns,
+    sampleDocumentsEJSON: state.bulkDelete.previewDocumentsEJSON,
+  }),
+  {
+    onCancel: closeBulkDeleteDialog,
+    onConfirmDeletion: runBulkDelete,
+    onExportToLanguage: openDeleteQueryExportToLanguageDialog,
+  }
+)(ConnectedBulkDeleteModal);

packages/compass-crud/src/components/bulk-update-modal.spec.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   userEvent,
 } from '@mongodb-js/testing-library-compass';
-import BulkUpdateModal from './bulk-update-modal';
+import { BulkUpdateModal } from './bulk-update-modal';
 
 import { FavoriteQueryStorageProvider } from '@mongodb-js/my-queries-storage/provider';
 import { createElectronFavoriteQueryStorage } from '@mongodb-js/my-queries-storage';

packages/compass-crud/src/components/bulk-update-modal.tsx

@@ -29,9 +29,18 @@ import {
 import type { Annotation } from '@mongodb-js/compass-editor';
 import { CodemirrorMultilineEditor } from '@mongodb-js/compass-editor';
 
+import { connect } from 'react-redux';
+import type { CrudState } from '../stores/crud-store';
 import type { BSONObject } from '../stores/crud-store';
 import { ChangeView } from './change-view';
 import { ReadonlyFilter } from './readonly-filter';
+import { useLastAppliedQuery } from '@mongodb-js/compass-query-bar';
+import {
+  closeBulkUpdateModal,
+  updateBulkUpdatePreview,
+  runBulkUpdate,
+  saveUpdateQuery,
+} from '../stores/bulk-update';
 
 import { useFavoriteQueryStorageAccess } from '@mongodb-js/my-queries-storage/provider';
 
@@ -334,7 +343,7 @@ export type BulkUpdateModalProps = {
   saveUpdateQuery: (name: string) => void;
 };
 
-export default function BulkUpdateModal({
+export function BulkUpdateModal({
   isOpen,
   ns,
   filter,
@@ -499,6 +508,30 @@ export default function BulkUpdateModal({
   );
 }
 
+function ConnectedBulkUpdateModal(props: Omit<BulkUpdateModalProps, 'filter'>) {
+  const { filter } = useLastAppliedQuery('crud');
+  return <BulkUpdateModal filter={filter ?? {}} {...props} />;
+}
+
+export default connect(
+  (state: CrudState) => ({
+    isOpen: state.bulkUpdate.isOpen,
+    ns: state.documents.ns,
+    count: state.documents.count ?? undefined,
+    updateText: state.bulkUpdate.updateText,
+    preview: state.bulkUpdate.preview,
+    syntaxError: state.bulkUpdate.syntaxError,
+    serverError: state.bulkUpdate.serverError,
+    enablePreview: state.collectionMeta.isUpdatePreviewSupported,
+  }),
+  {
+    closeBulkUpdateModal,
+    updateBulkUpdatePreview,
+    runBulkUpdate,
+    saveUpdateQuery,
+  }
+)(ConnectedBulkUpdateModal);
+
 const previewCardStyles = css({
   padding: spacing[400],
 });

packages/compass-crud/src/components/change-view/change-view.tsx

@@ -220,7 +220,7 @@ function ChangeArrayItem({ item }: { item: ItemBranch }) {
   const shape = getValueShape(value);
   if (shape === 'array') {
     // array summary followed by array items if expanded
-    return <ChangeArrayItemArray item={item as ArrayItemBranch} />;
+    return <ChangeArrayItemArray item={item} />;
   } else if (shape === 'object') {
     // object summary followed by object properties if expanded
     return <ChangeArrayItemObject item={item as ObjectItemBranch} />;
@@ -401,9 +401,7 @@ function ChangeObjectProperty({ property }: { property: PropertyBranch }) {
   const shape = getValueShape(value);
   if (shape === 'array') {
     // array summary followed by array items if expanded
-    return (
-      <ChangeObjectPropertyArray property={property as ArrayPropertyBranch} />
-    );
+    return <ChangeObjectPropertyArray property={property} />;
   } else if (shape === 'object') {
     // object summary followed by object properties if expanded
     return (

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -136,7 +136,7 @@ function isOperationTimedOutError(err: ErrorWithPossibleCode) {
 
 export type CrudToolbarProps = {
   activeDocumentView: DocumentView;
-  count?: number;
+  count?: number | null;
   end: number;
   error?: ErrorWithPossibleCode | null;
   getPage: (page: number) => void;
@@ -159,7 +159,7 @@ export type CrudToolbarProps = {
   page: number;
   readonly: boolean;
   refreshDocuments: () => void;
-  resultId: string;
+  resultId: number;
   start: number;
   viewSwitchHandler: (view: DocumentView) => void;
   insights?: Signal;