feat(compass-query-bar): add ask ai button to query bar when filter has content COMPASS-7039 (#4746)

Author: Anemy

packages/compass-components/src/components/generative-ai/ai-experience-entry.tsx

@@ -74,7 +74,13 @@ const aiEntryLightModeStyles = css(
   robotSVGLightModeStyles
 );
 
-function AIExperienceEntry({ onClick }: { onClick: () => void }) {
+function AIExperienceEntry({
+  'data-testid': dataTestId,
+  onClick,
+}: {
+  ['data-testid']?: string;
+  onClick: () => void;
+}) {
   const darkMode = useDarkMode();
 
   return (
@@ -84,6 +90,7 @@ function AIExperienceEntry({ onClick }: { onClick: () => void }) {
         darkMode ? aiEntryDarkModeStyles : aiEntryLightModeStyles
       )}
       onClick={onClick}
+      data-testid={dataTestId}
     >
       Ask AI
       <RobotSVG />

packages/compass-query-bar/src/components/query-bar.spec.tsx

@@ -8,12 +8,14 @@ import type { SinonSpy } from 'sinon';
 import QueryBar from './query-bar';
 import { Provider } from 'react-redux';
 import { configureStore } from '../stores/query-bar-store';
+import type { QueryBarStoreOptions } from '../stores/query-bar-store';
 import { toggleQueryOptions } from '../stores/query-bar-reducer';
 import {
   setCodemirrorEditorValue,
   getCodemirrorEditorValue,
   clickOnCodemirrorHandler,
 } from '@mongodb-js/compass-editor';
+import preferencesAccess from 'compass-preferences-model';
 
 const skipIfElectron = function (message: string) {
   beforeEach(function () {
@@ -33,11 +35,14 @@ const exportToLanguageButtonId = 'query-bar-open-export-to-language-button';
 const queryHistoryButtonId = 'query-history-button';
 const queryHistoryComponentTestId = 'query-history';
 
-const renderQueryBar = ({
-  expanded = false,
-  ...props
-}: Partial<ComponentProps<typeof QueryBar>> & { expanded?: boolean } = {}) => {
-  const store = configureStore();
+const renderQueryBar = (
+  {
+    expanded = false,
+    ...props
+  }: Partial<ComponentProps<typeof QueryBar>> & { expanded?: boolean } = {},
+  storeOptions: Partial<QueryBarStoreOptions> = {}
+) => {
+  const store = configureStore(storeOptions);
   store.dispatch(toggleQueryOptions(expanded));
 
   render(
@@ -161,6 +166,77 @@ describe('QueryBar Component', function () {
     });
   });
 
+  describe('with ai enabled', function () {
+    let sandbox: sinon.SinonSandbox;
+
+    beforeEach(function () {
+      sandbox = sinon.createSandbox();
+      sandbox
+        .stub(preferencesAccess, 'getPreferences')
+        .returns({ enableAIExperience: true } as any);
+    });
+
+    afterEach(function () {
+      return sandbox.restore();
+    });
+
+    describe('with filter content supplied', function () {
+      beforeEach(function () {
+        renderQueryBar(
+          {
+            queryOptionsLayout: ['filter'],
+          },
+          {
+            query: {
+              filter: { a: 2 },
+            },
+          }
+        );
+      });
+
+      it('renders the ask ai button', function () {
+        expect(screen.getByText('Ask AI')).to.exist;
+        expect(screen.getByTestId('ai-experience-ask-ai-button')).to.exist;
+      });
+    });
+
+    describe('without filter content supplied', function () {
+      beforeEach(function () {
+        renderQueryBar({
+          queryOptionsLayout: ['filter'],
+        });
+      });
+
+      it('does not render the ask ai button, but renders the placeholder', function () {
+        expect(screen.getByText('Ask AI')).to.exist;
+        expect(screen.queryByTestId('ai-experience-ask-ai-button')).to.not
+          .exist;
+      });
+    });
+  });
+
+  describe('with ai disabled', function () {
+    let sandbox: sinon.SinonSandbox;
+
+    beforeEach(function () {
+      sandbox = sinon.createSandbox();
+      sandbox
+        .stub(preferencesAccess, 'getPreferences')
+        .returns({ enableAIExperience: false } as any);
+      renderQueryBar({
+        queryOptionsLayout: ['filter'],
+      });
+    });
+
+    afterEach(function () {
+      return sandbox.restore();
+    });
+
+    it('does not render the ask ai button', function () {
+      expect(screen.queryByText('Ask AI')).to.not.exist;
+    });
+  });
+
   describe('with two query options', function () {
     beforeEach(function () {
       renderQueryBar({

packages/compass-query-bar/src/components/query-bar.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import {
+  AIExperienceEntry,
   Button,
   Icon,
   MoreOptionsToggle,
@@ -76,8 +77,11 @@ const moreOptionsContainerStyles = css({
 });
 
 const filterContainerStyles = css({
+  display: 'flex',
   position: 'relative',
   flexGrow: 1,
+  alignItems: 'center',
+  gap: spacing[2],
 });
 
 const filterLabelStyles = css({
@@ -128,6 +132,7 @@ type QueryBarProps = {
    * clicked or not
    */
   applyId: number;
+  filterHasContent: boolean;
   showExplainButton?: boolean;
   showExportToLanguageButton?: boolean;
   showQueryHistoryButton?: boolean;
@@ -137,8 +142,8 @@ type QueryBarProps = {
   onExplain?: () => void;
   insights?: Signal | Signal[];
   isAIInputVisible?: boolean;
-  onShowAIInputClick?: () => void;
-  onHideAIInputClick?: () => void;
+  onShowAIInputClick: () => void;
+  onHideAIInputClick: () => void;
 };
 
 export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
@@ -155,6 +160,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
   queryChanged,
   resultId,
   applyId,
+  filterHasContent,
   showExplainButton = false,
   showExportToLanguageButton = true,
   showQueryHistoryButton = true,
@@ -185,7 +191,7 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
     return enableAIQuery && !isAIInputVisible
       ? createAIPlaceholderHTMLPlaceholder({
           onClickAI: () => {
-            onShowAIInputClick?.();
+            onShowAIInputClick();
           },
           darkMode,
           placeholderText: OPTION_DEFINITION.filter.placeholder,
@@ -199,6 +205,15 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
     onShowAIInputClick,
   ]);
 
+  const showAskAIButton = useMemo(() => {
+    if (!enableAIQuery || isAIInputVisible) {
+      return false;
+    }
+
+    // See if there is content in the filter.
+    return filterHasContent;
+  }, [enableAIQuery, isAIInputVisible, filterHasContent]);
+
   return (
     <form
       className={cx(queryBarFormStyles, darkMode && queryBarFormDarkStyles)}
@@ -229,6 +244,12 @@ export const QueryBar: React.FunctionComponent<QueryBarProps> = ({
             placeholder={filterPlaceholder}
             insights={insights}
           />
+          {showAskAIButton && (
+            <AIExperienceEntry
+              data-testid="ai-experience-ask-ai-button"
+              onClick={onShowAIInputClick}
+            />
+          )}
         </div>
         {showExplainButton && newExplainPlan && (
           <GuideCue
@@ -335,6 +356,7 @@ export default connect(
     return {
       expanded: expanded,
       queryChanged: !isEqualDefaultQuery(fields),
+      filterHasContent: fields.filter.string !== '',
       valid: isQueryValid(fields),
       applyId: applyId,
       isAIInputVisible: aiQuery.isInputVisible,