#2011 Map links to dev or prod based on current env (#2580)

* setup dev and prod map link based on service env

* Updated and fixed tests

* Added MapLink object that contains links for each env

verification/curator-service/api/src/index.ts

@@ -414,6 +414,11 @@ app.get('/version', (req: Request, res: Response) => {
     res.status(200).send(env.CURATOR_VERSION);
 });
 
+// get current environment
+app.get('/env', (req: Request, res: Response) => {
+    res.status(200).send(env.SERVICE_ENV);
+});
+
 // API documentation.
 const swaggerDocument = YAML.load('./openapi/openapi.yaml');
 app.use(

verification/curator-service/ui/src/components/App/App.test.tsx

@@ -18,6 +18,7 @@ const initialLoggedInState: RootState = {
         searchQuery: '',
         filterBreadcrumbs: [],
         version: '1.0',
+        env: 'local',
     },
     filters: {
         countryList: [],
@@ -43,12 +44,10 @@ const initialLoggedInState: RootState = {
             message: '',
         },
     },
-    acknowledgement: {
+    acknowledgment: {
         acknowledgmentData: [],
         error: undefined,
         isLoading: false,
-        totalSources: 0,
-        nextPage: undefined,
     },
 };
 
@@ -70,9 +69,10 @@ describe('<App />', () => {
         mockedAxios.get.mockResolvedValue(axiosResponse);
 
         render(<App />);
-        expect(mockedAxios.get).toHaveBeenCalledTimes(2);
+        expect(mockedAxios.get).toHaveBeenCalledTimes(3);
         expect(mockedAxios.get).toHaveBeenCalledWith('/auth/profile');
         expect(mockedAxios.get).toHaveBeenCalledWith('/version');
+        expect(mockedAxios.get).toHaveBeenCalledWith('/env');
         expect(await screen.findByTestId('profile-menu')).toBeInTheDocument();
     });
 
@@ -85,9 +85,10 @@ describe('<App />', () => {
         };
         mockedAxios.get.mockResolvedValue(axiosResponse);
         render(<App />);
-        expect(mockedAxios.get).toHaveBeenCalledTimes(2);
+        expect(mockedAxios.get).toHaveBeenCalledTimes(3);
         expect(mockedAxios.get).toHaveBeenCalledWith('/auth/profile');
         expect(mockedAxios.get).toHaveBeenCalledWith('/version');
+        expect(mockedAxios.get).toHaveBeenCalledWith('/env');
         expect(screen.queryByTestId('profile-menu')).not.toBeInTheDocument();
     });
 
@@ -105,12 +106,21 @@ describe('<App />', () => {
             config: {},
             headers: {},
         };
-        mockedAxios.get.mockResolvedValue(axiosResponse);
-        render(<App />);
+        mockedAxios.get.mockImplementation((url) => {
+            if (url === '/env') {
+                return Promise.resolve({ status: 200, data: 'local' });
+            } else {
+                return Promise.resolve(axiosResponse);
+            }
+        });
+        render(<App />, {
+            initialState: initialLoggedInState,
+            initialRoute: '/cases',
+        });
 
         expect(await screen.findByTestId('mapLink')).toHaveAttribute(
             'href',
-            'https://map.covid-19.global.health/',
+            'http://dev-map.covid-19.global.health/',
         );
         expect(await screen.findByTestId('dictionaryButton')).toHaveAttribute(
             'href',

verification/curator-service/ui/src/components/App/App.tsx

@@ -54,15 +54,16 @@ import clsx from 'clsx';
 import { useLastLocation } from 'react-router-last-location';
 import PolicyLink from '../PolicyLink';
 import { useCookieBanner } from '../../hooks/useCookieBanner';
-import { SortBy, SortByOrder } from '../../constants/types';
+import { SortBy, SortByOrder, MapLink } from '../../constants/types';
 import { URLToSearchQuery } from '../util/searchQuery';
 import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import {
     setSearchQuery,
     setFilterBreadcrumbs,
     deleteFilterBreadcrumbs,
 } from '../../redux/app/slice';
-import { selectIsLoading } from '../../redux/app/selectors';
+import { selectIsLoading, selectEnv } from '../../redux/app/selectors';
+import { getEnv } from '../../redux/app/thunk';
 import { getUserProfile, logout } from '../../redux/auth/thunk';
 import { selectUser } from '../../redux/auth/selectors';
 import { User } from '../../api/models/User';
@@ -410,8 +411,14 @@ export default function App(): JSX.Element {
         return null;
     };
 
+    // Get current env
+    useEffect(() => {
+        dispatch(getEnv());
+    }, [dispatch]);
+
     const isLoadingUser = useAppSelector(selectIsLoading);
     const user = useAppSelector(selectUser);
+    const env = useAppSelector(selectEnv);
 
     const showMenu = useMediaQuery(theme.breakpoints.up('sm'));
     const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
@@ -619,7 +626,7 @@ export default function App(): JSX.Element {
                             <a
                                 className={classes.mapLink}
                                 data-testid="mapLink"
-                                href="https://map.covid-19.global.health/"
+                                href={MapLink[env]}
                                 rel="noopener noreferrer"
                                 target="_blank"
                             >

verification/curator-service/ui/src/components/AutomatedSourceForm.test.tsx

@@ -16,8 +16,10 @@ const initialLoggedInState: RootState = {
         isLoading: false,
         searchQuery: '',
         filterBreadcrumbs: [],
+        version: '1.0',
+        env: 'local',
     },
-    filtersReducer: {
+    filters: {
         countryList: [],
         error: '',
         isLoading: false,
@@ -35,6 +37,11 @@ const initialLoggedInState: RootState = {
             message: '',
         },
     },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 describe('<AutomatedSourceForm />', () => {

verification/curator-service/ui/src/components/LinelistTable.test.tsx

@@ -36,8 +36,9 @@ const initialState: RootState = {
         searchQuery: '',
         filterBreadcrumbs: [],
         version: '1.0',
+        env: 'local',
     },
-    filtersReducer: {
+    filters: {
         countryList: [],
         isLoading: false,
         error: '',
@@ -61,6 +62,11 @@ const initialState: RootState = {
             message: '',
         },
     },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 describe('<LinelistTable />', () => {

verification/curator-service/ui/src/components/Profile.test.tsx

@@ -17,8 +17,10 @@ const initialLoggedInState: RootState = {
         isLoading: false,
         searchQuery: '',
         filterBreadcrumbs: [],
+        version: '1.0',
+        env: 'local',
     },
-    filtersReducer: {
+    filters: {
         countryList: [],
         error: '',
         isLoading: false,
@@ -42,15 +44,22 @@ const initialLoggedInState: RootState = {
             message: '',
         },
     },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 const loggedInWithApiKeyState: RootState = {
     app: {
         isLoading: false,
         searchQuery: '',
         filterBreadcrumbs: [],
+        version: '1.0',
+        env: 'local',
     },
-    filtersReducer: {
+    filters: {
         countryList: [],
         error: '',
         isLoading: false,
@@ -75,13 +84,20 @@ const loggedInWithApiKeyState: RootState = {
             message: '',
         },
     },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 const noUserInfoState: RootState = {
     app: {
         isLoading: false,
         searchQuery: '',
         filterBreadcrumbs: [],
+        version: '1.0',
+        env: 'local',
     },
     auth: {
         isLoading: false,
@@ -102,11 +118,16 @@ const noUserInfoState: RootState = {
             message: '',
         },
     },
-    filtersReducer: {
+    filters: {
         countryList: [],
         error: '',
         isLoading: false,
     },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 describe('<Profile />', () => {

verification/curator-service/ui/src/components/Users.test.tsx

@@ -33,6 +33,8 @@ const initialLoggedInState: RootState = {
         isLoading: false,
         searchQuery: '',
         filterBreadcrumbs: [],
+        version: '1.0',
+        env: 'local',
     },
     auth: {
         changePasswordResponse: undefined,
@@ -53,7 +55,12 @@ const initialLoggedInState: RootState = {
             message: '',
         },
     },
-    filtersReducer: { countryList: [], isLoading: false, error: undefined },
+    filters: { countryList: [], isLoading: false, error: undefined },
+    acknowledgment: {
+        isLoading: false,
+        error: undefined,
+        acknowledgmentData: [],
+    },
 };
 
 describe('<Users />', () => {

verification/curator-service/ui/src/components/landing-page/LandingPage.tsx

@@ -26,7 +26,8 @@ import { useParams, Link } from 'react-router-dom';
 
 import Helmet from 'react-helmet';
 import { getVersion } from '../../redux/app/thunk';
-import { selectVersion } from '../../redux/app/selectors';
+import { selectVersion, selectEnv } from '../../redux/app/selectors';
+import { MapLink } from '../../constants/types';
 
 interface StylesProps {
     smallHeight: boolean;
@@ -108,7 +109,8 @@ interface StyleProps {
 const MoreInformationLinks = ({
     classes,
     version,
-}: StyleProps & { version: string }) => {
+    env,
+}: StyleProps & { version: string; env: string }) => {
     return (
         <div className={classes.linksContainer}>
             <div>
@@ -125,7 +127,7 @@ const MoreInformationLinks = ({
                 </div>
                 <div className={classes.link}>
                     <a
-                        href="https://map.covid-19.global.health/"
+                        href={MapLink[env]}
                         rel="noopener noreferrer"
                         target="_blank"
                     >
@@ -191,6 +193,7 @@ const LandingPage = (): JSX.Element => {
     );
     const { isOpen, message } = useAppSelector(selectSnackbar);
     const version = useAppSelector(selectVersion);
+    const env = useAppSelector(selectEnv);
 
     // Url parameters from reset password link
     const { token, id } = useParams<UrlParams>();
@@ -223,7 +226,7 @@ const LandingPage = (): JSX.Element => {
     // retrieve the app version from the curator service
     useEffect(() => {
         dispatch(getVersion());
-    });
+    }, [dispatch]);
 
     return (
         <>
@@ -243,7 +246,11 @@ const LandingPage = (): JSX.Element => {
                         global data repository with open access to real-time
                         epidemiological anonymized line list data.
                     </Typography>
-                    <MoreInformationLinks classes={classes} version={version} />
+                    <MoreInformationLinks
+                        classes={classes}
+                        version={version}
+                        env={env}
+                    />
                 </div>
 
                 {registrationScreenOn && !changePasswordScreenOn ? (