fix: pass query filter directly

Author: gagik

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

@@ -16,10 +16,6 @@ import { usePrevious } from './use-previous';
 import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
 
-export type Query = {
-  filter?: Record<string, unknown>;
-};
-
 function useHadronDocument(doc: HadronDocumentType) {
   const prevDoc = usePrevious(doc);
   const forceUpdate = useForceUpdate();
@@ -91,7 +87,7 @@ const HadronDocument: React.FunctionComponent<{
   onEditStart?: () => void;
   extraGutterWidth?: number;
   onAddToQuery?: (field: string, value: unknown) => void;
-  query?: Query;
+  query?: Record<string, unknown>;
 }> = ({
   value: document,
   editable = false,

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

@@ -42,7 +42,7 @@ describe('HadronElement', function () {
           lineNumberSize={1}
           onAddElement={() => {}}
           onAddToQuery={mockOnAddToQuery}
-          query={{ filter: {} }}
+          query={{}}
         />
       );
 
@@ -64,9 +64,7 @@ describe('HadronElement', function () {
 
       // Now simulate that the field is in query
       const queryWithField = {
-        filter: {
-          'user.name': nestedElement.generateObject(),
-        },
+        'user.name': nestedElement.generateObject(),
       };
 
       // Re-render with updated query state
@@ -220,7 +218,7 @@ describe('HadronElement', function () {
           lineNumberSize={1}
           onAddElement={() => {}}
           onAddToQuery={mockOnAddToQuery}
-          query={{ filter: {} }}
+          query={{}}
         />
       );
 

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

@@ -31,7 +31,6 @@ import { useDarkMode } from '../../hooks/use-theme';
 import VisibleFieldsToggle from './visible-field-toggle';
 import { useContextMenuItems } from '../context-menu';
 import { hasDistinctValue } from 'mongodb-query-util';
-import type { Query } from './document';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -466,7 +465,7 @@ export const HadronElement: React.FunctionComponent<{
   onAddElement(el: HadronElementType): void;
   extraGutterWidth?: number;
   onAddToQuery?: (field: string, value: unknown) => void;
-  query?: Query;
+  query?: Record<string, unknown>;
 }> = ({
   value: element,
   editable,
@@ -500,18 +499,16 @@ export const HadronElement: React.FunctionComponent<{
     collapse,
   } = useHadronElement(element);
 
-  const queryFilter = query?.filter;
-
   // Function to check if a field is in the query
   // TODO: COMPASS-9541 Improve the functionality when checking for nested objects.
   const isFieldInQuery = useCallback(
     (field: string, fieldValue: unknown): boolean => {
       return hasDistinctValue(
-        queryFilter?.[field] as Record<string, unknown>,
+        query?.[field] as Record<string, unknown>,
         fieldValue
       );
     },
-    [queryFilter]
+    [query]
   );
 
   // Add context menu hook for the field

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

@@ -37,7 +37,7 @@ const Document = (props: DocumentProps) => {
   }, [_doc]);
 
   const changeQuery = useChangeQueryBarQuery();
-  const query = useQueryBarQuery();
+  const queryBarQuery = useQueryBarQuery();
 
   const handleAddToQuery = useCallback(
     (field: string, value: unknown) => {
@@ -58,7 +58,7 @@ const Document = (props: DocumentProps) => {
           void openInsertDocumentDialog?.(doc, cloned);
         }}
         onAddToQuery={handleAddToQuery}
-        query={query}
+        query={queryBarQuery.filter}
       />
     );
   }
@@ -69,7 +69,7 @@ const Document = (props: DocumentProps) => {
         {...props}
         doc={doc}
         onAddToQuery={handleAddToQuery}
-        query={query}
+        query={queryBarQuery.filter}
       />
     );
   }
@@ -79,7 +79,7 @@ const Document = (props: DocumentProps) => {
       doc={doc}
       copyToClipboard={copyToClipboard}
       onAddToQuery={handleAddToQuery}
-      query={query}
+      query={queryBarQuery.filter}
     />
   );
 };

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

@@ -4,7 +4,6 @@ import type { Document } from 'hadron-document';
 import HadronDocument from 'hadron-document';
 import { DocumentList, css } from '@mongodb-js/compass-components';
 import { withPreferences } from 'compass-preferences-model/provider';
-import type { Query } from '@mongodb-js/compass-query-bar';
 
 import { documentStyles, documentContentStyles } from './readonly-document';
 import { getInsightsForDocument } from '../utils';
@@ -23,7 +22,7 @@ export type EditableDocumentProps = {
   copyToClipboard?: CrudActions['copyToClipboard'];
   showInsights?: boolean;
   onAddToQuery?: (field: string, value: unknown) => void;
-  query?: Query;
+  query?: Record<string, unknown>;
 };
 
 type EditableDocumentState = {
@@ -270,7 +269,7 @@ class EditableDocument extends React.Component<
         doc={this.props.doc}
         editing={this.state.editing}
         deleting={this.state.deleting}
-        onUpdate={(force: boolean) => {
+        onUpdate={(force) => {
           if (force) {
             void this.props.replaceDocument?.(this.props.doc);
           } else {

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

@@ -6,7 +6,6 @@ import type { TypeCastMap } from 'hadron-type-checker';
 import { withPreferences } from 'compass-preferences-model/provider';
 import { getInsightsForDocument } from '../utils';
 import { DocumentEvents } from 'hadron-document';
-import type { Query } from '@mongodb-js/compass-query-bar';
 type BSONObject = TypeCastMap['Object'];
 
 export const documentStyles = css({
@@ -31,7 +30,7 @@ export type ReadonlyDocumentProps = {
   doc: Document;
   showInsights?: boolean;
   onAddToQuery?: (field: string, value: unknown) => void;
-  query?: Query;
+  query?: Record<string, unknown>;
 };
 
 type ReadonlyDocumentState = {