refactor: use DocumentEvents for old event names and minimize default exports

Author: gagik

packages/compass-components/src/components/document-list/document-edit-actions-footer.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type HadronDocument from 'hadron-document';
-import { Element } from 'hadron-document';
+import { DocumentEvents, ElementEvents } from 'hadron-document';
+import type { Element } from 'hadron-document/src/element';
 import { Button } from '../leafygreen';
 import { css } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
@@ -165,34 +166,34 @@ function useHadronDocumentStatus(
       updateStatus('DeleteError', err, errorDetails);
     };
 
-    doc.on(Element.Events.Added, onUpdate);
-    doc.on(Element.Events.Edited, onUpdate);
-    doc.on(Element.Events.Removed, onUpdate);
-    doc.on(Element.Events.Reverted, onUpdate);
-    doc.on(Element.Events.Invalid, onElementInvalid);
-    doc.on(Element.Events.Valid, onElementValid);
-    doc.on('update-start', onUpdateStart);
-    doc.on('update-blocked', onUpdateBlocked);
-    doc.on('update-success', onUpdateSuccess);
-    doc.on('update-error', onUpdateError);
-    doc.on('remove-start', onRemoveStart);
-    doc.on('remove-success', onRemoveSuccess);
-    doc.on('remove-error', onRemoveError);
+    doc.on(ElementEvents.Added, onUpdate);
+    doc.on(ElementEvents.Edited, onUpdate);
+    doc.on(ElementEvents.Removed, onUpdate);
+    doc.on(ElementEvents.Reverted, onUpdate);
+    doc.on(ElementEvents.Invalid, onElementInvalid);
+    doc.on(ElementEvents.Valid, onElementValid);
+    doc.on(DocumentEvents.UpdateStarted, onUpdateStart);
+    doc.on(DocumentEvents.UpdateBlocked, onUpdateBlocked);
+    doc.on(DocumentEvents.UpdateSuccess, onUpdateSuccess);
+    doc.on(DocumentEvents.UpdateError, onUpdateError);
+    doc.on(DocumentEvents.RemoveStarted, onRemoveStart);
+    doc.on(DocumentEvents.RemoveSuccess, onRemoveSuccess);
+    doc.on(DocumentEvents.RemoveError, onRemoveError);
 
     return () => {
-      doc.on(Element.Events.Added, onUpdate);
-      doc.off(Element.Events.Edited, onUpdate);
-      doc.off(Element.Events.Removed, onUpdate);
-      doc.off(Element.Events.Reverted, onUpdate);
-      doc.off(Element.Events.Invalid, onElementInvalid);
-      doc.off(Element.Events.Valid, onElementValid);
-      doc.off('update-start', onUpdateStart);
-      doc.off('update-blocked', onUpdateBlocked);
-      doc.off('update-success', onUpdateSuccess);
-      doc.off('update-error', onUpdateError);
-      doc.off('remove-start', onRemoveStart);
-      doc.off('remove-success', onRemoveSuccess);
-      doc.off('remove-error', onRemoveError);
+      doc.on(ElementEvents.Added, onUpdate);
+      doc.off(ElementEvents.Edited, onUpdate);
+      doc.off(ElementEvents.Removed, onUpdate);
+      doc.off(ElementEvents.Reverted, onUpdate);
+      doc.off(ElementEvents.Invalid, onElementInvalid);
+      doc.off(ElementEvents.Valid, onElementValid);
+      doc.off(DocumentEvents.UpdateStarted, onUpdateStart);
+      doc.off(DocumentEvents.UpdateBlocked, onUpdateBlocked);
+      doc.off(DocumentEvents.UpdateSuccess, onUpdateSuccess);
+      doc.off(DocumentEvents.UpdateError, onUpdateError);
+      doc.off(DocumentEvents.RemoveStarted, onRemoveStart);
+      doc.off(DocumentEvents.RemoveSuccess, onRemoveSuccess);
+      doc.off(DocumentEvents.RemoveError, onRemoveError);
     };
   }, [doc, updateStatus]);
 
@@ -353,8 +354,8 @@ const EditActionsFooter: React.FunctionComponent<{
             data-testid="cancel-button"
             onClick={() => {
               doc.cancel();
-              onCancel?.();
               updateStatus('Initial');
+              onCancel?.();
             }}
             disabled={isCancelDisabled(status)}
           >

packages/compass-crud/src/components/table-view/full-width-cell-renderer.tsx

@@ -7,7 +7,7 @@ import {
 import type Document from 'hadron-document';
 import type { CellEditorProps } from './cell-editor';
 import type { GridActions } from '../../stores/grid-store';
-import type { Element } from 'hadron-document';
+import { DocumentEvents, type Element } from 'hadron-document';
 import type { BSONObject, CrudActions } from '../../stores/crud-store';
 
 export type FullWidthCellRendererProps = Pick<
@@ -51,16 +51,22 @@ class FullWidthCellRenderer extends React.Component<
    * Subscribe to the update store on mount.
    */
   componentDidMount() {
-    this.doc.on('remove-success', this.handleRemoveSuccess);
-    this.doc.on('update-success', this.handleUpdateSuccess);
+    this.doc.on(DocumentEvents.RemoveSuccess, this.handleRemoveSuccess);
+    this.doc.on(DocumentEvents.UpdateSuccess, this.handleUpdateSuccess);
   }
 
   /**
    * Unsubscribe from the update store on unmount.
    */
   componentWillUnmount() {
-    this.doc.removeListener('remove-success', this.handleRemoveSuccess);
-    this.doc.removeListener('update-success', this.handleUpdateSuccess);
+    this.doc.removeListener(
+      DocumentEvents.RemoveSuccess,
+      this.handleRemoveSuccess
+    );
+    this.doc.removeListener(
+      DocumentEvents.UpdateSuccess,
+      this.handleUpdateSuccess
+    );
   }
 
   /**

packages/compass-crud/src/stores/crud-store.spec.ts

@@ -4,8 +4,13 @@ import { connect } from 'mongodb-data-service';
 import AppRegistry, {
   createActivateHelpers,
 } from '@mongodb-js/compass-app-registry';
-import HadronDocument, { Element } from 'hadron-document';
+import HadronDocument, {
+  DocumentEvents,
+  Element,
+  type DocumentEventsType,
+} from 'hadron-document';
 import { MongoDBInstance } from 'mongodb-instance-model';
+import type { EventEmitter } from 'events';
 import { once } from 'events';
 import sinon from 'sinon';
 import chai, { expect } from 'chai';
@@ -110,6 +115,15 @@ function waitForState(store, cb, timeout?: number) {
   return waitForStates(store, [cb], timeout);
 }
 
+function onceDocumentEvent(
+  doc: HadronDocument,
+  event: DocumentEventsType
+): Promise<unknown[]> {
+  // The once function was not meant for strongly typed events, so we need to
+  // do some additional type casting.
+  return once(doc as unknown as EventEmitter, event as string);
+}
+
 const mockFieldStoreService = {
   updateFieldsFromDocuments() {},
   updateFieldsFromSchema() {},
@@ -503,7 +517,7 @@ describe('store', function () {
       });
 
       it('sets the error for the document', function (done) {
-        hadronDoc.on('remove-error', ({ message }) => {
+        hadronDoc.on(DocumentEvents.RemoveError, ({ message }) => {
           expect(message).to.equal('error happened');
           done();
         });
@@ -547,11 +561,11 @@ describe('store', function () {
           done();
         }, store);
 
-        hadronDoc.on('update-blocked', () => {
+        hadronDoc.on(DocumentEvents.UpdateBlocked, () => {
           done(new Error("Didn't expect update to be blocked."));
         });
 
-        hadronDoc.on('update-error', (errorMessage) => {
+        hadronDoc.on(DocumentEvents.UpdateError, (errorMessage) => {
           done(
             new Error(
               `Didn't expect update to error. Errored with message: ${errorMessage}`
@@ -586,11 +600,11 @@ describe('store', function () {
           setTimeout(() => done(), 100);
         }, store);
 
-        hadronDoc.on('update-blocked', () => {
+        hadronDoc.on(DocumentEvents.UpdateBlocked, () => {
           done(new Error("Didn't expect update to be blocked."));
         });
 
-        hadronDoc.on('update-error', (errorMessage) => {
+        hadronDoc.on(DocumentEvents.UpdateError, (errorMessage) => {
           done(
             new Error(
               `Didn't expect update to error. Errored with message: ${errorMessage}`
@@ -613,7 +627,7 @@ describe('store', function () {
       });
 
       it('sets the error for the document', function (done) {
-        hadronDoc.on('update-error', ({ message }) => {
+        hadronDoc.on(DocumentEvents.UpdateError, ({ message }) => {
           expect(message).to.equal(
             'Unable to update, no changes have been made.'
           );
@@ -636,7 +650,7 @@ describe('store', function () {
       });
 
       it('sets the error for the document', function (done) {
-        hadronDoc.on('update-error', ({ message }) => {
+        hadronDoc.on(DocumentEvents.UpdateError, ({ message }) => {
           expect(message).to.equal('error happened');
           done();
         });
@@ -655,7 +669,7 @@ describe('store', function () {
       });
 
       it('sets the update blocked for the document', function (done) {
-        hadronDoc.on('update-blocked', () => {
+        hadronDoc.on(DocumentEvents.UpdateBlocked, () => {
           done();
         });
 
@@ -728,7 +742,7 @@ describe('store', function () {
         const invalidHadronDoc = new HadronDocument(doc);
         (invalidHadronDoc as any).getId = null;
 
-        invalidHadronDoc.on('update-error', ({ message }) => {
+        invalidHadronDoc.on(DocumentEvents.UpdateError, ({ message }) => {
           expect(message).to.equal(
             'An error occured when attempting to update the document: this.getId is not a function'
           );
@@ -765,7 +779,10 @@ describe('store', function () {
         });
 
         it('rejects the update and emits update-error', async function () {
-          const updateErrorEvent = once(hadronDoc, 'update-error');
+          const updateErrorEvent = onceDocumentEvent(
+            hadronDoc,
+            DocumentEvents.UpdateError
+          );
 
           await store.updateDocument(hadronDoc);
           expect((await updateErrorEvent)[0]).to.match(/Update blocked/);
@@ -998,7 +1015,7 @@ describe('store', function () {
       });
 
       it('sets the error for the document', function (done) {
-        hadronDoc.on('update-error', ({ message }) => {
+        hadronDoc.on(DocumentEvents.UpdateError, ({ message }) => {
           expect(message).to.equal('error happened');
           done();
         });
@@ -1085,7 +1102,10 @@ describe('store', function () {
         });
 
         it('rejects the update and emits update-error', async function () {
-          const updateErrorEvent = once(hadronDoc, 'update-error');
+          const updateErrorEvent = onceDocumentEvent(
+            hadronDoc,
+            DocumentEvents.UpdateError
+          );
 
           await store.replaceDocument(hadronDoc);
           expect((await updateErrorEvent)[0]).to.match(/Update blocked/);

packages/hadron-document/src/document-events.ts

@@ -0,0 +1,25 @@
+'use strict';
+/**
+ * The event constant.
+ */
+
+export const DocumentEvents = {
+  Cancel: 'Document::Cancel',
+  Expanded: 'Document::Expanded',
+  Collapsed: 'Document::Collapsed',
+  VisibleElementsChanged: 'Document::VisibleElementsChanged',
+  EditingStarted: 'Document::EditingStarted',
+  EditingFinished: 'Document::EditingFinished',
+  MarkedForDeletion: 'Document::MarkedForDeletion',
+  DeletionFinished: 'Document::DeletionFinished',
+  UpdateStarted: 'Document::UpdateStarted',
+  UpdateSuccess: 'Document::UpdateSuccess',
+  UpdateBlocked: 'Document::UpdateBlocked',
+  UpdateError: 'Document::UpdateError',
+  RemoveStarted: 'Document::RemoveStarted',
+  RemoveSuccess: 'Document::RemoveSuccess',
+  RemoveError: 'Document::RemoveError',
+} as const;
+
+export type DocumentEventsType =
+  typeof DocumentEvents[keyof typeof DocumentEvents];