feat: improve AI feedback experience COMPASS-7211, COMPASS-7251 (#4918)

mongodb-js · Oct 2, 2023 · 69151f1 · 69151f1
1 parent 8c769ba
commit 69151f1
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-ai.tsx b/packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-ai.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import { GenerativeAIInput } from '@mongodb-js/compass-components';
+import { GenerativeAIInput, openToast } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
 import { usePreference } from 'compass-preferences-model';
@@ -25,6 +25,12 @@ const onSubmitFeedback = (feedback: 'positive' | 'negative', text: string) => {
     feedback,
     text,
   }));
+
+  openToast('pipeline-ai-feedback-submitted', {
+    variant: 'success',
+    title: 'Your feedback has been submitted.',
+    timeout: 10_000,
+  });
 };
 
 type PipelineAIProps = {

diff --git a/packages/compass-components/src/components/feedback-popover.spec.tsx b/packages/compass-components/src/components/feedback-popover.spec.tsx
@@ -12,7 +12,7 @@ function FeedbackPopoverRenderer(
   const [open, setOpen] = useState(false);
 
   return (
-    <div>
+    <div data-testid="outside-modal-area">
       <button
         data-testid="open-feedback-button"
         ref={buttonRef}
@@ -68,4 +68,41 @@ describe('FeedbackPopover', function () {
 
     expect(feedbackText).to.equal('pineapple');
   });
+
+  it('renders the popover and passes feedback with no text when the popover closed without submitting', async function () {
+    let feedbackText = '';
+    renderFeedbackPopover({
+      onSubmitFeedback: (text: string) => {
+        feedbackText = text;
+      },
+    });
+
+    expect(screen.queryByRole('textbox')).to.not.exist;
+
+    const outsideModal = screen.getByTestId('outside-modal-area');
+    userEvent.click(outsideModal);
+
+    // Wait for the event to go through.
+    await new Promise((resolve) => setTimeout(resolve, 3));
+
+    expect(feedbackText).to.equal('');
+  });
+
+  it('renders the popover and passes feedback with no text when user presses esc', async function () {
+    let feedbackText = '';
+    renderFeedbackPopover({
+      onSubmitFeedback: (text: string) => {
+        feedbackText = text;
+      },
+    });
+
+    expect(screen.queryByRole('textbox')).to.not.exist;
+
+    userEvent.keyboard('{Escape}');
+
+    // Wait for the event to go through.
+    await new Promise((resolve) => setTimeout(resolve, 3));
+
+    expect(feedbackText).to.equal('');
+  });
 });
diff --git a/packages/compass-components/src/components/feedback-popover.tsx b/packages/compass-components/src/components/feedback-popover.tsx
@@ -54,6 +54,7 @@ export const FeedbackPopover = ({
         return;
       }
 
+      onSubmitFeedback('');
       setOpen(false);
     };
 
@@ -70,6 +71,7 @@ export const FeedbackPopover = ({
         onSubmitFeedback(feedbackText);
       } else if (evt.key === 'Escape') {
         evt.preventDefault();
+        onSubmitFeedback('');
         setOpen(false);
       }
     },

diff --git a/packages/compass-query-bar/src/components/query-ai.tsx b/packages/compass-query-bar/src/components/query-ai.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { GenerativeAIInput } from '@mongodb-js/compass-components';
+import { GenerativeAIInput, openToast } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
 import { usePreference } from 'compass-preferences-model';
@@ -23,6 +23,12 @@ const onSubmitFeedback = (feedback: 'positive' | 'negative', text: string) => {
     feedback,
     text,
   }));
+
+  openToast('query-ai-feedback-submitted', {
+    variant: 'success',
+    title: 'Your feedback has been submitted.',
+    timeout: 10_000,
+  });
 };
 
 type QueryAIProps = Omit<