Upgrade React package (#865)

CONTRIBUTING.md

@@ -45,7 +45,7 @@ Create a new file [src/client/visualizations/](https://github.com/allegro/turnil
 Here you want to add the basis for your component with the visualization panel at the top:
 
 ```
-const <visualizationName>: React.SFC<ChartProps> = () => {
+const <visualizationName>: React.FunctionComponent<ChartProps> = () => {
     return <div>
         <h2>New visualization will be here!</h2>
     </div>;

package.json

@@ -93,11 +93,11 @@
     "plywood": "0.21.2",
     "plywood-base-api": "0.2.8",
     "plywood-druid-requester": "2.6.1",
-    "react": "16.6.3",
+    "react": "16.14.0",
     "react-copy-to-clipboard": "5.0.1",
-    "react-dom": "16.6.3",
+    "react-dom": "16.14.0",
     "react-syntax-highlighter": "15.4.5",
-    "react-transition-group": "2.2.1",
+    "react-transition-group": "2.4.0",
     "request": "2.87.0",
     "request-promise-native": "1.0.5"
   },
@@ -136,9 +136,9 @@
     "@types/node": "8.5.2",
     "@types/nopt": "3.0.29",
     "@types/randomstring": "1.1.6",
-    "@types/react": "16.14.23",
+    "@types/react": "16.14.24",
     "@types/react-copy-to-clipboard": "4.3.0",
-    "@types/react-dom": "16.0.11",
+    "@types/react-dom": "16.9.14",
     "@types/react-syntax-highlighter": "13.5.2",
     "@types/react-transition-group": "2.0.7",
     "@types/request-promise-native": "1.0.14",

src/client/applications/turnilo-application/turnilo-application.tsx

@@ -74,7 +74,7 @@ export class TurniloApplication extends React.Component<TurniloApplicationProps,
     });
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { initTimekeeper, appSettings: { oauth } } = this.props;
 
     if (!!oauth && hasCode()) {

src/client/components/auto-refresh-menu/auto-refresh-menu.tsx

@@ -84,7 +84,7 @@ function updatedText(dataCube: ClientDataCube, timekeeper: Timekeeper, timezone:
   }
 }
 
-export const AutoRefreshMenu: React.SFC<AutoRefreshMenuProps> = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) =>
+export const AutoRefreshMenu: React.FunctionComponent<AutoRefreshMenuProps> = ({ autoRefreshRate, setAutoRefreshRate, openOn, onClose, dataCube, refreshMaxTime, timekeeper, timezone }) =>
   <BubbleMenu
     className="auto-refresh-menu"
     direction="down"

src/client/components/bubble-title/bubble-title.tsx

@@ -25,7 +25,7 @@ interface BubbleTitleProps {
   title: string;
 }
 
-export const BubbleTitle: React.SFC<BubbleTitleProps> = ({ title }) => {
+export const BubbleTitle: React.FunctionComponent<BubbleTitleProps> = ({ title }) => {
   const minWidth = clamp(title.length * PER_LETTER_PIXELS, MIN_TITLE_WIDTH, MAX_TITLE_WIDTH);
   return <div className="title" style={{ minWidth }}>{title}</div>;
 };

src/client/components/clearable-input/clearable-input.tsx

@@ -36,7 +36,7 @@ export interface ClearableInputProps {
   onBlur?: React.FocusEventHandler<HTMLElement>;
 }
 
-export const ClearableInput: React.SFC<ClearableInputProps> = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => {
+export const ClearableInput: React.FunctionComponent<ClearableInputProps> = ({ className, placeholder, focusOnMount, onBlur, onChange, value = "", type = "text" }) => {
   const change = (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
 
   const clear = () => onChange("");

src/client/components/color-legend/color-legend.tsx

@@ -37,7 +37,7 @@ const stripeWidth = 30;
 const stripeHeight = 200;
 const panelWidth = 100;
 
-export const ColorLegend: React.SFC<ColorLegendProps> = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => {
+export const ColorLegend: React.FunctionComponent<ColorLegendProps> = ({ title, width = panelWidth, height = stripeHeight, formatter, colorScale }) => {
   const [min, max] = colorScale.domain();
   if (isNaN(min) || isNaN(max)) return null;
 

src/client/components/color-swabs/color-swabs.tsx

@@ -22,7 +22,7 @@ interface ColorSwabsProps {
   colorEntries: ColorEntry[];
 }
 
-export const ColorSwabs: React.SFC<ColorSwabsProps> = ({ colorEntries }) => {
+export const ColorSwabs: React.FunctionComponent<ColorSwabsProps> = ({ colorEntries }) => {
   const colorSwabs = colorEntries.map(({ color, name, value, previous, delta }: ColorEntry) => {
     const swabStyle = { background: color };
     return <tr key={name}>

src/client/components/date-range-input/date-range-input.tsx

@@ -45,7 +45,7 @@ export class DateRangeInput extends React.Component<DateRangeInputProps, DateRan
     this.updateStateFromTime(time, timezone);
   }
 
-  componentWillReceiveProps(nextProps: DateRangeInputProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: DateRangeInputProps) {
     const { time, timezone } = nextProps;
     this.updateStateFromTime(time, timezone);
   }

src/client/components/debug-menu/debug-menu.tsx

@@ -30,7 +30,7 @@ export interface DebugMenuProps {
   dataCube: ClientDataCube;
 }
 
-export const DebugMenu: React.SFC<DebugMenuProps> = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => {
+export const DebugMenu: React.FunctionComponent<DebugMenuProps> = ({ dataCube, openOn, onClose, openDruidQueryModal, openRawDataModal, openViewDefinitionModal }) => {
 
   const isNativeCluster = dataCube.clusterName === "native";
 

src/client/components/delta/delta.tsx

@@ -76,7 +76,7 @@ export interface DeltaProps {
   lowerIsBetter?: boolean;
 }
 
-export const Delta: React.SFC<DeltaProps> = ({ lowerIsBetter, currentValue, previousValue, formatter }) => {
+export const Delta: React.FunctionComponent<DeltaProps> = ({ lowerIsBetter, currentValue, previousValue, formatter }) => {
   const formattedDelta = formatDelta(currentValue, previousValue);
   if (formattedDelta === null) {
     return <span className="delta-neutral">-</span>;

src/client/components/dimension-actions-menu/dimension-actions-menu.tsx

@@ -44,7 +44,7 @@ export interface DimensionActionsProps {
   addPartialFilter: (dimension: Dimension) => void;
 }
 
-export const DimensionActionsMenu: React.SFC<DimensionActionsProps & DimensionActionsMenuProps> =
+export const DimensionActionsMenu: React.FunctionComponent<DimensionActionsProps & DimensionActionsMenuProps> =
   (props: DimensionActionsMenuProps & DimensionActionsProps) => {
     const { addPartialFilter, clicker, essence, direction, containerStage, openOn, dimension, onClose } = props;
     return <BubbleMenu
@@ -65,7 +65,7 @@ export const DimensionActionsMenu: React.SFC<DimensionActionsProps & DimensionAc
     </BubbleMenu>;
   };
 
-export const DimensionActions: React.SFC<DimensionActionsProps> = (props: DimensionActionsProps) => {
+export const DimensionActions: React.FunctionComponent<DimensionActionsProps> = (props: DimensionActionsProps) => {
   const { onClose, addPartialFilter, clicker, essence: { splits, filter }, dimension } = props;
   if (!dimension) return null;
 

src/client/components/dimension-list-tile/dimension-item.tsx

@@ -39,7 +39,7 @@ export interface DimensionItemProps {
 export type DimensionClickHandler = (dimensionName: string, e: MouseEvent<HTMLElement>) => void;
 export type DimensionDragStartHandler = (dimensionName: string, e: DragEvent<HTMLElement>) => void;
 
-export const DimensionItem: React.SFC<DimensionItemProps> = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => {
+export const DimensionItem: React.FunctionComponent<DimensionItemProps> = ({ name, title, dimensionClick, dimensionDragStart, description, searchText, kind, selected }) => {
   const infoBubbleClassName = "info-icon";
   const className = classNames(DIMENSION_CLASS_NAME, { selected });
 

src/client/components/drag-indicator/drag-indicator.tsx

@@ -27,7 +27,7 @@ interface DragIndicatorProps {
   dragPosition?: DragPosition;
 }
 
-export const DragIndicator: React.SFC<DragIndicatorProps> = props => {
+export const DragIndicator: React.FunctionComponent<DragIndicatorProps> = props => {
   const { dragPosition, dragOver, drop, dragLeave } = props;
   if (!dragPosition) return null;
   return <React.Fragment>

src/client/components/filter-menu/filter-menu.tsx

@@ -43,7 +43,7 @@ export interface FilterMenuProps {
   onClose: Fn;
 }
 
-export const FilterMenu: React.SFC<FilterMenuProps> = ({ dimension, ...props }: FilterMenuProps) => {
+export const FilterMenu: React.FunctionComponent<FilterMenuProps> = ({ dimension, ...props }: FilterMenuProps) => {
   if (!dimension) return null;
   switch (dimension.kind) {
     case "time":

src/client/components/filter-menu/number-filter-menu/number-filter-menu.tsx

@@ -73,7 +73,7 @@ export class NumberFilterMenu extends React.Component<NumberFilterMenuProps, Num
     end: ANY_VALUE
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { essence, dimension } = this.props;
     const clause = essence.filter.getClauseForDimension(dimension);
     if (!clause) return;

src/client/components/filter-menu/time-filter-menu/time-filter-menu.tsx

@@ -43,7 +43,7 @@ function tabTitle(tab: TimeFilterTab) {
   return tab === TimeFilterTab.RELATIVE ? STRINGS.relative : STRINGS.fixed;
 }
 
-const TabSelector: React.SFC<TabSelectorProps> = props => {
+const TabSelector: React.FunctionComponent<TabSelectorProps> = props => {
   const { selectedTab, onTabSelect } = props;
   const tabs = [TimeFilterTab.RELATIVE, TimeFilterTab.FIXED].map(tab => {
     return {

src/client/components/filter-menu/time-filter-menu/time-shift-selector.tsx

@@ -65,7 +65,7 @@ function presets(dimension: TimeDimension): Array<Preset<string>> {
   ];
 }
 
-export const TimeShiftSelector: React.SFC<TimeShiftSelectorProps> = props => {
+export const TimeShiftSelector: React.FunctionComponent<TimeShiftSelectorProps> = props => {
   const { onShiftChange, dimension, shift: selectedTimeShift } = props;
   const timeShiftPreview = timeShiftPreviewForRange(props);
 

src/client/components/filter-tile/add-filter.tsx

@@ -28,7 +28,7 @@ interface AddFilterProps {
   essence: Essence;
 }
 
-export const AddFilter: React.SFC<AddFilterProps> = props => {
+export const AddFilter: React.FunctionComponent<AddFilterProps> = props => {
   const { appendFilter, menuStage, essence: { filter, dataCube } } = props;
   const tiles = allDimensions(dataCube.dimensions)
     .filter(dimension => !filter.getClauseForDimension(dimension))

src/client/components/filter-tile/filter-tile.tsx

@@ -80,7 +80,7 @@ interface FilterTileProps {
 
 export const FILTER_CLASS_NAME = "filter";
 
-export const FilterTile: React.SFC<FilterTileProps> = props => {
+export const FilterTile: React.FunctionComponent<FilterTileProps> = props => {
   const {
     clause,
     open,

src/client/components/filter-tile/filter-tiles.tsx

@@ -54,7 +54,7 @@ interface FilterTilesProps {
   openOverflowMenu: Fn;
 }
 
-export const FilterTiles: React.SFC<FilterTilesProps> = props => {
+export const FilterTiles: React.FunctionComponent<FilterTilesProps> = props => {
   const {
     menuStage,
     maxItems,

src/client/components/filter-tile/partial-filter-tile.tsx

@@ -41,7 +41,7 @@ interface PartialFilterTileProps {
   closeItem: Fn;
 }
 
-export const PartialFilterTile: React.SFC<PartialFilterTileProps> = props => {
+export const PartialFilterTile: React.FunctionComponent<PartialFilterTileProps> = props => {
   const { closeItem, saveClause, essence, timekeeper, locale, clicker, stage, dimension, style } = props;
   return <WithRef>
     {({ ref: openOn, setRef }) => <div

src/client/components/global-event-listener/global-event-listener.tsx

@@ -50,7 +50,7 @@ export class GlobalEventListener extends React.Component<GlobalEventListenerProp
     left: "keydown"
   };
 
-  componentWillReceiveProps(nextProps: GlobalEventListenerProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: GlobalEventListenerProps) {
     this.refreshListeners(nextProps, this.props);
   }
 

src/client/components/grid-border/grid-border.tsx

@@ -24,7 +24,7 @@ interface BottomBorderProps {
   tickLength: number;
 }
 
-export const BottomBorder: React.SFC<BottomBorderProps> = ({ stage, tickLength }) => {
+export const BottomBorder: React.FunctionComponent<BottomBorderProps> = ({ stage, tickLength }) => {
   return <line
     className="grid-border grid-bottom-border"
     transform={stage.getTransform()}
@@ -39,7 +39,7 @@ interface RightBorderProps {
  stage: Stage;
 }
 
-export const RightBorder: React.SFC<RightBorderProps> = ({ stage }) => {
+export const RightBorder: React.FunctionComponent<RightBorderProps> = ({ stage }) => {
   return <line
     className="grid-border grid-right-border"
     transform={stage.getTransform()}