Replace deprecated lifecycle methods in admin (#18409)

frontend/src/metabase/admin/databases/containers/DatabaseEditApp.jsx

@@ -110,16 +110,19 @@ export default class DatabaseEditApp extends Component {
     location: PropTypes.object,
   };
 
-  async UNSAFE_componentWillMount() {
+  async componentDidMount() {
     await this.props.reset();
     await this.props.initializeDatabase(this.props.params.databaseId);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const isNew = !nextProps.database || !nextProps.database.id;
-    if (isNew) {
-      // Update the current creation step (= active tab) if adding a new database
-      this.setState({ currentTab: nextProps.databaseCreationStep });
+  componentDidUpdate() {
+    const { database, databaseCreationStep } = this.props;
+    const { currentTab } = this.state;
+    const isNew = !database || !database.id;
+    const isCreationTab = currentTab === databaseCreationStep;
+
+    if (isNew && !isCreationTab) {
+      this.setState({ currentTab: databaseCreationStep });
     }
   }
 

frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx

@@ -67,8 +67,8 @@ export default class DatabaseList extends Component {
     deletionError: PropTypes.object,
   };
 
-  UNSAFE_componentWillReceiveProps(newProps) {
-    if (!this.props.created && newProps.created) {
+  componentDidUpdate(oldProps) {
+    if (!oldProps.created && this.props.created) {
       this.createdDatabaseModal.current.open();
     }
   }

frontend/src/metabase/admin/datamodel/components/FieldRemapping.jsx

@@ -330,7 +330,7 @@ export class ValueRemappings extends React.Component {
     editingRemappings: new Map(),
   };
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this._updateEditingRemappings(this.props.remappings);
   }
 

frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx

@@ -29,11 +29,11 @@ export default class MetadataHeader extends Component {
     }
   }
 
-  componentDidUpdate() {
+  componentDidMount() {
     this.setDatabaseIdIfUnset();
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidUpdate() {
     this.setDatabaseIdIfUnset();
   }
 

frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx

@@ -33,7 +33,7 @@ export default class MetadataTable extends Component {
     updateField: PropTypes.func.isRequired,
   };
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { database } = this.props;
     if (database) {
       database.fetchIdfields();

frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx

@@ -119,7 +119,7 @@ export default class FieldApp extends React.Component {
     this.saveStatusRef = React.createRef();
   }
 
-  async UNSAFE_componentWillMount() {
+  async componentDidMount() {
     const {
       databaseId,
       tableId,

frontend/src/metabase/admin/datamodel/containers/RevisionHistoryApp.jsx

@@ -23,7 +23,7 @@ const mapDispatchToProps = { fetchRevisions };
   mapDispatchToProps,
 )
 export default class RevisionHistoryApp extends Component {
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { id, objectType } = this.props;
     this.props.fetchRevisions({ entity: objectType, id });
   }

frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx

@@ -58,31 +58,27 @@ export default class SettingsBatchForm extends Component {
     updateSettings: PropTypes.func.isRequired,
   };
 
-  UNSAFE_componentWillMount() {
-    // this gives us an opportunity to load up our formData with any existing values for elements
-    this.updateFormData(this.props);
+  componentDidMount() {
+    this.updateFormData();
+    this.validateForm();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.updateFormData(nextProps);
+  componentDidUpdate(prevProps) {
+    if (this.props.elements !== prevProps.elements) {
+      this.updateFormData();
+    }
+
+    this.validateForm();
   }
 
-  updateFormData(props) {
+  updateFormData() {
     const formData = {};
-    for (const element of props.elements) {
+    for (const element of this.props.elements) {
       formData[element.key] = element.value;
     }
     this.setState({ formData, pristine: true });
   }
 
-  componentDidMount() {
-    this.validateForm();
-  }
-
-  componentDidUpdate() {
-    this.validateForm();
-  }
-
   setSubmitting(submitting) {
     this.setState({ submitting });
   }

frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx

@@ -82,7 +82,7 @@ export default class SettingsSetupList extends Component {
     };
   }
 
-  async UNSAFE_componentWillMount() {
+  async componentDidMount() {
     try {
       const tasks = await SetupApi.admin_checklist();
       this.setState({ tasks: tasks });

frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx

@@ -36,18 +36,8 @@ export default class SettingsSlackForm extends Component {
     updateSettings: PropTypes.func.isRequired,
   };
 
-  UNSAFE_componentWillMount() {
-    // this gives us an opportunity to load up our formData with any existing values for elements
-    const formData = {};
-    this.props.elements.forEach(function(element) {
-      formData[element.key] =
-        element.value == null ? element.defaultValue : element.value;
-    });
-
-    this.setState({ formData });
-  }
-
   componentDidMount() {
+    this.setFormData();
     this.validateForm();
   }
 
@@ -81,6 +71,17 @@ export default class SettingsSlackForm extends Component {
     }
   }
 
+  setFormData() {
+    // this gives us an opportunity to load up our formData with any existing values for elements
+    const formData = {};
+    this.props.elements.forEach(function(element) {
+      formData[element.key] =
+        element.value == null ? element.defaultValue : element.value;
+    });
+
+    this.setState({ formData });
+  }
+
   validateForm() {
     const { elements } = this.props;
     const { formData } = this.state;

frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx

@@ -43,7 +43,7 @@ export default class PublicLinksListing extends Component {
     };
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.load();
   }
 

frontend/src/metabase/admin/settings/containers/SettingsEditorApp.jsx

@@ -65,7 +65,7 @@ export default class SettingsEditorApp extends Component {
     this.saveStatusRef = React.createRef();
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.props.initializeSettings();
   }
 

frontend/src/metabase/admin/tasks/containers/Help.jsx

@@ -93,7 +93,7 @@ export default class Help extends Component {
     this.setState({ details: { ...this.state.details, ...details } });
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.fetchDetails();
   }
 

frontend/src/metabase/admin/tasks/containers/Logs.jsx

@@ -75,11 +75,9 @@ export default class Logs extends Component {
     this.setState({ logs: mergeLogs(this.state.logs, logs.reverse()) });
   }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.timer = setInterval(this.fetchLogs.bind(this), 1000);
-  }
 
-  componentDidMount() {
     const elem = ReactDOM.findDOMNode(this).parentNode;
     elem.addEventListener("scroll", this._onScroll, false);
   }