Add user ratings

Summary:
Adds a star rating to flipper internal.

Based on the nuclide behaviour:
We get an event emitted when a user changes their rating.
And we also get the rating with every ping event, which is fired every minute, if flipper is the primary window.

The only thing I don't like that much is that this doesn't actually say anywhere what the stars are for.

Reviewed By: passy

Differential Revision: D16420281

fbshipit-source-id: 69a52f64058955d7cd068215478e95c554cb9ed4

src/chrome/RatingButton.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import {Component, type Element} from 'react';
+import {Glyph} from 'flipper';
+import {getInstance as getLogger} from '../fb-stubs/Logger';
+import GK from '../fb-stubs/GK';
+
+type Props = {
+  rating: ?number,
+  onRatingChanged: number => void,
+};
+
+type State = {
+  hoveredRating: ?number,
+};
+
+export default class RatingButton extends Component<Props, State> {
+  state = {
+    hoveredRating: null,
+  };
+
+  onRatingChanged(rating: number) {
+    const previousRating = this.props.rating;
+    if (rating === previousRating) {
+      return;
+    }
+    this.props.onRatingChanged(rating);
+    getLogger().track('usage', 'flipper-rating-changed', {
+      rating,
+      previousRating,
+    });
+  }
+
+  render() {
+    if (!GK.get('flipper_rating')) {
+      return null;
+    }
+    const rating = this.props.rating || 0;
+    if (rating < 0 || rating > 5) {
+      throw new Error(`Rating must be between 0 and 5. Value: ${rating}`);
+    }
+    const stars = Array(5)
+      .fill(true)
+      .map<Element<*>>((_, index) => (
+        <div
+          role="button"
+          tabIndex={0}
+          onMouseEnter={() => {
+            this.setState({hoveredRating: index + 1});
+          }}
+          onMouseLeave={() => {
+            this.setState({hoveredRating: null});
+          }}
+          onClick={() => {
+            this.onRatingChanged(index + 1);
+          }}>
+          <Glyph
+            name="star"
+            color="grey"
+            variant={
+              (this.state.hoveredRating
+              ? index < this.state.hoveredRating
+              : index < rating)
+                ? 'filled'
+                : 'outline'
+            }
+          />
+        </div>
+      ));
+    return stars;
+  }
+}