From 67d29b97914585e90c6e251e316e0f5019ed0d7d Mon Sep 17 00:00:00 2001 From: Kamil Mielnik <kamil@kamilmielnik.com> Date: Fri, 26 May 2023 17:47:37 +0700 Subject: [PATCH] Mark Higher Order Components as deprecated (#31059) --- .../admin/datamodel/hoc/FilteredToUrlTable.jsx | 3 +++ .../datamodel/hoc/withTableMetadataLoaded.js | 3 +++ .../components/BodyComponent/BodyComponent.jsx | 3 +++ .../src/metabase/components/ExplicitSize.jsx | 3 +++ .../ModalWithTrigger/ModalWithTrigger.jsx | 3 +++ .../PopoverWithTrigger/PopoverWithTrigger.jsx | 3 +++ .../components/Triggerable/Triggerable.jsx | 9 ++++++--- .../components/__mocks__/ExplicitSize.jsx | 3 +++ .../dashboard/components/ClickMappings.jsx | 6 +++++- .../dashboard/hoc/DashboardControls.jsx | 2 ++ .../metabase/dashboard/hoc/DashboardData.jsx | 3 +++ .../dashboard/hoc/WithVizSettingsData.js | 5 ++++- .../entities/containers/EntityListLoader.jsx | 3 +++ .../entities/containers/EntityObjectLoader.jsx | 3 +++ .../entities/containers/EntityType.jsx | 3 +++ frontend/src/metabase/hoc/AutoExpanding.jsx | 14 +++++++++----- frontend/src/metabase/hoc/Background.jsx | 3 +++ frontend/src/metabase/hoc/Favicon.jsx | 3 +++ frontend/src/metabase/hoc/FitViewPort.jsx | 5 +++-- frontend/src/metabase/hoc/ListSelect.jsx | 18 +++++++++++------- frontend/src/metabase/hoc/PaginationState.jsx | 3 +++ frontend/src/metabase/hoc/Remapped.jsx | 3 +++ frontend/src/metabase/hoc/RenderPropToHOC.jsx | 3 +++ frontend/src/metabase/hoc/Routeless.jsx | 8 ++++++-- frontend/src/metabase/hoc/Title.jsx | 3 +++ .../src/metabase/hoc/TitleWithLoadingTime.jsx | 3 +++ frontend/src/metabase/hoc/Toast.jsx | 3 +++ frontend/src/metabase/hoc/Typeahead.jsx | 3 +++ .../src/metabase/hoc/__mocks__/Remapped.jsx | 3 +++ .../components/ChartSettings.jsx | 3 +++ .../settings/ChartSettingNestedSettings.jsx | 3 +++ 31 files changed, 115 insertions(+), 21 deletions(-) diff --git a/frontend/src/metabase/admin/datamodel/hoc/FilteredToUrlTable.jsx b/frontend/src/metabase/admin/datamodel/hoc/FilteredToUrlTable.jsx index 452aa59762e..87f7cd1be28 100644 --- a/frontend/src/metabase/admin/datamodel/hoc/FilteredToUrlTable.jsx +++ b/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 { diff --git a/frontend/src/metabase/admin/datamodel/hoc/withTableMetadataLoaded.js b/frontend/src/metabase/admin/datamodel/hoc/withTableMetadataLoaded.js index 1121e7e67ec..cab0c0b40ea 100644 --- a/frontend/src/metabase/admin/datamodel/hoc/withTableMetadataLoaded.js +++ b/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() { diff --git a/frontend/src/metabase/components/BodyComponent/BodyComponent.jsx b/frontend/src/metabase/components/BodyComponent/BodyComponent.jsx index 1dc50f5ec76..8926a60e7c2 100644 --- a/frontend/src/metabase/components/BodyComponent/BodyComponent.jsx +++ b/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 = diff --git a/frontend/src/metabase/components/ExplicitSize.jsx b/frontend/src/metabase/components/ExplicitSize.jsx index 1c4ae1a297f..a679de90d63 100644 --- a/frontend/src/metabase/components/ExplicitSize.jsx +++ b/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; diff --git a/frontend/src/metabase/components/ModalWithTrigger/ModalWithTrigger.jsx b/frontend/src/metabase/components/ModalWithTrigger/ModalWithTrigger.jsx index 272aec191c2..5dbb0d03c16 100644 --- a/frontend/src/metabase/components/ModalWithTrigger/ModalWithTrigger.jsx +++ b/frontend/src/metabase/components/ModalWithTrigger/ModalWithTrigger.jsx @@ -1,4 +1,7 @@ import Triggerable from "metabase/components/Triggerable"; import Modal from "metabase/components/Modal"; +/** + * @deprecated use Modal + useState + */ export default Triggerable(Modal); diff --git a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx b/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx index c50b7d891b8..1eda806eeb2 100644 --- a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx +++ b/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx @@ -1,4 +1,7 @@ import Triggerable from "metabase/components/Triggerable"; import Popover from "metabase/components/Popover"; +/** + * @deprecated use Popover + useState + */ export default Triggerable(Popover); diff --git a/frontend/src/metabase/components/Triggerable/Triggerable.jsx b/frontend/src/metabase/components/Triggerable/Triggerable.jsx index 7f934c75d01..5055a946a72 100644 --- a/frontend/src/metabase/components/Triggerable/Triggerable.jsx +++ b/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 = diff --git a/frontend/src/metabase/components/__mocks__/ExplicitSize.jsx b/frontend/src/metabase/components/__mocks__/ExplicitSize.jsx index 71a7892fc26..900e5ee802a 100644 --- a/frontend/src/metabase/components/__mocks__/ExplicitSize.jsx +++ b/frontend/src/metabase/components/__mocks__/ExplicitSize.jsx @@ -1,6 +1,9 @@ /* eslint-disable react/display-name */ import React from "react"; +/** + * @deprecated HOCs are deprecated + */ const ExplicitSize = measureClass => ComposedComponent => props => <ComposedComponent width={1000} height={1000} {...props} />; diff --git a/frontend/src/metabase/dashboard/components/ClickMappings.jsx b/frontend/src/metabase/dashboard/components/ClickMappings.jsx index 6fbad9ab509..353450ac8ef 100644 --- a/frontend/src/metabase/dashboard/components/ClickMappings.jsx +++ b/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 { diff --git a/frontend/src/metabase/dashboard/hoc/DashboardControls.jsx b/frontend/src/metabase/dashboard/hoc/DashboardControls.jsx index 9f8354fa16e..3ec44712efe 100644 --- a/frontend/src/metabase/dashboard/hoc/DashboardControls.jsx +++ b/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 })( diff --git a/frontend/src/metabase/dashboard/hoc/DashboardData.jsx b/frontend/src/metabase/dashboard/hoc/DashboardData.jsx index 99907a884dd..f4443c1b328 100644 --- a/frontend/src/metabase/dashboard/hoc/DashboardData.jsx +++ b/frontend/src/metabase/dashboard/hoc/DashboardData.jsx @@ -36,6 +36,9 @@ const mapDispatchToProps = { onChangeLocation: push, }; +/** + * @deprecated HOCs are deprecated + */ export default ComposedComponent => connect( mapStateToProps, diff --git a/frontend/src/metabase/dashboard/hoc/WithVizSettingsData.js b/frontend/src/metabase/dashboard/hoc/WithVizSettingsData.js index 64edefa938f..f2460fbd9c8 100644 --- a/frontend/src/metabase/dashboard/hoc/WithVizSettingsData.js +++ b/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( diff --git a/frontend/src/metabase/entities/containers/EntityListLoader.jsx b/frontend/src/metabase/entities/containers/EntityListLoader.jsx index 9a935794d26..c6ae9e64df7 100644 --- a/frontend/src/metabase/entities/containers/EntityListLoader.jsx +++ b/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 ( diff --git a/frontend/src/metabase/entities/containers/EntityObjectLoader.jsx b/frontend/src/metabase/entities/containers/EntityObjectLoader.jsx index 3fbfdc4dade..21e7003a824 100644 --- a/frontend/src/metabase/entities/containers/EntityObjectLoader.jsx +++ b/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 diff --git a/frontend/src/metabase/entities/containers/EntityType.jsx b/frontend/src/metabase/entities/containers/EntityType.jsx index 0d1553558fe..8c0f6518106 100644 --- a/frontend/src/metabase/entities/containers/EntityType.jsx +++ b/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: diff --git a/frontend/src/metabase/hoc/AutoExpanding.jsx b/frontend/src/metabase/hoc/AutoExpanding.jsx index be71a065986..715a437a571 100644 --- a/frontend/src/metabase/hoc/AutoExpanding.jsx +++ b/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 { diff --git a/frontend/src/metabase/hoc/Background.jsx b/frontend/src/metabase/hoc/Background.jsx index 6cc596d59a7..9fd25c2cdf3 100644 --- a/frontend/src/metabase/hoc/Background.jsx +++ b/frontend/src/metabase/hoc/Background.jsx @@ -1,6 +1,9 @@ /* 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"; diff --git a/frontend/src/metabase/hoc/Favicon.jsx b/frontend/src/metabase/hoc/Favicon.jsx index 472d70e197e..a5d7bce47f7 100644 --- a/frontend/src/metabase/hoc/Favicon.jsx +++ b/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); diff --git a/frontend/src/metabase/hoc/FitViewPort.jsx b/frontend/src/metabase/hoc/FitViewPort.jsx index ff7b2bfebcc..b1dec3c0628 100644 --- a/frontend/src/metabase/hoc/FitViewPort.jsx +++ b/frontend/src/metabase/hoc/FitViewPort.jsx @@ -1,6 +1,7 @@ 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"; diff --git a/frontend/src/metabase/hoc/ListSelect.jsx b/frontend/src/metabase/hoc/ListSelect.jsx index 20bd1944caa..51f85d02415 100644 --- a/frontend/src/metabase/hoc/ListSelect.jsx +++ b/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 => diff --git a/frontend/src/metabase/hoc/PaginationState.jsx b/frontend/src/metabase/hoc/PaginationState.jsx index 9a94fc86ec7..c70aac5a406 100644 --- a/frontend/src/metabase/hoc/PaginationState.jsx +++ b/frontend/src/metabase/hoc/PaginationState.jsx @@ -1,6 +1,9 @@ /* eslint-disable react/prop-types */ import React from "react"; +/** + * @deprecated HOCs are deprecated + */ const paginationState = () => ComposedComponent => class extends React.Component { constructor(props) { diff --git a/frontend/src/metabase/hoc/Remapped.jsx b/frontend/src/metabase/hoc/Remapped.jsx index 64e2ee1ca4e..d435d6bd0dd 100644 --- a/frontend/src/metabase/hoc/Remapped.jsx +++ b/frontend/src/metabase/hoc/Remapped.jsx @@ -13,6 +13,9 @@ const mapDispatchToProps = { fetchRemapping, }; +/** + * @deprecated HOCs are deprecated + */ export default ComposedComponent => connect( mapStateToProps, diff --git a/frontend/src/metabase/hoc/RenderPropToHOC.jsx b/frontend/src/metabase/hoc/RenderPropToHOC.jsx index 017ed01d61c..41d7b4399c0 100644 --- a/frontend/src/metabase/hoc/RenderPropToHOC.jsx +++ b/frontend/src/metabase/hoc/RenderPropToHOC.jsx @@ -1,5 +1,8 @@ import React from "react"; +/** + * @deprecated HOCs are deprecated + */ export default function renderPropToHoc(RenderPropComponent) { // eslint-disable-next-line react/display-name return ComposedComponent => props => diff --git a/frontend/src/metabase/hoc/Routeless.jsx b/frontend/src/metabase/hoc/Routeless.jsx index bdba50ae9a2..7355101d6c0 100644 --- a/frontend/src/metabase/hoc/Routeless.jsx +++ b/frontend/src/metabase/hoc/Routeless.jsx @@ -16,8 +16,12 @@ const mapDispatchToProps = { _routeless_goBack: goBack, }; -// this higher order component wraps any component (typically a fullscreen modal) with an "onClose" -// prop, injects an entry in the browser history, and closes the component if the back button is pressed +/** + * this higher order component wraps any component (typically a fullscreen modal) with an "onClose" + * prop, injects an entry in the browser history, and closes the component if the back button is pressed + * + * @deprecated HOCs are deprecated + */ export default ( ComposedComponent, // clone the state object otherwise the state will be replaced rather than pushed diff --git a/frontend/src/metabase/hoc/Title.jsx b/frontend/src/metabase/hoc/Title.jsx index 85e3ebf6311..697e962447d 100644 --- a/frontend/src/metabase/hoc/Title.jsx +++ b/frontend/src/metabase/hoc/Title.jsx @@ -15,6 +15,9 @@ const updateDocumentTitle = _.debounce(() => { .join(SEPARATOR); }); +/** + * @deprecated HOCs are deprecated + */ const title = documentTitleOrGetter => ComposedComponent => class extends React.Component { static displayName = diff --git a/frontend/src/metabase/hoc/TitleWithLoadingTime.jsx b/frontend/src/metabase/hoc/TitleWithLoadingTime.jsx index 2ab05aec903..d164634d44f 100644 --- a/frontend/src/metabase/hoc/TitleWithLoadingTime.jsx +++ b/frontend/src/metabase/hoc/TitleWithLoadingTime.jsx @@ -5,6 +5,9 @@ import title from "metabase/hoc/Title"; const SECONDS_UNTIL_DISPLAY = 10; +/** + * @deprecated HOCs are deprecated + */ export default startTimePropName => ComposedComponent => title(({ [startTimePropName]: startTime, isRunning }) => { if (startTime == null || !isRunning) { diff --git a/frontend/src/metabase/hoc/Toast.jsx b/frontend/src/metabase/hoc/Toast.jsx index d28f6d58e76..d506dcf5bb3 100644 --- a/frontend/src/metabase/hoc/Toast.jsx +++ b/frontend/src/metabase/hoc/Toast.jsx @@ -8,6 +8,9 @@ const mapDispatchToProps = { addUndo, }; +/** + * @deprecated HOCs are deprecated + */ const withToaster = ComposedComponent => { class ToastedComponent extends React.Component { _triggerToast = (message, options = {}) => { diff --git a/frontend/src/metabase/hoc/Typeahead.jsx b/frontend/src/metabase/hoc/Typeahead.jsx index b7990c777e1..5f629faeacd 100644 --- a/frontend/src/metabase/hoc/Typeahead.jsx +++ b/frontend/src/metabase/hoc/Typeahead.jsx @@ -16,6 +16,9 @@ const DEFAULT_FILTER_OPTIONS = (value, option) => { const DEFAULT_OPTION_IS_EQUAL = (a, b) => a === b; +/** + * @deprecated HOCs are deprecated + */ export default ({ optionFilter = DEFAULT_FILTER_OPTIONS, optionIsEqual = DEFAULT_OPTION_IS_EQUAL, diff --git a/frontend/src/metabase/hoc/__mocks__/Remapped.jsx b/frontend/src/metabase/hoc/__mocks__/Remapped.jsx index b9e01119360..286a52d70ae 100644 --- a/frontend/src/metabase/hoc/__mocks__/Remapped.jsx +++ b/frontend/src/metabase/hoc/__mocks__/Remapped.jsx @@ -1,3 +1,6 @@ +/** + * @deprecated HOCs are deprecated + */ const MockRemapped = ComposedComponent => ComposedComponent; export default MockRemapped; diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx index 54085be65de..d10d502fd57 100644 --- a/frontend/src/metabase/visualizations/components/ChartSettings.jsx +++ b/frontend/src/metabase/visualizations/components/ChartSettings.jsx @@ -44,6 +44,9 @@ import { // section names are localized const DEFAULT_TAB_PRIORITY = [t`Data`]; +/** + * @deprecated HOCs are deprecated + */ const withTransientSettingState = ComposedComponent => class extends React.Component { static displayName = `withTransientSettingState[${ diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingNestedSettings.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingNestedSettings.jsx index dcc96aa2c28..df17db2a585 100644 --- a/frontend/src/metabase/visualizations/components/settings/ChartSettingNestedSettings.jsx +++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingNestedSettings.jsx @@ -6,6 +6,9 @@ import _ from "underscore"; import { updateSettings } from "metabase/visualizations/lib/settings"; import ChartSettingsWidget from "../ChartSettingsWidget"; +/** + * @deprecated HOCs are deprecated + */ const chartSettingNestedSettings = ({ getObjectKey, getSettingsWidgetsForObject }) => ComposedComponent => -- GitLab