fix: speed up document json view COMPASS-6365 (#3901)

* fix: speed up document json view COMPASS-6365

* tmp: first pass at adding codemirror instead of ace-editor

todo:
  - finish theme implementation
  - allow to disable background in the json view in document list
  - line numbers shouldn't be visible when readonly is true

* chore(compass-editor): add support for controlled behavior; finalize styles adjustments

* chore(compass-editor): better padding for gutter, align folding with the old behavior; reuse effectOnChange hook

* chore(e2e): adjust e2e tests for the new json editor

* chore(e2e): adjust regex

Co-authored-by: Sergey Petushkov <[email protected]>

Author: mcasimir

package-lock.json

@@ -0,0 +1,33 @@
+import type { RefObject } from 'react';
+import { useRef, useEffect } from 'react';
+
+const kValueChanged = Symbol('Value changed');
+
+/**
+ * Runs an effect, but only after the value changes for the first time (skipping
+ * the first "onMount" effect)
+ *
+ * Returns a ref for the initial value
+ */
+export function useEffectOnChange<T>(
+  fn: React.EffectCallback,
+  val: T
+): RefObject<T> {
+  // Keep the initial value as a ref so we can check against it in effect when
+  // the current value changes
+  const initial = useRef<T | symbol>(val);
+  const effect = useRef(fn);
+  effect.current = fn;
+  useEffect(() => {
+    // We check if value doesn't match the initial one to avoid running effect
+    // for the first mount
+    if (val !== initial.current) {
+      // After we detected at least one change in value, we set the initial to a
+      // symbol so that the current value is never equal to it anymore
+      initial.current = kValueChanged;
+      return effect.current();
+    }
+  }, [val]);
+  // Return a readonly ref value
+  return useRef(val);
+}

packages/compass-components/src/hooks/use-effect-on-change.ts

@@ -8,9 +8,8 @@ enum Theme {
   Dark = 'Dark',
 }
 
-export function useDarkMode(): boolean | undefined {
-  const darkMode = useLeafyGreenDarkMode();
-
+export function useDarkMode(localDarkMode?: boolean): boolean | undefined {
+  const darkMode = useLeafyGreenDarkMode(localDarkMode);
   return darkMode.darkMode;
 }
 

packages/compass-components/src/hooks/use-theme.tsx

@@ -148,7 +148,8 @@ export { useDefaultAction } from './hooks/use-default-action';
 export { useSortControls, useSortedItems } from './hooks/use-sort';
 export { useFormattedDate } from './hooks/use-formatted-date';
 export { fontFamilies } from '@leafygreen-ui/tokens';
-
 export { default as BSONValue } from './components/bson-value';
 export * as DocumentList from './components/document-list';
 export { KeylineCard } from './components/keyline-card';
+export { variantColors as codePalette } from '@leafygreen-ui/code';
+export { useEffectOnChange } from './hooks/use-effect-on-change';

packages/compass-components/src/index.ts

@@ -7,29 +7,12 @@
 
   .document-json-item {
     position: relative;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
 
     .json-document-is-editing {
       border-radius: inherit;
     }
 
-    .json-ace-editor {
-      padding: 10px 10px 10px 0;
-      overflow: auto;
-      flex-basis: auto;
-      flex-shrink: 1;
-      flex-grow: 1;
-
-      .ace-mongodb {
-        background: transparent;
-
-        .ace_gutter {
-          background: transparent;
-          z-index: 0;
-        }
-      }
-    }
-
     &:last-child {
       margin-bottom: 0;
       border-bottom: 0 solid transparent;

packages/compass-crud/src/components/document-json-view.less

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { cx, KeylineCard } from '@mongodb-js/compass-components';
 
-import type { EditableJsonProps } from './json-editor';
+import type { JsonEditorProps } from './json-editor';
 import JsonEditor from './json-editor';
 import type Document from 'hadron-document';
 
@@ -26,7 +26,7 @@ export type DocumentJsonViewProps = {
   isEditable: boolean;
   className?: string;
 } & Pick<
-  EditableJsonProps,
+  JsonEditorProps,
   | 'isTimeSeries'
   | 'copyToClipboard'
   | 'removeDocument'