Update deprecated React.SFC and React.StatelessComponent types

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>;
   ...
 }
 ```

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/[email protected]",
     "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/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

src/legacy/ui/public/share/components/url_panel_content.tsx

@@ -40,7 +40,7 @@ import { unhashUrl } from '../../state_management/state_hashing';
 import { shortenUrl } from '../lib/url_shortener';
 
 // TODO: Remove once EuiIconTip supports "content" prop
-const FixedEuiIconTip = EuiIconTip as React.SFC<any>;
+const FixedEuiIconTip = EuiIconTip as React.FC<any>;
 
 interface Props {
   allowShortUrl: boolean;

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 EuiDescribedFormGroup: React.SFC<any>;
-  export const EuiCodeEditor: React.SFC<any>;
+  export const EuiSideNav: React.FC<any>;
+  export const EuiDescribedFormGroup: React.FC<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/GlobalHelpExtension/index.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
   margin: ${px(units.minus)} 0;
 `;
 
-export const GlobalHelpExtension: React.SFC = () => {
+export const GlobalHelpExtension: React.FC = () => {
   const core = useKibanaCore();
 
   return (

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

@@ -114,7 +114,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

@@ -31,7 +31,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

@@ -10,7 +10,7 @@ import React from 'react';
 import { useAvgDurationByCountry } from '../../../../../hooks/useAvgDurationByCountry';
 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/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/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>}