Release 2022-36

.eslintrc

@@ -44,6 +44,7 @@
         "packages/psss-server/**",
         "packages/report-server/**",
         "packages/server-boilerplate/**",
+        "packages/supserset-api/**",
         "packages/tsutils/**"
       ],
       "extends": "@beyondessential/ts",

packages/admin-panel/package.json

@@ -38,6 +38,7 @@
     "axios": "^0.21.1",
     "case": "^1.5.3",
     "content-disposition-header": "^0.6.0",
+    "date-fns": "^2.29.2",
     "file-saver": "^1.3.3",
     "localforage": "^1.5.0",
     "lodash.debounce": "^4.0.8",

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

@@ -152,6 +152,7 @@ const mergeProps = (
       }
       dispatch(saveEdits(endpoint, fieldValuesToSave, isNew));
     },
+    endpoint,
   };
 };
 

packages/admin-panel/src/editor/Editor.js

@@ -6,6 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { InputField } from '../widgets';
+import { checkVisibilityCriteriaAreMet } from '../utilities';
 
 export const Editor = ({ fields, recordData, onEditField }) => {
   const onInputChange = (inputKey, inputValue, editConfig = {}) => {
@@ -42,9 +43,7 @@ export const Editor = ({ fields, recordData, onEditField }) => {
 
           // show or hide a field based on another field's value
           if (visibilityCriteria) {
-            return Object.entries(visibilityCriteria).every(
-              ([key, value]) => recordData[key] === value,
-            );
+            return checkVisibilityCriteriaAreMet(visibilityCriteria, recordData);
           }
 
           return true;

packages/admin-panel/src/editor/actions.js

@@ -11,21 +11,22 @@ import {
   EDITOR_DISMISS,
   EDITOR_ERROR,
   EDITOR_FIELD_EDIT,
-  EDITOR_OPEN_CREATOR,
+  EDITOR_OPEN,
 } from './constants';
 import { convertSearchTermToFilter, makeSubstitutionsInString } from '../utilities';
 
 const STATIC_FIELD_TYPES = ['link'];
 
 export const openBulkEditModal = (
-  { bulkGetEndpoint, bulkUpdateEndpoint, fields, baseFilter },
+  { bulkGetEndpoint, bulkUpdateEndpoint, fields, title, baseFilter },
   recordId,
   rowData,
 ) => async (dispatch, getState, { api }) => {
   if (recordId) {
     dispatch({
       type: EDITOR_DATA_FETCH_BEGIN,
       fields,
+      title,
       endpoint: bulkUpdateEndpoint,
     });
     // Set up filter
@@ -68,15 +69,15 @@ export const openBulkEditModal = (
     });
 
     dispatch({
-      type: EDITOR_OPEN_CREATOR,
+      type: EDITOR_OPEN,
       fields,
       recordData: {},
       endpoint: bulkUpdateEndpoint,
     });
   }
 };
 
-export const openEditModal = ({ editEndpoint, fields }, recordId) => async (
+export const openEditModal = ({ editEndpoint, title, fields }, recordId) => async (
   dispatch,
   getState,
   { api },
@@ -86,6 +87,7 @@ export const openEditModal = ({ editEndpoint, fields }, recordId) => async (
     dispatch({
       type: EDITOR_DATA_FETCH_BEGIN,
       fields,
+      title,
       endpoint,
       recordId,
     });
@@ -126,7 +128,7 @@ export const openEditModal = ({ editEndpoint, fields }, recordId) => async (
     });
 
     dispatch({
-      type: EDITOR_OPEN_CREATOR,
+      type: EDITOR_OPEN,
       fields,
       recordData: {},
       endpoint: editEndpoint,

packages/admin-panel/src/editor/constants.js

@@ -10,7 +10,7 @@ export const EDITOR_DATA_EDIT_SUCCESS = 'EDITOR_DATA_EDIT_SUCCESS';
 export const EDITOR_DISMISS = 'EDITOR_DISMISS';
 export const EDITOR_ERROR = 'EDITOR_ERROR';
 export const EDITOR_FIELD_EDIT = 'EDITOR_FIELD_EDIT';
-export const EDITOR_OPEN_CREATOR = 'EDITOR_OPEN_CREATOR';
+export const EDITOR_OPEN = 'EDITOR_OPEN';
 
 export const DATA_CHANGE_ACTIONS = {
   start: EDITOR_DATA_EDIT_BEGIN,

packages/admin-panel/src/editor/reducer.js

@@ -12,7 +12,7 @@ import {
   EDITOR_DISMISS,
   EDITOR_ERROR,
   EDITOR_FIELD_EDIT,
-  EDITOR_OPEN_CREATOR,
+  EDITOR_OPEN,
 } from './constants';
 
 const defaultState = {
@@ -22,6 +22,7 @@ const defaultState = {
   recordId: null,
   recordData: null,
   fields: null,
+  title: 'Edit',
   editedFields: {},
 };
 
@@ -52,7 +53,7 @@ const stateChanges = {
     }
     return defaultState; // If no error, dismiss the whole modal and clear its state
   },
-  [EDITOR_OPEN_CREATOR]: payload => payload,
+  [EDITOR_OPEN]: payload => payload,
   [EDITOR_FIELD_EDIT]: ({ fieldKey, newValue }, { editedFields }) => ({
     editedFields: {
       ...editedFields,

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

@@ -19,6 +19,7 @@ import {
 import { ModalContentProvider, InputField } from '../widgets';
 import { useApi } from '../utilities/ApiProvider';
 import { DATA_CHANGE_REQUEST, DATA_CHANGE_SUCCESS, DATA_CHANGE_ERROR } from '../table/constants';
+import { checkVisibilityCriteriaAreMet } from '../utilities';
 
 const STATUS = {
   IDLE: 'idle',
@@ -119,15 +120,6 @@ export const ImportModalComponent = React.memo(
         ? 'Request timed out, but may have still succeeded. Please wait 2 minutes and check to see if the data has changed'
         : errorMessage;
 
-    const checkVisibilityCriteriaAreMet = visibilityCriteria => {
-      if (!visibilityCriteria) {
-        return true; // no visibility criteria to meet, fine to display
-      }
-      return Object.entries(visibilityCriteria).every(
-        ([parameterKey, requiredValue]) => values[parameterKey] === requiredValue,
-      );
-    };
-
     const renderButtons = useCallback(() => {
       switch (status) {
         case STATUS.TIMEOUT:

packages/admin-panel/src/logsTable/LogsButton.js

@@ -0,0 +1,40 @@
+/**
+ * Tupaia MediTrak
+ * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import DescriptionIcon from '@material-ui/icons/Description';
+import { IconButton } from '../widgets';
+import { openLogsModal } from './actions';
+
+export const LogsButtonComponent = props => {
+  const { openModal } = props;
+  return (
+    <IconButton onClick={openModal}>
+      <DescriptionIcon />
+    </IconButton>
+  );
+};
+
+LogsButtonComponent.propTypes = {
+  openModal: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = (dispatch, { actionConfig, value: recordId, row }) => ({
+  openModal: () => {
+    dispatch(openLogsModal(actionConfig, recordId, row));
+  },
+});
+
+const mergeProps = ({ ...stateProps }, { ...dispatchProps }, { ...ownProps }) => {
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+  };
+};
+
+export const LogsButton = connect(null, mapDispatchToProps, mergeProps)(LogsButtonComponent);

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

@@ -0,0 +1,87 @@
+/**
+ * Tupaia MediTrak
+ * Copyright (c) 2018 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Button, Dialog, DialogFooter, DialogHeader } from '@tupaia/ui-components';
+import { changeLogsTablePage, closeLogsModal } from './actions';
+import { ModalContentProvider } from '../widgets';
+import { LogsTable } from './LogsTable';
+
+export const LogsModalComponent = ({
+  errorMessage,
+  logs,
+  logsCount,
+  page,
+  logsPerPage,
+  onChangeLogsTablePage,
+  isLoading,
+  isOpen,
+  onDismiss,
+  title,
+}) => {
+  return (
+    <Dialog onClose={onDismiss} open={isOpen} disableBackdropClick maxWidth="xl">
+      <DialogHeader onClose={onDismiss} title={title} />
+      <ModalContentProvider errorMessage={errorMessage} isLoading={isLoading}>
+        <LogsTable
+          logs={logs}
+          logsCount={logsCount}
+          page={page}
+          logsPerPage={logsPerPage}
+          onChangePage={onChangeLogsTablePage}
+        />
+      </ModalContentProvider>
+      <DialogFooter>
+        <Button variant="outlined" onClick={onDismiss} disabled={isLoading}>
+          {errorMessage ? 'Dismiss' : 'Cancel'}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+LogsModalComponent.propTypes = {
+  errorMessage: PropTypes.string,
+  isLoading: PropTypes.object.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onDismiss: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  logs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  logsCount: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  logsPerPage: PropTypes.number.isRequired,
+  onChangeLogsTablePage: PropTypes.func.isRequired,
+};
+
+LogsModalComponent.defaultProps = {
+  errorMessage: null,
+  title: 'Logs',
+};
+
+const mapStateToProps = state => ({
+  ...state.logs,
+});
+
+const mapDispatchToProps = dispatch => ({
+  onDismiss: () => dispatch(closeLogsModal()),
+  onChangeLogsTablePage: page => dispatch(changeLogsTablePage(page)),
+  dispatch,
+});
+
+const mergeProps = ({ ...stateProps }, { dispatch, ...dispatchProps }, { ...ownProps }) => {
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+  };
+};
+
+export const LogsModal = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+)(LogsModalComponent);

packages/admin-panel/src/logsTable/LogsTable.js

@@ -0,0 +1,46 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2022 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Table, useTableSorting } from '@tupaia/ui-components';
+
+const StyledTable = styled(Table)`
+  .MuiTableCell-root {
+    height: 30px;
+  }
+`;
+
+export const LogsTable = ({ logs, logsCount, page, logsPerPage, onChangePage }) => {
+  const { sortedData, order, orderBy, sortColumn } = useTableSorting(logs);
+  return (
+    <StyledTable
+      count={logsCount}
+      page={page}
+      onChangePage={onChangePage}
+      rowsPerPage={logsPerPage}
+      rowsPerPageOptions={[]}
+      data={sortedData}
+      order={order}
+      orderBy={orderBy}
+      onChangeOrderBy={sortColumn}
+      columns={[
+        { key: 'timestamp', title: 'time', sortable: true, width: '250px', align: 'left' },
+        { key: 'message', title: 'message', sortable: false, align: 'left' },
+      ]}
+    />
+  );
+};
+
+LogsTable.propTypes = {
+  logs: PropTypes.arrayOf(
+    PropTypes.shape({ timestamp: PropTypes.string, message: PropTypes.string }),
+  ).isRequired,
+  logsCount: PropTypes.number.isRequired,
+  page: PropTypes.number.isRequired,
+  logsPerPage: PropTypes.number.isRequired,
+  onChangePage: PropTypes.func.isRequired,
+};