Mark Higher Order Components as deprecated (#31059)

frontend/src/metabase/admin/datamodel/hoc/FilteredToUrlTable.jsx

@@ -10,6 +10,9 @@ import Icon from "metabase/components/Icon";
 import FieldSet from "metabase/components/FieldSet";
 import { DatabaseSchemaAndTableDataSelector } from "metabase/query_builder/components/DataSelector";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 const FilteredToUrlTable = propName => ComposedComponent =>
   connect(null, { push })(
     class FilteredToUrlTable extends React.Component {

frontend/src/metabase/admin/datamodel/hoc/withTableMetadataLoaded.js

@@ -2,6 +2,9 @@
 import React, { Component } from "react";
 import { PLUGIN_FEATURE_LEVEL_PERMISSIONS } from "metabase/plugins";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export default ComposedComponent => {
   class TableMetadataLoader extends Component {
     componentDidMount() {

frontend/src/metabase/components/BodyComponent/BodyComponent.jsx

@@ -2,6 +2,9 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export default ComposedComponent =>
   class extends Component {
     static displayName =

frontend/src/metabase/components/ExplicitSize.jsx

@@ -16,6 +16,9 @@ const REFRESH_MODE = {
   none: fn => fn,
 };
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export default ({ selector, wrapped, refreshMode = "throttle" } = {}) =>
   ComposedComponent => {
     const displayName = ComposedComponent.displayName || ComposedComponent.name;

frontend/src/metabase/components/ModalWithTrigger/ModalWithTrigger.jsx

 import Triggerable from "metabase/components/Triggerable";
 import Modal from "metabase/components/Modal";
 
+/**
+ * @deprecated use Modal + useState
+ */
 export default Triggerable(Modal);

frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx

 import Triggerable from "metabase/components/Triggerable";
 import Popover from "metabase/components/Popover";
 
+/**
+ * @deprecated use Popover + useState
+ */
 export default Triggerable(Popover);

frontend/src/metabase/components/Triggerable/Triggerable.jsx

@@ -9,9 +9,12 @@ import Tooltip from "metabase/core/components/Tooltip";
 
 const Trigger = styled.a``;
 
-// higher order component that takes a component which takes props "isOpen" and optionally "onClose"
-// and returns a component that renders a <a> element "trigger", and tracks whether that component is open or not
-
+/**
+ * higher order component that takes a component which takes props "isOpen" and optionally "onClose"
+ * and returns a component that renders a <a> element "trigger", and tracks whether that component is open or not
+ *
+ * @deprecated HOCs are deprecated - use Modal + useState
+ */
 const Triggerable = ComposedComponent =>
   class extends Component {
     static displayName =

frontend/src/metabase/components/__mocks__/ExplicitSize.jsx

 /* eslint-disable react/display-name */
 import React from "react";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 const ExplicitSize = measureClass => ComposedComponent => props =>
   <ComposedComponent width={1000} height={1000} {...props} />;
 

frontend/src/metabase/dashboard/components/ClickMappings.jsx

@@ -265,7 +265,11 @@ function TargetWithSource({
   );
 }
 
-// TODO: Extract this to a more general HOC. It can probably also take care of withTableMetadataLoaded.
+/**
+ * TODO: Extract this to a more general HOC. It can probably also take care of withTableMetadataLoaded.
+ *
+ * @deprecated HOCs are deprecated
+ */
 function loadQuestionMetadata(getQuestion) {
   return ComposedComponent => {
     class MetadataLoader extends React.Component {

frontend/src/metabase/dashboard/hoc/DashboardControls.jsx

@@ -12,6 +12,8 @@ const TICK_PERIOD = 1; // seconds
 
 /* This contains some state for dashboard controls on both private and embedded dashboards.
  * It should probably be in Redux?
+ *
+ * @deprecated HOCs are deprecated
  */
 export default ComposedComponent =>
   connect(null, { replace })(

frontend/src/metabase/dashboard/hoc/DashboardData.jsx

@@ -36,6 +36,9 @@ const mapDispatchToProps = {
   onChangeLocation: push,
 };
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export default ComposedComponent =>
   connect(
     mapStateToProps,

frontend/src/metabase/dashboard/hoc/WithVizSettingsData.js

@@ -7,7 +7,10 @@ import _ from "underscore";
 import { getUserAttributes } from "metabase/selectors/user";
 import { getLinkTargets } from "metabase/lib/click-behavior";
 
-// This HOC give access to data referenced in viz settings.
+/**
+ * This HOC gives access to data referenced in viz settings.
+ * @deprecated HOCs are deprecated
+ */
 const WithVizSettingsData = ComposedComponent => {
   return withRouter(
     connect(

frontend/src/metabase/entities/containers/EntityListLoader.jsx

@@ -295,6 +295,9 @@ EntityListLoader.defaultProps = defaultProps;
 
 export default EntityListLoader;
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export const entityListLoader = ellProps => ComposedComponent => {
   function WrappedComponent(props) {
     return (

frontend/src/metabase/entities/containers/EntityObjectLoader.jsx

@@ -184,6 +184,9 @@ const EntityObjectLoader = _.compose(
 
 export default EntityObjectLoader;
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export const entityObjectLoader =
   eolProps =>
   // eslint-disable-line react/display-name

frontend/src/metabase/entities/containers/EntityType.jsx

@@ -3,6 +3,9 @@ import React from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "@reduxjs/toolkit";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export default () => ComposedComponent => {
   const mapStateToProps = (state, props) => ({
     entityDef:

frontend/src/metabase/hoc/AutoExpanding.jsx

@@ -3,11 +3,15 @@ import React from "react";
 
 import ExplicitSize from "metabase/components/ExplicitSize";
 
-// If the composed element increases from it's original width, sets `expand` to true
-//
-// Used for components which we initially want to be small, but if they expand
-// beyond their initial size we want to fix their size to be larger so it doesn't
-// jump around, etc
+/**
+ * If the composed element increases from it's original width, sets `expand` to true
+ *
+ * Used for components which we initially want to be small, but if they expand
+ * beyond their initial size we want to fix their size to be larger so it doesn't
+ * jump around, etc
+ *
+ * @deprecated HOCs are deprecated
+ */
 export default ComposedComponent =>
   ExplicitSize()(
     class AutoExpanding extends React.Component {

frontend/src/metabase/hoc/Background.jsx

 /* eslint-disable react/prop-types */
 import React, { Component } from "react";
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 export const withBackground = className => ComposedComponent => {
   return class extends Component {
     static displayName = "BackgroundApplicator";

frontend/src/metabase/hoc/Favicon.jsx

@@ -17,6 +17,9 @@ const resolveFavicon = (setterOrGetter, props) => {
   }
 };
 
+/**
+ * @deprecated HOCs are deprecated
+ */
 const withFavicon = faviconSetterOrGetter => ComposedComponent => {
   const WithFavicon = props => {
     const favicon = resolveFavicon(faviconSetterOrGetter, props);

frontend/src/metabase/hoc/FitViewPort.jsx

 import React from "react";
 
-/* fitViewport allows you to modify the top level classes on the react root node
+/**
+ * fitViewport allows you to modify the top level classes on the react root node
  * to set certain display properties that make it easier to create a view that will always
  * be the size of the viewport height.
  *
@@ -15,8 +16,8 @@ import React from "react";
  *
  * On an element that isn't the top level of a route.
  *
+ * @deprecated HOCs are deprecated
  */
-
 function fitViewport(ComposedComponent) {
   return class extends React.Component {
     static displayName = "FitViewport";

frontend/src/metabase/hoc/ListSelect.jsx

@@ -5,13 +5,17 @@ import _ from "underscore";
 
 const DEFAULT_KEY_FOR_ITEM = item => item.id;
 
-// Higher order component for managing selection of a list.
-//
-// Expects component to be provided a `list` prop (or prop named by `listProp`)
-// Injects `selected` and `deselected` arrays, a `selection` set, and various
-// methods to select or deselect individual or all items
-//
-// Composes with EntityListLoader, ListSearch, etc
+/**
+ * Higher order component for managing selection of a list.
+ *
+ * Expects component to be provided a `list` prop (or prop named by `listProp`)
+ * Injects `selected` and `deselected` arrays, a `selection` set, and various
+ * methods to select or deselect individual or all items
+ *
+ * Composes with EntityListLoader, ListSearch, etc
+ *
+ * @deprecated HOCs are deprecated
+ */
 const listSelect =
   ({ listProp = "list", keyForItem = DEFAULT_KEY_FOR_ITEM } = {}) =>
   ComposedComponent =>