@dhis2/analytics 28.0.3 → 28.0.5

package/build/cjs/components/OpenFileDialog/OpenFileDialog.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.OpenFileDialog = void 0;
+exports.formatFilters = exports.default = exports.OpenFileDialog = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
@@ -11,7 +11,6 @@ var _ui = require("@dhis2/ui");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _visTypes = require("../../modules/visTypes.js");
 var _CreatedByFilter = require("./CreatedByFilter.js");
 var _FileList = require("./FileList.js");
 var _NameFilter = require("./NameFilter.js");
@@ -19,19 +18,17 @@ var _OpenFileDialogStyles = require("./OpenFileDialog.styles.js");
 var _PaginationControls = require("./PaginationControls.js");
 var _utils = require("./utils.js");
 var _VisTypeFilter = require("./VisTypeFilter.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getQuery = type => ({
   files: {
     resource: _utils.AOTypeMap[type].apiEndpoint,
-    params: _ref => {
-      let {
-        sortField = 'displayName',
-        sortDirection = 'iasc',
-        page = 1,
-        filters
-      } = _ref;
+    params: ({
+      sortField = 'displayName',
+      sortDirection = 'iasc',
+      page = 1,
+      filters
+    }) => {
       const queryParams = {
         filter: filters,
         fields: `id,type,displayName,title,displayDescription,created,lastUpdated,user,access,href`,
@@ -46,17 +43,26 @@ const getQuery = type => ({
     }
   }
 });
-const OpenFileDialog = _ref2 => {
-  let {
-    type,
-    open,
-    filterVisTypes,
-    defaultFilterVisType,
-    onClose,
-    onFileSelect,
-    onNew,
-    currentUser
-  } = _ref2;
+const formatFilters = (currentUser, filters, filterVisTypes) => {
+  const queryFilters = [];
+  filters.searchTerm && queryFilters.push(`identifiable:token:${filters.searchTerm}`);
+  const userFilter = (0, _CreatedByFilter.formatUserFilter)(filters.createdBy, currentUser.id);
+  userFilter && queryFilters.push(userFilter);
+  const typeFilter = (0, _VisTypeFilter.formatTypeFilter)(filterVisTypes, filters.visType);
+  typeFilter && queryFilters.push(typeFilter);
+  return queryFilters;
+};
+exports.formatFilters = formatFilters;
+const OpenFileDialog = ({
+  type,
+  open,
+  filterVisTypes,
+  defaultFilterVisType,
+  onClose,
+  onFileSelect,
+  onNew,
+  currentUser
+}) => {
   const filesQuery = (0, _react.useMemo)(() => getQuery(type), [type]);
   const defaultFilters = {
     searchTerm: '',
@@ -79,36 +85,7 @@ const OpenFileDialog = _ref2 => {
   });
   const [nameFilterValue, setNameFilterValue] = (0, _react.useState)(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = (0, _react.useState)(null);
-  const formatFilters = (0, _react.useCallback)(() => {
-    const queryFilters = [];
-    switch (filters.createdBy) {
-      case _CreatedByFilter.CREATED_BY_ALL_BUT_CURRENT_USER:
-        queryFilters.push(`user.id:!eq:${currentUser.id}`);
-        break;
-      case _CreatedByFilter.CREATED_BY_CURRENT_USER:
-        queryFilters.push(`user.id:eq:${currentUser.id}`);
-        break;
-      case _CreatedByFilter.CREATED_BY_ALL:
-      default:
-        break;
-    }
-    if (filters.visType) {
-      switch (filters.visType) {
-        case _visTypes.VIS_TYPE_GROUP_ALL:
-          break;
-        case _visTypes.VIS_TYPE_GROUP_CHARTS:
-          queryFilters.push('type:!eq:PIVOT_TABLE');
-          break;
-        default:
-          queryFilters.push(`type:eq:${filters.visType}`);
-          break;
-      }
-    }
-    if (filters.searchTerm) {
-      queryFilters.push(`identifiable:token:${filters.searchTerm}`);
-    }
-    return queryFilters;
-  }, [currentUser, filters]);
+  const formatFiltersCb = (0, _react.useCallback)(() => formatFilters(currentUser, filters, filterVisTypes), [currentUser, filters, filterVisTypes]);
   const formatSortDirection = (0, _react.useCallback)(() => {
     if (sortField === 'displayName' && sortDirection !== 'default') {
       return `i${sortDirection}`;
@@ -138,17 +115,14 @@ const OpenFileDialog = _ref2 => {
   const setPage = pageNum => setState({
     page: pageNum
   });
-  const sortData = _ref3 => {
-    let {
-      name,
-      direction
-    } = _ref3;
-    return setState({
-      sortField: name,
-      sortDirection: direction,
-      page: 1
-    });
-  };
+  const sortData = ({
+    name,
+    direction
+  }) => setState({
+    sortField: name,
+    sortDirection: direction,
+    page: 1
+  });
   (0, _react.useEffect)(() => {
     // only fetch data when the dialog is open
     if (open) {
@@ -156,10 +130,10 @@ const OpenFileDialog = _ref2 => {
         page,
         sortField,
         sortDirection: formatSortDirection(),
-        filters: formatFilters()
+        filters: formatFiltersCb()
       });
     }
-  }, [open, page, sortField, filters, refetch, formatFilters, formatSortDirection]);
+  }, [open, page, sortField, filters, refetch, formatFiltersCb, formatSortDirection]);
   const headers = [{
     field: 'displayName',
     label: _d2I18n.default.t('Name'),
@@ -242,20 +216,17 @@ const OpenFileDialog = _ref2 => {
     className: `jsx-${_OpenFileDialogStyles.styles.__hash}` + " " + "data-table-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ui.DataTable, {
     layout: "fixed"
-  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(_ref4 => {
-    let {
-      field,
-      label,
-      width
-    } = _ref4;
-    return /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
-      width: width,
-      key: field,
-      name: field,
-      onSortIconClick: sortData,
-      sortDirection: getSortDirection(field)
-    }, label);
-  }) : /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, null))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, {
+  }, /*#__PURE__*/_react.default.createElement(_ui.DataTableHead, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, data !== null && data !== void 0 && data.files[_utils.AOTypeMap[type].apiEndpoint].length ? headers.map(({
+    field,
+    label,
+    width
+  }) => /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, {
+    width: width,
+    key: field,
+    name: field,
+    onSortIconClick: sortData,
+    sortDirection: getSortDirection(field)
+  }, label)) : /*#__PURE__*/_react.default.createElement(_ui.DataTableColumnHeader, null))), /*#__PURE__*/_react.default.createElement(_ui.DataTableBody, {
     className: "data-table-body"
   }, loading && /*#__PURE__*/_react.default.createElement(_ui.DataTableRow, null, /*#__PURE__*/_react.default.createElement(_ui.DataTableCell, {
     large: true

package/build/cjs/components/OpenFileDialog/PaginationControls.js

@@ -9,34 +9,28 @@ var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const PaginationControls = _ref => {
-  let {
-    page,
-    pager,
-    onPageChange
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_ui.Pagination, {
-    page: page,
-    pageCount: pager.pageCount,
-    pageSize: pager.pageSize,
-    total: pager.total,
-    onPageChange: onPageChange,
-    onPageSizeChange: Function.prototype,
-    hidePageSizeSelect: true,
-    pageSummaryText: _ref2 => {
-      let {
-        firstItem: firstItemIndex,
-        lastItem: lastItemIndex,
-        total: totalNumberOfItems
-      } = _ref2;
-      return _d2I18n.default.t('{{firstItemIndex}}-{{lastItemIndex}} of {{totalNumberOfItems}}', {
-        firstItemIndex,
-        lastItemIndex,
-        totalNumberOfItems
-      });
-    }
-  });
-};
+const PaginationControls = ({
+  page,
+  pager,
+  onPageChange
+}) => /*#__PURE__*/_react.default.createElement(_ui.Pagination, {
+  page: page,
+  pageCount: pager.pageCount,
+  pageSize: pager.pageSize,
+  total: pager.total,
+  onPageChange: onPageChange,
+  onPageSizeChange: Function.prototype,
+  hidePageSizeSelect: true,
+  pageSummaryText: ({
+    firstItem: firstItemIndex,
+    lastItem: lastItemIndex,
+    total: totalNumberOfItems
+  }) => _d2I18n.default.t('{{firstItemIndex}}-{{lastItemIndex}} of {{totalNumberOfItems}}', {
+    firstItemIndex,
+    lastItemIndex,
+    totalNumberOfItems
+  })
+});
 exports.PaginationControls = PaginationControls;
 PaginationControls.propTypes = {
   page: _propTypes.default.number,

package/build/cjs/components/OpenFileDialog/VisTypeFilter.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VisTypeFilter = void 0;
+exports.formatTypeFilter = exports.default = exports.VisTypeFilter = void 0;
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,43 +12,72 @@ var _visTypes = require("../../modules/visTypes.js");
 var _VisTypeIcon = require("../VisTypeIcon.js");
 var _CustomSelectOption = require("./CustomSelectOption.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const VisTypeFilter = _ref => {
-  let {
-    visTypes,
-    selected,
-    onChange
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_ui.SingleSelect, {
-    selected: selected,
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
-      return onChange(selected);
-    },
-    prefix: _d2I18n.default.t('Type'),
-    dense: true,
-    maxHeight: "400px"
-  }, visTypes === null || visTypes === void 0 ? void 0 : visTypes.map(_ref3 => {
-    let {
+const formatTypeFilter = (filterVisTypes, visType) => {
+  const defaultFilterTypes = [];
+  let defaultTypeFilter;
+  if (Array.isArray(filterVisTypes)) {
+    defaultFilterTypes.push(...filterVisTypes.filter(({
       type,
-      disabled,
-      insertDivider
-    } = _ref3;
-    return /*#__PURE__*/_react.default.createElement(_CustomSelectOption.CustomSelectOption, {
-      key: type,
-      disabled: disabled,
-      label: (0, _visTypes.getDisplayNameByVisType)(type),
-      insertDivider: insertDivider,
-      value: type,
-      icon: _visTypes.visTypeIcons[type] ? /*#__PURE__*/_react.default.createElement(_VisTypeIcon.VisTypeIcon, {
-        type: type,
-        useSmall: true,
-        color: _ui.colors.grey600
-      }) : undefined
-    });
-  }));
+      disabled
+    }) => !(disabled || [_visTypes.VIS_TYPE_GROUP_ALL, _visTypes.VIS_TYPE_GROUP_CHARTS].includes(type))).map(({
+      type
+    }) => type));
+    if (defaultFilterTypes.length) {
+      defaultTypeFilter = `type:in:[${defaultFilterTypes.join(',')}]`;
+    }
+  }
+  switch (visType) {
+    case _visTypes.VIS_TYPE_GROUP_ALL:
+      {
+        return defaultTypeFilter;
+      }
+    case _visTypes.VIS_TYPE_GROUP_CHARTS:
+      {
+        if (defaultFilterTypes.length) {
+          return `type:in:[${defaultFilterTypes.filter(item => item !== _visTypes.VIS_TYPE_PIVOT_TABLE).join(',')}]`;
+        } else {
+          return `type:!eq:${_visTypes.VIS_TYPE_PIVOT_TABLE}`;
+        }
+      }
+    default:
+      {
+        if (visType) {
+          return `type:eq:${visType}`;
+        } else if (defaultTypeFilter) {
+          return defaultTypeFilter;
+        }
+      }
+  }
 };
+exports.formatTypeFilter = formatTypeFilter;
+const VisTypeFilter = ({
+  visTypes,
+  selected,
+  onChange
+}) => /*#__PURE__*/_react.default.createElement(_ui.SingleSelect, {
+  selected: selected,
+  onChange: ({
+    selected
+  }) => onChange(selected),
+  prefix: _d2I18n.default.t('Type'),
+  dense: true,
+  maxHeight: "400px"
+}, visTypes === null || visTypes === void 0 ? void 0 : visTypes.map(({
+  type,
+  disabled,
+  insertDivider
+}) => /*#__PURE__*/_react.default.createElement(_CustomSelectOption.CustomSelectOption, {
+  key: type,
+  disabled: disabled,
+  label: (0, _visTypes.getDisplayNameByVisType)(type),
+  insertDivider: insertDivider,
+  value: type,
+  icon: _visTypes.visTypeIcons[type] ? /*#__PURE__*/_react.default.createElement(_VisTypeIcon.VisTypeIcon, {
+    type: type,
+    useSmall: true,
+    color: _ui.colors.grey600
+  }) : undefined
+})));
 exports.VisTypeFilter = VisTypeFilter;
 VisTypeFilter.propTypes = {
   selected: _propTypes.default.string,

package/build/cjs/components/OpenFileDialog/__tests__/OpenFileDialog.spec.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _visTypes = require("../../../modules/visTypes.js");
+var _CreatedByFilter = require("../CreatedByFilter.js");
+var _OpenFileDialog = require("../OpenFileDialog.js");
+describe('OpenFileDialog - formatFilters', () => {
+  const currentUser = {
+    id: 'test-user'
+  };
+  const createdByTestCases = [[_CreatedByFilter.CREATED_BY_ALL, []], [_CreatedByFilter.CREATED_BY_CURRENT_USER, [`user.id:eq:${currentUser.id}`]], [_CreatedByFilter.CREATED_BY_ALL_BUT_CURRENT_USER, [`user.id:!eq:${currentUser.id}`]]];
+  test.each(createdByTestCases)('formats the createdBy filter given %p', (createdBy, expected) => expect((0, _OpenFileDialog.formatFilters)(currentUser, {
+    createdBy
+  })).toEqual(expected));
+  test('formats the searchTerm filter', () => {
+    const testSearchTerm = 'test search term';
+    expect((0, _OpenFileDialog.formatFilters)(currentUser, {
+      searchTerm: testSearchTerm
+    })).toEqual([`identifiable:token:${testSearchTerm}`]);
+  });
+  const typeTestCases = [
+  // no type filter when no visType nor filterVisTypes
+  [undefined, undefined, []],
+  // no type filter because VIS_TYPE_GROUP_ALL is selected
+  [undefined, _visTypes.VIS_TYPE_GROUP_ALL, []],
+  // only VIS_TYPE_PIVOT_TABLE ignored because no filterVisTypes is passed and VIS_TYPE_GROUP_CHARTS is selected
+  [undefined, _visTypes.VIS_TYPE_GROUP_CHARTS, [`type:!eq:${_visTypes.VIS_TYPE_PIVOT_TABLE}`]],
+  // no filterVisTypes and VIS_TYPE_PIVOT_TABLE selected
+  [undefined, _visTypes.VIS_TYPE_PIVOT_TABLE, [`type:eq:${_visTypes.VIS_TYPE_PIVOT_TABLE}`]],
+  // group types are ignored
+  [[_visTypes.VIS_TYPE_PIVOT_TABLE, _visTypes.VIS_TYPE_GROUP_ALL, _visTypes.VIS_TYPE_GROUP_CHARTS], _visTypes.VIS_TYPE_GROUP_ALL, [`type:in:[${_visTypes.VIS_TYPE_PIVOT_TABLE}]`]],
+  // VIS_TYPE_PIVOT_TABLE is ignored because VIS_TYPE_GROUP_CHARTS is selected
+  [[_visTypes.VIS_TYPE_PIVOT_TABLE, _visTypes.VIS_TYPE_COLUMN, _visTypes.VIS_TYPE_GROUP_CHARTS], _visTypes.VIS_TYPE_GROUP_CHARTS, [`type:in:[${_visTypes.VIS_TYPE_COLUMN}]`]],
+  // when filterVisTypes is passed the default type filter only include those
+  [[_visTypes.VIS_TYPE_PIVOT_TABLE], '', [`type:in:[${_visTypes.VIS_TYPE_PIVOT_TABLE}]`]], [[_visTypes.VIS_TYPE_LINE_LIST, _visTypes.VIS_TYPE_PIVOT_TABLE], '', [`type:in:[${_visTypes.VIS_TYPE_LINE_LIST},${_visTypes.VIS_TYPE_PIVOT_TABLE}]`]]];
+  test.each(typeTestCases)('formats the type filter given %p and %p', (types, visType, expected) => expect((0, _OpenFileDialog.formatFilters)(currentUser, {
+    visType
+  }, types === null || types === void 0 ? void 0 : types.map(type => ({
+    type
+  })))).toEqual(expected));
+  test('combined filters', () => {
+    expect((0, _OpenFileDialog.formatFilters)(currentUser, {
+      createdBy: _CreatedByFilter.CREATED_BY_CURRENT_USER,
+      searchTerm: 'test',
+      visType: _visTypes.VIS_TYPE_GROUP_ALL
+    }, [{
+      type: _visTypes.VIS_TYPE_LINE_LIST
+    }, {
+      type: _visTypes.VIS_TYPE_PIVOT_TABLE
+    }])).toEqual([`identifiable:token:test`, `user.id:eq:${currentUser.id}`, `type:in:[${_visTypes.VIS_TYPE_LINE_LIST},${_visTypes.VIS_TYPE_PIVOT_TABLE}]`]);
+  });
+});

package/build/cjs/components/Options/VisualizationOptions.js

@@ -9,43 +9,35 @@ var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _VisualizationOptionsStyle = require("./styles/VisualizationOptions.style.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const VisualizationOptions = _ref => {
-  let {
-    initiallyActiveTabKey,
-    optionsConfig,
-    onClose,
-    onUpdate
-  } = _ref;
+const VisualizationOptions = ({
+  initiallyActiveTabKey,
+  optionsConfig,
+  onClose,
+  onUpdate
+}) => {
   const [activeTabKey, setActiveTabKey] = (0, _react.useState)(initiallyActiveTabKey);
-  const generateTabContent = sections => sections.map(_ref2 => {
-    let {
-      key,
-      label,
-      content,
-      helpText
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: key,
-      className: _VisualizationOptionsStyle.tabSection.className
-    }, /*#__PURE__*/_react.default.createElement(_ui.FieldSet, null, label ? /*#__PURE__*/_react.default.createElement(_ui.Legend, null, /*#__PURE__*/_react.default.createElement("span", {
-      className: _VisualizationOptionsStyle.tabSectionTitle.className
-    }, label)) : null, content, helpText ? /*#__PURE__*/_react.default.createElement(_ui.Legend, null, /*#__PURE__*/_react.default.createElement(_ui.Help, null, helpText)) : null));
-  });
-  const generateTabs = tabs => tabs.map(_ref3 => {
-    let {
-      key,
-      label,
-      content
-    } = _ref3;
-    return {
-      key,
-      label,
-      content: generateTabContent(content)
-    };
-  });
+  const generateTabContent = sections => sections.map(({
+    key,
+    label,
+    content,
+    helpText
+  }) => /*#__PURE__*/_react.default.createElement("div", {
+    key: key,
+    className: _VisualizationOptionsStyle.tabSection.className
+  }, /*#__PURE__*/_react.default.createElement(_ui.FieldSet, null, label ? /*#__PURE__*/_react.default.createElement(_ui.Legend, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _VisualizationOptionsStyle.tabSectionTitle.className
+  }, label)) : null, content, helpText ? /*#__PURE__*/_react.default.createElement(_ui.Legend, null, /*#__PURE__*/_react.default.createElement(_ui.Help, null, helpText)) : null)));
+  const generateTabs = tabs => tabs.map(({
+    key,
+    label,
+    content
+  }) => ({
+    key,
+    label,
+    content: generateTabContent(content)
+  }));
   const getModalContent = () => {
     const tabs = generateTabs(optionsConfig);
     let activeTabIndex = tabs.findIndex(tab => tab.key === activeTabKey);
@@ -56,17 +48,14 @@ const VisualizationOptions = _ref => {
       className: _VisualizationOptionsStyle.tabBar.className
     }, /*#__PURE__*/_react.default.createElement(_ui.TabBar, {
       dataTest: 'options-modal-tab-bar'
-    }, tabs.map((_ref4, index) => {
-      let {
-        key,
-        label
-      } = _ref4;
-      return /*#__PURE__*/_react.default.createElement(_ui.Tab, {
-        key: key,
-        onClick: () => setActiveTabKey(key),
-        selected: index === activeTabIndex
-      }, label);
-    })), _VisualizationOptionsStyle.tabBar.styles), /*#__PURE__*/_react.default.createElement("div", {
+    }, tabs.map(({
+      key,
+      label
+    }, index) => /*#__PURE__*/_react.default.createElement(_ui.Tab, {
+      key: key,
+      onClick: () => setActiveTabKey(key),
+      selected: index === activeTabIndex
+    }, label))), _VisualizationOptionsStyle.tabBar.styles), /*#__PURE__*/_react.default.createElement("div", {
       className: _VisualizationOptionsStyle.tabContent.className
     }, tabs[activeTabIndex].content, _VisualizationOptionsStyle.tabContent.styles, _VisualizationOptionsStyle.tabSection.styles, _VisualizationOptionsStyle.tabSectionTitle.styles, _VisualizationOptionsStyle.tabSectionTitleDisabled.styles, _VisualizationOptionsStyle.tabSectionTitleMargin.styles, _VisualizationOptionsStyle.tabSectionOption.styles, _VisualizationOptionsStyle.tabSectionOptionItem.styles, _VisualizationOptionsStyle.tabSectionOptionToggleable.styles, _VisualizationOptionsStyle.tabSectionToggleableSubsection.styles, _VisualizationOptionsStyle.tabSectionOptionComplexInline.styles, _VisualizationOptionsStyle.tabSectionOptionText.styles, _VisualizationOptionsStyle.tabSectionOptionIcon.styles));
   };