From ee276a5ee5a02d48909667a271cd300c6b1bb3d0 Mon Sep 17 00:00:00 2001
From: Julien Wajsberg <felash@gmail.com>
Date: Mon, 22 Nov 2021 14:52:04 +0100
Subject: [PATCH] Enable the new rule react/no-unused-class-component-methods
 and fix eslint errors

---
 .eslintrc.js                                      |  5 +++--
 src/components/app/MenuButtons/Permalink.js       |  5 -----
 src/components/app/MenuButtons/Publish.js         | 15 ---------------
 src/components/app/ProfileDeleteButton.js         |  4 ----
 src/components/flame-graph/FlameGraph.js          |  2 ++
 src/components/js-tracer/index.js                 |  2 --
 .../shared/ButtonWithPanel/ArrowPanel.js          |  5 +++++
 src/components/shared/TrackSearchField.js         |  2 ++
 src/components/shared/TreeView.js                 |  4 ++++
 src/components/shared/VirtualList.js              |  6 ++++++
 src/components/stack-chart/Canvas.js              |  3 ---
 src/components/timeline/EmptyThreadIndicator.js   |  3 ---
 src/components/timeline/OriginsTimeline.js        |  4 +++-
 src/components/tooltip/Tooltip.js                 |  2 --
 14 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 05d8b16173..dbe14b05f7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,6 +36,7 @@ module.exports = {
     'react/no-did-update-set-state': 'error',
     'react/no-will-update-set-state': 'error',
     'react/no-redundant-should-component-update': 'error',
+    'react/no-unused-class-component-methods': 'error',
     'react/no-this-in-sfc': 'error',
     'react/no-typos': 'error',
     // Flow provides enough coverage over the prop types, and there can be errors
@@ -128,8 +129,8 @@ module.exports = {
   settings: {
     react: {
       pragma: 'React',
-      version: '15.0',
-      flowVersion: '0.63.1',
+      version: '17.0',
+      flowVersion: '0.96.0',
     },
     'import/resolver': {
       alias: {
diff --git a/src/components/app/MenuButtons/Permalink.js b/src/components/app/MenuButtons/Permalink.js
index 5f6b3756df..00952a8126 100644
--- a/src/components/app/MenuButtons/Permalink.js
+++ b/src/components/app/MenuButtons/Permalink.js
@@ -26,11 +26,7 @@ type State = {|
 |};
 
 export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
-  _permalinkButton: ButtonWithPanel | null;
   _permalinkTextField: HTMLInputElement | null;
-  _takePermalinkButtonRef = (elem: ButtonWithPanel | null) => {
-    this._permalinkButton = elem;
-  };
   _takePermalinkTextFieldRef = (elem: HTMLInputElement | null) => {
     this._permalinkTextField = elem;
   };
@@ -74,7 +70,6 @@ export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
       <Localized id="MenuButtons--permalink--button" attrs={{ label: true }}>
         <ButtonWithPanel
           buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsPermalinkButtonButton"
-          ref={this._takePermalinkButtonRef}
           label="Permalink"
           initialOpen={this.props.isNewlyPublished}
           onPanelOpen={this._shortenUrlAndFocusTextFieldOnCompletion}
diff --git a/src/components/app/MenuButtons/Publish.js b/src/components/app/MenuButtons/Publish.js
index 92deb83b54..d812d0ea55 100644
--- a/src/components/app/MenuButtons/Publish.js
+++ b/src/components/app/MenuButtons/Publish.js
@@ -201,21 +201,6 @@ class MenuButtonsPublishImpl extends React.PureComponent<PublishProps> {
     );
   }
 
-  _closePanelAfterUpload = () => {
-    const { resetUploadState } = this.props;
-    // Only reset it after the panel animation disappears.
-    setTimeout(resetUploadState, 300);
-
-    const { body } = document;
-    if (body) {
-      // This is a hack to close the arrow panel. See the following issue on
-      // moving this to the Redux state.
-      //
-      // https://github.com/firefox-devtools/profiler/issues/1888
-      body.dispatchEvent(new MouseEvent('mousedown'));
-    }
-  };
-
   _renderUploadPanel() {
     const {
       uploadProgress,
diff --git a/src/components/app/ProfileDeleteButton.js b/src/components/app/ProfileDeleteButton.js
index 85c0fb60d8..6d12bd8915 100644
--- a/src/components/app/ProfileDeleteButton.js
+++ b/src/components/app/ProfileDeleteButton.js
@@ -152,10 +152,6 @@ export class ProfileDeletePanel extends PureComponent<PanelProps, PanelState> {
     }
   };
 
-  onCancelDeletion = () => {
-    this.props.onProfileDeleteCanceled();
-  };
-
   preventClick(e: SyntheticMouseEvent<>) {
     e.preventDefault();
   }
diff --git a/src/components/flame-graph/FlameGraph.js b/src/components/flame-graph/FlameGraph.js
index 321f60aa3c..f04c3caa4c 100644
--- a/src/components/flame-graph/FlameGraph.js
+++ b/src/components/flame-graph/FlameGraph.js
@@ -122,6 +122,8 @@ class FlameGraphImpl extends React.PureComponent<Props> {
     this._viewport = viewport;
   };
 
+  /* This method is called from MaybeFlameGraph. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus = () => {
     if (this._viewport) {
       this._viewport.focus();
diff --git a/src/components/js-tracer/index.js b/src/components/js-tracer/index.js
index 370e783d4b..cc8049fa4e 100644
--- a/src/components/js-tracer/index.js
+++ b/src/components/js-tracer/index.js
@@ -40,8 +40,6 @@ type StateProps = {|
 type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 
 class JsTracerImpl extends React.PureComponent<Props> {
-  _rafGeneration: number = 0;
-
   render() {
     const { profile, jsTracerTable, showJsTracerSummary, threadsKey } =
       this.props;
diff --git a/src/components/shared/ButtonWithPanel/ArrowPanel.js b/src/components/shared/ButtonWithPanel/ArrowPanel.js
index 0aecaa0508..55fc45b49b 100644
--- a/src/components/shared/ButtonWithPanel/ArrowPanel.js
+++ b/src/components/shared/ButtonWithPanel/ArrowPanel.js
@@ -35,6 +35,10 @@ export class ArrowPanel extends React.PureComponent<Props, State> {
     openGeneration: 0,
   };
 
+  /* These 2 methods are called from other components.
+  /* See https://github.com/firefox-devtools/profiler/issues/1888 and
+   * https://github.com/firefox-devtools/profiler/issues/1641 */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   open() {
     if (this.state.open) {
       return;
@@ -43,6 +47,7 @@ export class ArrowPanel extends React.PureComponent<Props, State> {
     this.setState({ open: true });
   }
 
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   close() {
     this.setState((state) => {
       if (!state.open) {
diff --git a/src/components/shared/TrackSearchField.js b/src/components/shared/TrackSearchField.js
index e724469fa9..211b008cc9 100644
--- a/src/components/shared/TrackSearchField.js
+++ b/src/components/shared/TrackSearchField.js
@@ -21,6 +21,8 @@ export class TrackSearchField extends React.PureComponent<Props> {
     this.props.onSearch(e.currentTarget.value);
   };
 
+  /* This is called from TrackContextMenu directly */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus = () => {
     if (this.searchFieldInput.current) {
       this.searchFieldInput.current.focus();
diff --git a/src/components/shared/TreeView.js b/src/components/shared/TreeView.js
index c2dcf3037d..afd322624d 100644
--- a/src/components/shared/TreeView.js
+++ b/src/components/shared/TreeView.js
@@ -429,6 +429,8 @@ export class TreeView<DisplayData: Object> extends React.PureComponent<
     { limit: 1 }
   );
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   scrollSelectionIntoView() {
     const { selectedNodeId, tree } = this.props;
     if (this._list && selectedNodeId !== null) {
@@ -703,6 +705,8 @@ export class TreeView<DisplayData: Object> extends React.PureComponent<
     }
   };
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus() {
     if (this._list) {
       this._list.focus();
diff --git a/src/components/shared/VirtualList.js b/src/components/shared/VirtualList.js
index ed407acd9b..0e4da56cff 100644
--- a/src/components/shared/VirtualList.js
+++ b/src/components/shared/VirtualList.js
@@ -160,6 +160,8 @@ class VirtualListInner<Item> extends React.PureComponent<
     this._container = element;
   };
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   getBoundingClientRect() {
     if (this._container) {
       return this._container.getBoundingClientRect();
@@ -339,6 +341,8 @@ export class VirtualList<Item> extends React.PureComponent<
     return { visibleRangeStart, visibleRangeEnd };
   }
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   scrollItemIntoView(itemIndex: number, offsetX: CssPixels) {
     const container = this._container.current;
     if (!container) {
@@ -370,6 +374,8 @@ export class VirtualList<Item> extends React.PureComponent<
     }
   }
 
+  /* This method is used by users of this component. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   focus() {
     const container = this._container.current;
     if (container) {
diff --git a/src/components/stack-chart/Canvas.js b/src/components/stack-chart/Canvas.js
index 44ac3254de..191ae84931 100644
--- a/src/components/stack-chart/Canvas.js
+++ b/src/components/stack-chart/Canvas.js
@@ -88,9 +88,6 @@ const FONT_SIZE = 10;
 const BORDER_OPACITY = 0.4;
 
 class StackChartCanvasImpl extends React.PureComponent<Props> {
-  _leftMarginGradient: null | CanvasGradient = null;
-  _rightMarginGradient: null | CanvasGradient = null;
-
   componentDidUpdate(prevProps) {
     // We want to scroll the selection into view when this component
     // is mounted, but using componentDidMount won't work here as the
diff --git a/src/components/timeline/EmptyThreadIndicator.js b/src/components/timeline/EmptyThreadIndicator.js
index 6423f058e4..733632f589 100644
--- a/src/components/timeline/EmptyThreadIndicator.js
+++ b/src/components/timeline/EmptyThreadIndicator.js
@@ -38,9 +38,6 @@ type Props = {|
  * thread was shut down.
  */
 class EmptyThreadIndicatorImpl extends PureComponent<Props> {
-  _canvas: HTMLCanvasElement | null;
-  _requestedAnimationFrame: boolean | null;
-
   render() {
     const style = getIndicatorPositions(this.props);
     return (
diff --git a/src/components/timeline/OriginsTimeline.js b/src/components/timeline/OriginsTimeline.js
index 057bdc79a7..66078f1749 100644
--- a/src/components/timeline/OriginsTimeline.js
+++ b/src/components/timeline/OriginsTimeline.js
@@ -72,7 +72,9 @@ class OriginsTimelineView extends React.PureComponent<Props, State> {
   /**
    * This method collects the initially selected track's HTMLElement. This allows the timeline
    * to scroll the initially selected track into view once the page is loaded.
-   */
+   * It's not used currently but it will be used when we implement this
+   * component better. */
+  /* eslint-disable-next-line react/no-unused-class-component-methods */
   setInitialSelected = (el: InitialSelectedTrackReference) => {
     this.setState({ initialSelected: el });
   };
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 7c01426720..4337b89a48 100644
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -29,8 +29,6 @@ type PositionFromMouse = 'before-mouse' | 'after-mouse';
 type TooltipPosition = PositionFromMouse | 'window-edge';
 
 export class Tooltip extends React.PureComponent<Props> {
-  _isMounted: boolean = false;
-  _isLayoutScheduled: boolean = false;
   _interiorElementRef: {| current: HTMLDivElement | null |} = React.createRef();
 
   // This keeps the previous tooltip positioning relatively to the mouse cursor.