prevent flickering

Author: paula-stacho

packages/compass-components/src/components/modals/error-details-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 
@@ -26,21 +26,32 @@ function ErrorDetailsModal({
   details,
   closeAction,
   onClose,
+  open,
   ...modalProps
 }: ErrorDetailsModalProps) {
-  const prettyDetails = useMemo(() => {
-    return JSON.stringify(details, undefined, 2);
-  }, [details]);
+  const [stringDetails, setStringDetails] = useState<string>('');
+
+  useEffect(() => {
+    if (open) {
+      setStringDetails(JSON.stringify(details, undefined, 2));
+    }
+  }, [details, open]);
+
   return (
-    <Modal setOpen={onClose} initialFocus="#error-details-json" {...modalProps}>
+    <Modal
+      setOpen={onClose}
+      initialFocus="#error-details-json"
+      open={open}
+      {...modalProps}
+    >
       <ModalHeader title={title} subtitle={subtitle} />
       <ModalBody>
         <Code
           language="json"
           data-testid="error-details-json"
           id="error-details-json"
         >
-          {prettyDetails}
+          {stringDetails}
         </Code>
       </ModalBody>
       <ModalFooter

packages/compass-crud/src/components/document-list.tsx

@@ -35,6 +35,7 @@ import type {
   BSONObject,
   DocumentView,
   ErrorDetailsDialogOptions,
+  ErrorDetailsDialogState,
 } from '../stores/crud-store';
 import { getToolbarSignal } from '../utils/toolbar-signal';
 import BulkDeleteModal from './bulk-delete-modal';
@@ -81,7 +82,7 @@ export type DocumentListProps = {
   openImportFileDialog?: (origin: 'empty-state' | 'crud-toolbar') => void;
   docs: Document[];
   view: DocumentView;
-  errorDetailsOpen: ErrorDetailsDialogOptions | null;
+  errorDetails: ErrorDetailsDialogState;
   insert: Partial<InsertDocumentDialogProps> &
     Required<
       Pick<
@@ -300,7 +301,7 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
     resultId,
     isCollectionScan,
     isSearchIndexesSupported,
-    errorDetailsOpen,
+    errorDetails,
     openInsertDocumentDialog,
     openErrorDetailsDialog,
     closeErrorDetailsDialog,
@@ -598,10 +599,10 @@ const DocumentList: React.FunctionComponent<DocumentListProps> = (props) => {
             {...insert}
           />
           <ErrorDetailsModal
-            open={!!errorDetailsOpen}
+            open={errorDetails.isOpen}
             onClose={closeErrorDetailsDialog}
-            details={errorDetailsOpen?.details}
-            closeAction={errorDetailsOpen?.closeAction || 'close'}
+            details={errorDetails.details}
+            closeAction={errorDetails.closeAction || 'close'}
           />
           <BulkUpdateModal
             ns={ns}

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

@@ -12,6 +12,7 @@ import type {
   CrudStore,
   CrudStoreOptions,
   DocumentsPluginServices,
+  ErrorDetailsDialogOptions,
 } from './crud-store';
 import {
   findAndModifyWithFLEFallback,
@@ -290,7 +291,7 @@ describe('store', function () {
         docsPerPage: 25,
         end: 0,
         error: null,
-        errorDetailsOpen: null,
+        errorDetails: { isOpen: false },
         insert: {
           doc: null,
           isCommentNeeded: true,
@@ -1462,6 +1463,43 @@ describe('store', function () {
     });
   });
 
+  describe('#openErrorDetailsDialog #closeErrorDetailsDialog', function () {
+    const options: ErrorDetailsDialogOptions = {
+      details: { abc: 'abc' },
+      closeAction: 'close',
+    };
+    let store: CrudStore;
+
+    beforeEach(function () {
+      const plugin = activatePlugin();
+      store = plugin.store;
+      deactivate = () => plugin.deactivate();
+    });
+
+    it('manages the errorDetails state', async function () {
+      const openListener = waitForState(store, (state) => {
+        expect(state.errorDetails).to.deep.equal({
+          isOpen: true,
+          ...options,
+        });
+      });
+
+      void store.openErrorDetailsDialog(options);
+
+      await openListener;
+
+      const closeListener = waitForState(store, (state) => {
+        expect(state.errorDetails).to.deep.equal({
+          isOpen: false,
+        });
+      });
+
+      void store.closeErrorDetailsDialog();
+
+      await closeListener;
+    });
+  });
+
   describe('#openInsertDocumentDialog', function () {
     const doc = { _id: 1, name: 'test' };
     let store: CrudStore;

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

@@ -81,10 +81,22 @@ export type EmittedAppRegistryEvents =
   | 'document-deleted'
   | 'document-inserted';
 
-export type ErrorDetailsDialogOptions = {
-  details: Record<string, unknown>;
-  closeAction?: 'back' | 'close';
-};
+export type ErrorDetailsDialogState =
+  | {
+      isOpen: false;
+      details?: never;
+      closeAction?: never;
+    }
+  | {
+      isOpen: true;
+      details: Record<string, unknown>;
+      closeAction?: 'back' | 'close';
+    };
+
+export type ErrorDetailsDialogOptions = Omit<
+  Extract<ErrorDetailsDialogState, { isOpen: true }>,
+  'isOpen'
+>;
 
 export type CrudActions = {
   drillDown(
@@ -348,10 +360,7 @@ type CrudState = {
   bulkDelete: BulkDeleteState;
   docsPerPage: number;
   collectionStats: CollectionStats | null;
-  errorDetailsOpen: {
-    details: Record<string, unknown>;
-    closeAction?: 'back' | 'close';
-  } | null;
+  errorDetails: ErrorDetailsDialogState;
 };
 
 type CrudStoreActionsOptions = {
@@ -458,7 +467,7 @@ class CrudStoreImpl
         this.instance.topologyDescription.type !== 'Single',
       docsPerPage: this.getInitialDocsPerPage(),
       collectionStats: extractCollectionStats(this.collection),
-      errorDetailsOpen: null,
+      errorDetails: { isOpen: false },
     };
   }
 
@@ -966,15 +975,20 @@ class CrudStoreImpl
     });
   }
 
-  openErrorDetailsDialog(errorDetailsOpen: ErrorDetailsDialogOptions) {
+  openErrorDetailsDialog(options: ErrorDetailsDialogOptions) {
     this.setState({
-      errorDetailsOpen,
+      errorDetails: {
+        isOpen: true,
+        ...options,
+      },
     });
   }
 
   closeErrorDetailsDialog() {
     this.setState({
-      errorDetailsOpen: null,
+      errorDetails: {
+        isOpen: false,
+      },
     });
   }