chore(query-bar): update ai text input styles, move text out of state to store COMPASS-7005 (#4628)

Author: Anemy

packages/compass-query-bar/src/components/generative-ai/ai-text-input.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import sinon from 'sinon';
+import type { SinonSpy } from 'sinon';
+import { Provider } from 'react-redux';
+
+import { AITextInput } from './ai-text-input';
+import { configureStore } from '../../stores/query-bar-store';
+import { changeAIPromptText } from '../../stores/ai-query-reducer';
+
+const noop = () => {
+  /* no op */
+};
+
+const renderAITextInput = ({
+  ...props
+}: Partial<ComponentProps<typeof AITextInput>> = {}) => {
+  const store = configureStore();
+
+  render(
+    <Provider store={store}>
+      <AITextInput onClose={noop} show {...props} />
+    </Provider>
+  );
+  return store;
+};
+
+describe('QueryBar Component', function () {
+  let store: ReturnType<typeof configureStore>;
+  let onCloseSpy: SinonSpy;
+  beforeEach(function () {
+    onCloseSpy = sinon.spy();
+  });
+  afterEach(cleanup);
+
+  describe('when rendered', function () {
+    beforeEach(function () {
+      store = renderAITextInput({
+        onClose: onCloseSpy,
+      });
+    });
+
+    it('calls to close robot button is clicked', function () {
+      expect(onCloseSpy.called).to.be.false;
+      const closeButton = screen.getByTestId('close-ai-query-button');
+      expect(closeButton).to.be.visible;
+      closeButton.click();
+      expect(onCloseSpy.calledOnce).to.be.true;
+    });
+  });
+
+  describe('when rendered with text', function () {
+    beforeEach(function () {
+      store = renderAITextInput({
+        onClose: onCloseSpy,
+      });
+      store.dispatch(changeAIPromptText('test'));
+    });
+
+    it('calls to clear the text when the X is clicked', function () {
+      expect(store.getState().aiQuery.aiPromptText).to.equal('test');
+
+      const clearTextButton = screen.getByTestId('ai-text-clear-prompt');
+      expect(clearTextButton).to.be.visible;
+      clearTextButton.click();
+
+      expect(store.getState().aiQuery.aiPromptText).to.equal('');
+    });
+  });
+});

packages/compass-query-bar/src/components/generative-ai/ai-text-input.tsx

@@ -8,15 +8,20 @@ import {
   TextInput,
   css,
   cx,
+  focusRing,
   palette,
   spacing,
   useDarkMode,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 
-import { RobotSVG } from './robot-svg';
+import { DEFAULT_ROBOT_SIZE, RobotSVG } from './robot-svg';
 import type { RootState } from '../../stores/query-bar-store';
-import { cancelAIQuery, runAIQuery } from '../../stores/ai-query-reducer';
+import {
+  cancelAIQuery,
+  changeAIPromptText,
+  runAIQuery,
+} from '../../stores/ai-query-reducer';
 
 const containerStyles = css({
   display: 'flex',
@@ -95,6 +100,30 @@ const buttonHighlightLightModeStyles = css({
   color: palette.gray.dark1,
 });
 
+const loaderContainerStyles = css({
+  padding: spacing[1],
+  display: 'inline-flex',
+  width: DEFAULT_ROBOT_SIZE + spacing[2],
+  justifyContent: 'space-around',
+});
+
+const buttonResetStyles = css({
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  background: 'none',
+  cursor: 'pointer',
+});
+
+const closeAIButtonStyles = css(
+  buttonResetStyles,
+  {
+    padding: spacing[1],
+    display: 'inline-flex',
+  },
+  focusRing
+);
+
 const closeText = 'Close AI Query';
 
 const SubmitArrowSVG = ({ darkMode }: { darkMode?: boolean }) => (
@@ -122,25 +151,28 @@ const SubmitArrowSVG = ({ darkMode }: { darkMode?: boolean }) => (
 );
 
 type AITextInputProps = {
+  aiPromptText: string;
   onCancelAIQuery: () => void;
   isFetching?: boolean;
   didSucceed: boolean;
   errorMessage?: string;
   show: boolean;
+  onChangeAIPromptText: (text: string) => void;
   onClose: () => void;
   onSubmitText: (text: string) => void;
 };
 
 function AITextInput({
+  aiPromptText,
   onCancelAIQuery,
   isFetching,
   didSucceed,
   errorMessage,
   show,
   onClose,
+  onChangeAIPromptText,
   onSubmitText,
 }: AITextInputProps) {
-  const [text, setText] = useState('');
   const promptTextInputRef = useRef<HTMLInputElement>(null);
   const [showSuccess, setShowSuccess] = useState(false);
   const darkMode = useDarkMode();
@@ -149,12 +181,12 @@ function AITextInput({
     (evt: React.KeyboardEvent<HTMLInputElement>) => {
       if (evt.key === 'Enter') {
         evt.preventDefault();
-        onSubmitText(text);
+        onSubmitText(aiPromptText);
       } else if (evt.key === 'Escape') {
         isFetching ? onCancelAIQuery() : onClose();
       }
     },
-    [text, onClose, onSubmitText, isFetching, onCancelAIQuery]
+    [aiPromptText, onClose, onSubmitText, isFetching, onCancelAIQuery]
   );
 
   useEffect(() => {
@@ -196,23 +228,21 @@ function AITextInput({
           sizeVariant="small"
           aria-label="Enter a plain text query that the AI will translate into MongoDB query language."
           placeholder="Tell Compass what documents to find (e.g. how many users signed up last month)"
-          value={text}
+          value={aiPromptText}
           onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
-            setText(evt.currentTarget.value)
+            onChangeAIPromptText(evt.currentTarget.value)
           }
           onKeyDown={onTextInputKeyDown}
         />
         <div className={floatingButtonsContainerStyles}>
-          {isFetching && <SpinLoader />}
-          {showSuccess && (
-            <Icon
-              className={
-                darkMode
-                  ? successIndicatorDarkModeStyles
-                  : successIndicatorLightModeStyles
-              }
-              glyph="CheckmarkWithCircle"
-            />
+          {aiPromptText && (
+            <IconButton
+              aria-label="Clear query prompt"
+              onClick={() => onChangeAIPromptText('')}
+              data-testid="ai-text-clear-prompt"
+            >
+              <Icon glyph="X" />
+            </IconButton>
           )}
           <Button
             size="small"
@@ -221,7 +251,7 @@ function AITextInput({
               !darkMode && generateButtonLightModeStyles
             )}
             onClick={() =>
-              isFetching ? onCancelAIQuery() : onSubmitText(text)
+              isFetching ? onCancelAIQuery() : onSubmitText(aiPromptText)
             }
           >
             {isFetching ? (
@@ -245,13 +275,32 @@ function AITextInput({
               </>
             )}
           </Button>
-          <IconButton
-            aria-label={closeText}
-            title={closeText}
-            onClick={() => onClose()}
-          >
-            <RobotSVG />
-          </IconButton>
+          {isFetching ? (
+            <div className={loaderContainerStyles}>
+              <SpinLoader />
+            </div>
+          ) : showSuccess ? (
+            <div className={loaderContainerStyles}>
+              <Icon
+                className={
+                  darkMode
+                    ? successIndicatorDarkModeStyles
+                    : successIndicatorLightModeStyles
+                }
+                glyph="CheckmarkWithCircle"
+              />
+            </div>
+          ) : (
+            <button
+              className={closeAIButtonStyles}
+              data-testid="close-ai-query-button"
+              aria-label={closeText}
+              title={closeText}
+              onClick={() => onClose()}
+            >
+              {isFetching ? <SpinLoader /> : <RobotSVG />}
+            </button>
+          )}
         </div>
       </div>
       {errorMessage && (
@@ -266,12 +315,14 @@ function AITextInput({
 const ConnectedAITextInput = connect(
   (state: RootState) => {
     return {
+      aiPromptText: state.aiQuery.aiPromptText,
       isFetching: state.aiQuery.status === 'fetching',
       didSucceed: state.aiQuery.status === 'success',
       errorMessage: state.aiQuery.errorMessage,
     };
   },
   {
+    onChangeAIPromptText: changeAIPromptText,
     onCancelAIQuery: cancelAIQuery,
     onSubmitText: runAIQuery,
   }

packages/compass-query-bar/src/components/generative-ai/robot-svg.tsx

@@ -30,10 +30,12 @@ export const robotSVGLightModeStyles = css({
   },
 });
 
+export const DEFAULT_ROBOT_SIZE = 20;
+
 // Note: This is duplicated below as a string for HTML.
 const RobotSVG = ({
   darkMode,
-  size = 20,
+  size = DEFAULT_ROBOT_SIZE,
 }: {
   darkMode?: boolean;
   size?: number;

packages/compass-query-bar/src/stores/ai-query-reducer.ts

@@ -18,12 +18,14 @@ type AIQueryStatus = 'ready' | 'fetching' | 'success';
 export type AIQueryState = {
   errorMessage: string | undefined;
   isInputVisible: boolean;
+  aiPromptText: string;
   status: AIQueryStatus;
   aiQueryFetchId: number; // Maps to the AbortController of the current fetch (or -1).
 };
 
 export const initialState: AIQueryState = {
   status: 'ready',
+  aiPromptText: '',
   errorMessage: undefined,
   isInputVisible: false,
   aiQueryFetchId: -1,
@@ -37,6 +39,7 @@ export const enum AIQueryActionTypes {
   CancelAIQuery = 'compass-query-bar/ai-query/CancelAIQuery',
   ShowInput = 'compass-query-bar/ai-query/ShowInput',
   HideInput = 'compass-query-bar/ai-query/HideInput',
+  ChangeAIPromptText = 'compass-query-bar/ai-query/ChangeAIPromptText',
 }
 
 const NUM_DOCUMENTS_TO_SAMPLE = 4;
@@ -70,6 +73,16 @@ type HideInputAction = {
   type: AIQueryActionTypes.HideInput;
 };
 
+type ChangeAIPromptTextAction = {
+  type: AIQueryActionTypes.ChangeAIPromptText;
+  text: string;
+};
+
+export const changeAIPromptText = (text: string): ChangeAIPromptTextAction => ({
+  type: AIQueryActionTypes.ChangeAIPromptText,
+  text,
+});
+
 type AIQueryStartedAction = {
   type: AIQueryActionTypes.AIQueryStarted;
   fetchId: number;
@@ -311,6 +324,18 @@ const aiQueryReducer: Reducer<AIQueryState> = (
     };
   }
 
+  if (
+    isAction<ChangeAIPromptTextAction>(
+      action,
+      AIQueryActionTypes.ChangeAIPromptText
+    )
+  ) {
+    return {
+      ...state,
+      aiPromptText: action.text,
+    };
+  }
+
   return state;
 };