feat(datatrakWeb): RN-1243: resubmit surveys via Datatrak Web

packages/admin-panel/.env.example

@@ -3,3 +3,4 @@ REACT_APP_CLIENT_BASIC_AUTH_HEADER=
 REACT_APP_VIZ_BUILDER_API_URL=
 SKIP_PREFLIGHT_CHECK=
 PARSE_LINK_HEADER_MAXLEN=
+REACT_APP_DATATRAK_WEB_URL=

packages/admin-panel/src/VizBuilderApp/api/queries/useEntities.js

@@ -12,7 +12,7 @@ export const useEntities = search =>
     ['entities', search],
     async () => {
       const endpoint = stringifyQuery(undefined, `entities`, {
-        columns: JSON.stringify(['name', 'code', 'id']),
+        columns: JSON.stringify(['name', 'code', 'id', 'country_code']),
         filter: JSON.stringify({
           name: { comparator: 'ilike', comparisonValue: `%${search}%`, castAs: 'text' },
         }),

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

@@ -0,0 +1,26 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import { useMutation, useQueryClient } from 'react-query';
+import { useApiContext } from '../../utilities/ApiProvider';
+
+export const useEditSurveyResponse = (surveyResponseId, updatedSurveyResponse) => {
+  const queryClient = useQueryClient();
+  const api = useApiContext();
+  return useMutation(
+    [`surveyResponseEdit`, surveyResponseId, updatedSurveyResponse],
+    () => {
+      return api.put(`surveyResponses/${surveyResponseId}`, null, updatedSurveyResponse);
+    },
+    {
+      throwOnError: true,
+      onSuccess: async () => {
+        // invalidate the survey response data
+        await queryClient.invalidateQueries(['surveyResubmitData', surveyResponseId]);
+        return 'completed';
+      },
+    },
+  );
+};

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportIcon from '@material-ui/icons/GetApp';
+import { ExportIcon } from '../icons';
 import { makeSubstitutionsInString } from '../utilities';
 import { useApiContext } from '../utilities/ApiProvider';
 import { ColumnActionButton } from '../table/columnTypes/ColumnActionButton';

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

@@ -78,20 +78,6 @@ const DEFAULT_FIELDS = [
       maxWidth: 480,
     },
   },
-  {
-    Header: 'Config',
-    source: 'config',
-    type: 'jsonTooltip',
-    editConfig: {
-      type: 'jsonEditor',
-      labelTooltip: 'eg. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
-    },
-  },
-  {
-    Header: 'Sort',
-    source: 'sort_order',
-    width: 80,
-  },
 ];
 
 const CREATE_FIELDS = [
@@ -101,6 +87,11 @@ const CREATE_FIELDS = [
     required: true,
   },
   ...DEFAULT_FIELDS,
+  {
+    Header: 'Sort',
+    source: 'sort_order',
+    width: 80,
+  },
 ];
 
 const EDIT_FIELDS = [
@@ -111,6 +102,20 @@ const EDIT_FIELDS = [
     required: true,
   },
   ...DEFAULT_FIELDS,
+  {
+    Header: 'Config',
+    source: 'config',
+    type: 'jsonTooltip',
+    editConfig: {
+      type: 'jsonEditor',
+      labelTooltip: 'eg. { "tileSets": "osm,satellite,terrain", "permanentRegionLabels": true }',
+    },
+  },
+  {
+    Header: 'Sort',
+    source: 'sort_order',
+    width: 80,
+  },
 ];
 
 const NEW_PROJECT_COLUMNS = [

packages/admin-panel/src/routes/surveys/surveyResponses.js → packages/admin-panel/src/routes/surveys/surveyResponses.jsx

@@ -2,21 +2,45 @@
  * Tupaia
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-
+import React from 'react';
 import { getBrowserTimeZone } from '@tupaia/utils';
 import moment from 'moment';
-import { ApprovalStatus } from '@tupaia/types';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { SurveyResponsesExportModal } from '../../importExport';
 import { getPluralForm } from '../../pages/resources/resourceName';
+import { OutdatedFilter } from '../../table/columnTypes/columnFilters';
 
 const RESOURCE_NAME = { singular: 'survey response' };
 
-// Don't include not_required as an editable option because it can lead to
-// mis-matches between surveys and survey responses
-export const APPROVAL_STATUS_TYPES = Object.values(ApprovalStatus).map(type => ({
-  label: type,
-  value: type,
-}));
+const GREEN = '#47CA80';
+const GREY = '#898989';
+
+const Pill = styled.span`
+  background-color: ${({ $color }) => {
+    return `${$color}33`; // slightly transparent
+  }};
+  border-radius: 1.5rem;
+  padding: 0.3rem 0.9rem;
+  color: ${({ $color }) => $color};
+  .cell-content:has(&) > div {
+    overflow: visible;
+  }
+`;
+
+const ResponseStatusPill = ({ value }) => {
+  const text = value ? 'Outdated' : 'Current';
+  const color = value ? GREY : GREEN;
+  return <Pill $color={color}>{text}</Pill>;
+};
+
+ResponseStatusPill.propTypes = {
+  value: PropTypes.bool,
+};
+
+ResponseStatusPill.defaultProps = {
+  value: false,
+};
 
 const surveyName = {
   Header: 'Survey',
@@ -56,9 +80,13 @@ const dateOfData = {
   },
 };
 
-const approvalStatus = {
-  Header: 'Approval status',
-  source: 'approval_status',
+const responseStatus = {
+  Header: 'Response status',
+  source: 'outdated',
+  Filter: OutdatedFilter,
+  width: 180,
+  // eslint-disable-next-line react/prop-types
+  Cell: ({ value }) => <ResponseStatusPill value={value} />,
 };
 
 const entityName = {
@@ -80,7 +108,7 @@ export const SURVEY_RESPONSE_COLUMNS = [
   assessorName,
   date,
   dateOfData,
-  approvalStatus,
+  responseStatus,
   {
     Header: 'Export',
     type: 'export',

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

@@ -6,6 +6,8 @@ import { SurveyEditFields } from '../../surveys/SurveyEditFields';
 import { QUESTION_FIELDS as BASE_QUESTION_FIELDS } from './questions';
 import { EditSurveyPage } from '../../pages/resources';
 
+const { REACT_APP_DATATRAK_WEB_URL } = import.meta.env;
+
 const RESOURCE_NAME = { singular: 'survey' };
 
 const PERIOD_GRANULARITIES = [
@@ -175,6 +177,16 @@ const SURVEY_COLUMNS = [
   SURVEY_FIELDS.project,
   SURVEY_FIELDS.name,
   SURVEY_FIELDS.code,
+  {
+    Header: 'Project ID',
+    source: 'project.id',
+    show: false,
+  },
+  {
+    Header: 'countries',
+    source: 'countryCodes',
+    show: false,
+  },
   {
     Header: 'Permission group',
     source: 'permission_group.name',
@@ -183,6 +195,19 @@ const SURVEY_COLUMNS = [
     Header: 'Survey group',
     source: 'survey_group.name',
   },
+  {
+    Header: 'View',
+    type: 'externalLink',
+    actionConfig: {
+      generateUrl: row => {
+        const { code, countryCodes } = row;
+        if (!countryCodes || !countryCodes.some(countryCode => !!countryCode)) return null;
+        const countryCodeToUse = countryCodes.includes('DL') ? 'DL' : countryCodes[0];
+        return `${REACT_APP_DATATRAK_WEB_URL}/survey/${countryCodeToUse}/${code}/1`;
+      },
+      title: 'View in DataTrak',
+    },
+  },
   {
     Header: 'Export',
     type: 'export',