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/[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/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', () => {
-    interface SFCProps {
+  it('provides UICapabilities to FCs', () => {
+    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', () => {
-    interface SFCProps {
+  it('provides UICapabilities to FCs', () => {
+    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 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/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" />