Fix WithStyles Flow Issues (#539)

Summary: Pull Request resolved: #539 Pull Request resolved: facebookexternal/fbc#1274 Fix classnames that don't map to a class. They become undefined, which in turn do nothing. This also removes the use of `withStyles` in a couple components, and removes excess div's. Reviewed By: murtadha Differential Revision: D16751461 fbshipit-source-id: cb50955fc945207bb01416480cd65c8928352ad2
magma · Aug 12, 2019 · c244a67 · c244a67
1 parent 56f43e4
commit c244a67
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 37 deletions.
diff --git a/nms/fbcnms-packages/fbcnms-ui/components/Tokenizer.react.js b/nms/fbcnms-packages/fbcnms-ui/components/Tokenizer.react.js
@@ -172,12 +172,7 @@ class Tokenizer extends React.Component<Props, State> {
           suggestions={unusedSearchEntries}
           getSuggestionValue={entry => entry.label}
           onSuggestionsFetchRequested={({value}) => onEntriesRequested(value)}
-          renderSuggestion={entry => (
-            // $FlowFixMe class doesn't exist
-            <div className={classes.entryRoot}>
-              <div>{entry.label}</div>
-            </div>
-          )}
+          renderSuggestion={entry => <div>{entry.label}</div>}
           onSuggestionSelected={(e, {suggestion}) => {
             this.setState(
               prevState => ({

diff --git a/nms/fbcnms-projects/magmalte/app/components/network/DataPlanEditDialog.js b/nms/fbcnms-projects/magmalte/app/components/network/DataPlanEditDialog.js
@@ -14,7 +14,6 @@ import type {
 } from '../../common/MagmaAPIType';
 import type {ContextRouter} from 'react-router-dom';
 import type {WithAlert} from '@fbcnms/ui/components/Alert/withAlert';
-import type {WithStyles} from '@material-ui/core';
 
 import React from 'react';
 import axios from 'axios';
@@ -27,7 +26,6 @@ import {
   FormGroup,
   InputAdornment,
   TextField,
-  withStyles,
 } from '@material-ui/core';
 
 import withAlert from '@fbcnms/ui/components/Alert/withAlert';
@@ -37,8 +35,6 @@ import {withRouter} from 'react-router-dom';
 
 import {BITRATE_MULTIPLIER, DATA_PLAN_UNLIMITED_RATES} from './DataPlanConst';
 
-const styles = {};
-
 // Calculates the bitrate value in bps based on the default
 // value input in the form, and the previous (default) bitrate
 function _getBitRateValue(props: {
@@ -95,7 +91,6 @@ const MegabyteTextField = (props: {
 };
 
 type Props = ContextRouter &
-  WithStyles<typeof styles> &
   WithAlert & {
     onSave: (
       dataPlanId: string,
@@ -126,25 +121,23 @@ class DataPlanEditDialog extends React.Component<Props, State> {
     this.setState({editedMaxUlBitRate: evt.target.value});
 
   render() {
-    const {classes, dataPlanId} = this.props;
+    const {dataPlanId} = this.props;
     const dataPlan = this._getDataPlan();
     return (
       <Dialog open={true} onClose={this.props.onCancel} scroll="body">
         <DialogTitle>{dataPlanId ? 'Edit' : 'Add'} Data Plan</DialogTitle>
         <DialogContent>
-          {/* // $FlowFixMe class doesn't exist */}
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <TextField
               required
               label="Name"
               margin="normal"
               disabled={!!dataPlanId}
-              className={classes.textField}
               value={this._getDataPlanIdField()}
               onChange={this.handleNameChanged}
             />
           </FormGroup>
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <MegabyteTextField
               label="Download Limit"
               dataPlan={dataPlan}
@@ -153,7 +146,7 @@ class DataPlanEditDialog extends React.Component<Props, State> {
               onChange={this.handleDownloadLimitChanged}
             />
           </FormGroup>
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <MegabyteTextField
               label="Upload Limit"
               dataPlan={dataPlan}
@@ -219,4 +212,4 @@ class DataPlanEditDialog extends React.Component<Props, State> {
   };
 }
 
-export default withStyles(styles)(withAlert(withRouter(DataPlanEditDialog)));
+export default withAlert(withRouter(DataPlanEditDialog));
diff --git a/nms/fbcnms-projects/magmalte/app/components/network/UpgradeTierEditDialog.js b/nms/fbcnms-projects/magmalte/app/components/network/UpgradeTierEditDialog.js
@@ -10,7 +10,6 @@
 
 import type {ContextRouter} from 'react-router-dom';
 import type {NetworkUpgradeTier} from '../../common/MagmaAPIType';
-import type {WithStyles} from '@material-ui/core';
 
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -25,16 +24,12 @@ import axios from 'axios';
 import nullthrows from '@fbcnms/util/nullthrows';
 import {MagmaAPIUrls, fetchNetworkUpgradeTier} from '../../common/MagmaAPI';
 import {withRouter} from 'react-router-dom';
-import {withStyles} from '@material-ui/core/styles';
 
-const styles = {};
-
-type Props = ContextRouter &
-  WithStyles<typeof styles> & {
-    onSave: (config: NetworkUpgradeTier) => void,
-    onCancel: () => void,
-    tierId: ?string,
-  };
+type Props = ContextRouter & {
+  onSave: (config: NetworkUpgradeTier) => void,
+  onCancel: () => void,
+  tierId: ?string,
+};
 
 type State = {
   isLoading: boolean,
@@ -83,45 +78,41 @@ class UpgradeTierEditDialog extends React.Component<Props, State> {
   }
 
   render() {
-    const {classes, tierId: initialTierId} = this.props;
+    const {tierId: initialTierId} = this.props;
     const {isLoading, tier} = this.state;
     return (
       <Dialog open={!isLoading} onClose={this.props.onCancel} scroll="body">
         <DialogTitle>
           {this.isNewTier() ? 'Add Upgrade Tier' : 'Edit Upgrade Tier'}
         </DialogTitle>
         <DialogContent>
-          {/* // $FlowFixMe class doesn't exist */}
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <TextField
               required
               label="Tier ID"
               placeholder="E.g. t1"
               margin="normal"
               disabled={!!initialTierId}
-              className={classes.textField}
               value={tier.id}
               onChange={this.handleIdChanged}
             />
           </FormGroup>
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <TextField
               required
               label="Tier Name"
               placeholder="E.g. Example Tier"
               margin="normal"
-              className={classes.textField}
               value={tier.name}
               onChange={this.handleNameChanged}
             />
           </FormGroup>
-          <FormGroup row className={classes.formGroup}>
+          <FormGroup row>
             <TextField
               required
               label="Tier Version"
               placeholder="E.g. 1.0.0-0"
               margin="normal"
-              className={classes.textField}
               value={tier.version}
               onChange={this.handleVersionChanged}
             />
@@ -161,4 +152,4 @@ class UpgradeTierEditDialog extends React.Component<Props, State> {
   };
 }
 
-export default withStyles(styles)(withRouter(UpgradeTierEditDialog));
+export default withRouter(UpgradeTierEditDialog);