merge: release-2024-28

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/central-server/src/apiV2/import/importEntities/extractEntitiesByCountryName.js

@@ -50,12 +50,12 @@ const processXlsxRow = (row, { countryName }) => {
 };
 
 const xlsxParser = filePath => {
-  const workbook = xlsx.readFile(filePath);
+  const workbook = xlsx.readFile(filePath, { raw: false });
   return Object.entries(workbook.Sheets).reduce(
     (entitiesByCountry, [countryName, sheet]) => ({
       ...entitiesByCountry,
       [countryName]: xlsx.utils
-        .sheet_to_json(sheet)
+        .sheet_to_json(sheet, { raw: false })
         .map(row => processXlsxRow(row, { countryName })),
     }),
     {},

packages/central-server/src/apiV2/requestCountryAccess.js

@@ -32,10 +32,12 @@ const sendRequest = async (userId, models, countries, message, project) => {
       },
       countries,
       message,
-      project: {
-        code: project.code,
-        permissionGroups: project.permission_groups.join(', '),
-      },
+      project: project
+        ? {
+            code: project.code,
+            permissionGroups: project.permission_groups.join(', '),
+          }
+        : null,
       user,
     },
   });

packages/datatrak-web-server/src/routes/SurveysRoute.ts

@@ -25,11 +25,17 @@ export class SurveysRoute extends Route<SurveysRequest> {
     const { fields = [], projectId, countryCode } = query;
     const country = await models.country.findOne({ code: countryCode });
 
-    const surveys = await ctx.services.central.fetchResources(`countries/${country.id}/surveys`, {
+    const queryUrl = countryCode ? `countries/${country.id}/surveys` : 'surveys';
+
+    const filter: Record<string, string> = {};
+
+    if (projectId) {
+      filter.project_id = projectId;
+    }
+
+    const surveys = await ctx.services.central.fetchResources(queryUrl, {
       ...query,
-      filter: {
-        project_id: projectId,
-      },
+      filter,
       columns: fields,
       pageSize: 'ALL', // Override default page size of 100
     });

packages/datatrak-web/src/features/Reports/Inputs/EntitySelectorInput.tsx

@@ -72,7 +72,8 @@ export const EntitySelectorInput = ({ selectedEntityLevel }: EntitySelectorInput
             }
             getOptionLabel={option => option.label}
             placeholder={`Select ${label.toLowerCase()}...`}
-            onInputChange={throttle((_, newValue) => {
+            onInputChange={throttle((e, newValue) => {
+              if (!e?.target) return;
               setSearchText(newValue);
             }, 200)}
             required

packages/devops/scripts/deployment-aws/buildDeployablePackages.sh

@@ -13,6 +13,7 @@ PACKAGES=$(${TUPAIA_DIR}/scripts/bash/getDeployablePackages.sh)
 # Install external dependencies and build internal dependencies
 cd ${TUPAIA_DIR}
 yarn install --immutable
+chmod 755 node_modules/@babel/cli/bin/babel.js
 
 # "postinstall" hook may only fire if the dependency tree changes. This may not happen on feature branches based off dev,
 # because our AMI performs a yarn install already. In this case we can end up in a situation where "internal-depenednecies"

packages/lesmis/src/api/queries/useVitalsData.js

@@ -84,7 +84,7 @@ const useEntityReport = entity =>
   );
 
 const useEntityVitals = entity => {
-  const { data: results, isLoading } = useEntityReport(entity);
+  const { data: results, isInitialLoading: isLoading } = useEntityReport(entity);
 
   return {
     data: results?.data?.[0],

packages/lesmis/src/views/DashboardView.jsx

@@ -68,7 +68,7 @@ const getTabComponent = tabViewType => {
 };
 
 export const DashboardView = React.memo(({ isOpen, setIsOpen }) => {
-  const isFetching = useIsFetching('dashboardReport');
+  const isFetching = useIsFetching(['dashboardReport']);
   const { entityCode } = useUrlParams();
   const { data: entityData } = useEntityData(entityCode);
   // eslint-disable-next-line no-unused-vars

packages/tupaia-web/src/api/queries/useMapOverlays.ts

@@ -49,7 +49,12 @@ const mapOverlayByCode = (
  */
 export const useMapOverlays = (projectCode?: ProjectCode, entityCode?: EntityCode) => {
   const [urlSearchParams] = useSearchParams();
-  const { data, isLoading, error, isFetched } = useQuery(
+  const {
+    data,
+    isInitialLoading: isLoading,
+    error,
+    isFetched,
+  } = useQuery(
     ['mapOverlays', projectCode, entityCode],
     (): Promise<MapOverlaysResponse> => get(`mapOverlays/${projectCode}/${entityCode}`),
     {

packages/tupaia-web/src/features/DashboardItem/DashboardItem.tsx

@@ -85,7 +85,7 @@ export const DashboardItem = ({ dashboardItem }: { dashboardItem: DashboardItemT
 
   const {
     data: report,
-    isLoading,
+    isInitialLoading: isLoading,
     error,
     refetch,
   } = useReport(

packages/tupaia-web/src/features/Map/MapOverlaySelector/MapOverlaySelectorTitle.tsx

@@ -70,7 +70,7 @@ export const MapOverlaySelectorTitle = () => {
     projectCode,
     entityCode,
   );
-  const { isLoading: isLoadingOverlayData, error, refetch } = useMapOverlayMapData();
+  const { isInitialLoading: isLoadingOverlayData, error, refetch } = useMapOverlayMapData();
 
   const { data: entity } = useEntity(projectCode, entityCode);
   const isLoading =