[Dialog] Add deprecation warning for withMobileDialog (#23570)

Author: RDIL

docs/public/_redirects

@@ -22,6 +22,7 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /r/ts-issue-template https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEMhhYowZABsAtHOCdhlMnToE5o-MAii4AESwgIACgBKVnYuHgBNeSghCBUsDSA 302
 /r/custom-component-variants /customization/components/#adding-new-component-variants
 /r/x-license https://material-ui.com/store/items/material-ui-x/
+/r/migration-v4 https://next.material-ui.com/guides/migration-v4/
 
 # Legacy redirection
 # Added in chronological order

packages/material-ui/src/withMobileDialog/withMobileDialog.js

@@ -2,12 +2,25 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import withWidth, { isWidthDown } from '../withWidth';
 
+let warnedOnce = false;
+
 /**
  * Dialog will responsively be full screen *at or below* the given breakpoint
  * (defaults to 'sm' for mobile devices).
  * Notice that this Higher-order Component is incompatible with server-side rendering.
  */
 const withMobileDialog = (options = {}) => (Component) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce) {
+      console.warn(
+        [
+          'Material-UI: The `withMobileDialog` function is deprecated.',
+          'Head to https://material-ui.com/r/migration-v4/#dialog for a migration path.',
+        ].join('\n'),
+      );
+      warnedOnce = true;
+    }
+  }
   const { breakpoint = 'sm' } = options;
 
   function WithMobileDialog(props) {

packages/material-ui/src/withMobileDialog/withMobileDialog.test.js

@@ -3,6 +3,7 @@ import { expect } from 'chai';
 import { createShallow } from '@material-ui/core/test-utils';
 import Dialog from '../Dialog';
 import withMobileDialog from './withMobileDialog';
+import { consoleWarnMock } from 'test/utils/consoleErrorMock';
 
 describe('withMobileDialog', () => {
   let shallow;
@@ -12,6 +13,11 @@ describe('withMobileDialog', () => {
 
   before(() => {
     shallow = createShallow({ dive: true });
+    consoleWarnMock.spy();
+  });
+
+  after(() => {
+    consoleWarnMock.reset();
   });
 
   function isFullScreen(breakpoints, width) {