Update deprecated React.SFC and React.StatelessComponent types (#50852)

TYPESCRIPT.md

@@ -21,7 +21,7 @@ The first thing that will probably happen when you convert a `.js` file in our s
 
 declare module '@elastic/eui' {
   // Add your types here
-  export const EuiPopoverTitle: React.SFC<EuiPopoverTitleProps>;
+  export const EuiPopoverTitle: React.FC<EuiPopoverTitleProps>;
   ...
 }
 ```
@@ -47,13 +47,13 @@ Since `@elastic/eui` already ships with a module declaration, any local addition
 // file `typings/@elastic/eui/index.d.ts`
 
 import { CommonProps } from '@elastic/eui';
-import { SFC } from 'react';
+import { FC } from 'react';
 
 declare module '@elastic/eui' {
   export type EuiNewComponentProps = CommonProps & {
     additionalProp: string;
   };
-  export const EuiNewComponent: SFC<EuiNewComponentProps>;
+  export const EuiNewComponent: FC<EuiNewComponentProps>;
 }
 ```
 

packages/eslint-config-kibana/typescript.js

@@ -70,7 +70,26 @@ module.exports = {
           // Old recommended tslint rules
           '@typescript-eslint/adjacent-overload-signatures': 'error',
           '@typescript-eslint/array-type': ['error', { default: 'array-simple', readonly: 'array-simple' }],
-          '@typescript-eslint/ban-types': 'error',
+          '@typescript-eslint/ban-types': ['error', {
+            types: {
+              SFC: {
+                message: 'Use FC or FunctionComponent instead.',
+                fixWith: 'FC'
+              },
+              'React.SFC': {
+                message: 'Use FC or FunctionComponent instead.',
+                fixWith: 'React.FC'
+              },
+              StatelessComponent: {
+                message: 'Use FunctionComponent instead.',
+                fixWith: 'FunctionComponent'
+              },
+              'React.StatelessComponent': {
+                message: 'Use FunctionComponent instead.',
+                fixWith: 'React.FunctionComponent'
+              }
+            }
+          }],
           'camelcase': 'off',
           '@typescript-eslint/camelcase': ['error', {
             'properties': 'never',

packages/kbn-i18n/package.json

@@ -28,7 +28,7 @@
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
     "prop-types": "^15.6.2",
-    "react": "^16.6.0",
+    "react": "^16.8.0",
     "react-intl": "^2.8.0"
   }
 }

packages/kbn-ui-framework/package.json

@@ -19,7 +19,7 @@
     "focus-trap-react": "^3.1.1",
     "lodash": "npm:@elastic/lodash@3.10.1-kibana3",
     "prop-types": "15.6.0",
-    "react": "^16.2.0",
+    "react": "^16.8.0",
     "react-ace": "^5.9.0",
     "react-color": "^2.13.8",
     "tabbable": "1.1.3",
@@ -57,7 +57,7 @@
     "postcss": "^7.0.5",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",

rfcs/text/0006_management_section_service.md

@@ -260,10 +260,10 @@ interface API {
   PAGE_TITLE_COMPONENT: string; // actually related to advanced settings?
   PAGE_SUBTITLE_COMPONENT: string; // actually related to advanced settings?
   PAGE_FOOTER_COMPONENT: string; // actually related to advanced settings?
-  SidebarNav: React.SFC<any>;
+  SidebarNav: React.FC<any>;
   registerSettingsComponent: (
     id: string,
-    component: string | React.SFC<any>,
+    component: string | React.FC<any>,
     allowOverride: boolean
   ) => void;
   management: new ManagementSection();

src/core/public/application/ui/app_router.tsx

@@ -39,7 +39,7 @@ interface Props {
   redirectTo?: (path: string) => void;
 }
 
-export const AppRouter: React.StatelessComponent<Props> = ({
+export const AppRouter: React.FunctionComponent<Props> = ({
   history,
   redirectTo = (path: string) => (window.location.href = path),
   ...otherProps

src/legacy/core_plugins/data/public/filter/filter_bar/filter_view/index.tsx

@@ -19,7 +19,7 @@
 
 import { EuiBadge, useInnerText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import { FilterLabel } from '../filter_editor/lib/filter_label';
 import { esFilters } from '../../../../../../../plugins/data/public';
 
@@ -29,7 +29,7 @@ interface Props {
   [propName: string]: any;
 }
 
-export const FilterView: SFC<Props> = ({
+export const FilterView: FC<Props> = ({
   filter,
   iconOnClick,
   onClick,

src/legacy/ui/public/capabilities/react/inject_ui_capabilities.test.tsx

@@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
 import { UICapabilitiesProvider } from './ui_capabilities_provider';
 
 describe('injectUICapabilities', () => {
-  it('provides UICapabilities to SFCs', () => {
+  it('provides UICapabilities to FCs', () => {
-    interface SFCProps {
+    interface FCProps {
       uiCapabilities: UICapabilities;
     }
 
-    const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
+    const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
       return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
     });
 
     const wrapper = mount(
       <UICapabilitiesProvider>
-        <MySFC />
+        <MyFC />
       </UICapabilitiesProvider>
     );
 

src/legacy/ui/public/capabilities/react/legacy/inject_ui_capabilities.test.tsx

@@ -35,18 +35,18 @@ import { injectUICapabilities } from './inject_ui_capabilities';
 import { UICapabilitiesProvider } from './ui_capabilities_provider';
 
 describe('injectUICapabilities', () => {
-  it('provides UICapabilities to SFCs', () => {
+  it('provides UICapabilities to FCs', () => {
-    interface SFCProps {
+    interface FCProps {
       uiCapabilities: UICapabilities;
     }
 
-    const MySFC = injectUICapabilities(({ uiCapabilities }: SFCProps) => {
+    const MyFC = injectUICapabilities(({ uiCapabilities }: FCProps) => {
       return <span>{uiCapabilities.uiCapability2.nestedProp}</span>;
     });
 
     const wrapper = mount(
       <UICapabilitiesProvider>
-        <MySFC />
+        <MyFC />
       </UICapabilitiesProvider>
     );
 

src/legacy/ui/public/capabilities/react/ui_capabilities_provider.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import { UICapabilitiesContext } from './ui_capabilities_context';
 import { capabilities } from '..';
 
-export const UICapabilitiesProvider: React.SFC = props => (
+export const UICapabilitiesProvider: React.FC = props => (
   <UICapabilitiesContext.Provider value={capabilities.get()}>
     {props.children}
   </UICapabilitiesContext.Provider>

src/legacy/ui/public/i18n/index.tsx

@@ -27,7 +27,7 @@ import { npStart } from 'ui/new_platform';
 export const I18nContext = npStart.core.i18n.Context;
 
 export function wrapInI18nContext<P>(ComponentToWrap: React.ComponentType<P>) {
-  const ContextWrapper: React.SFC<P> = props => {
+  const ContextWrapper: React.FC<P> = props => {
     return (
       <I18nContext>
         <ComponentToWrap {...props} />

src/legacy/ui/public/management/index.d.ts

@@ -21,10 +21,10 @@ declare module 'ui/management' {
   export const PAGE_TITLE_COMPONENT: string;
   export const PAGE_SUBTITLE_COMPONENT: string;
   export const PAGE_FOOTER_COMPONENT: string;
-  export const SidebarNav: React.SFC<any>;
+  export const SidebarNav: React.FC<any>;
   export function registerSettingsComponent(
     id: string,
-    component: string | React.SFC<any>,
+    component: string | React.FC<any>,
     allowOverride: boolean
   ): void;
   export const management: any; // TODO - properly provide types

typings/@elastic/eui/index.d.ts

@@ -21,9 +21,9 @@ import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 // TODO: Remove once typescript definitions are in EUI
 
 declare module '@elastic/eui' {
-  export const EuiSideNav: React.SFC<any>;
+  export const EuiSideNav: React.FC<any>;
-  export const EuiDescribedFormGroup: React.SFC<any>;
+  export const EuiDescribedFormGroup: React.FC<any>;
-  export const EuiCodeEditor: React.SFC<any>;
+  export const EuiCodeEditor: React.FC<any>;
   export const Query: any;
 
   export interface EuiTableCriteria {

x-pack/legacy/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx

@@ -21,7 +21,7 @@ import { useTrackPageview } from '../../../../../infra/public';
 import { PROJECTION } from '../../../../common/projections/typings';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 
-const ErrorGroupOverview: React.SFC = () => {
+const ErrorGroupOverview: React.FC = () => {
   const { urlParams, uiFilters } = useUrlParams();
 
   const { serviceName, start, end, sortField, sortDirection } = urlParams;

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx

@@ -19,7 +19,7 @@ interface Props {
   previewHeight: number;
 }
 
-export const TruncateHeightSection: React.SFC<Props> = ({
+export const TruncateHeightSection: React.FC<Props> = ({
   children,
   previewHeight
 }) => {

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx

@@ -112,7 +112,7 @@ interface SpanActionToolTipProps {
   item?: IWaterfallItem;
 }
 
-const SpanActionToolTip: React.SFC<SpanActionToolTipProps> = ({
+const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
   item,
   children
 }) => {

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/index.tsx

@@ -110,7 +110,7 @@ interface Props {
   isLoading: boolean;
 }
 
-export const WaterfallWithSummmary: React.SFC<Props> = ({
+export const WaterfallWithSummmary: React.FC<Props> = ({
   urlParams,
   location,
   waterfall,

x-pack/legacy/plugins/apm/public/components/shared/EmptyMessage.tsx

@@ -14,7 +14,7 @@ interface Props {
   hideSubheading?: boolean;
 }
 
-const EmptyMessage: React.SFC<Props> = ({
+const EmptyMessage: React.FC<Props> = ({
   heading = i18n.translate('xpack.apm.emptyMessage.noDataFoundLabel', {
     defaultMessage: 'No data found.'
   }),

x-pack/legacy/plugins/apm/public/components/shared/HeightRetainer/index.tsx

@@ -6,7 +6,7 @@
 
 import React, { useEffect, useRef } from 'react';
 
-export const HeightRetainer: React.SFC = props => {
+export const HeightRetainer: React.FC = props => {
   const containerElement = useRef<HTMLDivElement>(null);
   const minHeight = useRef<number>(0);
 

x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverErrorLink.tsx

@@ -32,7 +32,7 @@ function getDiscoverQuery(error: APMError, kuery?: string) {
   };
 }
 
-const DiscoverErrorLink: React.SFC<{
+const DiscoverErrorLink: React.FC<{
   readonly error: APMError;
   readonly kuery?: string;
 }> = ({ error, kuery, children }) => {

x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverSpanLink.tsx

@@ -22,7 +22,7 @@ function getDiscoverQuery(span: Span) {
   };
 }
 
-export const DiscoverSpanLink: React.SFC<{
+export const DiscoverSpanLink: React.FC<{
   readonly span: Span;
 }> = ({ span, children }) => {
   return <DiscoverLink query={getDiscoverQuery(span)} children={children} />;

x-pack/legacy/plugins/apm/public/components/shared/Links/DiscoverLinks/DiscoverTransactionLink.tsx

@@ -32,7 +32,7 @@ export function getDiscoverQuery(transaction: Transaction) {
   };
 }
 
-export const DiscoverTransactionLink: React.SFC<{
+export const DiscoverTransactionLink: React.FC<{
   readonly transaction: Transaction;
 }> = ({ transaction, children }) => {
   return (

x-pack/legacy/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.tsx

@@ -13,7 +13,7 @@ interface Props {
   transactionType?: string;
 }
 
-export const MLJobLink: React.SFC<Props> = ({
+export const MLJobLink: React.FC<Props> = ({
   serviceName,
   transactionType,
   children

x-pack/legacy/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx

@@ -30,7 +30,7 @@ interface Props {
   isLibraryFrame: boolean;
 }
 
-const FrameHeading: React.SFC<Props> = ({ stackframe, isLibraryFrame }) => {
+const FrameHeading: React.FC<Props> = ({ stackframe, isLibraryFrame }) => {
   const FileDetail = isLibraryFrame
     ? LibraryFrameFileDetail
     : AppFrameFileDetail;

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/ChoroplethToolTip.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { asDuration, asInteger } from '../../../../../utils/formatters';
 import { fontSizes } from '../../../../../style/variables';
 
-export const ChoroplethToolTip: React.SFC<{
+export const ChoroplethToolTip: React.FC<{
   name: string;
   value: number;
   docCount: number;

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/ChoroplethMap/index.tsx

@@ -65,7 +65,7 @@ const getMin = (items: ChoroplethItem[]) =>
 const getMax = (items: ChoroplethItem[]) =>
   Math.max(...items.map(item => item.value));
 
-export const ChoroplethMap: React.SFC<Props> = props => {
+export const ChoroplethMap: React.FC<Props> = props => {
   const { items } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);

x-pack/legacy/plugins/apm/public/components/shared/charts/TransactionCharts/DurationByCountryMap/index.tsx

@@ -11,7 +11,7 @@ import { useAvgDurationByCountry } from '../../../../../hooks/useAvgDurationByCo
 
 import { ChoroplethMap } from '../ChoroplethMap';
 
-export const DurationByCountryMap: React.SFC = () => {
+export const DurationByCountryMap: React.FC = () => {
   const { data } = useAvgDurationByCountry();
 
   return (

x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/index.tsx

@@ -265,7 +265,7 @@ const withSuggestionsHidden = (state: AutocompleteFieldState) => ({
   selectedIndex: null,
 });
 
-const FixedEuiFieldSearch: React.SFC<React.InputHTMLAttributes<HTMLInputElement> &
+const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
   EuiFieldSearchProps & {
     inputRef?: (element: HTMLInputElement | null) => void;
     onSearch: (value: string) => void;

x-pack/legacy/plugins/beats_management/public/components/autocomplete_field/suggestion_item.tsx

@@ -18,7 +18,7 @@ interface SuggestionItemProps {
   suggestion: AutocompleteSuggestion;
 }
 
-export const SuggestionItem: React.SFC<SuggestionItemProps> = props => {
+export const SuggestionItem: React.FC<SuggestionItemProps> = props => {
   const { isSelected, onClick, onMouseEnter, suggestion } = props;
 
   return (

x-pack/legacy/plugins/beats_management/public/components/config_list.tsx

@@ -28,7 +28,7 @@ const pagination = {
   hidePerPageOptions: true,
 };
 
-const ConfigListUi: React.SFC<ComponentProps> = props => (
+const ConfigListUi: React.FC<ComponentProps> = props => (
   <EuiBasicTable
     items={props.configs.list || []}
     itemId="id"

x-pack/legacy/plugins/beats_management/public/components/inputs/select.tsx

@@ -14,7 +14,7 @@ import { CommonProps } from '@elastic/eui/src/components/common';
 import { FormsyInputProps, withFormsy } from 'formsy-react';
 import React, { Component, InputHTMLAttributes } from 'react';
 
-const FixedSelect = EuiSelect as React.SFC<any>;
+const FixedSelect = EuiSelect as React.FC<any>;
 
 interface ComponentProps extends FormsyInputProps, CommonProps {
   instantValidation: boolean;

x-pack/legacy/plugins/beats_management/public/components/layouts/no_data.tsx

@@ -14,7 +14,7 @@ interface LayoutProps {
   modalClosePath?: string;
 }
 
-export const NoDataLayout: React.SFC<LayoutProps> = withRouter<any>(
+export const NoDataLayout: React.FC<LayoutProps> = withRouter<any>(
   ({ actionSection, title, modalClosePath, children, history }) => {
     return (
       <EuiFlexGroup justifyContent="spaceAround">

x-pack/legacy/plugins/beats_management/public/components/layouts/walkthrough.tsx

@@ -24,7 +24,7 @@ interface LayoutProps {
   activePath: string;
 }
 
-export const WalkthroughLayout: React.SFC<LayoutProps> = ({
+export const WalkthroughLayout: React.FC<LayoutProps> = ({
   walkthroughSteps,
   title,
   activePath,

x-pack/legacy/plugins/beats_management/public/components/loading.tsx

@@ -7,7 +7,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import * as React from 'react';
 
-export const Loading: React.SFC<{}> = () => (
+export const Loading: React.FC<{}> = () => (
   <EuiFlexGroup justifyContent="spaceAround">
     <EuiFlexItem grow={false}>
       <EuiLoadingSpinner size="xl" />

x-pack/legacy/plugins/beats_management/public/components/navigation/breadcrumb/breadcrumb.tsx

@@ -48,7 +48,7 @@ interface BreadcrumbProps extends RouteProps {
   parentBreadcrumbs?: BreadcrumbData[];
 }
 
-export const Breadcrumb: React.SFC<BreadcrumbProps> = ({ title, path, parentBreadcrumbs }) => (
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({ title, path, parentBreadcrumbs }) => (
   <BreadcrumbConsumer>
     {context => (
       <BreadcrumbManager

x-pack/legacy/plugins/beats_management/public/components/navigation/child_routes.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
 interface RouteConfig {
@@ -12,7 +12,7 @@ interface RouteConfig {
   routes?: RouteConfig[];
 }
 
-export const ChildRoutes: SFC<{
+export const ChildRoutes: FC<{
   routes?: RouteConfig[];
   useSwitch?: boolean;
   [other: string]: any;

x-pack/legacy/plugins/beats_management/public/components/table/controls/option_control.tsx

@@ -18,7 +18,7 @@ interface ComponentProps extends ControlSchema {
   actionHandler(action: AssignmentActionType, payload?: any): void;
 }
 
-export const OptionControl: React.SFC<ComponentProps> = (props: ComponentProps) => {
+export const OptionControl: React.FC<ComponentProps> = (props: ComponentProps) => {
   switch (props.type) {
     case ActionComponentType.Action:
       if (!props.action) {

x-pack/legacy/plugins/beats_management/public/containers/with_url_state.tsx

@@ -90,7 +90,7 @@ export const WithURLState = withRouter<any>(WithURLStateComponent);
 
 export function withUrlState<OP>(
   UnwrappedComponent: React.ComponentType<OP & URLStateProps>
-): React.SFC<any> {
+): React.FC<any> {
   return (origProps: OP) => {
     return (
       <WithURLState>

x-pack/legacy/plugins/beats_management/public/pages/walkthrough/initial/index.tsx

@@ -17,7 +17,7 @@ type Props = AppPageProps & {
   intl: InjectedIntl;
 };
 
-const InitialWalkthroughPageComponent: React.SFC<Props> = props => {
+const InitialWalkthroughPageComponent: React.FC<Props> = props => {
   if (props.location.pathname === '/walkthrough/initial') {
     return (
       <NoDataLayout

x-pack/legacy/plugins/beats_management/types/eui.d.ts

@@ -11,6 +11,6 @@
 
 import * as eui from '@elastic/eui';
 import { Moment } from 'moment';
-import { ChangeEventHandler, MouseEventHandler, ReactType, Ref, SFC } from 'react';
+import { ChangeEventHandler, MouseEventHandler, ReactType, Ref, FC } from 'react';
 
 declare module '@elastic/eui' {}

x-pack/legacy/plugins/beats_management/types/formsy.d.ts

@@ -5,8 +5,8 @@
  */
 
 declare module 'formsy-react' {
-  import React, { SFC } from 'react';
+  import React, { FC } from 'react';
-  let Formsy: SFC<any>;
+  let Formsy: FC<any>;
   export interface FormsyInputProps {
     getErrorMessage(): any;
     getValue(): any;
@@ -43,6 +43,6 @@ declare module 'formsy-react' {
   // function withFormsy<ComponentProps = any>(
   //   component:
   //     | React.Component<IFormsyDecorator & ComponentProps>
-  //     | SFC<IFormsyDecorator & ComponentProps>
+  //     | FC<IFormsyDecorator & ComponentProps>
   // ): React.Component<IFormsyDecorator & ComponentProps>;
 }

x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_telemetry.tsx

@@ -80,10 +80,10 @@ function areAllElementsInResolvedArgs(workpad: Workpad, resolvedArgs: ResolvedAr
 export const withUnconnectedElementsLoadedTelemetry = function<P extends object>(
   Component: React.ComponentType<P>,
   trackMetric = trackCanvasUiMetric
-): React.SFC<P & ElementsLoadedTelemetryProps> {
+): React.FC<P & ElementsLoadedTelemetryProps> {
   return function ElementsLoadedTelemetry(
     props: P & ElementsLoadedTelemetryProps
-  ): React.SFCElement<P> {
+  ): React.FunctionComponentElement<P> {
     const { telemetryElementCounts, workpad, telemetryResolvedArgs, ...other } = props;
 
     const [currentWorkpadId, setWorkpadId] = useState<string | undefined>(undefined);

x-pack/legacy/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -302,7 +302,7 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
   isFocused: false,
 });
 
-const FixedEuiFieldSearch: React.SFC<React.InputHTMLAttributes<HTMLInputElement> &
+const FixedEuiFieldSearch: React.FC<React.InputHTMLAttributes<HTMLInputElement> &
   EuiFieldSearchProps & {
     inputRef?: (element: HTMLInputElement | null) => void;
     onSearch: (value: string) => void;

x-pack/legacy/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx

@@ -18,7 +18,7 @@ interface Props {
   suggestion: AutocompleteSuggestion;
 }
 
-export const SuggestionItem: React.SFC<Props> = props => {
+export const SuggestionItem: React.FC<Props> = props => {
   const { isSelected, onClick, onMouseEnter, suggestion } = props;
 
   return (

x-pack/legacy/plugins/infra/public/components/empty_states/no_data.tsx

@@ -17,7 +17,7 @@ interface NoDataProps {
   testString?: string;
 }
 
-export const NoData: React.SFC<NoDataProps> = ({
+export const NoData: React.FC<NoDataProps> = ({
   titleText,
   bodyText,
   refetchText,

x-pack/legacy/plugins/infra/public/components/empty_states/no_indices.tsx

@@ -16,7 +16,7 @@ interface NoIndicesProps {
   'data-test-subj'?: string;
 }
 
-export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title, ...rest }) => (
+export const NoIndices: React.FC<NoIndicesProps> = ({ actions, message, title, ...rest }) => (
   <CenteredEmptyPrompt
     title={<h2>{title}</h2>}
     body={<p>{message}</p>}

x-pack/legacy/plugins/infra/public/components/error_page.tsx

@@ -24,7 +24,7 @@ interface Props {
   shortMessage: React.ReactNode;
 }
 
-export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessage }) => (
+export const ErrorPage: React.FC<Props> = ({ detailedMessage, retry, shortMessage }) => (
   <FlexPage>
     <EuiPageBody>
       <MinimumPageContent

x-pack/legacy/plugins/infra/public/components/logging/log_minimap/density_chart.tsx

@@ -20,7 +20,7 @@ interface DensityChartProps {
   height: number;
 }
 
-export const DensityChart: React.SFC<DensityChartProps> = ({
+export const DensityChart: React.FC<DensityChartProps> = ({
   buckets,
   start,
   end,

x-pack/legacy/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx

@@ -17,7 +17,7 @@ interface HighlightedIntervalProps {
   target: number | null;
 }
 
-export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
+export const HighlightedInterval: React.FC<HighlightedIntervalProps> = ({
   className,
   end,
   getPositionOfTime,

x-pack/legacy/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx

@@ -17,7 +17,7 @@ interface TimeRulerProps {
   width: number;
 }
 
-export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickCount, width }) => {
+export const TimeRuler: React.FC<TimeRulerProps> = ({ end, height, start, tickCount, width }) => {
   const yScale = scaleTime()
     .domain([start, end])
     .range([0, height]);

x-pack/legacy/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx

@@ -114,7 +114,7 @@ interface ProgressEntryProps {
   isLoading: boolean;
 }
 
-const ProgressEntry: React.SFC<ProgressEntryProps> = props => {
+const ProgressEntry: React.FC<ProgressEntryProps> = props => {
   const { alignment, children, className, color, isLoading } = props;
 
   // NOTE: styled-components seems to make all props in EuiProgress required, so this

x-pack/legacy/plugins/infra/public/components/waffle/gradient_legend.tsx

@@ -35,7 +35,7 @@ const createTickRender = (bounds: InfraWaffleMapBounds, formatter: InfraFormatte
   );
 };
 
-export const GradientLegend: React.SFC<Props> = ({ legend, bounds, formatter }) => {
+export const GradientLegend: React.FC<Props> = ({ legend, bounds, formatter }) => {
   const maxValue = legend.rules.reduce((acc, rule) => {
     return acc < rule.value ? rule.value : acc;
   }, 0);

x-pack/legacy/plugins/infra/public/components/waffle/group_of_groups.tsx

@@ -26,7 +26,7 @@ interface Props {
   timeRange: InfraTimerangeInput;
 }
 
-export const GroupOfGroups: React.SFC<Props> = props => {
+export const GroupOfGroups: React.FC<Props> = props => {
   return (
     <GroupOfGroupsContainer>
       <GroupName group={props.group} onDrilldown={props.onDrilldown} options={props.options} />

x-pack/legacy/plugins/infra/public/components/waffle/group_of_nodes.tsx

@@ -27,7 +27,7 @@ interface Props {
   timeRange: InfraTimerangeInput;
 }
 
-export const GroupOfNodes: React.SFC<Props> = ({
+export const GroupOfNodes: React.FC<Props> = ({
   group,
   options,
   formatter,

x-pack/legacy/plugins/infra/public/components/waffle/legend.tsx

@@ -24,7 +24,7 @@ interface LegendControlOptions {
   bounds: InfraWaffleMapBounds;
 }
 
-export const Legend: React.SFC<Props> = ({ dataBounds, legend, bounds, formatter }) => {
+export const Legend: React.FC<Props> = ({ dataBounds, legend, bounds, formatter }) => {
   return (
     <LegendContainer>
       <WithWaffleOptions>

x-pack/legacy/plugins/infra/public/components/waffle/map.tsx

@@ -30,7 +30,7 @@ interface Props {
   dataBounds: InfraWaffleMapBounds;
 }
 
-export const Map: React.SFC<Props> = ({
+export const Map: React.FC<Props> = ({
   nodes,
   options,
   timeRange,

x-pack/legacy/plugins/infra/public/components/waffle/steps_legend.tsx

@@ -43,7 +43,7 @@ const createStep = (formatter: InfraFormatter) => (rule: InfraWaffleMapStepRule,
   );
 };
 
-export const StepLegend: React.SFC<Props> = ({ legend, formatter }) => {
+export const StepLegend: React.FC<Props> = ({ legend, formatter }) => {
   return <StepLegendContainer>{legend.rules.map(createStep(formatter))}</StepLegendContainer>;
 };
 

x-pack/legacy/plugins/infra/public/containers/logs/with_log_filter.tsx

@@ -63,7 +63,7 @@ type LogFilterUrlState = ReturnType<typeof logFilterSelectors.selectLogFilterQue
 
 type WithLogFilterUrlStateProps = WithLogFilterProps;
 
-export const WithLogFilterUrlState: React.SFC<WithLogFilterUrlStateProps> = ({ indexPattern }) => (
+export const WithLogFilterUrlState: React.FC<WithLogFilterUrlStateProps> = ({ indexPattern }) => (
   <WithLogFilter indexPattern={indexPattern}>
     {({ applyFilterQuery, filterQuery }) => (
       <UrlStateContainer

x-pack/legacy/plugins/infra/public/containers/waffle/with_waffle_filters.tsx

@@ -63,7 +63,7 @@ type WaffleFilterUrlState = ReturnType<typeof waffleFilterSelectors.selectWaffle
 
 type WithWaffleFilterUrlStateProps = WithWaffleFilterProps;
 
-export const WithWaffleFilterUrlState: React.SFC<WithWaffleFilterUrlStateProps> = ({
+export const WithWaffleFilterUrlState: React.FC<WithWaffleFilterUrlStateProps> = ({
   indexPattern,
 }) => (
   <WithWaffleFilter indexPattern={indexPattern}>

x-pack/legacy/plugins/infra/public/pages/error.tsx

@@ -28,7 +28,7 @@ interface Props {
   message: string;
 }
 
-export const Error: React.SFC<Props> = ({ message }) => {
+export const Error: React.FC<Props> = ({ message }) => {
   return (
     <ColumnarPage>
       <Header />
@@ -39,7 +39,7 @@ export const Error: React.SFC<Props> = ({ message }) => {
   );
 };
 
-export const ErrorPageBody: React.SFC<{ message: string }> = ({ message }) => {
+export const ErrorPageBody: React.FC<{ message: string }> = ({ message }) => {
   return (
     <EuiPage style={{ flex: '1 0 auto' }}>
       <EuiPageBody>

x-pack/legacy/plugins/infra/public/pages/infrastructure/snapshot/page_content.tsx

@@ -14,7 +14,7 @@ import { WithOptions } from '../../../containers/with_options';
 import { WithSource } from '../../../containers/with_source';
 import { Layout } from '../../../components/inventory/layout';
 
-export const SnapshotPageContent: React.SFC = () => (
+export const SnapshotPageContent: React.FC = () => (
   <WithSource>
     {({ configuration, createDerivedIndexPattern, sourceId }) => (
       <WithOptions>

x-pack/legacy/plugins/infra/public/pages/link_to/link_to.tsx

@@ -16,7 +16,7 @@ interface LinkToPageProps {
   match: RouteMatch<{}>;
 }
 
-export const LinkToPage: React.SFC<LinkToPageProps> = props => (
+export const LinkToPage: React.FC<LinkToPageProps> = props => (
   <Switch>
     <Route
       path={`${props.match.url}/:sourceId?/:nodeType(host|container|pod)-logs/:nodeId`}

x-pack/legacy/plugins/infra/public/routes.tsx

@@ -22,7 +22,7 @@ interface RouterProps {
   uiCapabilities: UICapabilities;
 }
 
-const PageRouterComponent: React.SFC<RouterProps> = ({ history, uiCapabilities }) => {
+const PageRouterComponent: React.FC<RouterProps> = ({ history, uiCapabilities }) => {
   return (
     <Router history={history}>
       <Switch>

x-pack/legacy/plugins/infra/types/eui.d.ts

@@ -41,7 +41,7 @@ declare module '@elastic/eui' {
     toggleOpenOnMobile?: () => void;
     isOpenOnMobile?: boolean;
   };
-  export const EuiSideNav: React.SFC<EuiSideNavProps>;
+  export const EuiSideNav: React.FC<EuiSideNavProps>;
 
   type EuiErrorBoundaryProps = CommonProps & {
     children: React.ReactNode;
@@ -69,5 +69,5 @@ declare module '@elastic/eui' {
     cellProps?: any;
     responsive?: boolean;
   };
-  export const EuiInMemoryTable: React.SFC<EuiInMemoryTableProps>;
+  export const EuiInMemoryTable: React.FC<EuiInMemoryTableProps>;
 }

x-pack/legacy/plugins/infra/types/eui_experimental.d.ts

@@ -20,7 +20,7 @@ declare module '@elastic/eui/lib/experimental' {
     animateData?: boolean;
     marginLeft?: number;
   };
-  export const EuiSeriesChart: React.SFC<EuiSeriesChartProps>;
+  export const EuiSeriesChart: React.FC<EuiSeriesChartProps>;
 
   type EuiSeriesProps = CommonProps & {
     data: Array<{ x: number; y: number; y0?: number }>;
@@ -29,21 +29,21 @@ declare module '@elastic/eui/lib/experimental' {
     color?: string;
     marginLeft?: number;
   };
-  export const EuiLineSeries: React.SFC<EuiSeriesProps>;
+  export const EuiLineSeries: React.FC<EuiSeriesProps>;
-  export const EuiAreaSeries: React.SFC<EuiSeriesProps>;
+  export const EuiAreaSeries: React.FC<EuiSeriesProps>;
-  export const EuiBarSeries: React.SFC<EuiSeriesProps>;
+  export const EuiBarSeries: React.FC<EuiSeriesProps>;
 
   type EuiYAxisProps = CommonProps & {
     tickFormat: (value: number) => string;
     marginLeft?: number;
   };
-  export const EuiYAxis: React.SFC<EuiYAxisProps>;
+  export const EuiYAxis: React.FC<EuiYAxisProps>;
 
   type EuiXAxisProps = CommonProps & {
     tickFormat?: (value: number) => string;
     marginLeft?: number;
   };
-  export const EuiXAxis: React.SFC<EuiXAxisProps>;
+  export const EuiXAxis: React.FC<EuiXAxisProps>;
 
   export interface EuiDataPoint {
     seriesIndex: number;
@@ -66,5 +66,5 @@ declare module '@elastic/eui/lib/experimental' {
     titleFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue | undefined;
     itemsFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue[];
   };
-  export const EuiCrosshairX: React.SFC<EuiCrosshairXProps>;
+  export const EuiCrosshairX: React.FC<EuiCrosshairXProps>;
 }

x-pack/legacy/plugins/ml/public/components/annotations/delete_annotation_modal/index.tsx

@@ -17,7 +17,7 @@ interface Props {
   isVisible: boolean;
 }
 
-export const DeleteAnnotationModal: React.SFC<Props> = ({
+export const DeleteAnnotationModal: React.FC<Props> = ({
   cancelAction,
   deleteAction,
   isVisible,

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_exploration/components/exploration/exploration.tsx

@@ -77,7 +77,7 @@ interface GetDataFrameAnalyticsResponse {
 
 const PAGE_SIZE_OPTIONS = [5, 10, 25, 50];
 
-const ExplorationTitle: React.SFC<{ jobId: string }> = ({ jobId }) => (
+const ExplorationTitle: React.FC<{ jobId: string }> = ({ jobId }) => (
   <EuiTitle size="xs">
     <span>
       {i18n.translate('xpack.ml.dataframe.analytics.exploration.jobIdTitle', {

x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/regression_exploration.tsx

@@ -26,7 +26,7 @@ const LoadingPanel: FC = () => (
   </EuiPanel>
 );
 
-export const ExplorationTitle: React.SFC<{ jobId: string }> = ({ jobId }) => (
+export const ExplorationTitle: React.FC<{ jobId: string }> = ({ jobId }) => (
   <EuiTitle size="xs">
     <span>
       {i18n.translate('xpack.ml.dataframe.analytics.regressionExploration.jobIdTitle', {

x-pack/legacy/plugins/ml/public/util/observable_utils.test.tsx

@@ -20,7 +20,7 @@ describe('observable_utils', () => {
     const observable$ = new BehaviorSubject('initial text');
 
     // a simple stateless component that just renders some text
-    const TestComponent: React.SFC<Props> = ({ testProp }) => {
+    const TestComponent: React.FC<Props> = ({ testProp }) => {
       return <span>{testProp}</span>;
     };
 

x-pack/legacy/plugins/reporting/public/components/report_listing.tsx

@@ -6,7 +6,7 @@
 
 // TODO: Remove once typescript definitions are in EUI
 declare module '@elastic/eui' {
-  export const EuiBasicTable: React.SFC<any>;
+  export const EuiBasicTable: React.FC<any>;
 }
 
 import { i18n } from '@kbn/i18n';

x-pack/legacy/plugins/security/public/components/authentication_state_page/authentication_state_page.tsx

@@ -11,7 +11,7 @@ interface Props {
   title: React.ReactNode;
 }
 
-export const AuthenticationStatePage: React.SFC<Props> = props => (
+export const AuthenticationStatePage: React.FC<Props> = props => (
   <div className="secAuthenticationStatePage">
     <header className="secAuthenticationStatePage__header">
       <div className="secAuthenticationStatePage__content eui-textCenter">

x-pack/legacy/plugins/security/public/views/account/components/account_management_page.tsx

@@ -13,7 +13,7 @@ interface Props {
   user: AuthenticatedUser;
 }
 
-export const AccountManagementPage: React.SFC<Props> = props => (
+export const AccountManagementPage: React.FC<Props> = props => (
   <EuiPage>
     <EuiPageBody restrictWidth>
       <EuiPanel>

x-pack/legacy/plugins/security/public/views/login/components/disabled_login_form/disabled_login_form.tsx

@@ -12,7 +12,7 @@ interface Props {
   message: ReactNode;
 }
 
-export const DisabledLoginForm: React.SFC<Props> = props => (
+export const DisabledLoginForm: React.FC<Props> = props => (
   <EuiPanel>
     <EuiText color="danger" style={{ textAlign: 'center' }}>
       <p>{props.title}</p>

x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_display.tsx

@@ -6,7 +6,7 @@
 import { EuiIcon, EuiIconTip, EuiText, IconType, PropsOf, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import _ from 'lodash';
-import React, { ReactNode, SFC } from 'react';
+import React, { ReactNode, FC } from 'react';
 import {
   PRIVILEGE_SOURCE,
   PrivilegeExplanation,
@@ -21,7 +21,7 @@ interface Props extends PropsOf<typeof EuiText> {
   tooltipContent?: ReactNode;
 }
 
-export const PrivilegeDisplay: SFC<Props> = (props: Props) => {
+export const PrivilegeDisplay: FC<Props> = (props: Props) => {
   const { explanation } = props;
 
   if (!explanation) {
@@ -39,7 +39,7 @@ export const PrivilegeDisplay: SFC<Props> = (props: Props) => {
   return <SimplePrivilegeDisplay {...props} />;
 };
 
-const SimplePrivilegeDisplay: SFC<Props> = (props: Props) => {
+const SimplePrivilegeDisplay: FC<Props> = (props: Props) => {
   const { privilege, iconType, iconTooltipContent, explanation, tooltipContent, ...rest } = props;
 
   const text = (
@@ -55,7 +55,7 @@ const SimplePrivilegeDisplay: SFC<Props> = (props: Props) => {
   return text;
 };
 
-export const SupersededPrivilegeDisplay: SFC<Props> = (props: Props) => {
+export const SupersededPrivilegeDisplay: FC<Props> = (props: Props) => {
   const { supersededPrivilege, actualPrivilegeSource } =
     props.explanation || ({} as PrivilegeExplanation);
 
@@ -77,7 +77,7 @@ export const SupersededPrivilegeDisplay: SFC<Props> = (props: Props) => {
   );
 };
 
-export const EffectivePrivilegeDisplay: SFC<Props> = (props: Props) => {
+export const EffectivePrivilegeDisplay: FC<Props> = (props: Props) => {
   const { explanation, ...rest } = props;
 
   const source = getReadablePrivilegeSource(explanation!.actualPrivilegeSource);

x-pack/legacy/plugins/snapshot_restore/public/app/components/data_placeholder.tsx

@@ -13,7 +13,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-export const DataPlaceholder: React.SFC<Props> = ({ data, children }) => {
+export const DataPlaceholder: React.FC<Props> = ({ data, children }) => {
   const {
     core: { i18n },
   } = useAppDependencies();

x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_type_logo.tsx

@@ -14,7 +14,7 @@ interface Props {
   [key: string]: any;
 }
 
-export const RepositoryTypeLogo: React.SFC<Props> = ({ type, ...rest }) => {
+export const RepositoryTypeLogo: React.FC<Props> = ({ type, ...rest }) => {
   const typeLogoMap: { [key: string]: any } = {
     [REPOSITORY_TYPES.fs]: 'storage',
     [REPOSITORY_TYPES.url]: 'eye',

x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/snapshot_state.tsx

@@ -15,7 +15,7 @@ interface Props {
   state: any;
 }
 
-export const SnapshotState: React.SFC<Props> = ({ state }) => {
+export const SnapshotState: React.FC<Props> = ({ state }) => {
   const {
     core: { i18n },
   } = useAppDependencies();

x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_failures.tsx

@@ -16,7 +16,7 @@ interface Props {
   snapshotState: string;
 }
 
-export const TabFailures: React.SFC<Props> = ({ indexFailures, snapshotState }) => {
+export const TabFailures: React.FC<Props> = ({ indexFailures, snapshotState }) => {
   const {
     core: {
       i18n: { FormattedMessage },

x-pack/legacy/plugins/snapshot_restore/public/app/sections/home/snapshot_list/snapshot_details/tabs/tab_summary.tsx

@@ -30,7 +30,7 @@ interface Props {
   snapshotDetails: SnapshotDetails;
 }
 
-export const TabSummary: React.SFC<Props> = ({ snapshotDetails }) => {
+export const TabSummary: React.FC<Props> = ({ snapshotDetails }) => {
   const {
     core: {
       i18n: { FormattedMessage },

x-pack/legacy/plugins/spaces/public/components/space_avatar.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiAvatar, isValidHex } from '@elastic/eui';
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import { MAX_SPACE_INITIALS } from '../../common';
 import { Space } from '../../common/model/space';
 import { getSpaceColor, getSpaceInitials, getSpaceImageUrl } from '../lib/space_attributes';
@@ -17,7 +17,7 @@ interface Props {
   announceSpaceName?: boolean;
 }
 
-export const SpaceAvatar: SFC<Props> = (props: Props) => {
+export const SpaceAvatar: FC<Props> = (props: Props) => {
   const { space, size, announceSpaceName, ...rest } = props;
 
   const spaceName = space.name ? space.name.trim() : '';

x-pack/legacy/plugins/spaces/public/views/management/edit_space/confirm_alter_active_space_modal/confirm_alter_active_space_modal.tsx

@@ -14,7 +14,7 @@ interface Props {
   intl: InjectedIntl;
 }
 
-const ConfirmAlterActiveSpaceModalUI: React.SFC<Props> = props => (
+const ConfirmAlterActiveSpaceModalUI: React.FC<Props> = props => (
   <EuiOverlayMask>
     <EuiConfirmModal
       onConfirm={props.onConfirm}

x-pack/legacy/plugins/spaces/public/views/nav_control/components/spaces_description.tsx

@@ -5,7 +5,7 @@
  */
 
 import { EuiContextMenuPanel, EuiText } from '@elastic/eui';
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import { ManageSpacesButton } from '../../../components';
 import { getSpacesFeatureDescription } from '../../../lib/constants';
 
@@ -13,7 +13,7 @@ interface Props {
   onManageSpacesClick: () => void;
 }
 
-export const SpacesDescription: SFC<Props> = (props: Props) => {
+export const SpacesDescription: FC<Props> = (props: Props) => {
   const panelProps = {
     className: 'spcDescription',
     title: 'Spaces',

x-pack/legacy/plugins/spaces/public/views/nav_control/components/spaces_header_nav_button.tsx

@@ -11,7 +11,7 @@ import {
 import React from 'react';
 import { ButtonProps } from '../types';
 
-export const SpacesHeaderNavButton: React.SFC<ButtonProps> = props => (
+export const SpacesHeaderNavButton: React.FC<ButtonProps> = props => (
   <EuiHeaderSectionItemButton
     aria-controls="headerSpacesMenuList"
     aria-expanded={props.spaceSelectorShown}

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx

@@ -15,7 +15,7 @@ interface Props {
   testSubj?: string;
 }
 
-export const DropDown: React.SFC<Props> = ({
+export const DropDown: React.FC<Props> = ({
   changeHandler,
   options,
   placeholder = 'Search ...',

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/agg_label_form.tsx

@@ -22,7 +22,7 @@ interface Props {
   onChange(item: PivotAggsConfig): void;
 }
 
-export const AggLabelForm: React.SFC<Props> = ({
+export const AggLabelForm: React.FC<Props> = ({
   deleteHandler,
   item,
   otherAggNames,

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/list_form.tsx

@@ -24,12 +24,7 @@ export interface AggListProps {
   onChange(previousAggName: AggName, item: PivotAggsConfig): void;
 }
 
-export const AggListForm: React.SFC<AggListProps> = ({
+export const AggListForm: React.FC<AggListProps> = ({ deleteHandler, list, onChange, options }) => {
-  deleteHandler,
-  list,
-  onChange,
-  options,
-}) => {
   const listKeys = Object.keys(list);
   return (
     <Fragment>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/list_summary.tsx

@@ -14,7 +14,7 @@ export interface AggListSummaryProps {
   list: PivotAggsConfigDict;
 }
 
-export const AggListSummary: React.SFC<AggListSummaryProps> = ({ list }) => {
+export const AggListSummary: React.FC<AggListSummaryProps> = ({ list }) => {
   const aggNames = Object.keys(list);
   return (
     <EuiForm>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/popover_form.tsx

@@ -40,12 +40,7 @@ interface Props {
   onChange(d: PivotAggsConfig): void;
 }
 
-export const PopoverForm: React.SFC<Props> = ({
+export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onChange, options }) => {
-  defaultData,
-  otherAggNames,
-  onChange,
-  options,
-}) => {
   const isUnsupportedAgg = !isPivotAggsConfigWithUiSupport(defaultData);
 
   const [aggName, setAggName] = useState(defaultData.aggName);

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/group_by_label_form.tsx

@@ -28,7 +28,7 @@ interface Props {
   onChange(item: PivotGroupByConfig): void;
 }
 
-export const GroupByLabelForm: React.SFC<Props> = ({
+export const GroupByLabelForm: React.FC<Props> = ({
   deleteHandler,
   item,
   otherAggNames,

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/group_by_label_summary.tsx

@@ -15,7 +15,7 @@ interface Props {
   optionsDataId: string;
 }
 
-export const GroupByLabelSummary: React.SFC<Props> = ({ item, optionsDataId }) => {
+export const GroupByLabelSummary: React.FC<Props> = ({ item, optionsDataId }) => {
   let interval: string | undefined;
 
   if (isGroupByDateHistogram(item)) {

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/list_form.tsx

@@ -24,7 +24,7 @@ interface ListProps {
   onChange(id: string, item: PivotGroupByConfig): void;
 }
 
-export const GroupByListForm: React.SFC<ListProps> = ({
+export const GroupByListForm: React.FC<ListProps> = ({
   deleteHandler,
   list,
   onChange,

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/list_summary.tsx

@@ -16,7 +16,7 @@ interface ListProps {
   list: PivotGroupByConfigDict;
 }
 
-export const GroupByListSummary: React.SFC<ListProps> = ({ list }) => {
+export const GroupByListSummary: React.FC<ListProps> = ({ list }) => {
   const listKeys = Object.keys(list);
   return (
     <Fragment>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/popover_form.tsx

@@ -92,12 +92,7 @@ interface Props {
   onChange(item: PivotGroupByConfig): void;
 }
 
-export const PopoverForm: React.SFC<Props> = ({
+export const PopoverForm: React.FC<Props> = ({ defaultData, otherAggNames, onChange, options }) => {
-  defaultData,
-  otherAggNames,
-  onChange,
-  options,
-}) => {
   const isUnsupportedAgg = !isPivotGroupByConfigWithUiSupport(defaultData);
 
   const [agg, setAgg] = useState(defaultData.agg);

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/expanded_row.tsx

@@ -10,7 +10,7 @@ import { EuiBadge, EuiText } from '@elastic/eui';
 
 import { EsDoc } from '../../../../common';
 
-export const ExpandedRow: React.SFC<{ item: EsDoc }> = ({ item }) => (
+export const ExpandedRow: React.FC<{ item: EsDoc }> = ({ item }) => (
   <EuiText>
     {Object.entries(item._source).map(([k, value]) => (
       <span key={k}>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/source_index_preview.tsx

@@ -61,7 +61,7 @@ const CELL_CLICK_ENABLED = false;
 interface SourceIndexPreviewTitle {
   indexPatternTitle: string;
 }
-const SourceIndexPreviewTitle: React.SFC<SourceIndexPreviewTitle> = ({ indexPatternTitle }) => (
+const SourceIndexPreviewTitle: React.FC<SourceIndexPreviewTitle> = ({ indexPatternTitle }) => (
   <EuiTitle size="xs">
     <span>
       {i18n.translate('xpack.transform.sourceIndexPreview.sourceIndexPatternTitle', {
@@ -77,7 +77,7 @@ interface Props {
   cellClick?(search: string): void;
 }
 
-export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, query }) => {
+export const SourceIndexPreview: React.FC<Props> = React.memo(({ cellClick, query }) => {
   const [clearTable, setClearTable] = useState(false);
 
   const indexPattern = useCurrentIndexPattern();

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/source_index_preview/use_source_index_data.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 
@@ -22,7 +22,7 @@ interface TestHookProps {
   callback: Callback;
 }
 
-const TestHook: SFC<TestHookProps> = ({ callback }) => {
+const TestHook: FC<TestHookProps> = ({ callback }) => {
   callback();
   return null;
 };

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, SFC, useContext, useEffect, useState } from 'react';
+import React, { Fragment, FC, useContext, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { toastNotifications } from 'ui/notify';
 
@@ -60,7 +60,7 @@ interface Props {
   onChange(s: StepDetailsExposedState): void;
 }
 
-export const StepCreateForm: SFC<Props> = React.memo(
+export const StepCreateForm: FC<Props> = React.memo(
   ({ createIndexPattern, transformConfig, transformId, onChange, overrides }) => {
     const defaults = { ...getDefaultStepCreateState(), ...overrides };
 

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_summary.tsx

@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC } from 'react';
+import React, { FC } from 'react';
 
-export const StepCreateSummary: SFC = React.memo(() => {
+export const StepCreateSummary: FC = React.memo(() => {
   return null;
 });

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/pivot_preview.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC, useEffect, useRef, useState } from 'react';
+import React, { FC, useEffect, useRef, useState } from 'react';
 import moment from 'moment-timezone';
 
 import { i18n } from '@kbn/i18n';
@@ -68,7 +68,7 @@ interface PreviewTitleProps {
   previewRequest: PreviewRequestBody;
 }
 
-const PreviewTitle: SFC<PreviewTitleProps> = ({ previewRequest }) => {
+const PreviewTitle: FC<PreviewTitleProps> = ({ previewRequest }) => {
   const euiCopyText = i18n.translate('xpack.transform.pivotPreview.copyClipboardTooltip', {
     defaultMessage: 'Copy Dev Console statement of the pivot preview to the clipboard.',
   });
@@ -102,7 +102,7 @@ interface ErrorMessageProps {
   message: string;
 }
 
-const ErrorMessage: SFC<ErrorMessageProps> = ({ message }) => (
+const ErrorMessage: FC<ErrorMessageProps> = ({ message }) => (
   <EuiCodeBlock language="json" fontSize="s" paddingSize="s" isCopyable>
     {message}
   </EuiCodeBlock>
@@ -114,7 +114,7 @@ interface PivotPreviewProps {
   query: PivotQuery;
 }
 
-export const PivotPreview: SFC<PivotPreviewProps> = React.memo(({ aggs, groupBy, query }) => {
+export const PivotPreview: FC<PivotPreviewProps> = React.memo(({ aggs, groupBy, query }) => {
   const [clearTable, setClearTable] = useState(false);
 
   const indexPattern = useCurrentIndexPattern();

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, SFC, useContext, useEffect, useState } from 'react';
+import React, { Fragment, FC, useContext, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
@@ -195,7 +195,7 @@ interface Props {
   onChange(s: StepDefineExposedState): void;
 }
 
-export const StepDefineForm: SFC<Props> = React.memo(({ overrides = {}, onChange }) => {
+export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange }) => {
   const kibanaContext = useContext(KibanaContext);
 
   const defaults = { ...getDefaultStepDefineState(kibanaContext), ...overrides };