feat(compass-query-bar): add query ai feedback options COMPASS-7051 (#4716)

Author: Anemy

packages/compass-components/src/components/feedback-popover.spec.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { expect } from 'chai';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+
+import { FeedbackPopover } from './feedback-popover';
+
+function FeedbackPopoverRenderer(
+  props: Partial<React.ComponentProps<typeof FeedbackPopover>>
+) {
+  const buttonRef = React.createRef<any>();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <button
+        data-testid="open-feedback-button"
+        ref={buttonRef}
+        onClick={() => setOpen(!open)}
+      >
+        Feedback Button
+      </button>
+      <FeedbackPopover
+        label="test"
+        placeholder=""
+        refEl={buttonRef}
+        open={open}
+        setOpen={setOpen}
+        onSubmitFeedback={() => {
+          /* no-op */
+        }}
+        {...props}
+      />
+    </div>
+  );
+}
+
+const renderFeedbackPopover = (
+  props: Partial<React.ComponentProps<typeof FeedbackPopover>>
+) => {
+  render(<FeedbackPopoverRenderer {...props} />);
+};
+
+describe('FeedbackPopover', function () {
+  afterEach(function () {
+    cleanup();
+  });
+
+  it('renders the popover and passes feedback when submitted', async function () {
+    let feedbackText = '';
+    renderFeedbackPopover({
+      onSubmitFeedback: (text: string) => {
+        feedbackText = text;
+      },
+    });
+
+    expect(screen.queryByRole('textbox')).to.not.exist;
+
+    screen.getByTestId('open-feedback-button').click();
+
+    const textArea = screen.getByTestId('feedback-popover-textarea');
+    expect(textArea).to.be.visible;
+    fireEvent.change(textArea, {
+      target: { value: 'pineapple' },
+    });
+
+    screen.getByText('Submit').click();
+    // Wait for the event to go through.
+    await new Promise((resolve) => setTimeout(resolve, 3));
+
+    expect(feedbackText).to.equal('pineapple');
+  });
+});

packages/compass-components/src/components/feedback-popover.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { GuideCue as LGGuideCue } from '@leafygreen-ui/guide-cue';
+
+import { TextArea, css, spacing, useId } from '..';
+
+const guideCueStyles = css({
+  minWidth: spacing[7] * 4,
+});
+
+type LGGuideCueProps = React.ComponentProps<typeof LGGuideCue>;
+
+// Omit the props we are handling.
+export type FeedbackPopoverProps = Omit<
+  LGGuideCueProps,
+  'currentStep' | 'numberOfSteps' | 'children' | 'title'
+> & {
+  onSubmitFeedback: (text: string) => void;
+  placeholder: string;
+  label: string;
+};
+
+export const FeedbackPopover = ({
+  onSubmitFeedback,
+  label,
+  placeholder,
+  setOpen,
+  refEl,
+  open,
+  ...props
+}: FeedbackPopoverProps) => {
+  const [feedbackText, setFeedbackText] = useState('');
+  const feedbackPopoverId = useId();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const listener = (event: MouseEvent) => {
+      const popover = document.querySelector(
+        `[data-popoverid="feedback-popover-${feedbackPopoverId}"]`
+      );
+      if (!popover) {
+        return;
+      }
+
+      // Clicked within popover or the trigger.
+      if (
+        event.composedPath().includes(popover) ||
+        event.composedPath().includes(refEl.current!)
+      ) {
+        return;
+      }
+
+      setOpen(false);
+    };
+
+    document.addEventListener('mousedown', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+    };
+  }, [feedbackPopoverId, open, setOpen]);
+
+  const onTextAreaKeyDown = useCallback(
+    (evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (evt.key === 'Enter' && !evt.shiftKey) {
+        evt.preventDefault();
+        onSubmitFeedback(feedbackText);
+      } else if (evt.key === 'Escape') {
+        evt.preventDefault();
+        setOpen(false);
+      }
+    },
+    [feedbackText, setOpen, onSubmitFeedback]
+  );
+
+  return (
+    <LGGuideCue
+      tooltipClassName={guideCueStyles}
+      numberOfSteps={1}
+      currentStep={1}
+      data-popoverid={`feedback-popover-${feedbackPopoverId}`}
+      title=""
+      tooltipAlign="bottom"
+      refEl={refEl}
+      onPrimaryButtonClick={() => onSubmitFeedback(feedbackText)}
+      buttonText="Submit"
+      setOpen={setOpen}
+      open={open}
+      {...props}
+    >
+      <TextArea
+        label={label}
+        data-testid="feedback-popover-textarea"
+        placeholder={placeholder}
+        value={feedbackText}
+        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
+          setFeedbackText(event.target.value)
+        }
+        onKeyDown={onTextAreaKeyDown}
+      />
+    </LGGuideCue>
+  );
+};

packages/compass-components/src/index.ts

@@ -135,6 +135,7 @@ export type IconGlyph = Extract<keyof typeof glyphs, string>;
 
 export { EmptyContent } from './components/empty-content';
 export { ErrorBoundary } from './components/error-boundary';
+export { FeedbackPopover } from './components/feedback-popover';
 export { StoreConnector } from './components/store-connector';
 export { TabNavBar } from './components/tab-nav-bar';
 export { WorkspaceContainer } from './components/workspace-container';

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

@@ -1,14 +1,19 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, fireEvent, 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';
+import {
+  AIQueryActionTypes,
+  changeAIPromptText,
+} from '../../stores/ai-query-reducer';
+import { DEFAULT_FIELD_VALUES } from '../../constants/query-bar-store';
+import { mapQueryToFormFields } from '../../utils/query';
 
 const noop = () => {
   /* no op */
@@ -27,6 +32,8 @@ const renderAITextInput = ({
   return store;
 };
 
+const feedbackPopoverTextAreaId = 'feedback-popover-textarea';
+
 describe('QueryBar Component', function () {
   let store: ReturnType<typeof configureStore>;
   let onCloseSpy: SinonSpy;
@@ -69,4 +76,58 @@ describe('QueryBar Component', function () {
       expect(store.getState().aiQuery.aiPromptText).to.equal('');
     });
   });
+
+  describe('QueryFeedback', function () {
+    beforeEach(function () {
+      store = renderAITextInput({
+        onClose: onCloseSpy,
+      });
+    });
+
+    it('should log a telemetry event with the entered text on submit', async function () {
+      // Note: This is coupling this test with internals of the logger and telemetry.
+      // We're doing this as this is a unique case where we're using telemetry
+      // for feedback. Avoid repeating this elsewhere.
+      const trackingLogs: any[] = [];
+      process.on('compass:track', (event) => trackingLogs.push(event));
+
+      // No feedback popover is shown yet.
+      expect(screen.queryByTestId(feedbackPopoverTextAreaId)).to.not.exist;
+      expect(screen.queryByTestId('ai-query-feedback-thumbs-up')).to.not.exist;
+
+      store.dispatch({
+        type: AIQueryActionTypes.AIQuerySucceeded,
+        fields: mapQueryToFormFields(DEFAULT_FIELD_VALUES),
+      });
+
+      expect(screen.queryByTestId(feedbackPopoverTextAreaId)).to.not.exist;
+      const thumbsUpButton = screen.getByTestId('ai-query-feedback-thumbs-up');
+      expect(thumbsUpButton).to.be.visible;
+      thumbsUpButton.click();
+
+      const textArea = screen.getByTestId(feedbackPopoverTextAreaId);
+      expect(textArea).to.be.visible;
+      fireEvent.change(textArea, {
+        target: { value: 'this is the query I was looking for' },
+      });
+
+      screen.getByText('Submit').click();
+
+      // Let the track event occur.
+      await new Promise((resolve) => setTimeout(resolve, 6));
+
+      // No feedback popover is shown.
+      expect(screen.queryByTestId(feedbackPopoverTextAreaId)).to.not.exist;
+
+      expect(trackingLogs).to.deep.equal([
+        {
+          event: 'AIQuery Feedback',
+          properties: {
+            feedback: 'positive',
+            text: 'this is the query I was looking for',
+          },
+        },
+      ]);
+    });
+  });
 });