move details persistence to store

Author: paula-stacho

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 
@@ -29,13 +29,10 @@ function ErrorDetailsModal({
   open,
   ...modalProps
 }: ErrorDetailsModalProps) {
-  const [stringDetails, setStringDetails] = useState<string>('');
-
-  useEffect(() => {
-    if (open) {
-      setStringDetails(JSON.stringify(details, undefined, 2));
-    }
-  }, [details, open]);
+  const prettyDetails = useMemo(
+    () => JSON.stringify(details, undefined, 2),
+    [details]
+  );
 
   return (
     <Modal
@@ -51,7 +48,7 @@ function ErrorDetailsModal({
           data-testid="error-details-json"
           id="error-details-json"
         >
-          {stringDetails}
+          {prettyDetails}
         </Code>
       </ModalBody>
       <ModalFooter

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

@@ -1489,9 +1489,7 @@ describe('store', function () {
       await openListener;
 
       const closeListener = waitForState(store, (state) => {
-        expect(state.errorDetails).to.deep.equal({
-          isOpen: false,
-        });
+        expect(state.errorDetails.isOpen).to.be.false;
       });
 
       void store.closeErrorDetailsDialog();

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

@@ -84,8 +84,8 @@ export type EmittedAppRegistryEvents =
 export type ErrorDetailsDialogState =
   | {
       isOpen: false;
-      details?: never;
-      closeAction?: never;
+      details?: Record<string, unknown>;
+      closeAction?: 'back' | 'close';
     }
   | {
       isOpen: true;
@@ -987,6 +987,7 @@ class CrudStoreImpl
   closeErrorDetailsDialog() {
     this.setState({
       errorDetails: {
+        ...this.state.errorDetails,
         isOpen: false,
       },
     });