feat(compass-crud): add 'Add to query' to the element context menu

Author: gagik

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

@@ -86,12 +86,14 @@ const HadronDocument: React.FunctionComponent<{
   editing?: boolean;
   onEditStart?: () => void;
   extraGutterWidth?: number;
+  onAddToQuery?: (field: string, value: any) => void;
 }> = ({
   value: document,
   editable = false,
   editing = false,
   onEditStart,
   extraGutterWidth,
+  onAddToQuery,
 }) => {
   const { elements, visibleElements } = useHadronDocument(document);
   const [autoFocus, setAutoFocus] = useState<{
@@ -156,6 +158,7 @@ const HadronDocument: React.FunctionComponent<{
                   });
                 }}
                 extraGutterWidth={extraGutterWidth}
+                onAddToQuery={onAddToQuery}
               ></HadronElement>
             );
           })}

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

@@ -34,6 +34,7 @@ describe('HadronElement', function () {
           editingEnabled={true}
           lineNumberSize={1}
           onAddElement={() => {}}
+          onAddToQuery={() => {}}
         />
       );
 
@@ -59,6 +60,7 @@ describe('HadronElement', function () {
           editingEnabled={true}
           lineNumberSize={1}
           onAddElement={() => {}}
+          onAddToQuery={() => {}}
         />
       );
 
@@ -82,6 +84,7 @@ describe('HadronElement', function () {
           editingEnabled={true}
           lineNumberSize={1}
           onAddElement={() => {}}
+          onAddToQuery={() => {}}
         />
       );
 
@@ -107,6 +110,7 @@ describe('HadronElement', function () {
           editingEnabled={true}
           lineNumberSize={1}
           onAddElement={() => {}}
+          onAddToQuery={() => {}}
         />
       );
 
@@ -117,5 +121,33 @@ describe('HadronElement', function () {
       // Check that the menu item doesn't exist
       expect(screen.queryByText('Open URL in browser')).to.not.exist;
     });
+
+    it('calls the correct parameters when "Add to query" is clicked', function () {
+      const onAddToQuerySpy = sinon.spy();
+
+      render(
+        <HadronElement
+          value={element}
+          editable={true}
+          editingEnabled={true}
+          lineNumberSize={1}
+          onAddElement={() => {}}
+          onAddToQuery={onAddToQuerySpy}
+        />
+      );
+
+      // Open context menu and click the add to query option
+      const elementNode = screen.getByTestId('hadron-document-element');
+      userEvent.click(elementNode, { button: 2 });
+      userEvent.click(screen.getByText('Add to query'), undefined, {
+        skipPointerEventsCheck: true,
+      });
+
+      // Verify that onAddToQuery was called with the field name and element's generated object
+      expect(onAddToQuerySpy).to.have.been.calledWith(
+        'field',
+        element.generateObject()
+      );
+    });
   });
 });

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

@@ -428,6 +428,7 @@ export const HadronElement: React.FunctionComponent<{
   lineNumberSize: number;
   onAddElement(el: HadronElementType): void;
   extraGutterWidth?: number;
+  onAddToQuery: (field: string, value: any) => void;
 }> = ({
   value: element,
   editable,
@@ -436,9 +437,11 @@ export const HadronElement: React.FunctionComponent<{
   lineNumberSize,
   onAddElement,
   extraGutterWidth = 0,
+  onAddToQuery,
 }) => {
   const darkMode = useDarkMode();
   const autoFocus = useAutoFocusContext();
+
   const {
     id,
     key,
@@ -461,6 +464,12 @@ export const HadronElement: React.FunctionComponent<{
   // Add context menu hook for the field
   const fieldContextMenuRef = useContextMenuItems(
     () => [
+      {
+        label: 'Add to query',
+        onAction: () => {
+          onAddToQuery(key.value, element.generateObject());
+        },
+      },
       {
         label: 'Copy field & value',
         onAction: () => {
@@ -480,7 +489,7 @@ export const HadronElement: React.FunctionComponent<{
           ]
         : []),
     ],
-    [element, key.value, value.originalValue, value.value, type.value]
+    [element, key.value, value.value, type.value, onAddToQuery]
   );
 
   const toggleExpanded = () => {
@@ -770,6 +779,7 @@ export const HadronElement: React.FunctionComponent<{
                 lineNumberSize={lineNumberSize}
                 onAddElement={onAddElement}
                 extraGutterWidth={extraGutterWidth}
+                onAddToQuery={onAddToQuery}
               ></HadronElement>
             );
           })}

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

@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } 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 } from '@mongodb-js/compass-query-bar';
 
 export type DocumentProps = {
   doc: HadronDocument | BSONObject;
@@ -32,6 +33,20 @@ const Document = (props: DocumentProps) => {
     return new HadronDocument(_doc as any);
   }, [_doc]);
 
+  const changeQuery = useChangeQueryBarQuery();
+
+  const onAddToQuery = useCallback(
+    (field: string, value: any) => {
+      if (changeQuery) {
+        changeQuery('setValue', {
+          field,
+          value,
+        });
+      }
+    },
+    [changeQuery]
+  );
+
   if (editable && isTimeSeries) {
     return (
       <ReadonlyDocument
@@ -40,15 +55,24 @@ const Document = (props: DocumentProps) => {
         openInsertDocumentDialog={(doc, cloned) => {
           void openInsertDocumentDialog?.(doc, cloned);
         }}
+        onAddToQuery={onAddToQuery}
       />
     );
   }
 
   if (editable) {
-    return <EditableDocument {...props} doc={doc} />;
+    return (
+      <EditableDocument {...props} doc={doc} onAddToQuery={onAddToQuery} />
+    );
   }
 
-  return <ReadonlyDocument doc={doc} copyToClipboard={copyToClipboard} />;
+  return (
+    <ReadonlyDocument
+      doc={doc}
+      copyToClipboard={copyToClipboard}
+      onAddToQuery={onAddToQuery}
+    />
+  );
 };
 
 Document.propTypes = {

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

@@ -21,6 +21,7 @@ export type EditableDocumentProps = {
   openInsertDocumentDialog?: CrudActions['openInsertDocumentDialog'];
   copyToClipboard?: CrudActions['copyToClipboard'];
   showInsights?: boolean;
+  onAddToQuery?: (field: string, value: any) => void;
 };
 
 type EditableDocumentState = {
@@ -250,6 +251,7 @@ class EditableDocument extends React.Component<
         editable
         editing={this.state.editing}
         onEditStart={this.handleStartEditing.bind(this)}
+        onAddToQuery={this.props.onAddToQuery}
       />
     );
   }
@@ -315,6 +317,7 @@ class EditableDocument extends React.Component<
     openInsertDocumentDialog: PropTypes.func.isRequired,
     copyToClipboard: PropTypes.func.isRequired,
     showInsights: PropTypes.bool,
+    onAddToQuery: PropTypes.func,
   };
 }
 

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

@@ -29,6 +29,7 @@ export type ReadonlyDocumentProps = {
   openInsertDocumentDialog?: (doc: BSONObject, cloned: boolean) => void;
   doc: Document;
   showInsights?: boolean;
+  onAddToQuery?: (field: string, value: any) => void;
 };
 
 type ReadonlyDocumentState = {
@@ -183,6 +184,7 @@ class ReadonlyDocument extends React.Component<
     doc: PropTypes.object.isRequired,
     openInsertDocumentDialog: PropTypes.func,
     showInsights: PropTypes.bool,
+    onAddToQuery: PropTypes.func,
   };
 }