feat(datatrakWeb): RN-1335: Tasks Epic OLD ONE

env/platform.env.example

@@ -0,0 +1,4 @@
+TUPAIA_FRONT_END_URL=
+DATATRAK_FRONT_END_URL=
+LESMIS_FRONT_END_URL=
+ADMIN_PANEL_FRONT_END_URL=

packages/admin-panel/src/VizBuilderApp/components/DashboardItem/DashboardItemMetadataForm.jsx

@@ -5,10 +5,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useForm, Controller } from 'react-hook-form';
-import { Autocomplete, TextField } from '@tupaia/ui-components';
+import { Autocomplete, TextField, useDebounce } from '@tupaia/ui-components';
 import { useSearchPermissionGroups } from '../../api/queries';
 import { useVizConfigContext } from '../../context';
-import { useDebounce } from '../../../utilities';
 import { DASHBOARD_ITEM_VIZ_TYPES } from '../../constants';
 import { REQUIRED_FIELD_ERROR } from '../../../editor/validation';
 

packages/admin-panel/src/VizBuilderApp/components/DataLibrary/component/TransformModal.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Dialog } from '@material-ui/core';
 import styled from 'styled-components';
-import { ModalHeader } from '../../../../widgets';
+import { ModalHeader } from '@tupaia/ui-components';
 
 const Wrapper = styled.div`
   height: 80vh;

packages/admin-panel/src/VizBuilderApp/components/MapOverlay/MapOverlayMetadataForm.jsx

@@ -5,11 +5,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useForm, Controller } from 'react-hook-form';
-import { Autocomplete, TextField } from '@tupaia/ui-components';
+import { Autocomplete, TextField, useDebounce } from '@tupaia/ui-components';
 import Chip from '@material-ui/core/Chip';
 import { useCountries, useProjects, useSearchPermissionGroups } from '../../api/queries';
 import { useVizConfigContext } from '../../context';
-import { useDebounce } from '../../../utilities';
 import { MAP_OVERLAY_VIZ_TYPES } from '../../constants';
 import { REQUIRED_FIELD_ERROR } from '../../../editor';
 

packages/admin-panel/src/VizBuilderApp/components/Modal/EditModal.jsx

@@ -4,11 +4,16 @@
  */
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Button, Dialog } from '@tupaia/ui-components';
+import {
+  Button,
+  Dialog,
+  ModalContentProvider,
+  ModalFooter,
+  ModalHeader,
+} from '@tupaia/ui-components';
 import { DashboardItemMetadataForm } from '../DashboardItem';
 import { MapOverlayMetadataForm } from '../MapOverlay';
 import { DASHBOARD_ITEM_OR_MAP_OVERLAY_PARAM } from '../../constants';
-import { ModalContentProvider, ModalFooter, ModalHeader } from '../../../widgets';
 
 export const EditModal = () => {
   const { dashboardItemOrMapOverlay } = useParams();

packages/admin-panel/src/VizBuilderApp/components/Modal/SaveVisualisationModal.jsx

@@ -8,11 +8,11 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link as RouterLink, useParams } from 'react-router-dom';
 import Typography from '@material-ui/core/Typography';
+import { Modal, ModalCenteredContent } from '@tupaia/ui-components';
 import { DASHBOARD_ITEM_OR_MAP_OVERLAY_PARAM, MODAL_STATUS } from '../../constants';
 import { useVisualisationContext, useVizConfigContext } from '../../context';
 import { useSaveDashboardVisualisation, useSaveMapOverlayVisualisation } from '../../api';
 import { useVizBuilderBasePath } from '../../utils';
-import { Modal, ModalCenteredContent } from '../../../widgets';
 
 const Heading = styled(Typography).attrs({
   variant: 'h3',
@@ -95,7 +95,7 @@ export const SaveVisualisationModal = ({ isOpen, onClose }) => {
       isOpen={isOpen}
       title="Save visualisation"
       isLoading={status === MODAL_STATUS.LOADING}
-      errorMessage={error?.message}
+      error={error}
       buttons={[
         {
           text: 'Cancel',

packages/admin-panel/src/VizBuilderApp/components/PreviewOptions/PreviewOptions.jsx

@@ -6,13 +6,14 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import InsertDriveFileIcon from '@material-ui/icons/InsertDriveFile';
-import { FlexEnd, FlexSpaceBetween, FlexStart, ImportModal } from '@tupaia/ui-components';
+import { FlexEnd, FlexSpaceBetween, FlexStart } from '@tupaia/ui-components';
 import { usePreviewDataContext, useVizConfigContext } from '../../context';
 import { LinkButton } from '../LinkButton';
 import { useUploadTestData } from '../../api';
 import { ProjectField } from './ProjectField';
 import { LocationField } from './LocationField';
 import { DateRangeField } from './DateRangeField';
+import { ImportModal } from '../../../importExport';
 
 const Container = styled(FlexSpaceBetween)`
   padding: 24px 0;

packages/admin-panel/src/dataTables/components/PreviewFilters/filters/OrganisationUnitCodesField.jsx

@@ -4,13 +4,11 @@
  */
 
 import React, { useState } from 'react';
-
 import PropTypes from 'prop-types';
-
+import { useDebounce } from '@tupaia/ui-components';
 import { ParameterType } from '../../editing';
 import { useEntities } from '../../../../VizBuilderApp/api';
 import { Autocomplete } from '../../../../autocomplete';
-import { useDebounce } from '../../../../utilities';
 import { getArrayFieldValue } from './utils';
 
 export const OrganisationUnitCodesField = ({ name, onChange }) => {

packages/admin-panel/src/editor/EditModal.jsx

@@ -6,9 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Modal } from '@tupaia/ui-components';
 import { dismissEditor } from './actions';
 import { UsedBy } from '../usedBy/UsedBy';
-import { Modal } from '../widgets';
 import { useEditFiles } from './useEditFiles';
 import { FieldsEditor } from './FieldsEditor';
 import { withConnectedEditor } from './withConnectedEditor';

packages/admin-panel/src/importExport/ExportModal.jsx

@@ -5,7 +5,7 @@
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from '../widgets';
+import { Modal } from '@tupaia/ui-components';
 import { useApiContext } from '../utilities/ApiProvider';
 import { ActionButton } from '../editor';
 import { ExportIcon } from '../icons';

packages/admin-panel/src/importExport/ImportModal.jsx

@@ -6,13 +6,12 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { FileUploadField } from '@tupaia/ui-components';
-import { Modal } from '../widgets';
+import { FileUploadField, Modal } from '@tupaia/ui-components';
+import { InputField } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 import { DATA_CHANGE_ERROR, DATA_CHANGE_REQUEST, DATA_CHANGE_SUCCESS } from '../table/constants';
 import { checkVisibilityCriteriaAreMet, labelToId } from '../utilities';
 import { ActionButton } from '../editor';
-import { InputField } from '../widgets/InputField/InputField';
 import { ImportIcon } from '../icons';
 
 const STATUS = {

packages/admin-panel/src/library.js

@@ -31,14 +31,7 @@ export { PrivateRoute } from './authentication';
 export { getHasBESAdminAccess } from './utilities/getHasBESAdminAccess';
 export * from './pages/resources';
 export { ReduxAutocomplete } from './autocomplete';
-export {
-  IconButton,
-  ModalContentProvider,
-  Modal,
-  ModalFooter,
-  ModalHeader,
-  ModalCenteredContent,
-} from './widgets';
+export { IconButton } from './widgets';
 export { AdminPanelDataProviders } from './utilities/AdminPanelProviders';
 export { useApiContext } from './utilities/ApiProvider';
 export { DataChangeAction, ActionButton } from './editor';

packages/admin-panel/src/logsTable/LogsModal.jsx

@@ -6,8 +6,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Modal } from '@tupaia/ui-components';
 import { changeLogsTablePage, closeLogsModal } from './actions';
-import { Modal } from '../widgets';
 import { LogsTable } from './LogsTable';
 
 export const LogsModalComponent = ({

packages/admin-panel/src/pages/resources/editSurvey/EditSurveyPage.jsx

@@ -8,15 +8,14 @@ import keyBy from 'lodash.keyby';
 import { connect } from 'react-redux';
 import { useNavigate, useParams } from 'react-router';
 import styled from 'styled-components';
-import { Button, SpinningLoader } from '@tupaia/ui-components';
+import { Button, SpinningLoader, Modal } from '@tupaia/ui-components';
 import { Breadcrumbs } from '../../../layout';
 import { useItemDetails } from '../../../api/queries/useResourceDetails';
 import { useValidationScroll, withConnectedEditor } from '../../../editor';
 import { useEditFiles } from '../../../editor/useEditFiles';
 import { FileUploadField } from '../../../widgets/InputField/FileUploadField';
 import { FieldsEditor } from '../../../editor/FieldsEditor';
 import { dismissEditor, loadEditor, resetEdits } from '../../../editor/actions';
-import { Modal } from '../../../widgets';
 import { useLinkToPreviousSearchState } from '../../../utilities';
 
 const Wrapper = styled.div`

packages/admin-panel/src/qrCode/QrCodeModal.jsx

@@ -6,9 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { Modal } from '@tupaia/ui-components';
 import { QrCodeContainer } from './QrCodeContainer';
 import { closeQrCodeModal } from './actions';
-import { Modal } from '../widgets';
 
 export const QrCodeModalComponent = ({ isOpen, onDismiss, qrCodeContents, humanReadableId }) => {
   return (

packages/admin-panel/src/routes/surveys/surveys.js

@@ -490,6 +490,62 @@ const QUESTION_COLUMNS = [
                   },
                 ],
               },
+              {
+                label: 'Task',
+                fieldName: 'task',
+                type: 'json',
+                getJsonFieldSchema: () => [
+                  {
+                    label: 'Should create task',
+                    fieldName: 'shouldCreateTask',
+                    type: 'json',
+                    getJsonFieldSchema: () => [{ label: 'Question Id', fieldName: 'questionId' }],
+                  },
+                  {
+                    label: 'Entity code',
+                    fieldName: 'entityCode',
+                    type: 'json',
+                    getJsonFieldSchema: () => [{ label: 'Question Id', fieldName: 'questionId' }],
+                  },
+
+                  {
+                    label: 'Survey code',
+                    fieldName: 'surveyCode',
+                    optionsEndpoint: 'surveys',
+                    optionLabelKey: 'name',
+                    optionValueKey: 'code',
+                    labelTooltip: 'Select the survey this task should be assigned for',
+                  },
+                  {
+                    label: 'Due date',
+                    fieldName: 'dueDate',
+                    type: 'json',
+                    getJsonFieldSchema: () => [{ label: 'Question Id', fieldName: 'questionId' }],
+                  },
+
+                  {
+                    label: 'Assignee',
+                    fieldName: 'assignee',
+                    type: 'json',
+                    getJsonFieldSchema: () => [{ label: 'Question Id', fieldName: 'questionId' }],
+                  },
+                ],
+              },
+              {
+                label: 'User',
+                fieldName: 'user',
+                type: 'json',
+                getJsonFieldSchema: () => [
+                  {
+                    label: 'Permission group name',
+                    fieldName: 'permissionGroup',
+                    optionsEndpoint: 'permissionGroups',
+                    optionLabelKey: 'name',
+                    optionValueKey: 'id',
+                    labelTooltip: 'Select the permission group the user list should be filtered by',
+                  },
+                ],
+              },
             ],
           },
         },

packages/admin-panel/src/surveyResponse/FileQuestionField.jsx

@@ -7,13 +7,13 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import generateId from 'uuid/v1';
-import { TextField } from '@tupaia/ui-components';
+import { TextField, Modal } from '@tupaia/ui-components';
 import { getUniqueFileNameParts } from '@tupaia/utils';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import ExportIcon from '@material-ui/icons/GetApp';
 import { FileUploadField } from '../widgets/InputField/FileUploadField';
-import { IconButton, Modal } from '../widgets';
+import { IconButton } from '../widgets';
 import { useApiContext } from '../utilities/ApiProvider';
 
 const Container = styled.div`

packages/admin-panel/src/surveyResponse/Form.jsx

@@ -6,9 +6,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Button } from '@tupaia/ui-components';
+import { Button, ModalContentProvider, ModalFooter } from '@tupaia/ui-components';
 import { useGetExistingData } from './useGetExistingData';
-import { ModalContentProvider, ModalFooter } from '../widgets';
 import { useEditSurveyResponse } from '../api/mutations/useEditSurveyResponse';
 import { ResponseFields } from './ResponseFields';
 

packages/admin-panel/src/surveyResponse/ResponseFields.jsx

@@ -7,11 +7,10 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Typography } from '@material-ui/core';
-import { Select, DateTimePicker } from '@tupaia/ui-components';
+import { Select, DateTimePicker, useDebounce } from '@tupaia/ui-components';
 import { ApprovalStatus } from '@tupaia/types';
 import { format } from 'date-fns';
 import { Autocomplete } from '../autocomplete';
-import { useDebounce } from '../utilities';
 import { useEntities } from '../VizBuilderApp/api';
 import { EntityOptionLabel } from '../widgets';
 

packages/admin-panel/src/surveyResponse/ResubmitSurveyResponseModal.jsx

@@ -6,10 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Dialog } from '@tupaia/ui-components';
+import { Dialog, ModalHeader } from '@tupaia/ui-components';
 import { closeResubmitSurveyModal, onAfterMutate as onAfterMutateAction } from './actions';
 import { Form } from './Form';
-import { ModalHeader } from '../widgets';
 
 export const ResubmitSurveyResponseModalComponent = ({
   isOpen,

packages/admin-panel/src/surveys/useEditSurveyField.js

@@ -4,7 +4,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { useDebounce } from '../utilities';
+import { useDebounce } from '@tupaia/ui-components';
 import { useApiContext } from '../utilities/ApiProvider';
 import { useSuggestSurveyCode } from './useSuggestSurveyCode';
 

packages/admin-panel/src/table/DataFetchingTable/DataFetchingTable.jsx

@@ -217,7 +217,6 @@ const DataFetchingTableComponent = memo(
         <FilterableTable
           columns={formattedColumns}
           data={data}
-          isLoading={isChangingDataOnServer}
           pageIndex={pageIndex}
           pageSize={pageSize}
           sorting={sortingToUse}
@@ -230,8 +229,6 @@ const DataFetchingTableComponent = memo(
           onChangePage={onPageChange}
           onChangePageSize={onPageSizeChange}
           onChangeSorting={onSortedChange}
-          refreshData={onRefreshData}
-          errorMessage={errorMessage}
           totalRecords={totalRecords}
         />
 

packages/admin-panel/src/utilities/index.js

@@ -9,7 +9,6 @@ export { convertSearchTermToFilter } from './convertSearchTermToFilter';
 export { makeSubstitutionsInString } from './makeSubstitutionsInString';
 export { usePortalWithCallback } from './usePortalWithCallback';
 export * from './pretty';
-export * from './useDebounce';
 export { checkVisibilityCriteriaAreMet } from './visibilityCriteria';
 export { labelToId } from './labelToId';
 export { getColumns, getRows } from './getRowsAndColumns';

packages/admin-panel/src/widgets/ConfirmDeleteModal.jsx

@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import styled from 'styled-components';
-import { Modal, ModalCenteredContent } from './Modal';
+import { Modal, ModalCenteredContent } from '@tupaia/ui-components';
 
 const Heading = styled(Typography).attrs({
   variant: 'h3',

packages/admin-panel/src/widgets/InputField/CheckboxListField.jsx

@@ -16,10 +16,10 @@ import {
   Typography,
 } from '@material-ui/core';
 import { Search } from '@material-ui/icons';
-import { InputLabel } from '@tupaia/ui-components';
+import { InputLabel, useDebounce } from '@tupaia/ui-components';
 import { get } from '../../VizBuilderApp/api/api';
 import { Checkbox } from '../Checkbox';
-import { convertSearchTermToFilter, useDebounce } from '../../utilities';
+import { convertSearchTermToFilter } from '../../utilities';
 
 const useOptions = (
   endpoint,