diff --git a/desktop/app/src/chrome/RatingButton.tsx b/desktop/app/src/chrome/RatingButton.tsx index c9c560c3e..81bb692a5 100644 --- a/desktop/app/src/chrome/RatingButton.tsx +++ b/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 { /> {this.state.isShown ? ( - + { dismiss={this.onClick.bind(this)} promptData={promptData} /> - + ) : null} ); } } +export function SandyRatingButton() { + const [ + promptData, + setPromptData, + ] = useState(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, + allowUserInfoSharing: boolean, + ) => { + UserFeedback.submitComment( + rating, + comment, + selectedPredefinedComments, + allowUserInfoSharing, + sessionId, + ); + }; + + if (!promptData) { + return null; + } + if (!promptData.shouldPopup || (hasTriggered && !isShown)) { + return null; + } + return ( + { + setIsShown(false); + }} + dismiss={onClick} + promptData={promptData} + /> + } + placement="right" + trigger="click"> + } + title="Rate Flipper" + onClick={onClick} + small + /> + + ); +} + export default connect<{sessionId: string | null}, null, {}, Store>( ({application: {sessionId}}) => ({sessionId}), )(RatingButton); diff --git a/desktop/app/src/sandy-chrome/LeftRail.tsx b/desktop/app/src/sandy-chrome/LeftRail.tsx index e20fc8a1d..4d350f9f4 100644 --- a/desktop/app/src/sandy-chrome/LeftRail.tsx +++ b/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({ /> + diff --git a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx b/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx index 44fdb8a63..dad15e415 100644 --- a/desktop/app/src/sandy-chrome/TemporarilyTitlebar.tsx +++ b/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() && } {!isProduction() && } - {config.showFlipperRating ? : null} {version + (isProduction() ? '' : '-dev')} {isAutoUpdaterEnabled() ? (