From 8c155475972800e80a3f9b36d39ee521e8a7cc04 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Mon, 7 Oct 2019 08:36:04 -0700
Subject: [PATCH] Add explicit dismiss button to feedback prompt

Summary:
You can already click the star icon in the title bar to dismiss, but according to feedback this isn't obvious: https://our.intern.facebook.com/intern/itsr?start_date=1561849200&end_date=1570402800&tab=4&all_tools=true

So adding an explicit dismiss button.

Reviewed By: passy

Differential Revision: D17788570

fbshipit-source-id: b0995e5abdaafc5bd6f93edb27dad703c81b8f2b
---
 src/chrome/RatingButton.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/chrome/RatingButton.tsx b/src/chrome/RatingButton.tsx
index 4f1905da2..cfbd49801 100644
--- a/src/chrome/RatingButton.tsx
+++ b/src/chrome/RatingButton.tsx
@@ -73,6 +73,32 @@ const Row = styled(FlexRow)({
   flexWrap: 'wrap',
 });
 
+const DismissRow = styled(Row)({
+  marginBottom: 0,
+  marginTop: 10,
+});
+
+const DismissButton = styled('span')({
+  '&:hover': {
+    textDecoration: 'underline',
+    cursor: 'pointer',
+  },
+});
+
+const Spacer = styled(FlexColumn)({
+  flexGrow: 1,
+});
+
+function dismissRow(dismiss: () => void) {
+  return (
+    <DismissRow>
+      <Spacer />
+      <DismissButton onClick={dismiss}>Dismiss</DismissButton>
+      <Spacer />
+    </DismissRow>
+  );
+}
+
 type FeedbackComponentState = {
   rating: number | null;
   hoveredRating: number;
@@ -91,7 +117,8 @@ class FeedbackComponent extends Component<
       selectedPredefinedComments: Array<string>,
       allowUserInfoSharing: boolean,
     ) => void;
-    close(): void;
+    close: () => void;
+    dismiss: () => void;
     promptData: FeedbackPrompt;
   },
   FeedbackComponentState
@@ -175,6 +202,7 @@ class FeedbackComponent extends Component<
         body = [
           <Row>{this.props.promptData.bodyText}</Row>,
           <Row style={{margin: 'auto'}}>{stars}</Row>,
+          dismissRow(this.props.dismiss),
         ];
         break;
       case 'leave-comment':
@@ -220,6 +248,7 @@ class FeedbackComponent extends Component<
               Submit
             </Button>
           </Row>,
+          dismissRow(this.props.dismiss),
         ];
         break;
       case 'finished':
@@ -329,6 +358,7 @@ export default class RatingButton extends Component<Props, State> {
                 close={() => {
                   this.setState({isShown: false});
                 }}
+                dismiss={this.onClick.bind(this)}
                 promptData={promptData}
               />
             }