fix: limit query handling only to DocumentListItem

Author: gagik

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

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import type HadronDocument from 'hadron-document';
 import { KeylineCard } from '@mongodb-js/compass-components';
 import Document, { type DocumentProps } from './document';
 import { useDocumentItemContextMenu } from './use-document-item-context-menu';
 import { useMergeRefs } from '@mongodb-js/compass-components';
+import {
+  useChangeQueryBarQuery,
+  useQueryBarQuery,
+} from '@mongodb-js/compass-query-bar';
 
 export type DocumentListViewItemProps = {
   doc: HadronDocument;
@@ -41,6 +45,19 @@ const DocumentListViewItem: React.FC<DocumentListViewItemProps> = ({
     openInsertDocumentDialog,
   });
 
+  const changeQuery = useChangeQueryBarQuery();
+  const queryBarQuery = useQueryBarQuery();
+
+  const handleAddToQuery = useCallback(
+    (field: string, value: unknown) => {
+      changeQuery('toggleDistinctValue', {
+        field,
+        value,
+      });
+    },
+    [changeQuery]
+  );
+
   const mergedRef = useMergeRefs([docRef, contextMenuRef]);
 
   return (
@@ -49,6 +66,8 @@ const DocumentListViewItem: React.FC<DocumentListViewItemProps> = ({
       <Document
         doc={doc}
         key={doc.uuid}
+        query={queryBarQuery.filter}
+        onUpdateQuery={handleAddToQuery}
         editable={isEditable}
         isTimeSeries={isTimeSeries}
         copyToClipboard={copyToClipboard}

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

@@ -1,20 +1,18 @@
-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';
 import EditableDocument from './editable-document';
 import type { ReadonlyDocumentProps } from './readonly-document';
 import ReadonlyDocument from './readonly-document';
 import type { BSONObject } from '../stores/crud-store';
-import {
-  useChangeQueryBarQuery,
-  useQueryBarQuery,
-} from '@mongodb-js/compass-query-bar';
 
 export type DocumentProps = {
   doc: HadronDocument | BSONObject;
   editable: boolean;
   isTimeSeries?: boolean;
+  onUpdateQuery?: (field: string, value: unknown) => void;
+  query?: BSONObject;
 } & Omit<EditableDocumentProps, 'doc' | 'expandAll'> &
   Pick<ReadonlyDocumentProps, 'copyToClipboard' | 'openInsertDocumentDialog'>;
 
@@ -25,6 +23,8 @@ const Document = (props: DocumentProps) => {
     copyToClipboard,
     openInsertDocumentDialog,
     doc: _doc,
+    onUpdateQuery,
+    query,
   } = props;
 
   const doc = useMemo(() => {
@@ -36,19 +36,6 @@ const Document = (props: DocumentProps) => {
     return new HadronDocument(_doc as Record<string, unknown>);
   }, [_doc]);
 
-  const changeQuery = useChangeQueryBarQuery();
-  const queryBarQuery = useQueryBarQuery();
-
-  const handleAddToQuery = useCallback(
-    (field: string, value: unknown) => {
-      changeQuery('toggleDistinctValue', {
-        field,
-        value,
-      });
-    },
-    [changeQuery]
-  );
-
   if (editable && isTimeSeries) {
     return (
       <ReadonlyDocument
@@ -57,8 +44,8 @@ const Document = (props: DocumentProps) => {
         openInsertDocumentDialog={(doc, cloned) => {
           void openInsertDocumentDialog?.(doc, cloned);
         }}
-        onUpdateQuery={handleAddToQuery}
-        query={queryBarQuery.filter}
+        onUpdateQuery={onUpdateQuery}
+        query={query}
       />
     );
   }
@@ -68,8 +55,8 @@ const Document = (props: DocumentProps) => {
       <EditableDocument
         {...props}
         doc={doc}
-        onUpdateQuery={handleAddToQuery}
-        query={queryBarQuery.filter}
+        onUpdateQuery={onUpdateQuery}
+        query={query}
       />
     );
   }
@@ -78,8 +65,8 @@ const Document = (props: DocumentProps) => {
     <ReadonlyDocument
       doc={doc}
       copyToClipboard={copyToClipboard}
-      onUpdateQuery={handleAddToQuery}
-      query={queryBarQuery.filter}
+      onUpdateQuery={onUpdateQuery}
+      query={query}
     />
   );
 };