refactor: use a single queryBar prop

Author: gagik

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

@@ -11,7 +11,11 @@ import {
 } from 'hadron-document';
 import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
-import { calculateShowMoreToggleOffset, HadronElement } from './element';
+import {
+  calculateShowMoreToggleOffset,
+  HadronElement,
+  type QueryBarController,
+} from './element';
 import { usePrevious } from './use-previous';
 import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
@@ -86,16 +90,14 @@ const HadronDocument: React.FunctionComponent<{
   editing?: boolean;
   onEditStart?: () => void;
   extraGutterWidth?: number;
-  onAddToQuery?: (field: string, value: unknown) => void;
-  isInQuery?: (field: string, value: unknown) => boolean;
+  queryBar?: QueryBarController;
 }> = ({
   value: document,
   editable = false,
   editing = false,
   onEditStart,
   extraGutterWidth,
-  onAddToQuery,
-  isInQuery,
+  queryBar,
 }) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
@@ -160,8 +162,7 @@ const HadronDocument: React.FunctionComponent<{
                   });
                 }}
                 extraGutterWidth={extraGutterWidth}
-                onAddToQuery={onAddToQuery}
-                isInQuery={isInQuery}
+                queryBar={queryBar}
               ></HadronElement>
             );
           })}

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

@@ -458,6 +458,11 @@ export const getQueryFilterForElement = (
   return filter;
 };
 
+export type QueryBarController = {
+  isInQuery: (field: string, value: unknown) => boolean;
+  toggleQueryFilter: (field: string, value: unknown) => void;
+};
+
 export const HadronElement: React.FunctionComponent<{
   value: HadronElementType;
   editable: boolean;
@@ -466,8 +471,7 @@ export const HadronElement: React.FunctionComponent<{
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
   extraGutterWidth?: number;
-  onAddToQuery?: (field: string, value: unknown) => void;
-  isInQuery?: (field: string, value: unknown) => boolean;
+  queryBar?: QueryBarController;
 }> = ({
   value: element,
   editable,
@@ -476,8 +480,7 @@ export const HadronElement: React.FunctionComponent<{
   lineNumberSize,
   onAddElement,
   extraGutterWidth = 0,
-  onAddToQuery,
-  isInQuery,
+  queryBar,
 }) => {
   const darkMode = useDarkMode();
   const autoFocus = useAutoFocusContext();
@@ -504,17 +507,17 @@ export const HadronElement: React.FunctionComponent<{
   // Add context menu hook for the field
   const fieldContextMenuRef = useContextMenuItems(
     () => [
-      ...(onAddToQuery && isInQuery
+      ...(queryBar
         ? [
             {
-              label: isInQuery(
+              label: queryBar.isInQuery(
                 getNestedKeyPathForElement(element),
                 element.generateObject()
               )
                 ? 'Remove from query'
                 : 'Add to query',
               onAction: () => {
-                onAddToQuery(
+                queryBar.toggleQueryFilter(
                   getNestedKeyPathForElement(element),
                   element.generateObject()
                 );
@@ -541,7 +544,7 @@ export const HadronElement: React.FunctionComponent<{
           ]
         : []),
     ],
-    [element, key.value, value.value, type.value, onAddToQuery, isInQuery]
+    [element, key.value, value.value, type.value, queryBar]
   );
 
   const toggleExpanded = () => {
@@ -831,8 +834,7 @@ export const HadronElement: React.FunctionComponent<{
                 lineNumberSize={lineNumberSize}
                 onAddElement={onAddElement}
                 extraGutterWidth={extraGutterWidth}
-                onAddToQuery={onAddToQuery}
-                isInQuery={isInQuery}
+                queryBar={queryBar}
               ></HadronElement>
             );
           })}

packages/compass-components/src/components/document-list/index.ts

@@ -1,4 +1,13 @@
-export { default as DocumentActionsGroup } from './document-actions-group';
-export { default as VisibleFieldsToggle } from './visible-field-toggle';
-export { default as Document } from './document';
-export { default as DocumentEditActionsFooter } from './document-edit-actions-footer';
+import { default as DocumentActionsGroup } from './document-actions-group';
+import { default as VisibleFieldsToggle } from './visible-field-toggle';
+import { default as Document } from './document';
+import { default as DocumentEditActionsFooter } from './document-edit-actions-footer';
+
+export const DocumentList = {
+  DocumentActionsGroup,
+  VisibleFieldsToggle,
+  Document,
+  DocumentEditActionsFooter,
+};
+
+export { type QueryBarController } from './element';

packages/compass-components/src/index.ts

@@ -183,7 +183,10 @@ export { useSortControls, useSortedItems } from './hooks/use-sort';
 export * 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 {
+  DocumentList,
+  type QueryBarController,
+} 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-crud/src/components/document.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import HadronDocument from 'hadron-document';
 import type { EditableDocumentProps } from './editable-document';
@@ -11,6 +11,7 @@ import {
   useChangeQueryBarQuery,
   useQueryBarQuery,
 } from '@mongodb-js/compass-query-bar';
+import type { QueryBarController } from '@mongodb-js/compass-components';
 
 export type DocumentProps = {
   doc: HadronDocument | BSONObject;
@@ -19,7 +20,7 @@ export type DocumentProps = {
 } & Omit<EditableDocumentProps, 'doc' | 'expandAll'> &
   Pick<ReadonlyDocumentProps, 'copyToClipboard' | 'openInsertDocumentDialog'>;
 
-const Document = (props: DocumentProps) => {
+export const Document = (props: DocumentProps) => {
   const {
     editable,
     isTimeSeries,
@@ -37,26 +38,23 @@ const Document = (props: DocumentProps) => {
     return new HadronDocument(_doc as Record<string, unknown>);
   }, [_doc]);
 
-  const changeQuery = useChangeQueryBarQuery();
+  const queryBarChangeQuery = useChangeQueryBarQuery();
   const queryBarQuery = useQueryBarQuery();
 
-  const handleAddToQuery = useCallback(
-    (field: string, value: unknown) => {
-      changeQuery('toggleDistinctValue', {
-        field,
-        value,
-      });
-    },
-    [changeQuery]
-  );
-
-  const isInQuery = useCallback(
-    (field: string, value: unknown) => {
-      const filter = queryBarQuery.filter?.[field];
-      return hasDistinctValue(filter, value);
-    },
-    [queryBarQuery]
-  );
+  const queryBar = useMemo<QueryBarController>(() => {
+    return {
+      isInQuery: (field: string, value: unknown) => {
+        const filter = queryBarQuery.filter?.[field];
+        return hasDistinctValue(filter, value);
+      },
+      toggleQueryFilter: (field: string, value: unknown) => {
+        queryBarChangeQuery('toggleDistinctValue', {
+          field,
+          value,
+        });
+      },
+    };
+  }, [queryBarChangeQuery, queryBarQuery]);
 
   if (editable && isTimeSeries) {
     return (
@@ -66,29 +64,20 @@ const Document = (props: DocumentProps) => {
         openInsertDocumentDialog={(doc, cloned) => {
           void openInsertDocumentDialog?.(doc, cloned);
         }}
-        onAddToQuery={handleAddToQuery}
-        isInQuery={isInQuery}
+        queryBar={queryBar}
       />
     );
   }
 
   if (editable) {
-    return (
-      <EditableDocument
-        {...props}
-        doc={doc}
-        onAddToQuery={handleAddToQuery}
-        isInQuery={isInQuery}
-      />
-    );
+    return <EditableDocument {...props} doc={doc} queryBar={queryBar} />;
   }
 
   return (
     <ReadonlyDocument
       doc={doc}
       copyToClipboard={copyToClipboard}
-      onAddToQuery={handleAddToQuery}
-      isInQuery={isInQuery}
+      queryBar={queryBar}
     />
   );
 };

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

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { Document } from 'hadron-document';
 import HadronDocument from 'hadron-document';
-import { DocumentList, css } from '@mongodb-js/compass-components';
+import {
+  type QueryBarController,
+  css,
+  DocumentList,
+} from '@mongodb-js/compass-components';
 import { withPreferences } from 'compass-preferences-model/provider';
 
 import { documentStyles, documentContentStyles } from './readonly-document';
@@ -21,8 +25,7 @@ export type EditableDocumentProps = {
   openInsertDocumentDialog?: CrudActions['openInsertDocumentDialog'];
   copyToClipboard?: CrudActions['copyToClipboard'];
   showInsights?: boolean;
-  onAddToQuery?: (field: string, value: unknown) => void;
-  isInQuery?: (field: string, value: unknown) => boolean;
+  queryBar?: QueryBarController;
 };
 
 type EditableDocumentState = {
@@ -252,8 +255,7 @@ class EditableDocument extends React.Component<
         editable
         editing={this.state.editing}
         onEditStart={this.handleStartEditing.bind(this)}
-        onAddToQuery={this.props.onAddToQuery}
-        isInQuery={this.props.isInQuery}
+        queryBar={this.props.queryBar}
       />
     );
   }
@@ -319,8 +321,7 @@ class EditableDocument extends React.Component<
     openInsertDocumentDialog: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,
     showInsights: PropTypes.bool,
-    onAddToQuery: PropTypes.func,
-    isInQuery: PropTypes.func,
+    queryBar: PropTypes.object,
   };
 }
 

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DocumentList, css, spacing } from '@mongodb-js/compass-components';
+import {
+  type QueryBarController,
+  css,
+  spacing,
+  DocumentList,
+} from '@mongodb-js/compass-components';
 import type Document from 'hadron-document';
 import type { TypeCastMap } from 'hadron-type-checker';
 import { withPreferences } from 'compass-preferences-model/provider';
@@ -29,8 +34,7 @@ export type ReadonlyDocumentProps = {
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
   doc: Document;
   showInsights?: boolean;
-  onAddToQuery?: (field: string, value: unknown) => void;
-  isInQuery?: (field: string, value: unknown) => boolean;
+  queryBar?: QueryBarController;
 };
 
 type ReadonlyDocumentState = {
@@ -139,8 +143,7 @@ class ReadonlyDocument extends React.Component<
           value={this.props.doc}
           // Provide extra whitespace for the expand button
           extraGutterWidth={spacing[900]}
-          onAddToQuery={this.props.onAddToQuery}
-          isInQuery={this.props.isInQuery}
+          queryBar={this.props.queryBar}
         />
       </>
     );