Replace react SFC

Functional components cannot be consideres stateless

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

@@ -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/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/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/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/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()}

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

@@ -44,7 +44,7 @@ function lineCoordinates(orientation: "horizontal" | "vertical", value: number,
   }
 }
 
-export const GridLines: React.SFC<GridLinesProps> = props => {
+export const GridLines: React.FunctionComponent<GridLinesProps> = props => {
   const { orientation, stage, ticks, scale } = props;
 
   return <g className={classNames("grid-lines", orientation)} transform={stage.getTransform()}>

src/client/components/header-bar/header-bar.tsx

@@ -24,7 +24,7 @@ export interface HeaderBarProps {
   title?: string;
 }
 
-export const HeaderBar: React.SFC<HeaderBarProps> = props => {
+export const HeaderBar: React.FunctionComponent<HeaderBarProps> = props => {
   const { customization, title } = props;
 
   const headerStyle: React.CSSProperties = customization && customization.headerBackground && { background: customization.headerBackground };

src/client/components/highlight-modal/highlight-modal.tsx

@@ -30,7 +30,7 @@ interface HighlightModalProps {
   acceptHighlight: Fn;
 }
 
-export const HighlightModal: React.SFC<HighlightModalProps> = ({ title, children, left, top, acceptHighlight, dropHighlight }) =>
+export const HighlightModal: React.FunctionComponent<HighlightModalProps> = ({ title, children, left, top, acceptHighlight, dropHighlight }) =>
   <ModalBubble className="highlight-modal" left={left} top={top} onClose={dropHighlight}>
     <BubbleTitle title={title} />
     <div className="value">{children}</div>

src/client/components/highlight-string/highlight-string.tsx

@@ -48,6 +48,6 @@ function highlightBy(text: string, highlight: string | RegExp): string | JSX.Ele
   return highlightByIndex(text, startIndex, startIndex + match[0].length);
 }
 
-export const HighlightString: React.SFC<HighlightStringProps> = ({ className, text, highlight }) => {
+export const HighlightString: React.FunctionComponent<HighlightStringProps> = ({ className, text, highlight }) => {
   return <span className={classNames("highlight-string", className)}>{highlightBy(text, highlight)}</span>;
 };

src/client/components/input-with-presets/string-input-with-presets.tsx

@@ -20,5 +20,5 @@ import { InputWithPresets, InputWithPresetsProps } from "./input-with-presets";
 
 type StringInputWithPresetsProps = Omit<InputWithPresetsProps<string>, "parseCustomValue" | "formatCustomValue">;
 
-export const StringInputWithPresets: React.SFC<StringInputWithPresetsProps> = props =>
+export const StringInputWithPresets: React.FunctionComponent<StringInputWithPresetsProps> = props =>
   <InputWithPresets<string> {...props} parseCustomValue={identity} formatCustomValue={identity} />;

src/client/components/markdown-node/markdown-node.tsx

@@ -26,7 +26,7 @@ function innerMarkdown(input: string): { __html: string } {
   return { __html: snarkdown(input) };
 }
 
-export const MarkdownNode: React.SFC<MarkdownBubbleProps> = ({ markdown }) => {
+export const MarkdownNode: React.FunctionComponent<MarkdownBubbleProps> = ({ markdown }) => {
   return <div
     className="markdown-content"
     dangerouslySetInnerHTML={innerMarkdown(markdown)} />;

src/client/components/measure-actions-menu/add-arithmetic-operation.tsx

@@ -31,7 +31,7 @@ interface AddPercentSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddArithmeticOperationButton: React.SFC<AddPercentSeriesButtonProps> = props => {
+export const AddArithmeticOperationButton: React.FunctionComponent<AddPercentSeriesButtonProps> = props => {
   const { measure, addPartialSeries, onClose } = props;
 
   function onNewOperation() {

src/client/components/measure-actions-menu/add-measure-series.tsx

@@ -32,7 +32,7 @@ interface AddMeasureSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddMeasureSeriesButton: React.SFC<AddMeasureSeriesButtonProps> = props => {
+export const AddMeasureSeriesButton: React.FunctionComponent<AddMeasureSeriesButtonProps> = props => {
   const { series, measure, onClose, addSeries } = props;
   const measureDisabled = series.hasMeasure(measure);
 

src/client/components/measure-actions-menu/add-percent-series.tsx

@@ -39,7 +39,7 @@ interface AddPercentSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddPercentSeriesButton: React.SFC<AddPercentSeriesButtonProps> = props => {
+export const AddPercentSeriesButton: React.FunctionComponent<AddPercentSeriesButtonProps> = props => {
   const { series, measure, addSeries, onClose } = props;
 
   const percentSeries: Set<PercentOperation> = series

src/client/components/measure-actions-menu/add-quantile-series.tsx

@@ -33,7 +33,7 @@ interface AddQuantileSeriesButtonProps {
   onClose: Fn;
 }
 
-export const AddQuantileSeriesButton: React.SFC<AddQuantileSeriesButtonProps> = props => {
+export const AddQuantileSeriesButton: React.FunctionComponent<AddQuantileSeriesButtonProps> = props => {
   const { series, measure, addPartialSeries, addSeries, onClose } = props;
 
   function onNewQuantileSeries() {

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

@@ -47,7 +47,7 @@ export interface MeasureActionsProps {
   onClose: Fn;
 }
 
-export const MeasureActionsMenu: React.SFC<MeasureActionsMenuProps & MeasureActionsProps> = props => {
+export const MeasureActionsMenu: React.FunctionComponent<MeasureActionsMenuProps & MeasureActionsProps> = props => {
   const { direction, containerStage, openOn, measure, onClose } = props;
   if (!measure) return null;
 

src/client/components/measure-bubble-content/measure-bubble-content.tsx

@@ -26,7 +26,7 @@ export interface MeasureBubbleContentProps {
   lowerIsBetter?: boolean;
 }
 
-export const MeasureBubbleContent: React.SFC<MeasureBubbleContentProps> = ({ lowerIsBetter, formatter, current, previous }) => {
+export const MeasureBubbleContent: React.FunctionComponent<MeasureBubbleContentProps> = ({ lowerIsBetter, formatter, current, previous }) => {
   const currentValue = formatter(current);
   const previousValue = formatter(previous);
   return <React.Fragment>

src/client/components/measures-tile/measure-item.tsx

@@ -36,7 +36,7 @@ export interface MeasureItemProps {
   searchText: string;
 }
 
-export const MeasureItem: React.SFC<MeasureItemProps> = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => {
+export const MeasureItem: React.FunctionComponent<MeasureItemProps> = ({ title, name, measureDragStart, measureClick, description, searchText, approximate, selected }) => {
 
   const infoBubbleClassName = "measure-info-icon";
   const handleClick = (e: MouseEvent<HTMLElement>) => {

src/client/components/message-card/message-card.tsx

@@ -21,7 +21,7 @@ interface MessageCardProps {
   title: string;
 }
 
-export const MessageCard: React.SFC<MessageCardProps> = props => {
+export const MessageCard: React.FunctionComponent<MessageCardProps> = props => {
   const { title, children } = props;
   return <div className="message-card">
     <div className="message-card-title">{title}</div>

src/client/components/message-panel/message-panel.tsx

@@ -24,15 +24,15 @@ interface ErrorViewActionProps {
   label: string;
 }
 
-export const MessagePanelAction: React.SFC<ErrorViewActionProps> = ({ action, label }) =>
+export const MessagePanelAction: React.FunctionComponent<ErrorViewActionProps> = ({ action, label }) =>
     <Button type="primary" onClick={action} title={label} />;
 
 interface ErrorViewProps {
   message?: string;
   title: string;
 }
 
-export const MessagePanel: React.SFC<ErrorViewProps> = ({ message, title, children }) => {
+export const MessagePanel: React.FunctionComponent<ErrorViewProps> = ({ message, title, children }) => {
   return <div className="message-panel">
     <div className="message-panel__container">
       <div className="message-panel__title">{title}</div>

src/client/components/message/message.tsx

@@ -26,7 +26,7 @@ interface ErrorProps {
   level?: MessageLevel;
 }
 
-export const Message: React.SFC<ErrorProps> = props => {
+export const Message: React.FunctionComponent<ErrorProps> = props => {
   const { content, title, level = "notice" } = props;
   return <div className={classNames("message", level)}>
     <div className="whiteout" />

src/client/components/nav-list/nav-list.tsx

@@ -75,7 +75,7 @@ function renderItem(item: NavItem, iconSvg: string, selectedName: string): JSX.E
   return isNavLink(item) ? renderLink(item, iconSvg, selected) : renderAction(item, iconSvg, selected);
 }
 
-export const NavList: React.SFC<NavListProps> = ({ title, navLinks, iconSvg, selected }) => {
+export const NavList: React.FunctionComponent<NavListProps> = ({ title, navLinks, iconSvg, selected }) => {
   return <div className={classNames("nav-list", { "no-title": !title })}>
     {title && <div className="group-title">{title}</div>}
     <div className="items">

src/client/components/nav-logo/nav-logo.tsx

@@ -23,7 +23,7 @@ export interface NavLogoProps {
   customLogoSvg: string;
 }
 
-export const NavLogo: React.SFC<NavLogoProps> = ({ customLogoSvg }) =>
+export const NavLogo: React.FunctionComponent<NavLogoProps> = ({ customLogoSvg }) =>
   <div className="nav-logo">
     <div className="logo">
       <SvgIcon svg={customLogoSvg} />