Allow to disable WrapperWidgetUI (#420)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Allow to disable WrapperWidgetUI [#420](https://github.com/CartoDB/carto-react/pull/420)
+
 ## 1.3
 
 ### 1.3.0-alpha.12 (2022-06-01)

packages/react-ui/__tests__/widgets/WrapperWidgetUI.test.js

@@ -16,6 +16,16 @@ describe('WrapperWidgetUI', () => {
     expect(screen.getByText(/test/)).toBeInTheDocument();
   });
 
+  test('should not appear if disabled', () => {
+    render(
+      <WrapperWidgetUI title={TITLE} disabled={true}>
+        <p>__test__</p>
+      </WrapperWidgetUI>
+    );
+    expect(screen.queryByText(TITLE)).not.toBeInTheDocument();
+    expect(screen.getByText('__test__')).toBeInTheDocument();
+  });
+
   describe('events', () => {
     const FORMULA_DATA = '1234';
     const WrappedWithFormulaWidget = ({ numberOfChilds = 1 }) => (

packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js

@@ -197,7 +197,7 @@ TableWidgetUI.propTypes = {
   rowsPerPageOptions: PropTypes.array,
   onSetRowsPerPage: PropTypes.func,
   onRowClick: PropTypes.func,
-  height: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   dense: PropTypes.bool
 };
 

packages/react-ui/src/widgets/WrapperWidgetUI.js

@@ -121,7 +121,12 @@ function WrapperWidgetUI(props) {
   const [anchorEl, setAnchorEl] = useState(null);
   const classes = useStyles({ ...props, expanded });
   const open = Boolean(anchorEl);
-  const { options = [], actions = [], optionsIcon = <MoreVert /> } = props;
+  const {
+    disabled = false,
+    options = [],
+    actions = [],
+    optionsIcon = <MoreVert />
+  } = props;
 
   const handleExpandClick = () => {
     if (props.expandable) {
@@ -158,6 +163,10 @@ function WrapperWidgetUI(props) {
     );
   };
 
+  if (disabled) {
+    return props.children;
+  }
+
   return (
     <Box component='section' aria-label={props.title} className={classes.root}>
       {props.isLoading ? <LinearProgress className={classes.loading} /> : null}
@@ -253,7 +262,8 @@ function WrapperWidgetUI(props) {
 WrapperWidgetUI.defaultProps = {
   expanded: true,
   expandable: true,
-  isLoading: false
+  isLoading: false,
+  disabled: false
 };
 
 WrapperWidgetUI.propTypes = {
@@ -262,6 +272,7 @@ WrapperWidgetUI.propTypes = {
   expanded: PropTypes.bool,
   onExpandedChange: PropTypes.func,
   isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
   actions: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,

packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js

@@ -59,6 +59,10 @@ export const Loading = Template.bind({});
 const LoadingProps = { title: 'Loading', loading: true };
 Loading.args = LoadingProps;
 
+export const Disabled = Template.bind({});
+const DisabledProps = { title: 'Disabled', disabled: true };
+Disabled.args = DisabledProps;
+
 export const WithActions = Template.bind({});
 WithActions.args = {
   title: 'Wrapper with actions',

packages/react-widgets/src/widgets/ScatterPlotWidget.js

@@ -10,7 +10,7 @@ import useWidgetFetch from '../hooks/useWidgetFetch';
 
 /**
  * Renders a <ScatterPlotWidget /> component
- * @param  props
+ * @param  {object} props
  * @param  {string} props.id - ID for the widget instance.
  * @param  {string} props.title - Title to show in the widget header.
  * @param  {string} props.dataSource - ID of the data source to get the data from.
@@ -19,10 +19,10 @@ import useWidgetFetch from '../hooks/useWidgetFetch';
  * @param  {string | string[]} props.yAxisColumn - Name of the data source's column to get the y axis from. If multiples are provided, they will be merged into a single one using yAxisJoinOperation property.
  * @param  {AggregationTypes} [props.yAxisJoinOperation] - Operation applied to aggregate multiple yAxis columns into a single one.
  * @param  {boolean} [props.animation] - Enable/disable widget animations on data updates. Enabled by default.
- * @param  {formatterCallback} [props.xAxisFormatter] - Function to format X axis values.
- * @param  {formatterCallback} [props.yAxisFormatter] - Function to format Y axis values.
- * @param  {formatterCallback} [props.tooltipFormatter] - Function to format Y axis values.
- * @param  {errorCallback} [props.onError] - Function to handle error messages from the widget.
+ * @param  {Function} [props.xAxisFormatter] - Function to format X axis values.
+ * @param  {Function} [props.yAxisFormatter] - Function to format Y axis values.
+ * @param  {Function} [props.tooltipFormatter] - Function to format Y axis values.
+ * @param  {Function} [props.onError] - Function to handle error messages from the widget.
  * @param  {Object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default)
  * @param  {Object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]()
  * @param  {Object} [props.droppingFeaturesAlertProps] - Extra props to pass to [NoDataAlert]() when dropping feature