Move ITSR popup into Sandy LeftRail

Summary:
The title bar is going away, so this needs to be moved somewhere when sandy is enabled.

This moves it into the left rail when sandy is enabled, and converts the icon to use a sandy icon and popover.
The contents of the popover haven't yet been converted to use sandy components.

Reviewed By: mweststrate

Differential Revision: D25055282

fbshipit-source-id: 259ed8312c0d4079433cfa7ffb88385184ae16b2

desktop/app/src/chrome/RatingButton.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {Component, ReactElement, RefObject} from 'react';
+import React, {Component, ReactElement, RefObject, useState} from 'react';
 import {
   Glyph,
   FlexColumn,
@@ -18,12 +18,16 @@ import {
   Input,
   Link,
 } from '../ui';
-import Popover from '../ui/components/Popover2';
+import LegacyPopover from '../ui/components/Popover2';
+import {LeftRailButton} from '../sandy-chrome/LeftRail';
 import GK from '../fb-stubs/GK';
 import * as UserFeedback from '../fb-stubs/UserFeedback';
 import {FeedbackPrompt} from '../fb-stubs/UserFeedback';
 import {connect} from 'react-redux';
 import {State as Store} from '../reducers';
+import {StarOutlined} from '@ant-design/icons';
+import {Popover} from 'antd';
+import {useStore} from '../utils/useStore';
 
 type PropsFromState = {
   sessionId: string | null;
@@ -374,7 +378,7 @@ class RatingButton extends Component<PropsFromState, State> {
           />
         </div>
         {this.state.isShown ? (
-          <Popover id="rating-button" targetRef={this.glyphRef}>
+          <LegacyPopover id="rating-button" targetRef={this.glyphRef}>
             <FeedbackComponent
               submitRating={this.submitRating.bind(this)}
               submitComment={this.submitComment.bind(this)}
@@ -384,13 +388,96 @@ class RatingButton extends Component<PropsFromState, State> {
               dismiss={this.onClick.bind(this)}
               promptData={promptData}
             />
-          </Popover>
+          </LegacyPopover>
         ) : null}
       </div>
     );
   }
 }
 
+export function SandyRatingButton() {
+  const [
+    promptData,
+    setPromptData,
+  ] = useState<UserFeedback.FeedbackPrompt | null>(null);
+  const [isShown, setIsShown] = useState(false);
+  const [hasTriggered, setHasTriggered] = useState(false);
+  const sessionId = useStore((store) => store.application.sessionId);
+
+  const triggerPopover = () => {
+    if (!hasTriggered) {
+      setIsShown(true);
+      setHasTriggered(true);
+    }
+  };
+
+  if (GK.get('flipper_enable_star_ratiings')) {
+    UserFeedback.getPrompt().then((prompt) => {
+      setPromptData(prompt);
+      setTimeout(triggerPopover, 30000);
+    });
+  }
+
+  const onClick = () => {
+    const willBeShown = !isShown;
+    setIsShown(willBeShown);
+    setHasTriggered(true);
+    if (!willBeShown) {
+      UserFeedback.dismiss(sessionId);
+    }
+  };
+
+  const submitRating = (rating: number) => {
+    UserFeedback.submitRating(rating, sessionId);
+  };
+
+  const submitComment = (
+    rating: number,
+    comment: string,
+    selectedPredefinedComments: Array<string>,
+    allowUserInfoSharing: boolean,
+  ) => {
+    UserFeedback.submitComment(
+      rating,
+      comment,
+      selectedPredefinedComments,
+      allowUserInfoSharing,
+      sessionId,
+    );
+  };
+
+  if (!promptData) {
+    return null;
+  }
+  if (!promptData.shouldPopup || (hasTriggered && !isShown)) {
+    return null;
+  }
+  return (
+    <Popover
+      visible={isShown}
+      content={
+        <FeedbackComponent
+          submitRating={submitRating}
+          submitComment={submitComment}
+          close={() => {
+            setIsShown(false);
+          }}
+          dismiss={onClick}
+          promptData={promptData}
+        />
+      }
+      placement="right"
+      trigger="click">
+      <LeftRailButton
+        icon={<StarOutlined />}
+        title="Rate Flipper"
+        onClick={onClick}
+        small
+      />
+    </Popover>
+  );
+}
+
 export default connect<{sessionId: string | null}, null, {}, Store>(
   ({application: {sessionId}}) => ({sessionId}),
 )(RatingButton);

desktop/app/src/sandy-chrome/LeftRail.tsx

@@ -53,6 +53,7 @@ import {setStaticView} from '../reducers/connections';
 import {getInstance} from '../fb-stubs/Logger';
 import {isStaticViewActive} from '../chrome/mainsidebar/sidebarUtils';
 import {getUser} from '../fb-stubs/user';
+import {SandyRatingButton} from '../chrome/RatingButton';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
   width: kind === 'small' ? 32 : 36,
@@ -63,7 +64,7 @@ const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({
 }));
 LeftRailButtonElem.displayName = 'LeftRailButtonElem';
 
-function LeftRailButton({
+export function LeftRailButton({
   icon,
   small,
   selected,
@@ -151,6 +152,7 @@ export function LeftRail({
           />
         </Layout.Container>
         <Layout.Container center gap={10} padh={6}>
+          <SandyRatingButton />
           <LaunchEmulatorButton />
           <SetupDoctorButton />
           <WelcomeScreenButton />

desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx

@@ -15,10 +15,8 @@ import isProduction from '../utils/isProduction';
 import {isAutoUpdaterEnabled} from '../utils/argvUtils';
 import AutoUpdateVersion from '../chrome/AutoUpdateVersion';
 import UpdateIndicator from '../chrome/UpdateIndicator';
-import RatingButton from '../chrome/RatingButton';
 import {Version} from '../chrome/TitleBar';
 import {useStore} from '../utils/useStore';
-import config from '../fb-stubs/config';
 import {remote} from 'electron';
 
 const version = remote.app.getVersion();
@@ -56,7 +54,6 @@ export function TemporarilyTitlebar() {
       [Sandy] Flipper{' '}
       {!isProduction() && <NetworkGraph height={20} width={60} />}
       {!isProduction() && <FpsGraph height={20} width={60} />}
-      {config.showFlipperRating ? <RatingButton /> : null}
       <Version>{version + (isProduction() ? '' : '-dev')}</Version>
       {isAutoUpdaterEnabled() ? (
         <AutoUpdateVersion version={version} />