@dhis2/analytics 28.0.3 → 28.0.5

package/build/es/components/FileMenu/__tests__/SaveAsDialog.spec.js

@@ -1,53 +1,60 @@
-import { Button, Modal, ModalTitle } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { SaveAsDialog } from '../SaveAsDialog.js';
-describe('The FileMenu - SaveAsDialog component', () => {
-  let shallowSaveAsDialog;
-  let props;
+describe('FileMenu - SaveAsDialog component', () => {
   const onClose = jest.fn();
   const onSaveAs = jest.fn();
-  const getSaveAsDialogComponent = props => {
-    if (!shallowSaveAsDialog) {
-      shallowSaveAsDialog = shallow(/*#__PURE__*/React.createElement(SaveAsDialog, props));
-    }
-    return shallowSaveAsDialog;
+  const props = {
+    type: 'visualization',
+    object: {
+      name: 'Save as name test',
+      description: 'Save as description test'
+    },
+    onClose,
+    onSaveAs
   };
-  beforeEach(() => {
-    shallowSaveAsDialog = undefined;
-    props = {
-      type: 'visualization',
-      object: {
-        name: 'Save as name test',
-        description: 'Save as description test'
-      },
-      onClose,
-      onSaveAs
-    };
+  test('renders a Modal component', () => {
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    expect(screen.getByTestId('file-menu-saveas-modal')).toBeInTheDocument();
   });
-  it('renders a Modal component', () => {
-    expect(getSaveAsDialogComponent(props).find(Modal)).toHaveLength(1);
+  test('renders a ModalTitle containing the type prop', () => {
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    expect(screen.getByRole('heading')).toHaveTextContent(`Save ${props.type} as`);
   });
-  it('renders a ModalTitle containing the type prop', () => {
-    expect(getSaveAsDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Save ${props.type} as`);
+  test('renders a InputField for name with prefilled value from the object prop', () => {
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    expect(screen.getByTestId('file-menu-saveas-modal-name')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeVisible();
+    expect(screen.getByDisplayValue('Save as name test (copy)')).toBeInTheDocument();
   });
-  it('renders a InputField for name with prefilled value from the object prop', () => {
-    const nameInputField = getSaveAsDialogComponent(props).findWhere(n => n.prop('label') === 'Name');
-    expect(nameInputField.prop('value')).toEqual('Save as name test (copy)');
+  test('renders a TextAreaField for description with prefilled value from the object prop', () => {
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    expect(screen.getByTestId('file-menu-saveas-modal-description')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeVisible();
+    expect(screen.getByDisplayValue(props.object.description)).toBeInTheDocument();
   });
-  it('renders a TextAreaField for description with prefilled value from the object prop', () => {
-    const descriptionInputField = getSaveAsDialogComponent(props).findWhere(n => n.prop('label') === 'Description');
-    expect(descriptionInputField.prop('value')).toEqual(props.object.description);
-  });
-  it('calls the onSaveAs callback when the Save button is clicked', () => {
-    getSaveAsDialogComponent(props).find(Button).at(1).simulate('click');
+  test('calls the onSaveAs callback when the Save button is clicked', async () => {
+    const user = userEvent.setup();
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    const saveButton = screen.getByRole('button', {
+      name: 'Save'
+    });
+    await user.click(saveButton);
     expect(onSaveAs).toHaveBeenCalledWith({
       name: 'Save as name test (copy)',
       description: props.object.description
     });
   });
-  it('calls the onClose callback when the Cancel button is clicked', () => {
-    getSaveAsDialogComponent(props).find(Button).first().simulate('click');
+  test('calls the onClose callback when the Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    render(/*#__PURE__*/React.createElement(SaveAsDialog, props));
+    const cancelButton = screen.getByRole('button', {
+      name: 'Cancel'
+    });
+    await user.click(cancelButton);
     expect(onClose).toHaveBeenCalled();
   });
 });

package/build/es/components/FileMenu/utils.js

@@ -33,12 +33,11 @@ export const appPathFor = (fileType, id, apiVersion) => {
       return `${window.location.search}${window.location.hash}`;
   }
 };
-export const preparePayloadForSaveAs = _ref => {
-  let {
-    visualization,
-    name,
-    description
-  } = _ref;
+export const preparePayloadForSaveAs = ({
+  visualization,
+  name,
+  description
+}) => {
   delete visualization.id;
   delete visualization.created;
   delete visualization.createdBy;
@@ -54,12 +53,11 @@ export const preparePayloadForSaveAs = _ref => {
   visualization.description = description !== undefined ? description : visualization.description;
   return visualization;
 };
-export const preparePayloadForSave = _ref2 => {
-  let {
-    visualization,
-    name,
-    description
-  } = _ref2;
+export const preparePayloadForSave = ({
+  visualization,
+  name,
+  description
+}) => {
   visualization.name = name || visualization.name || i18n.t('Untitled {{visualizationType}}, {{date}}', {
     visualizationType: getDisplayNameByVisType(visualization.type),
     date: new Date().toLocaleDateString(undefined, {

package/build/es/components/Filter/Filter.js

@@ -3,37 +3,31 @@ import { InputField } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './styles/Filter.style.js';
-const Filter = _ref => {
-  let {
-    text,
-    onChange,
-    onClear,
-    placeholder,
-    type,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `jsx-${styles.__hash}` + " " + "container"
-  }, /*#__PURE__*/React.createElement(InputField, {
-    placeholder: placeholder,
-    onChange: ref => ref.value.length ? onChange(ref.value) : onClear(),
-    value: text,
-    dense: true,
-    type: type,
-    dataTest: dataTest
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: styles.__hash
-  }, styles));
-};
+const Filter = ({
+  text,
+  onChange,
+  onClear,
+  placeholder,
+  type = 'text',
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  className: `jsx-${styles.__hash}` + " " + "container"
+}, /*#__PURE__*/React.createElement(InputField, {
+  placeholder: placeholder,
+  onChange: ref => ref.value.length ? onChange(ref.value) : onClear(),
+  value: text,
+  dense: true,
+  type: type,
+  dataTest: dataTest
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: styles.__hash
+}, styles));
 Filter.propTypes = {
   placeholder: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   onClear: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
-  text: PropTypes.string
-};
-Filter.defaultProps = {
-  type: 'text'
+  text: PropTypes.string,
+  type: PropTypes.string
 };
 export default Filter;

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

@@ -1,36 +1,31 @@
-import { InputField } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import Filter from '../Filter.js';
-describe('The Filter component ', () => {
-  let shallowFilter;
-  let props;
-  const filterComp = () => {
-    if (!shallowFilter) {
-      shallowFilter = shallow(/*#__PURE__*/React.createElement(Filter, props));
-    }
-    return shallowFilter;
-  };
-  beforeEach(() => {
-    props = {
-      placeholder: 'testplaceholder',
-      text: '',
-      onChange: jest.fn(),
-      onClear: jest.fn()
-    };
-    shallowFilter = undefined;
-  });
-  it('renders a InputField component', () => {
-    expect(filterComp().find(InputField).length).toEqual(1);
-  });
-  it('should call prop onClear if onChange receives text string with length < 1 (Ctrl-A  + BackSpace)', () => {
-    props.text = 'anotherTestString';
-    const filter = filterComp().find(InputField);
-    const mockEvent = {
-      value: '',
-      preventDefault: jest.fn()
-    };
-    filter.props().onChange(mockEvent);
-    expect(props.onClear).toHaveBeenCalledTimes(1);
-  });
+const props = {
+  placeholder: 'testplaceholder',
+  text: '',
+  onChange: jest.fn(),
+  onClear: jest.fn()
+};
+test('Filter renders an InputField component ', () => {
+  render(/*#__PURE__*/React.createElement(Filter, props));
+  const inputField = screen.getByTestId('dhis2-uiwidgets-inputfield');
+  expect(inputField).toBeInTheDocument();
+});
+test('Filter renders an input field with the given placeholder', () => {
+  render(/*#__PURE__*/React.createElement(Filter, props));
+  const inputField = screen.getByPlaceholderText(props.placeholder);
+  expect(inputField).toBeInTheDocument();
+});
+test('Filter should call prop onClear if onChange receives text string with length < 1 (Ctrl-A  + BackSpace)', async () => {
+  const user = userEvent.setup();
+  props.text = 'anotherTestString';
+  render(/*#__PURE__*/React.createElement(Filter, props));
+  const inputField = screen.getByPlaceholderText(props.placeholder);
+
+  // focus on the input field in order to interact with it
+  await user.click(inputField);
+  await user.keyboard('{Control>}A{/Control}{Backspace}');
+  expect(props.onClear).toHaveBeenCalledTimes(1);
 });

package/build/es/components/Interpretations/InterpretationModal/Comment.js

@@ -5,14 +5,13 @@ import React, { useState } from 'react';
 import { Message, MessageIconButton, MessageStatsBar, getCommentAccess } from '../common/index.js';
 import { CommentDeleteButton } from './CommentDeleteButton.js';
 import { CommentUpdateForm } from './CommentUpdateForm.js';
-const Comment = _ref => {
-  let {
-    comment,
-    currentUser,
-    interpretationId,
-    onThreadUpdated,
-    canComment
-  } = _ref;
+const Comment = ({
+  comment,
+  currentUser,
+  interpretationId,
+  onThreadUpdated,
+  canComment
+}) => {
   const [isUpdateMode, setIsUpdateMode] = useState(false);
   const commentAccess = getCommentAccess(comment, canComment, currentUser);
   return isUpdateMode ? /*#__PURE__*/React.createElement(CommentUpdateForm, {

package/build/es/components/Interpretations/InterpretationModal/CommentAddForm.js

@@ -5,24 +5,20 @@ import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip, MessageInput } from '../common/index.js';
-export const CommentAddForm = _ref => {
-  let {
-    interpretationId,
-    currentUser,
-    onSave,
-    focusRef
-  } = _ref;
+export const CommentAddForm = ({
+  interpretationId,
+  currentUser,
+  onSave,
+  focusRef
+}) => {
   const [showRichTextEditor, setShowRichTextEditor] = useState(false);
   const [commentText, setCommentText] = useState('');
   const saveMutationRef = useRef({
     resource: `interpretations/${interpretationId}/comments`,
     type: 'create',
-    data: _ref2 => {
-      let {
-        commentText
-      } = _ref2;
-      return commentText;
-    }
+    data: ({
+      commentText
+    }) => commentText
   });
   const [save, {
     loading

package/build/es/components/Interpretations/InterpretationModal/CommentDeleteButton.js

@@ -7,21 +7,17 @@ import React, { useState } from 'react';
 import { MessageIconButton } from '../common/index.js';
 const mutation = {
   resource: 'interpretations',
-  id: _ref => {
-    let {
-      interpretationId,
-      commentId
-    } = _ref;
-    return `${interpretationId}/comments/${commentId}`;
-  },
+  id: ({
+    interpretationId,
+    commentId
+  }) => `${interpretationId}/comments/${commentId}`,
   type: 'delete'
 };
-const CommentDeleteButton = _ref2 => {
-  let {
-    commentId,
-    interpretationId,
-    onComplete
-  } = _ref2;
+const CommentDeleteButton = ({
+  commentId,
+  interpretationId,
+  onComplete
+}) => {
   const [deleteError, setDeleteError] = useState(null);
   const [remove, {
     loading

package/build/es/components/Interpretations/InterpretationModal/CommentUpdateForm.js

@@ -6,26 +6,22 @@ import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js';
-export const CommentUpdateForm = _ref => {
-  let {
-    interpretationId,
-    commentId,
-    currentUser,
-    text,
-    close,
-    onComplete
-  } = _ref;
+export const CommentUpdateForm = ({
+  interpretationId,
+  commentId,
+  currentUser,
+  text,
+  close,
+  onComplete
+}) => {
   const [commentText, setCommentText] = useState(text || '');
   const updateMutationRef = useRef({
     resource: `interpretations/${interpretationId}/comments/${commentId}`,
     type: 'update',
     partial: false,
-    data: _ref2 => {
-      let {
-        commentText
-      } = _ref2;
-      return commentText;
-    }
+    data: ({
+      commentText
+    }) => commentText
   });
   const [update, {
     loading,

package/build/es/components/Interpretations/InterpretationModal/InterpretationModal.js

@@ -25,31 +25,27 @@ function getModalContentCSS(width) {
 const query = {
   interpretation: {
     resource: 'interpretations',
-    id: _ref => {
-      let {
-        id
-      } = _ref;
-      return id;
-    },
+    id: ({
+      id
+    }) => id,
     params: {
       fields: ['access[write,manage]', 'id', 'text', 'created', 'createdBy[id,displayName]', 'likes', 'likedBy', 'comments[id,text,created,createdBy[id,displayName]]']
     }
   }
 };
-const InterpretationModal = _ref2 => {
+const InterpretationModal = ({
+  currentUser,
+  isVisualizationLoading,
+  visualization,
+  onResponsesReceived,
+  downloadMenuComponent,
+  onClose,
+  onInterpretationUpdate,
+  interpretationId,
+  initialFocus,
+  pluginComponent: VisualizationPlugin
+}) => {
   var _currentUser$settings;
-  let {
-    currentUser,
-    isVisualizationLoading,
-    visualization,
-    onResponsesReceived,
-    downloadMenuComponent,
-    onClose,
-    onInterpretationUpdate,
-    interpretationId,
-    initialFocus,
-    pluginComponent: VisualizationPlugin
-  } = _ref2;
   const modalContentWidth = useModalContentWidth();
   const modalContentCSS = getModalContentCSS(modalContentWidth);
   const [isDirty, setIsDirty] = useState(false);
@@ -80,10 +76,9 @@ const InterpretationModal = _ref2 => {
       id: interpretationId
     });
   };
-  const onLikeToggled = _ref3 => {
-    let {
-      likedBy
-    } = _ref3;
+  const onLikeToggled = ({
+    likedBy
+  }) => {
     setIsDirty(true);
     interpretation.likedBy = likedBy;
     interpretation.likes = likedBy.length;

package/build/es/components/Interpretations/InterpretationModal/InterpretationThread.js

@@ -8,18 +8,17 @@ import React, { useRef, useEffect } from 'react';
 import { Interpretation, getInterpretationAccess } from '../common/index.js';
 import { Comment } from './Comment.js';
 import { CommentAddForm } from './CommentAddForm.js';
-const InterpretationThread = _ref => {
-  let {
-    currentUser,
-    fetching,
-    interpretation,
-    onInterpretationDeleted,
-    onLikeToggled,
-    initialFocus,
-    onThreadUpdated,
-    downloadMenuComponent: DownloadMenu,
-    dashboardRedirectUrl
-  } = _ref;
+const InterpretationThread = ({
+  currentUser,
+  fetching,
+  interpretation,
+  onInterpretationDeleted,
+  onLikeToggled,
+  initialFocus,
+  onThreadUpdated,
+  downloadMenuComponent: DownloadMenu,
+  dashboardRedirectUrl
+}) => {
   const {
     fromServerDate
   } = useTimeZoneConversion();

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationForm.js

@@ -5,26 +5,22 @@ import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { RichTextEditor } from '../../RichText/index.js';
 import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js';
-export const InterpretationForm = _ref => {
-  let {
-    type,
-    id,
-    currentUser,
-    disabled,
-    showNoTimeDimensionHelpText,
-    onSave
-  } = _ref;
+export const InterpretationForm = ({
+  type,
+  id,
+  currentUser,
+  disabled,
+  showNoTimeDimensionHelpText,
+  onSave
+}) => {
   const [showRichTextEditor, setShowRichTextEditor] = useState(false);
   const [interpretationText, setInterpretationText] = useState('');
   const saveMutationRef = useRef({
     resource: `interpretations/${type}/${id}`,
     type: 'create',
-    data: _ref2 => {
-      let {
-        interpretationText
-      } = _ref2;
-      return interpretationText;
-    }
+    data: ({
+      interpretationText
+    }) => interpretationText
   });
   const [save, {
     loading: saveMutationInProgress

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationList.js

@@ -16,17 +16,16 @@ const sortByCreatedDateDesc = (a, b) => {
   }
   return 0;
 };
-export const InterpretationList = _ref => {
-  let {
-    currentUser,
-    interpretations,
-    onInterpretationClick,
-    onLikeToggled,
-    onReplyIconClick,
-    refresh,
-    disabled,
-    dashboardRedirectUrl
-  } = _ref;
+export const InterpretationList = ({
+  currentUser,
+  interpretations,
+  onInterpretationClick,
+  onLikeToggled,
+  onReplyIconClick,
+  refresh,
+  disabled,
+  dashboardRedirectUrl
+}) => {
   const {
     fromServerDate
   } = useTimeZoneConversion();

package/build/es/components/Interpretations/InterpretationsUnit/InterpretationsUnit.js

@@ -10,30 +10,26 @@ import { InterpretationList } from './InterpretationList.js';
 const interpretationsQuery = {
   interpretations: {
     resource: 'interpretations',
-    params: _ref => {
-      let {
-        type,
-        id
-      } = _ref;
-      return {
-        fields: ['access[write,manage]', 'id', 'createdBy[id,displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
-        filter: `${type}.id:eq:${id}`
-      };
-    }
+    params: ({
+      type,
+      id
+    }) => ({
+      fields: ['access[write,manage]', 'id', 'createdBy[id,displayName]', 'created', 'text', 'comments[id]', 'likes', 'likedBy[id]'],
+      filter: `${type}.id:eq:${id}`
+    })
   }
 };
-export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    currentUser,
-    type,
-    id,
-    visualizationHasTimeDimension,
-    onInterpretationClick,
-    onReplyIconClick,
-    disabled,
-    renderId,
-    dashboardRedirectUrl
-  } = _ref2;
+export const InterpretationsUnit = /*#__PURE__*/forwardRef(({
+  currentUser,
+  type,
+  id,
+  visualizationHasTimeDimension = true,
+  onInterpretationClick = Function.prototype,
+  onReplyIconClick,
+  disabled,
+  renderId,
+  dashboardRedirectUrl
+}, ref) => {
   const [isExpanded, setIsExpanded] = useState(true);
   const [interpretations, setInterpretations] = useState([]);
   const showNoTimeDimensionHelpText = type === 'eventVisualization' && !visualizationHasTimeDimension;
@@ -62,11 +58,10 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
       });
     }
   }, [type, id, renderId, refetch]);
-  const onLikeToggled = _ref3 => {
-    let {
-      id,
-      likedBy
-    } = _ref3;
+  const onLikeToggled = ({
+    id,
+    likedBy
+  }) => {
     const interpretation = interpretations.find(interp => interp.id === id);
     interpretation.likedBy = likedBy;
     interpretation.likes = likedBy.length;
@@ -114,10 +109,6 @@ export const InterpretationsUnit = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }, [`.container.__jsx-style-dynamic-selector{position:relative;padding:${spacers.dp16};border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`, ".fetching-loader.__jsx-style-dynamic-selector{position:absolute;inset:0px;background-color:rgba(255,255,255,0.8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;z-index:1;}", `.expanded.__jsx-style-dynamic-selector{padding-bottom:${spacers.dp32};}`, ".loader.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}", `.title.__jsx-style-dynamic-selector{font-size:16px;font-weight:500;line-height:21px;color:${colors.grey900};}`]));
 });
 InterpretationsUnit.displayName = 'InterpretationsUnit';
-InterpretationsUnit.defaultProps = {
-  onInterpretationClick: Function.prototype,
-  visualizationHasTimeDimension: true
-};
 InterpretationsUnit.propTypes = {
   currentUser: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,

package/build/es/components/Interpretations/common/Interpretation/Interpretation.js

@@ -6,19 +6,18 @@ import { Message, MessageStatsBar, MessageIconButton, getInterpretationAccess }
 import { InterpretationDeleteButton } from './InterpretationDeleteButton.js';
 import { InterpretationUpdateForm } from './InterpretationUpdateForm.js';
 import { useLike } from './useLike.js';
-export const Interpretation = _ref => {
-  let {
-    interpretation,
-    currentUser,
-    onClick,
-    onUpdated,
-    onDeleted,
-    disabled,
-    onReplyIconClick,
-    dashboardRedirectUrl,
-    isInThread,
-    onLikeToggled
-  } = _ref;
+export const Interpretation = ({
+  interpretation,
+  currentUser,
+  onClick,
+  onUpdated,
+  onDeleted,
+  disabled,
+  onReplyIconClick,
+  dashboardRedirectUrl,
+  isInThread,
+  onLikeToggled
+}) => {
   const [isUpdateMode, setIsUpdateMode] = useState(false);
   const [showSharingDialog, setShowSharingDialog] = useState(false);
   const {