merge: update branch with latest dev

README.md

@@ -21,6 +21,9 @@ The [Tupaia Contributing Guidelines](/.github/CONTRIBUTING.md) and [BES Contribu
 
 It is set up using [Yarn workspaces](https://yarnpkg.com/features/workspaces), meaning any command you would normally run inside a package can be run from the root directory using `yarn workspace @tupaia/package-name command`. For example, `yarn workspace @tupaia/central-server start-dev`.
 
+If you want to watch internal dependencies while running a server, run `yarn workspace @tupaia/package-name start-dev -i`. The `-i` command will listen to changes in the internal dependencies' `dist` folders and restart on changes.
+You can also run `build-watch` on these internal dependencies to watch changes and rebuild the package on change. This, combined with `-i` on the server start script will mean anytime you change something in your chosen package, the servers will restart. For example, you could run `yarn workspace @tupaia/central-server start-dev` and also `yarn workspace @tupaia/utils build-watch` which would mean the `central-server` would restart anytime you make a change in `utils`. By default, `central-server`, `datatrak-web-server`, and `tupaia-web-server` have `-i` enabled, for convenience.
+
 Use the `start-stack` command to start all servers needed to run a stack. Available for `admin-panel`, `datatrak`, `lesmis`, `psss` and `tupaia-web`. For example, `yarn start-stack tupaia-web`.
 
 > [!TIP]

package.json

@@ -35,7 +35,9 @@
     "test-all": "node ./scripts/node/testAll --silent",
     "validate": "./scripts/bash/validate.sh",
     "package:build:ts": "cd $INIT_CWD && tsc -p tsconfig-build.json",
+    "package:build:ts-watch": "cd $INIT_CWD && tsc -p tsconfig-build.json --watch",
     "package:build:js": "cd $INIT_CWD && babel src --out-dir dist --source-maps --config-file \"../../babel.config.json\" --copy-files --no-copy-ignored --ignore \"**/__tests__\",\"**/__mocks__\"",
+    "package:build:js-watch": "cd $INIT_CWD && babel src --out-dir dist --source-maps --config-file \"../../babel.config.json\" --copy-files --no-copy-ignored --ignore \"**/__tests__\",\"**/__mocks__\" --watch",
     "package:build:types": "cd $INIT_CWD && tsc",
     "package:build:vite": "cd $INIT_CWD && vite build --config \"../../vite.config.js\"",
     "package:build:lib": "cd $INIT_CWD && babel src --out-dir lib --source-maps --config-file \"../../babel.config.json\" --copy-files --no-copy-ignored --ignore \"**/__tests__\",\"**/__mocks__\"",

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

@@ -0,0 +1,190 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+
+import {
+  SmallAlert,
+  Button,
+  OutlinedButton,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  FileUploadField,
+  LoadingContainer,
+} from '@tupaia/ui-components';
+
+const STATUS = {
+  IDLE: 'idle',
+  LOADING: 'loading',
+  SUCCESS: 'success',
+  ERROR: 'error',
+};
+
+const Content = styled(DialogContent)`
+  text-align: left;
+  min-height: 220px;
+`;
+
+const Heading = styled(Typography)`
+  margin-bottom: 18px;
+`;
+
+export const ImportModal = ({
+  isOpen,
+  title,
+  subtitle,
+  actionText,
+  loadingText,
+  loadingHeading,
+  showLoadingContainer,
+  onSubmit,
+  onClose,
+}) => {
+  const [status, setStatus] = useState(STATUS.IDLE);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  const [file, setFile] = useState(null);
+
+  const handleSubmit = async event => {
+    event.preventDefault();
+    setErrorMessage(null);
+    setStatus(STATUS.LOADING);
+
+    try {
+      const { message } = await onSubmit(file);
+      if (showLoadingContainer && message) {
+        setStatus(STATUS.SUCCESS);
+        setSuccessMessage(message);
+      } else {
+        handleClose();
+      }
+    } catch (error) {
+      setStatus(STATUS.ERROR);
+      setErrorMessage(error.message);
+    }
+  };
+
+  const handleClose = async () => {
+    onClose();
+
+    setStatus(STATUS.IDLE);
+    setErrorMessage(null);
+    setSuccessMessage(null);
+    setFile(null);
+  };
+
+  const handleDismiss = () => {
+    setStatus(STATUS.IDLE);
+    setErrorMessage(null);
+    setSuccessMessage(null);
+    // Deselect file when dismissing an error, this avoids an error when editing selected files
+    // @see https://github.com/beyondessential/tupaia-backlog/issues/1211
+    setFile(null);
+  };
+
+  const ContentContainer = showLoadingContainer
+    ? ({ children }) => (
+        <LoadingContainer heading={loadingHeading} isLoading={status === STATUS.LOADING}>
+          {children}
+        </LoadingContainer>
+      )
+    : React.Fragment;
+
+  const renderContent = useCallback(() => {
+    switch (status) {
+      case STATUS.SUCCESS:
+        return <p>{successMessage}</p>;
+      case STATUS.ERROR:
+        return (
+          <>
+            <Heading variant="h6">An error has occurred.</Heading>
+            <SmallAlert severity="error" variant="standard">
+              {errorMessage}
+            </SmallAlert>
+          </>
+        );
+      default:
+        return (
+          <>
+            <p>{subtitle}</p>
+            <form>
+              <FileUploadField onChange={files => setFile(files[0])} name="file-upload" />
+            </form>
+          </>
+        );
+    }
+  }, [status, successMessage, errorMessage, subtitle]);
+
+  const renderButtons = useCallback(() => {
+    switch (status) {
+      case STATUS.SUCCESS:
+        return <Button onClick={handleClose}>Done</Button>;
+      case STATUS.ERROR:
+        return (
+          <>
+            <OutlinedButton onClick={handleDismiss}>Dismiss</OutlinedButton>
+            <Button disabled>{actionText}</Button>
+          </>
+        );
+      default:
+        return (
+          <>
+            <Button onClick={handleClose} variant="outlined">
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={!file}
+              isLoading={status === STATUS.LOADING}
+              loadingText={loadingText}
+              onClick={handleSubmit}
+            >
+              {actionText}
+            </Button>
+          </>
+        );
+    }
+  }, [status, file, handleDismiss, handleClose, handleSubmit]);
+
+  return (
+    <Dialog onClose={handleClose} open={isOpen}>
+      <DialogHeader
+        onClose={handleClose}
+        title={errorMessage ? 'Error' : title}
+        color={errorMessage ? 'error' : 'textPrimary'}
+      />
+      <ContentContainer>
+        <Content>{renderContent()}</Content>
+      </ContentContainer>
+      <DialogFooter>{renderButtons()}</DialogFooter>
+    </Dialog>
+  );
+};
+
+ImportModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  actionText: PropTypes.string,
+  loadingText: PropTypes.string,
+  loadingHeading: PropTypes.string,
+  showLoadingContainer: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+ImportModal.defaultProps = {
+  title: 'Import',
+  subtitle: '',
+  actionText: 'Import',
+  loadingText: 'Importing',
+  loadingHeading: 'Importing data',
+  showLoadingContainer: false,
+};

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

@@ -13,7 +13,7 @@ import { useUploadTestData } from '../../api';
 import { ProjectField } from './ProjectField';
 import { LocationField } from './LocationField';
 import { DateRangeField } from './DateRangeField';
-import { ImportModal } from '../../../importExport';
+import { ImportModal } from './ImportModal';
 
 const Container = styled(FlexSpaceBetween)`
   padding: 24px 0;
@@ -58,6 +58,7 @@ const UploadDataModal = ({ isOpen, onSubmit, onClose }) => (
     actionText="Upload"
     loadingText="Uploading"
     showLoadingContainer={false}
+    hasCustomButton={true}
   />
 );
 

packages/admin-panel/src/api/mutations/useEditSurveyResponse.js

@@ -6,7 +6,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useApiContext } from '../../utilities/ApiProvider';
 
-export const useEditSurveyResponse = (surveyResponseId, updatedSurveyResponse) => {
+export const useEditSurveyResponse = (surveyResponseId, updatedSurveyResponse, onSuccess) => {
   const queryClient = useQueryClient();
   const api = useApiContext();
   return useMutation(
@@ -19,7 +19,10 @@ export const useEditSurveyResponse = (surveyResponseId, updatedSurveyResponse) =
       onSuccess: async () => {
         // invalidate the survey response data
         await queryClient.invalidateQueries(['surveyResubmitData', surveyResponseId]);
-        return 'completed';
+        if (onSuccess) {
+          onSuccess();
+        }
+        return true;
       },
     },
   );

packages/admin-panel/src/icons/ArchiveIcon.jsx

@@ -0,0 +1,29 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { SvgIcon } from '@material-ui/core';
+
+export const ArchiveIcon = props => {
+  return (
+    <SvgIcon
+      {...props}
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        id="Icon"
+        d="M15.1875 5.625L14.7184 13.5991C14.666 14.491 13.9273 15.1875 13.0338 15.1875H4.96615C4.07266 15.1875 3.33403 14.491 3.28156 13.5991L2.8125 5.625M7.49982 8.4375H10.4998M2.53125 5.625H15.4688C15.9347 5.625 16.3125 5.24724 16.3125 4.78125V3.65625C16.3125 3.19026 15.9347 2.8125 15.4688 2.8125H2.53125C2.06526 2.8125 1.6875 3.19026 1.6875 3.65625V4.78125C1.6875 5.24724 2.06526 5.625 2.53125 5.625Z"
+        stroke="#328DE5"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"
+      />
+    </SvgIcon>
+  );
+};

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

@@ -8,3 +8,4 @@ export { VizIcon } from './VizIcon';
 export { ImportIcon } from './ImportIcon';
 export { ExportIcon } from './ExportIcon';
 export { CaretLeftIcon } from './CaretLeftIcon';
+export { ArchiveIcon } from './ArchiveIcon';

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

@@ -27,6 +27,7 @@ export const ExportModal = React.memo(
     exportButtonText,
     cancelButtonText,
     isExportingMessage,
+    onCloseModal,
   }) => {
     const api = useApiContext();
     const [status, setStatus] = useState(STATUS.IDLE);
@@ -44,6 +45,9 @@ export const ExportModal = React.memo(
       setStatus(STATUS.IDLE);
       setError(null);
       setIsOpen(false);
+      if (onCloseModal) {
+        onCloseModal();
+      }
     };
 
     const handleSubmit = async event => {
@@ -152,6 +156,7 @@ ExportModal.propTypes = {
   exportButtonText: PropTypes.string,
   cancelButtonText: PropTypes.string,
   isExportingMessage: PropTypes.string,
+  onCloseModal: PropTypes.func,
 };
 
 ExportModal.defaultProps = {
@@ -162,4 +167,5 @@ ExportModal.defaultProps = {
   isExportingMessage:
     'Export is taking a while, and will continue in the background. You will be emailed the exported file when the process completes.',
   values: {},
+  onCloseModal: null,
 };

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

@@ -190,6 +190,7 @@ export const ImportModalComponent = React.memo(
                   onChange={newFiles => setFiles(newFiles ?? [])}
                   name="file-upload"
                   multiple={actionConfig.multiple}
+                  accept={actionConfig.accept}
                 />
               </>
             )}

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

@@ -10,6 +10,7 @@ import { stripTimezoneFromDate } from '@tupaia/utils';
 import { ReduxAutocomplete } from '../autocomplete';
 import { ExportModal } from './ExportModal';
 import { EntityOptionLabel } from '../widgets';
+import { Checkbox, FormControlLabel } from '@material-ui/core';
 
 const MODES = {
   COUNTRY: { value: 'country', formInput: 'countryCode' },
@@ -40,8 +41,20 @@ export const SurveyResponsesExportModal = () => {
     }));
   };
 
+  const clearValues = () => {
+    setValues({});
+    onChangeMode(MODES.COUNTRY.value);
+    setCountryCode(undefined);
+    setEntityIds(undefined);
+  };
+
   return (
-    <ExportModal title="Download survey responses" values={values} exportEndpoint="surveyResponses">
+    <ExportModal
+      title="Download survey responses"
+      values={values}
+      exportEndpoint="surveyResponses"
+      onCloseModal={clearValues}
+    >
       <ReduxAutocomplete
         label="Surveys to include"
         helperText="Please enter the names of the surveys to be exported."
@@ -54,7 +67,7 @@ export const SurveyResponsesExportModal = () => {
       />
       <RadioGroup
         name="survey responses mode"
-        label="Mode"
+        label="Level"
         onChange={event => onChangeMode(event.currentTarget.value)}
         options={[
           {
@@ -126,6 +139,17 @@ export const SurveyResponsesExportModal = () => {
           }
         }}
       />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={values.includeArchived}
+            onChange={event => handleValueChange('includeArchived', event.target.checked)}
+            name="include-archived"
+            color="primary"
+          />
+        }
+        label="Include archived survey responses"
+      />
     </ExportModal>
   );
 };

packages/admin-panel/src/pages/StrivePage.jsx

@@ -12,6 +12,10 @@ const importConfig = {
   title: 'Import lab results or vector data',
   actionConfig: {
     importEndpoint: 'striveLabResults',
+    accept: {
+      'application/vnd.ms-excel': ['.xls'],
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+    },
   },
 };