Merge branch 'master' into fix-sdk-react-error-unsafe-lifecycle

frontend/src/metabase/dashboard/components/DashboardGrid.tsx

@@ -197,34 +197,47 @@ class DashboardGrid extends Component<DashboardGridProps, DashboardGridState> {
     }
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps: DashboardGridProps) {
-    const { dashboard, dashcardData, isEditing, selectedTabId } = nextProps;
+  propsRequiringUpdate = [
+    "dashboard",
+    "dashcardData",
+    "isEditing",
+    "selectedTabId",
+  ] satisfies (keyof DashboardGridProps)[];
 
-    const visibleCardIds = !isEditing
-      ? getVisibleCardIds(
-          dashboard.dashcards,
-          dashcardData,
-          this.state.visibleCardIds,
-        )
-      : new Set(dashboard.dashcards.map(card => card.id));
-
-    const cards = this.getVisibleCards(
-      dashboard.dashcards,
-      visibleCardIds,
-      isEditing,
-      selectedTabId,
+  componentDidUpdate(prevProps: Readonly<DashboardGridProps>) {
+    const hasPropsChanged = this.propsRequiringUpdate.some(
+      prop => !_.isEqual(prevProps[prop], this.props[prop]),
     );
 
-    if (!isEditing || !_.isEqual(this.getVisibleCards(), cards)) {
+    if (hasPropsChanged) {
+      const { dashboard, dashcardData, isEditing, selectedTabId } = this.props;
+
+      const visibleCardIds: Set<number> = !isEditing
+        ? getVisibleCardIds(
+            dashboard.dashcards,
+            dashcardData,
+            this.state.visibleCardIds,
+          )
+        : new Set(dashboard.dashcards.map(card => card.id));
+
+      const cards = this.getVisibleCards(
+        dashboard.dashcards,
+        visibleCardIds,
+        isEditing,
+        selectedTabId,
+      );
+
+      if (!isEditing || !_.isEqual(this.getVisibleCards(), cards)) {
+        this.setState({
+          initialCardSizes: this.getInitialCardSizes(cards),
+        });
+      }
+
       this.setState({
-        initialCardSizes: this.getInitialCardSizes(cards),
+        visibleCardIds,
+        layouts: this.getLayouts(cards),
       });
     }
-
-    this.setState({
-      visibleCardIds,
-      layouts: this.getLayouts(cards),
-    });
   }
 
   getInitialCardSizes = (cards: BaseDashboardCard[]) => {

frontend/src/metabase/hoc/Remapped.jsx

@@ -27,18 +27,24 @@ export default ComposedComponent =>
         (ComposedComponent.displayName || ComposedComponent.name) +
         "]";
 
-      UNSAFE_componentWillMount() {
-        if (this.props.column) {
-          this.props.fetchRemapping(this.props.value, this.props.column.id);
+      constructor(props) {
+        super(props);
+        this.fetchRemappingByProps(props);
+      }
+
+      componentDidUpdate(prevProps) {
+        if (
+          this.props.column &&
+          (prevProps.value !== this.props.value ||
+            prevProps.column !== this.props.column)
+        ) {
+          this.fetchRemappingByProps(this.props);
         }
       }
-      UNSAFE_componentWillReceiveProps(nextProps) {
-        if (
-          nextProps.column &&
-          (this.props.value !== nextProps.value ||
-            this.props.column !== nextProps.column)
-        ) {
-          this.props.fetchRemapping(nextProps.value, nextProps.column.id);
+
+      fetchRemappingByProps(props) {
+        if (props.column) {
+          props.fetchRemapping(props.value, props.column.id);
         }
       }
 

frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx

@@ -72,6 +72,16 @@ const mapStateToProps = state => ({
 
 const SMALL_CARD_WIDTH_THRESHOLD = 150;
 
+const isSeriesLoading = series =>
+  !(
+    series &&
+    series.length > 0 &&
+    _.every(
+      series,
+      s => s.data || _.isObject(s.card.visualization_settings.virtual_card),
+    )
+  );
+
 class Visualization extends PureComponent {
   state = {
     getHref: undefined,
@@ -85,22 +95,9 @@ class Visualization extends PureComponent {
     computedSettings: {},
   };
 
-  UNSAFE_componentWillMount() {
-    this.transform(this.props);
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    if (
-      !isSameSeries(newProps.rawSeries, this.props.rawSeries) ||
-      !equals(newProps.settings, this.props.settings) ||
-      !equals(newProps.timelineEvents, this.props.timelineEvents) ||
-      !equals(
-        newProps.selectedTimelineEventIds,
-        this.props.selectedTimelineEventIds,
-      )
-    ) {
-      this.transform(newProps);
-    }
+  constructor(props) {
+    super(props);
+    this.state = this.transformPropsToState(props);
   }
 
   componentDidMount() {
@@ -108,6 +105,18 @@ class Visualization extends PureComponent {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    if (
+      !isSameSeries(prevProps.rawSeries, this.props.rawSeries) ||
+      !equals(prevProps.settings, this.props.settings) ||
+      !equals(prevProps.timelineEvents, this.props.timelineEvents) ||
+      !equals(
+        prevProps.selectedTimelineEventIds,
+        this.props.selectedTimelineEventIds,
+      )
+    ) {
+      this.setState(this.transformPropsToState(this.props));
+    }
+
     if (!equals(this.getWarnings(prevProps, prevState), this.getWarnings())) {
       this.updateWarnings();
     }
@@ -141,17 +150,17 @@ class Visualization extends PureComponent {
     }
   }
 
-  transform(newProps) {
+  transformPropsToState(newProps) {
     const transformed = newProps.rawSeries
       ? getVisualizationTransformed(extractRemappings(newProps.rawSeries))
       : null;
     const series = transformed && transformed.series;
     const visualization = transformed && transformed.visualization;
-    const computedSettings = !this.isLoading(series)
+    const computedSettings = !isSeriesLoading(series)
       ? getComputedSettingsForSeries(series)
       : {};
 
-    this.setState({
+    return {
       hovered: null,
       error: null,
       genericError: null,
@@ -159,20 +168,9 @@ class Visualization extends PureComponent {
       series: series,
       visualization: visualization,
       computedSettings: computedSettings,
-    });
+    };
   }
 
-  isLoading = series => {
-    return !(
-      series &&
-      series.length > 0 &&
-      _.every(
-        series,
-        s => s.data || _.isObject(s.card.visualization_settings.virtual_card),
-      )
-    );
-  };
-
   handleHoverChange = hovered => {
     if (hovered) {
       this.setState({ hovered });
@@ -358,7 +356,7 @@ class Visualization extends PureComponent {
     let error = this.props.error || this.state.error;
     let noResults = false;
     let isPlaceholder = false;
-    const loading = this.isLoading(series);
+    const loading = isSeriesLoading(series);
 
     // don't try to load settings unless data is loaded
     let settings = this.props.settings || {};