feat(adminPanel): RN-1228: Link surveys to Datatrak Web

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

@@ -5,6 +5,8 @@
 import { SurveyEditFields } from '../../surveys/SurveyEditFields';
 import { EditSurveyPage } from '../../pages/resources';
 
+const { REACT_APP_DATATRAK_WEB_URL } = import.meta.env;
+
 const RESOURCE_NAME = { singular: 'survey' };
 
 const PERIOD_GRANULARITIES = [
@@ -170,6 +172,11 @@ const SURVEY_COLUMNS = [
   SURVEY_FIELDS.project,
   SURVEY_FIELDS.name,
   SURVEY_FIELDS.code,
+  {
+    Header: 'Project ID',
+    source: 'project.id',
+    show: false,
+  },
   {
     Header: 'Permission group',
     source: 'permission_group.name',
@@ -178,6 +185,14 @@ const SURVEY_COLUMNS = [
     Header: 'Survey group',
     source: 'survey_group.name',
   },
+  {
+    Header: 'Preview',
+    type: 'externalLink',
+    actionConfig: {
+      url: `${REACT_APP_DATATRAK_WEB_URL}/survey?projectId={project.id}`,
+      title: 'Preview survey',
+    },
+  },
   {
     Header: 'Export',
     type: 'export',

packages/admin-panel/src/table/columnTypes/ExternalLinkButton.jsx

@@ -0,0 +1,32 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@material-ui/core';
+import { OpenInNewRounded } from '@material-ui/icons';
+import { ColumnActionButton } from './ColumnActionButton';
+import { makeSubstitutionsInString } from '../../utilities';
+
+export const ExternalLinkButton = ({ actionConfig, row }) => {
+  const fullUrl = makeSubstitutionsInString(actionConfig.url, row.original);
+
+  return (
+    <ColumnActionButton
+      className="link-button"
+      title={actionConfig.title}
+      component={Link}
+      href={fullUrl}
+      target="_blank"
+    >
+      <OpenInNewRounded />
+    </ColumnActionButton>
+  );
+};
+
+ExternalLinkButton.propTypes = {
+  actionConfig: PropTypes.object.isRequired,
+  row: PropTypes.object.isRequired,
+};

packages/admin-panel/src/table/columnTypes/generateConfigForColumnType.jsx

@@ -15,6 +15,7 @@ import { BulkEditButton } from './BulkEditButton';
 import { TestDatabaseConnectionButton } from './TestDatabaseConnectionButton';
 import { QrCodeButton } from './QrCodeButton';
 import { ResubmitSurveyResponseButton } from './ResubmitSurveyResponseButton';
+import { ExternalLinkButton } from './ExternalLinkButton';
 
 const generateCustomCell = (CustomCell, actionConfig, reduxId) => props =>
   <CustomCell actionConfig={actionConfig} reduxId={reduxId} {...props} />;
@@ -38,6 +39,7 @@ const CUSTOM_CELL_COMPONENTS = {
   testDatabaseConnection: TestDatabaseConnectionButton,
   qrCode: QrCodeButton,
   resubmitSurveyResponse: ResubmitSurveyResponseButton,
+  externalLink: ExternalLinkButton,
 };
 
 const BUTTON_COLUMN_TYPES = [
@@ -49,6 +51,7 @@ const BUTTON_COLUMN_TYPES = [
   'qrCode',
   'testDatabaseConnection',
   'bulkEdit',
+  'externalLink',
 ];
 
 export const generateConfigForColumnType = (type, actionConfig, reduxId) => {

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

@@ -4,7 +4,7 @@
  */
 
 const extractParams = template =>
-  [...template.matchAll(/\{(\w+)\}/gi)].map(matchArray => matchArray[1]);
+  [...template.matchAll(/(?<=\{)(.*?)(?=\})/gi)].map(matchArray => matchArray[1]);
 
 export const makeSubstitutionsInString = (template, variables) => {
   const params = extractParams(template);

packages/datatrak-web/src/views/SurveySelectPage/SurveySelectPage.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
 import { DialogActions, Paper, Typography } from '@material-ui/core';
 import { SpinningLoader } from '@tupaia/ui-components';
@@ -102,6 +103,8 @@ const sortAlphanumerically = (a: ListItemType, b: ListItemType) => {
 export const SurveySelectPage = () => {
   const navigate = useNavigate();
   const [selectedSurvey, setSelectedSurvey] = useState<ListItemType | null>(null);
+  const [urlSearchParams] = useSearchParams();
+  const urlProjectId = urlSearchParams.get('projectId');
   const {
     countries,
     selectedCountry,
@@ -112,7 +115,7 @@ export const SurveySelectPage = () => {
   const navigateToSurvey = () => {
     navigate(`/survey/${selectedCountry?.code}/${selectedSurvey?.value}`);
   };
-  const { mutate: updateUser, isLoading: isUpdatingUser } = useEditUser(navigateToSurvey);
+  const { mutateAsync: updateUser, isLoading: isUpdatingUser } = useEditUser();
   const user = useCurrentUserContext();
 
   const { data: surveys, isLoading } = useProjectSurveys(user.projectId, selectedCountry?.name);
@@ -162,7 +165,12 @@ export const SurveySelectPage = () => {
   const handleSelectSurvey = () => {
     if (countryHasUpdated) {
       // update user with new country. If the user goes 'back' and doesn't select a survey, and does not yet have a country selected, that's okay because it will be set whenever they next select a survey
-      updateUser({ countryId: selectedCountry?.id });
+      updateUser(
+        { countryId: selectedCountry?.id },
+        {
+          onSuccess: navigateToSurvey,
+        },
+      );
     } else navigateToSurvey();
   };
 
@@ -173,19 +181,34 @@ export const SurveySelectPage = () => {
     }
   }, [JSON.stringify(surveys)]);
 
-  const showLoader = isLoading || isLoadingCountries || isUpdatingUser;
+  useEffect(() => {
+    const updateUserProject = async () => {
+      if (urlProjectId && user.projectId !== urlProjectId) {
+        updateUser({ projectId: urlProjectId });
+      }
+    };
+    updateUserProject();
+  }, [urlProjectId]);
+
+  const showLoader =
+    isLoading ||
+    isLoadingCountries ||
+    isUpdatingUser ||
+    (urlProjectId && urlProjectId !== user?.projectId); // in this case the user will be updating and all surveys etc will be reloaded, so showing a loader when this is the case means a more seamless experience
   return (
     <Container>
       <HeaderWrapper>
         <div>
           <Typography variant="h1">Select survey</Typography>
           <Subheader>Select a survey from the list below</Subheader>
         </div>
-        <SurveyCountrySelector
-          countries={countries}
-          selectedCountry={selectedCountry}
-          onChangeCountry={updateSelectedCountry}
-        />
+        {!showLoader && (
+          <SurveyCountrySelector
+            countries={countries}
+            selectedCountry={selectedCountry}
+            onChangeCountry={updateSelectedCountry}
+          />
+        )}
       </HeaderWrapper>
       {showLoader ? (
         <LoadingContainer>