Change RatingButton to use Popover2

Summary:
The original Popover component doesn't work when the popover goes out of bounds of the current container, and overflow is not visible, which is the case in the title bar.

This changes it to use a new absolutely positioned one instead.

Reviewed By: mweststrate

Differential Revision: D22724110

fbshipit-source-id: f41b6d154ccb66a94b63533fe9c30d2a2c49f1db

desktop/app/src/chrome/RatingButton.tsx

@@ -7,10 +7,9 @@
  * @format
  */
 
-import React, {Component, ReactElement} from 'react';
+import React, {Component, ReactElement, RefObject} from 'react';
 import {
   Glyph,
-  Popover,
   FlexColumn,
   FlexRow,
   Button,
@@ -18,6 +17,7 @@ import {
   styled,
   Input,
 } from 'flipper';
+import Popover from '../ui/components/Popover2';
 import GK from '../fb-stubs/GK';
 import * as UserFeedback from '../fb-stubs/UserFeedback';
 import {FeedbackPrompt} from '../fb-stubs/UserFeedback';
@@ -295,6 +295,8 @@ class RatingButton extends Component<PropsFromState, State> {
     hasTriggered: false,
   };
 
+  glyphRef: RefObject<HTMLDivElement> = React.createRef();
+
   constructor(props: PropsFromState) {
     super(props);
     if (GK.get('flipper_rating')) {
@@ -351,7 +353,11 @@ class RatingButton extends Component<PropsFromState, State> {
     }
     return (
       <div style={{position: 'relative'}}>
-        <div onClick={this.onClick.bind(this)}>
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={this.onClick.bind(this)}
+          ref={this.glyphRef}>
           <Glyph
             name="star"
             color="grey"
@@ -359,9 +365,7 @@ class RatingButton extends Component<PropsFromState, State> {
           />
         </div>
         {this.state.isShown ? (
-          <Popover
-            onDismiss={() => {}}
-            children={
+          <Popover id="rating-button" targetRef={this.glyphRef}>
             <FeedbackComponent
               submitRating={this.submitRating.bind(this)}
               submitComment={this.submitComment.bind(this)}
@@ -371,8 +375,7 @@ class RatingButton extends Component<PropsFromState, State> {
               dismiss={this.onClick.bind(this)}
               promptData={promptData}
             />
-            }
-          />
+          </Popover>
         ) : null}
       </div>
     );

desktop/app/src/init.tsx

@@ -35,6 +35,7 @@ import {CacheProvider} from '@emotion/core';
 import {enableMapSet} from 'immer';
 import os from 'os';
 import QuickPerformanceLogger, {FLIPPER_QPL_EVENTS} from './fb-stubs/QPL';
+import {PopoverProvider} from './ui/components/PopoverProvider';
 
 if (process.env.NODE_ENV === 'development' && os.platform() === 'darwin') {
   // By default Node.JS has its internal certificate storage and doesn't use
@@ -65,6 +66,7 @@ const AppFrame = () => {
 
   return (
     <TooltipProvider>
+      <PopoverProvider>
         <ContextMenuProvider>
           <Provider store={store}>
             <CacheProvider value={cache}>
@@ -80,6 +82,7 @@ const AppFrame = () => {
             </CacheProvider>
           </Provider>
         </ContextMenuProvider>
+      </PopoverProvider>
     </TooltipProvider>
   );
 };