@dhis2/analytics 28.0.3 → 28.0.5

package/build/es/components/Toolbar/__tests__/InterpretationsAndDetailsToggler.spec.js

@@ -1,42 +1,43 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { InterpretationsAndDetailsToggler } from '../index.js';
 describe('<InterpretationsAndDetailsToggler/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `isShowing` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts an `isShowing` prop', () => {
+    const showingDataTest = 'dhis2-analytics-interpretationsanddetailstoggler-showing';
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop
     }));
-    const wrapperWithIsShowing = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    expect(screen.queryByTestId(showingDataTest)).not.toBeInTheDocument();
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       isShowing: true,
       onClick: noop
     }));
-    expect(wrapper.find('SvgChevronRight24')).toHaveLength(0);
-    expect(wrapper.find('SvgChevronLeft24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronRight24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronLeft24')).toHaveLength(0);
+    expect(screen.getByTestId(showingDataTest)).toBeInTheDocument();
   });
 });

package/build/es/components/Toolbar/__tests__/Toolbar.spec.js

@@ -1,17 +1,17 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Toolbar } from '../index.js';
 describe('<Toolbar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, {
+    render(/*#__PURE__*/React.createElement(Toolbar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
 });

package/build/es/components/Toolbar/__tests__/ToolbarSidebar.spec.js

@@ -1,23 +1,26 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { ToolbarSidebar } from '../index.js';
 describe('<ToolbarSidebar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `isHidden` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+  test('accepts a `isHidden` prop', () => {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       isHidden: true
     }));
-    expect(wrapper.find('div').hasClass('isHidden')).toEqual(true);
+    const divEl = container.querySelector('div');
+    expect(divEl).toHaveClass('isHidden');
   });
 });

package/build/es/components/Toolbar/__tests__/UpdateButton.spec.js

@@ -1,36 +1,38 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { UpdateButton } from '../index.js';
 describe('<UpdateButton/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `loading` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts an `loading` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       loading: true
     }));
-    expect(wrapper.find('CircularLoader')).toHaveLength(1);
+    expect(screen.getByTestId('dhis2-uicore-circularloader')).toBeInTheDocument();
   });
 });

package/build/es/components/TransferOption.js

@@ -4,21 +4,20 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './styles/TransferOption.style.js';
-export const TransferOption = _ref => {
-  let {
-    disabled,
-    label,
-    highlighted,
-    selected,
-    onClick,
-    onDoubleClick,
-    value,
-    icon,
-    active,
-    tooltipText,
-    dataTest,
-    onEditClick
-  } = _ref;
+export const TransferOption = ({
+  disabled,
+  label,
+  highlighted,
+  selected,
+  onClick,
+  onDoubleClick,
+  value,
+  icon,
+  active,
+  tooltipText,
+  dataTest,
+  onEditClick
+}) => {
   const renderContent = () => /*#__PURE__*/React.createElement("div", {
     "data-test": `${dataTest}-content`,
     onClick: event => {

package/build/es/components/TranslationDialog/TranslationModal/LocalesSelect.js

@@ -8,33 +8,28 @@ const query = {
     resource: 'locales/db'
   }
 };
-export const LocalesSelect = _ref => {
-  let {
-    onChange,
-    selected
-  } = _ref;
+export const LocalesSelect = ({
+  onChange,
+  selected
+}) => {
   const {
     data,
     fetching
   } = useDataQuery(query);
   return /*#__PURE__*/React.createElement(SingleSelect, {
     prefix: selected ? i18n.t('Translating to') : i18n.t('Choose a locale'),
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
-      return onChange(selected);
-    },
+    onChange: ({
+      selected
+    }) => onChange(selected),
     loading: fetching,
     selected: data && selected ? selected : '',
     dense: true
   }, data && data.locales
   // XXX remove duplicates ?! fr_SN - French (Senegal)
-  .reduce((locales, _ref3) => {
-    let {
-      locale,
-      name
-    } = _ref3;
+  .reduce((locales, {
+    locale,
+    name
+  }) => {
     if (!locales.find(entry => entry.locale === locale)) {
       locales.push({
         locale,
@@ -42,17 +37,14 @@ export const LocalesSelect = _ref => {
       });
     }
     return locales;
-  }, []).map(_ref4 => {
-    let {
-      locale,
-      name
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(SingleSelectOption, {
-      key: locale,
-      value: locale,
-      label: name
-    });
-  }));
+  }, []).map(({
+    locale,
+    name
+  }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: locale,
+    value: locale,
+    label: name
+  })));
 };
 LocalesSelect.propTypes = {
   onChange: PropTypes.func.isRequired,

package/build/es/components/TranslationDialog/TranslationModal/TranslationForm.js

@@ -7,15 +7,14 @@ import { LocalesSelect } from './LocalesSelect.js';
 import { TranslationModalActions } from './TranslationModalActions.js';
 const SESSION_STORAGE_TRANSLATION_LOCALE_KEY = 'translation-dialog-selected-locale';
 const camelCaseToUnderscores = field => field.replace(/[a-z][A-Z]/g, match => [match.charAt(0), match.charAt(1)].join('_')).toLowerCase();
-export const TranslationForm = _ref => {
-  let {
-    fieldsToTranslate,
-    objectToTranslate,
-    translations,
-    resource,
-    onTranslationSaved,
-    onClose
-  } = _ref;
+export const TranslationForm = ({
+  fieldsToTranslate,
+  objectToTranslate,
+  translations,
+  resource,
+  onTranslationSaved,
+  onClose
+}) => {
   const [newTranslations, setNewTranslations] = useState();
   const [translationLocale, setTranslationLocale] = useState();
   const [fieldsTranslations, setFieldsTranslations] = useState({});
@@ -68,14 +67,11 @@ export const TranslationForm = _ref => {
   const translationsMutationRef = useRef({
     resource: `${resource}/translations`,
     type: 'update',
-    data: _ref2 => {
-      let {
-        translations
-      } = _ref2;
-      return {
-        translations
-      };
-    }
+    data: ({
+      translations
+    }) => ({
+      translations
+    })
   });
   const [saveTranslations, {
     loading: saveInProgress
@@ -119,12 +115,9 @@ export const TranslationForm = _ref => {
   })), translationLocale && /*#__PURE__*/React.createElement(DataTableCell, null, /*#__PURE__*/React.createElement(TextAreaField, {
     label: fieldsTranslations[field],
     value: getTranslationForField(field),
-    onChange: _ref3 => {
-      let {
-        value
-      } = _ref3;
-      return setTranslationForField(field, value);
-    },
+    onChange: ({
+      value
+    }) => setTranslationForField(field, value),
     rows: 3
   })), !translationLocale && index === 0 && /*#__PURE__*/React.createElement(DataTableCell, {
     rowSpan: String(fieldsToTranslate.length)

package/build/es/components/TranslationDialog/TranslationModal/TranslationModal.js

@@ -5,13 +5,12 @@ import React, { useEffect, useState } from 'react';
 import { TranslationForm } from './TranslationForm.js';
 import { TranslationModalActions } from './TranslationModalActions.js';
 import { useTranslationsResults } from './useTranslationsResults.js';
-export const TranslationModal = _ref => {
-  let {
-    objectToTranslate,
-    fieldsToTranslate,
-    onClose,
-    onTranslationSaved
-  } = _ref;
+export const TranslationModal = ({
+  objectToTranslate,
+  fieldsToTranslate,
+  onClose,
+  onTranslationSaved
+}) => {
   const [translations, setTranslations] = useState([]);
   const endpointPath = new URL(objectToTranslate.href).pathname;
   const endpointPathMatch = endpointPath.match(/api\/(?:\d+\/)?(?<resource>.+)/);
@@ -30,7 +29,8 @@ export const TranslationModal = _ref => {
   return /*#__PURE__*/React.createElement(Modal, {
     large: true,
     position: "middle",
-    onClose: onClose
+    onClose: onClose,
+    dataTest: "dhis2-analytics-translation-modal"
   }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Translate: {{objectName}}', {
     objectName: objectToTranslate.name || 'TEXT',
     // XXX

package/build/es/components/TranslationDialog/TranslationModal/TranslationModalActions.js

@@ -4,36 +4,27 @@ import { Button, ButtonStrip, ModalActions } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { OfflineTooltip } from '../../OfflineTooltip.js';
-const SaveButton = _ref => {
-  let {
-    disabled,
-    loading,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Button, {
-    primary: true,
-    onClick: onClick,
-    loading: loading,
-    disabled: disabled
-  }, i18n.t('Save translations'));
-};
-SaveButton.defaultProps = {
-  disabled: false,
-  loading: false,
-  onClick: Function.prototype
-};
+const SaveButton = ({
+  disabled = false,
+  loading = false,
+  onClick = Function.prototype
+}) => /*#__PURE__*/React.createElement(Button, {
+  primary: true,
+  onClick: onClick,
+  loading: loading,
+  disabled: disabled
+}, i18n.t('Save translations'));
 SaveButton.propTypes = {
   disabled: PropTypes.bool.isRequired,
-  loading: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  loading: PropTypes.bool
 };
-export const TranslationModalActions = _ref2 => {
-  let {
-    onClose,
-    onSave,
-    saveInProgress,
-    saveButtonDisabled
-  } = _ref2;
+export const TranslationModalActions = ({
+  onClose,
+  onSave = Function.prototype,
+  saveInProgress,
+  saveButtonDisabled
+}) => {
   const {
     isDisconnected: offline
   } = useDhis2ConnectionStatus();

package/build/es/components/TranslationDialog/TranslationModal/__tests__/TranslationModal.spec.js

@@ -1,5 +1,5 @@
-import { ModalTitle, Modal } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { TranslationModal } from '../TranslationModal.js';
 const mockUseTranslationResults = jest.fn(() => ({
@@ -9,19 +9,26 @@ const mockUseTranslationResults = jest.fn(() => ({
 jest.mock('../useTranslationsResults.js', () => ({
   useTranslationsResults: args => mockUseTranslationResults(args)
 }));
-describe('The Translation Dialog component', () => {
-  let shallowTranslationModal;
+describe('TranslationDialog component', () => {
   let props;
   const onClose = jest.fn();
   const onTranslationSaved = jest.fn();
-  const getTranslationModalComponent = props => {
-    if (!shallowTranslationModal) {
-      shallowTranslationModal = shallow(/*#__PURE__*/React.createElement(TranslationModal, props));
-    }
-    return shallowTranslationModal;
+  const renderTranslationModalComponent = props => {
+    return render(/*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: {
+        i18n: {
+          name: 'Name',
+          description: 'Description'
+        },
+        'locales/db': [{
+          locale: 'en',
+          name: 'English',
+          displayName: 'English'
+        }]
+      }
+    }, /*#__PURE__*/React.createElement(TranslationModal, props)));
   };
   beforeEach(() => {
-    shallowTranslationModal = undefined;
     props = {
       fieldsToTranslate: ['name', 'description'],
       objectToTranslate: {
@@ -32,15 +39,17 @@ describe('The Translation Dialog component', () => {
       onTranslationSaved
     };
   });
-  it('renders a Modal component', () => {
-    expect(getTranslationModalComponent(props).find(Modal)).toHaveLength(1);
+  test('renders a Modal component', () => {
+    renderTranslationModalComponent(props);
+    expect(screen.getByTestId('dhis2-analytics-translation-modal')).toBeInTheDocument();
   });
-  it("renders a ModalTitle containing the object's name", () => {
-    expect(getTranslationModalComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Translate: ${props.objectToTranslate.name}`);
+  test("renders a ModalTitle containing the object's name", () => {
+    renderTranslationModalComponent(props);
+    expect(screen.getByText(`Translate: ${props.objectToTranslate.name}`)).toBeInTheDocument();
   });
   test.each(['https://dhis2.tld/path/api/visualization/object-id', 'https://dhis2.tld/path/api/42/visualization/object-id'])('uses the correct resource for the translation endpoint', href => {
     props.objectToTranslate.href = href;
-    getTranslationModalComponent(props);
+    renderTranslationModalComponent(props);
     expect(mockUseTranslationResults).toHaveBeenCalled();
     expect(mockUseTranslationResults).toHaveBeenCalledWith({
       resource: 'visualization/object-id'

package/build/es/components/TranslationDialog/TranslationModal/useTranslationsResults.js

@@ -1,10 +1,9 @@
 import { useAlert, useDataQuery } from '@dhis2/app-runtime';
 import i18n from '@dhis2/d2-i18n';
 import { useRef } from 'react';
-export const useTranslationsResults = _ref => {
-  let {
-    resource
-  } = _ref;
+export const useTranslationsResults = ({
+  resource
+}) => {
   const translationsQueryRef = useRef({
     translations: {
       resource: `${resource}/translations`

package/build/es/components/UserMention/UserList.js

@@ -2,13 +2,12 @@ import i18n from '@dhis2/d2-i18n';
 import { MenuItem } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const UserList = _ref => {
-  let {
-    users,
-    selectedUserIndex,
-    onUserClick,
-    pager
-  } = _ref;
+export const UserList = ({
+  users,
+  selectedUserIndex,
+  onUserClick,
+  pager
+}) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, users.map(u => {
     var _users$selectedUserIn;
     return /*#__PURE__*/React.createElement(MenuItem, {

package/build/es/components/UserMention/UserMentionWrapper.js

@@ -23,12 +23,11 @@ const getVirtualPopperReference = ref => {
     })
   };
 };
-export const UserMentionWrapper = _ref => {
-  let {
-    children,
-    inputReference,
-    onUserSelect
-  } = _ref;
+export const UserMentionWrapper = ({
+  children,
+  inputReference,
+  onUserSelect = Function.prototype
+}) => {
   const [listIsOpen, setListIsOpen] = useState(false);
   const [captureText, setCaptureText] = useState(false);
   const [capturedText, setCapturedText] = useState('');
@@ -61,10 +60,9 @@ export const UserMentionWrapper = _ref => {
   const onUserListClose = () => reset();
 
   // event bubbles up from the input/textarea
-  const onInput = _ref2 => {
-    let {
-      target
-    } = _ref2;
+  const onInput = ({
+    target
+  }) => {
     const {
       selectionEnd,
       value
@@ -83,11 +81,10 @@ export const UserMentionWrapper = _ref => {
   };
 
   // event bubbles up from the wrapped input/textarea
-  const onKeyDown = _ref3 => {
-    let {
-      key,
-      target
-    } = _ref3;
+  const onKeyDown = ({
+    key,
+    target
+  }) => {
     const {
       selectionStart
     } = target;
@@ -187,9 +184,6 @@ export const UserMentionWrapper = _ref => {
     id: userMentionWrapperClasses.__hash
   }, userMentionWrapperClasses), resolvedHeaderStyle.styles);
 };
-UserMentionWrapper.defaultProps = {
-  onUserSelect: Function.prototype
-};
 UserMentionWrapper.propTypes = {
   inputReference: PropTypes.object.isRequired,
   onUserSelect: PropTypes.func.isRequired,

package/build/es/components/UserMention/useUserSearchResults.js

@@ -4,24 +4,20 @@ import { useCallback, useEffect, useState } from 'react';
 const usersQuery = {
   users: {
     resource: 'users/gist',
-    params: _ref => {
-      let {
-        searchText
-      } = _ref;
-      return {
-        fields: 'id,displayName,username',
-        order: 'firstName,surname',
-        total: true,
-        filter: `username:ilike:${searchText},firstName:ilike:${searchText},surname:ilike:${searchText},email:ilike:${searchText}`,
-        rootJunction: 'OR'
-      };
-    }
+    params: ({
+      searchText
+    }) => ({
+      fields: 'id,displayName,username',
+      order: 'firstName,surname',
+      total: true,
+      filter: `username:ilike:${searchText},firstName:ilike:${searchText},surname:ilike:${searchText},email:ilike:${searchText}`,
+      rootJunction: 'OR'
+    })
   }
 };
-export const useUserSearchResults = _ref2 => {
-  let {
-    searchText
-  } = _ref2;
+export const useUserSearchResults = ({
+  searchText
+}) => {
   const [{
     users,
     pager

package/build/es/components/VisTypeIcon.js

@@ -2,12 +2,11 @@ import { IconVisualizationArea16, IconVisualizationAreaStacked16, IconVisualizat
 import PropTypes from 'prop-types';
 import React from 'react';
 import { VIS_TYPE_LINE_LIST, VIS_TYPE_PIVOT_TABLE, VIS_TYPE_COLUMN, VIS_TYPE_STACKED_COLUMN, VIS_TYPE_BAR, VIS_TYPE_STACKED_BAR, VIS_TYPE_LINE, VIS_TYPE_AREA, VIS_TYPE_STACKED_AREA, VIS_TYPE_PIE, VIS_TYPE_RADAR, VIS_TYPE_GAUGE, VIS_TYPE_YEAR_OVER_YEAR_LINE, VIS_TYPE_YEAR_OVER_YEAR_COLUMN, VIS_TYPE_SINGLE_VALUE, VIS_TYPE_SCATTER, VIS_TYPE_OUTLIER_TABLE } from '../modules/visTypes.js';
-export const VisTypeIcon = _ref => {
-  let {
-    type,
-    useSmall = false,
-    ...props
-  } = _ref;
+export const VisTypeIcon = ({
+  type,
+  useSmall = false,
+  ...props
+}) => {
   let VisIcon;
   switch (type) {
     case VIS_TYPE_LINE_LIST: