feat: disable the query bar controls while GenAI is running COMPASS-7839

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.spec.tsx

@@ -13,6 +13,7 @@ import {
   createSandboxFromDefaultPreferences,
 } from 'compass-preferences-model';
 import { PreferencesProvider } from 'compass-preferences-model/provider';
+import { AIPipelineActionTypes } from '../../../modules/pipeline-builder/pipeline-ai';
 
 describe('PipelineActions', function () {
   afterEach(cleanup);
@@ -275,6 +276,36 @@ describe('PipelineActions', function () {
       ).to.equal('true');
     });
 
+    it('should disable actions while ai is fetching', function () {
+      const { store, rerender } = renderPipelineActions({
+        pipeline: [{ $match: { _id: 1 } }],
+      });
+
+      store.dispatch({
+        type: AIPipelineActionTypes.AIPipelineStarted,
+        requestId: 'pineapples',
+      });
+      rerender();
+
+      expect(
+        screen
+          .getByTestId('pipeline-toolbar-explain-aggregation-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+
+      expect(
+        screen
+          .getByTestId('pipeline-toolbar-export-aggregation-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+
+      expect(
+        screen
+          .getByTestId('pipeline-toolbar-run-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+    });
+
     it('should disable export button when pipeline is $out / $merge', function () {
       renderPipelineActions({
         pipeline: [{ $out: 'foo' }],

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -170,17 +170,20 @@ const mapState = (state: RootState) => {
   const isMergeOrOutPipeline = isOutputStage(lastStage);
   const hasSyntaxErrors = getIsPipelineInvalidFromBuilderState(state, false);
   const isBuilderView = state.workspace === 'builder';
+  const isAIFetching = state.pipelineBuilder.aiPipeline.status === 'fetching';
 
   return {
-    isRunButtonDisabled: hasSyntaxErrors,
-    isExplainButtonDisabled: hasSyntaxErrors,
-    isExportButtonDisabled: isMergeOrOutPipeline || hasSyntaxErrors,
+    isRunButtonDisabled: hasSyntaxErrors || isAIFetching,
+    isExplainButtonDisabled: hasSyntaxErrors || isAIFetching,
+    isExportButtonDisabled:
+      isMergeOrOutPipeline || hasSyntaxErrors || isAIFetching,
     showAIEntry:
       !state.pipelineBuilder.aiPipeline.isInputVisible &&
       resultPipeline.length > 0 &&
       isBuilderView,
     showUpdateViewButton: Boolean(state.editViewName),
-    isUpdateViewButtonDisabled: !state.isModified || hasSyntaxErrors,
+    isUpdateViewButtonDisabled:
+      !state.isModified || hasSyntaxErrors || isAIFetching,
     showCollectionScanInsight: state.insights.isCollectionScan,
   };
 };

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

@@ -93,6 +93,7 @@ type OptionEditorProps = {
   value?: string;
   ['data-testid']?: string;
   insights?: Signal | Signal[];
+  disabled?: boolean;
 };
 
 export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
@@ -108,6 +109,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   value = '',
   ['data-testid']: dataTestId,
   insights,
+  disabled = false,
 }) => {
   const showInsights = usePreference('showInsights');
   const editorContainerRef = useRef<HTMLDivElement>(null);
@@ -199,6 +201,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
         onFocus={onFocus}
         onPaste={onPaste}
         onBlur={onBlur}
+        readOnly={disabled}
       />
       {showInsights && insights && (
         <div className={queryBarEditorOptionInsightsStyles}>

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

@@ -19,12 +19,14 @@ type QueryBarRowProps = {
   queryOptionsLayout: QueryBarRowLayout;
   onApply?(): void;
   placeholders?: Record<QueryProperty, string>;
+  disabled?: boolean;
 };
 
 export const QueryBarRow: React.FunctionComponent<QueryBarRowProps> = ({
   queryOptionsLayout,
   onApply,
   placeholders,
+  disabled,
 }) => {
   return (
     <div className={rowStyles}>
@@ -35,6 +37,7 @@ export const QueryBarRow: React.FunctionComponent<QueryBarRowProps> = ({
           id={`query-bar-option-input-${queryOptionsLayout}`}
           onApply={onApply}
           placeholder={placeholders?.[queryOptionsLayout]}
+          disabled={disabled}
         />
       ) : (
         queryOptionsLayout.map((optionName: QueryOption) => (
@@ -44,6 +47,7 @@ export const QueryBarRow: React.FunctionComponent<QueryBarRowProps> = ({
             id={`query-bar-option-input-${optionName}`}
             onApply={onApply}
             placeholder={placeholders?.[optionName]}
+            disabled={disabled}
           />
         ))
       )}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import sinon from 'sinon';
@@ -10,6 +10,7 @@ import { Provider } from '../stores/context';
 import { configureStore } from '../stores/query-bar-store';
 import type { QueryBarExtraArgs, RootState } from '../stores/query-bar-store';
 import { toggleQueryOptions } from '../stores/query-bar-reducer';
+import { AIQueryActionTypes } from '../stores/ai-query-reducer';
 import type { PreferencesAccess } from 'compass-preferences-model';
 import { createSandboxFromDefaultPreferences } from 'compass-preferences-model';
 import { mapQueryToFormFields } from '../utils/query';
@@ -51,7 +52,7 @@ describe('QueryBar Component', function () {
     } as QueryBarExtraArgs);
     store.dispatch(toggleQueryOptions(expanded));
 
-    render(
+    const component = (
       <PreferencesProvider value={preferences}>
         <FavoriteQueryStorageProvider value={compassFavoriteQueryStorageAccess}>
           <RecentQueryStorageProvider value={compassRecentQueryStorageAccess}>
@@ -60,15 +61,25 @@ describe('QueryBar Component', function () {
                 buttonLabel="Apply"
                 onApply={noop}
                 onReset={noop}
-                showExportToLanguageButton
                 resultId="123"
+                showExportToLanguageButton
                 {...props}
               />
             </Provider>
           </RecentQueryStorageProvider>
         </FavoriteQueryStorageProvider>
       </PreferencesProvider>
     );
+
+    const result = render(component);
+
+    return {
+      ...result,
+      store,
+      rerender: () => {
+        result.rerender(component);
+      },
+    };
   };
 
   beforeEach(async function () {
@@ -126,23 +137,158 @@ describe('QueryBar Component', function () {
     });
   });
 
-  describe('with one query option', function () {
+  describe('when rendered', function () {
     beforeEach(function () {
       renderQueryBar({
-        queryOptionsLayout: ['project'],
-        expanded: true,
         onApply: onApplySpy,
         onReset: onResetSpy,
       });
     });
 
-    it('renders the expanded inputs', function () {
+    it('renders the filter input', function () {
+      const filterInput = screen.getByTestId('query-bar-option-filter-input');
+      expect(filterInput).to.exist;
+      expect(filterInput).to.have.attribute(
+        'id',
+        'query-bar-option-input-filter'
+      );
+
       const queryInputs = screen.getAllByRole('textbox');
-      expect(queryInputs.length).to.equal(2);
+      expect(queryInputs.length).to.equal(1);
+    });
+
+    it('renders the query history button', function () {
+      const queryHistoryButton = screen.queryByTestId(queryHistoryButtonId);
+      expect(queryHistoryButton).to.be.visible;
+    });
+
+    it('does not render the query history popover', function () {
+      const queryHistory = screen.queryByTestId(queryHistoryComponentTestId);
+      expect(queryHistory).to.not.exist;
+    });
+  });
+
+  describe('when ai is ready', function () {
+    beforeEach(function () {
+      renderQueryBar(
+        {
+          queryOptionsLayout: ['project'],
+          expanded: true,
+          onApply: onApplySpy,
+          onReset: onResetSpy,
+        },
+        {}
+      );
+    });
+
+    it('query controls are enabled', function () {
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('false');
+      expect(
+        screen
+          .getByTestId('query-bar-apply-filter-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('false');
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('false');
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('false');
+    });
+
+    it('editors are not readonly', function () {
+      expect(
+        within(screen.getByTestId('query-bar-option-filter-input'))
+          .getByRole('textbox')
+          .getAttribute('aria-readonly')
+      ).to.not.exist;
+      expect(
+        within(screen.getByTestId('query-bar-option-project-input'))
+          .getByRole('textbox')
+          .getAttribute('aria-readonly')
+      ).to.not.exist;
+    });
+  });
+
+  describe('while ai is fetching', function () {
+    it('query controls are disabled', function () {
+      const { store, rerender } = renderQueryBar(
+        {
+          queryOptionsLayout: ['project'],
+          expanded: true,
+          onApply: onApplySpy,
+          onReset: onResetSpy,
+        },
+        {}
+      );
+
+      store.dispatch({
+        type: AIQueryActionTypes.AIQueryStarted,
+        requestId: 'pineapples',
+      });
+      rerender();
+
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+      expect(
+        screen
+          .getByTestId('query-bar-apply-filter-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+      expect(
+        screen
+          .getByTestId('query-bar-open-export-to-language-button')
+          .getAttribute('aria-disabled')
+      ).to.equal('true');
+    });
+
+    it('editors are readonly', function () {
+      const store = configureStore({}, {
+        preferences,
+        logger: createNoopLoggerAndTelemetry(),
+      } as QueryBarExtraArgs);
+
+      store.dispatch({
+        type: AIQueryActionTypes.AIQueryStarted,
+        requestId: 'pineapples',
+      });
+
+      render(
+        <Provider store={store}>
+          <QueryBar
+            buttonLabel="Apply"
+            onApply={noop}
+            onReset={noop}
+            resultId="123"
+          />
+        </Provider>
+      );
+
+      expect(
+        within(screen.getByTestId('query-bar-option-filter-input'))
+          .getByRole('textbox')
+          .getAttribute('aria-readonly')
+      ).to.equal('true');
     });
   });
 
-  describe('with ai enabled', function () {
+  describe('with ai is enabled', function () {
     beforeEach(async function () {
       await preferences.savePreferences({
         enableGenAIFeatures: true,