codemod

packages/eslint-config-kibana/javascript.js

@@ -40,7 +40,7 @@ module.exports = {
 
       rules: {
         'block-scoped-var': 'error',
-        camelcase: [ 'error', { properties: 'never' } ],
+        camelcase: [ 'error', { properties: 'never', allow: ['^UNSAFE_'] } ],
         'comma-dangle': 'off',
         'comma-spacing': ['error', { before: false, after: true }],
         'comma-style': [ 'error', 'last' ],

packages/eslint-config-kibana/typescript.js

@@ -94,7 +94,7 @@ module.exports = {
           '@typescript-eslint/camelcase': ['error', {
             'properties': 'never',
             'ignoreDestructuring': true,
-            'allow': ['^[A-Z0-9_]+$']
+            'allow': ['^[A-Z0-9_]+$', '^UNSAFE_']
           }],
           '@typescript-eslint/class-name-casing': 'error',
           '@typescript-eslint/explicit-member-accessibility': ['error',

packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js

@@ -47,7 +47,7 @@ export class GuideNav extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const currentRoute = nextProps.routes[1];
     const nextRoute = this.props.getNextRoute(currentRoute.name);
     const previousRoute = this.props.getPreviousRoute(currentRoute.name);

packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js

@@ -49,7 +49,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 class GuideSandboxComponent extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.openSandbox();
   }
 

packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js

@@ -36,7 +36,7 @@ export class GuideSection extends Component {
     this.props.openCodeViewer(this.props.source, this.props.title);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.registerSection(this.getId(), this.props.title);
   }
 

packages/kbn-ui-framework/doc_site/src/views/app_view.js

@@ -81,7 +81,7 @@ export class AppView extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox.
     if (!this.props.isSandbox && nextProps.isSandbox) {
       this.setState({

src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js

@@ -49,7 +49,7 @@ class FieldSelectUi extends Component {
     this.loadFields(this.state.indexPatternId);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.indexPatternId !== nextProps.indexPatternId) {
       this.loadFields(nextProps.indexPatternId);
     }

src/legacy/core_plugins/kibana/public/home/components/tutorial/tutorial.js

@@ -67,7 +67,7 @@ class TutorialUi extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._isMounted = true;
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.js

@@ -61,7 +61,7 @@ export class IndicesList extends Component {
     this.pager = new Pager(props.indices.length, this.state.perPage, this.state.page);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.indices.length !== this.props.indices.length) {
       this.pager.setTotalItems(nextProps.indices.length);
       this.resetPageTo0();

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js

@@ -75,7 +75,7 @@ export class StepIndexPattern extends Component {
     this.lastQuery = null;
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchExistingIndexPatterns();
     if (this.state.query) {
       this.lastQuery = this.state.query;

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js

@@ -65,7 +65,7 @@ export class CreateIndexPatternWizard extends Component {
     };
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchData();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js

@@ -47,7 +47,7 @@ export class IndexedFieldsTable extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fields !== this.props.fields) {
       this.setState({
         fields: this.mapFields(nextProps.fields)

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js

@@ -59,7 +59,7 @@ export class ScriptedFieldsTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchFields();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/source_filters_table.js

@@ -58,7 +58,7 @@ export class SourceFiltersTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.updateFilters();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js

@@ -58,11 +58,11 @@ export class Relationships extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getRelationshipData();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.savedObject.id !== this.props.savedObject.id) {
       this.getRelationshipData();
     }

src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js

@@ -81,7 +81,7 @@ export class AdvancedSettings extends Component {
     }, {});
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { config } = nextProps;
     const { query } = this.state;
 

src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js

@@ -76,7 +76,7 @@ export class Field extends PureComponent {
     this.changeImageForm = null;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { unsavedValue } = this.state;
     const { type, value, defVal } = nextProps.setting;
     const editableValue = this.getEditableValue(type, value, defVal);

src/legacy/core_plugins/telemetry/public/components/telemetry_form.js

@@ -52,7 +52,7 @@ export class TelemetryForm extends Component {
     queryMatches: null,
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {
       query
     } = nextProps;

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js

@@ -42,7 +42,7 @@ import {
 } from '@elastic/eui';
 
 export class CalculationAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js

@@ -42,7 +42,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export class MathAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js

@@ -42,7 +42,7 @@ const RESTRICT_FIELDS = [KBN_FIELD_TYPES.NUMBER];
 export class PercentileAgg extends Component {
   // eslint-disable-line react/no-multi-comp
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.percentiles) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js

@@ -52,7 +52,7 @@ class GaugePanelConfigUi extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js

@@ -48,7 +48,7 @@ export class MetricPanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     if (
       !model.background_color_rules ||

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js

@@ -51,7 +51,7 @@ export class TablePanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js

@@ -51,7 +51,7 @@ export class TopNPanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {

src/legacy/core_plugins/vis_type_timeseries/public/components/split.js

@@ -37,7 +37,7 @@ const SPLIT_MODES = {
 };
 
 export class Split extends Component {
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { model } = nextProps;
     if (model.split_mode === 'filters' && !model.split_filters) {
       this.props.onChange({

src/legacy/core_plugins/vis_type_timeseries/public/components/vis_types/table/config.js

@@ -44,7 +44,7 @@ import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
 
 import { QueryBarWrapper } from '../../query_bar_wrapper';
 class TableSeriesConfigUI extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     if (!model.color_rules || (model.color_rules && model.color_rules.length === 0)) {
       this.props.onChange({

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/gauge.js

@@ -42,7 +42,7 @@ export class Gauge extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/gauge_vis.js

@@ -37,7 +37,7 @@ export class GaugeVis extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/metric.js

@@ -37,7 +37,7 @@ export class Metric extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/ui/public/exit_full_screen/exit_full_screen_button.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 export class ExitFullScreenButton extends PureComponent<Props> {
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     chrome.setVisible(false);
   }
 

src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx

@@ -88,7 +88,7 @@ export class IndexPatternSelect extends Component<IndexPatternSelectProps> {
     this.fetchSelectedIndexPattern(this.props.indexPatternId);
   }
 
-  componentWillReceiveProps(nextProps: IndexPatternSelectProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: IndexPatternSelectProps) {
     if (nextProps.indexPatternId !== this.props.indexPatternId) {
       this.fetchSelectedIndexPattern(nextProps.indexPatternId);
     }

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -102,7 +102,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     }
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.mounted = true;
     const { embeddable } = this.props;
     const { parent } = embeddable;

src/plugins/kibana_react/public/exit_full_screen_button/exit_full_screen_button.tsx

@@ -35,7 +35,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
     }
   };
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     document.addEventListener('keydown', this.onKeyDown, false);
   }
 

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -112,7 +112,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._isMounted = true;
   }
 

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

@@ -41,7 +41,7 @@ class CodeEditor extends Component<
     setValue(defaultValue || '');
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

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

@@ -40,7 +40,7 @@ class FieldText extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

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

@@ -42,7 +42,7 @@ class MultiFieldText extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

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

@@ -49,7 +49,7 @@ class FieldSelect extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

x-pack/legacy/plugins/beats_management/public/pages/beat/details.tsx

@@ -52,7 +52,7 @@ class BeatDetailPageUi extends React.PureComponent<PageProps, PageState> {
     };
   }
 
-  public async componentWillMount() {
+  public async UNSAFE_componentWillMount() {
     const tags = await this.props.libs.tags.getTagsWithIds(this.props.beat.tags);
     const blocksResult = await this.props.libs.configBlocks.getForTags(
       this.props.beat.tags,

x-pack/legacy/plugins/beats_management/public/pages/beat/tags.tsx

@@ -34,7 +34,7 @@ export class BeatTagsPage extends React.PureComponent<BeatTagsPageProps, BeatTag
     };
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.updateBeatsData();
   }
 

x-pack/legacy/plugins/beats_management/public/pages/tag/edit.tsx

@@ -54,7 +54,7 @@ class TagEditPageComponent extends React.PureComponent<
     };
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.loadTag();
     this.loadAttachedBeats();
     this.loadConfigBlocks();

x-pack/legacy/plugins/beats_management/public/router.tsx

@@ -32,7 +32,7 @@ export class AppRouter extends Component<RouterProps, RouterState> {
     };
   }
 
-  public async componentWillMount() {
+  public async UNSAFE_componentWillMount() {
     if (this.state.loading === true) {
       try {
         await this.props.beatsContainer.reload();