2712 curator UI disease name

verification/curator-service/ui/README.md

@@ -2,9 +2,12 @@
 
 This directory contains the code for the UI of the Global.health Curator Portal accessible here:
 
+## COVID-19 Portals
 - [dev](https://dev-data.covid-19.global.health)
 - [qa](https://qa-data.covid-19.global.health)
 - [prod](https://data.covid-19.global.health)
+
+## Development
 - [local dev](http://localhost:3002)
 
 ## Usage

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

@@ -78,10 +78,11 @@ describe('<App />', () => {
         });
 
         render(<App />);
-        expect(mockedAxios.get).toHaveBeenCalledTimes(4);
+        expect(mockedAxios.get).toHaveBeenCalledTimes(5);
         expect(mockedAxios.get).toHaveBeenCalledWith('/auth/profile');
         expect(mockedAxios.get).toHaveBeenCalledWith('/version');
         expect(mockedAxios.get).toHaveBeenCalledWith('/env');
+        expect(mockedAxios.get).toHaveBeenCalledWith('/diseaseName');
         expect(await screen.findByTestId('profile-menu')).toBeInTheDocument();
     });
 
@@ -102,10 +103,11 @@ describe('<App />', () => {
             }
         });
         render(<App />);
-        expect(mockedAxios.get).toHaveBeenCalledTimes(4);
+        expect(mockedAxios.get).toHaveBeenCalledTimes(5);
         expect(mockedAxios.get).toHaveBeenCalledWith('/auth/profile');
         expect(mockedAxios.get).toHaveBeenCalledWith('/version');
         expect(mockedAxios.get).toHaveBeenCalledWith('/env');
+        expect(mockedAxios.get).toHaveBeenCalledWith('/diseaseName');
         expect(screen.queryByTestId('profile-menu')).not.toBeInTheDocument();
     });
 

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

@@ -542,12 +542,11 @@ export default function App(): JSX.Element {
                         ) : (
                             <span className={classes.spacer}></span>
                         )}
-
                         <Typography>
                             <a
                                 className={classes.mapLink}
                                 data-testid="mapLink"
-                                href={MapLink[env]}
+                                href={MapLink[diseaseName][env]}
                                 rel="noopener noreferrer"
                                 target="_blank"
                             >
@@ -634,7 +633,10 @@ export default function App(): JSX.Element {
                         )}
                         {user && hasAnyRole(user, ['curator']) && (
                             <Route path="/cases/new">
-                                <CaseForm onModalClose={onModalClose} />
+                                <CaseForm
+                                    onModalClose={onModalClose}
+                                    diseaseName={diseaseName}
+                                />
                             </Route>
                         )}
                         {user && hasAnyRole(user, ['curator']) && (
@@ -645,6 +647,7 @@ export default function App(): JSX.Element {
                                         <EditCase
                                             id={match.params.id}
                                             onModalClose={onModalClose}
+                                            diseaseName={diseaseName}
                                         />
                                     );
                                 }}

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

@@ -61,6 +61,7 @@ it('renders form', async () => {
                 onModalClose={(): void => {
                     return;
                 }}
+                diseaseName="COVID-19"
             />
         </MemoryRouter>,
     );
@@ -82,6 +83,7 @@ test('Check location error message to become red on submit', () => {
                 onModalClose={(): void => {
                     return;
                 }}
+                diseaseName="COVID-19"
             />
         </MemoryRouter>,
     );
@@ -99,6 +101,7 @@ it('can add and remove genome sequencing sections', async () => {
                 onModalClose={(): void => {
                     return;
                 }}
+                diseaseName="COVID-19"
             />
         </MemoryRouter>,
     );

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

@@ -194,6 +194,7 @@ function initialValuesFromCase(c?: Case): CaseFormValues {
 interface Props {
     initialCase?: Case;
     onModalClose: () => void;
+    diseaseName: string;
 }
 
 // TODO: get 0 and 120 min/max age values from the backend.
@@ -573,7 +574,7 @@ export default function CaseForm(props: Props): JSX.Element {
             title={
                 props.initialCase
                     ? 'Edit case'
-                    : 'Create new COVID-19 line list case'
+                    : `Create new ${props.diseaseName} line list case`
             }
             onModalClose={props.onModalClose}
         >

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

@@ -73,6 +73,7 @@ describe('<EditCase />', () => {
                 onModalClose={(): void => {
                     return;
                 }}
+                diseaseName="COVID-19"
             />,
         );
         await waitFor(() => expect(mockedAxios.get).toHaveBeenCalledTimes(6));
@@ -146,6 +147,7 @@ describe('<EditCase />', () => {
                 onModalClose={(): void => {
                     return;
                 }}
+                diseaseName="COVID-19"
             />,
         );
 

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

@@ -9,6 +9,7 @@ import axios from 'axios';
 interface Props {
     id: string;
     onModalClose: () => void;
+    diseaseName: string;
 }
 
 export default function EditCase(props: Props): JSX.Element {
@@ -40,7 +41,11 @@ export default function EditCase(props: Props): JSX.Element {
                 </MuiAlert>
             )}
             {c && (
-                <CaseForm initialCase={c} onModalClose={props.onModalClose} />
+                <CaseForm
+                    initialCase={c}
+                    onModalClose={props.onModalClose}
+                    diseaseName={props.diseaseName}
+                />
             )}
         </div>
     );

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

@@ -96,13 +96,11 @@ export function ResetAPIKeyForm(): JSX.Element {
                     : 'You have yet to set an API key.'}
             </p>
             <p>
-                Your API key lets you access the{' '}
-                <a href="https://data.covid-19.global.health/api-docs/">
-                    Global.health API
-                </a>{' '}
-                programmatically, from Python, R, or another programming
-                environment. It is unique to you and requests made using the API
-                are associated with your account, so keep your API key secret.
+                Your API key lets you access the&nbsp;
+                <a href="/api-docs/">Global.health API</a> programmatically,
+                from Python, R, or another programming environment. It is unique
+                to you and requests made using the API are associated with your
+                account, so keep your API key secret.
             </p>
             <Button
                 data-testid="reset-api-key"

verification/curator-service/ui/src/components/Sidebar/index.tsx

@@ -105,7 +105,7 @@ const Sidebar = ({ drawerOpen }: SidebarProps): JSX.Element => {
         >
             <div className={classes.drawerContents}>
                 <div className={classes.drawerHeader}></div>
-                <Typography className={classes.covidTitle}>
+                <Typography className={classes.diseaseTitle}>
                     {diseaseName}
                 </Typography>
                 <>

verification/curator-service/ui/src/components/Sidebar/styled.ts

@@ -40,7 +40,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
     createNewIcon: {
         marginRight: '12px',
     },
-    covidTitle: {
+    diseaseTitle: {
         fontSize: '28px',
         marginLeft: '14px',
         marginTop: '8px',

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

@@ -25,9 +25,14 @@ import { SnackbarAlert } from '../SnackbarAlert';
 import { useParams, Link } from 'react-router-dom';
 
 import Helmet from 'react-helmet';
-import { selectVersion, selectEnv } from '../../redux/app/selectors';
+import {
+    selectVersion,
+    selectEnv,
+    selectDiseaseName,
+} from '../../redux/app/selectors';
 import { MapLink } from '../../constants/types';
 import { getReleaseNotesUrl } from '../util/helperFunctions';
+import { getDiseaseName } from '../../redux/app/thunk';
 
 interface StylesProps {
     smallHeight: boolean;
@@ -113,8 +118,15 @@ const MoreInformationLinks = ({
     classes,
     version,
     env,
-}: StyleProps & { version: string; env: string }) => {
+}: StyleProps & { version: string; env: string; diseaseName: string }) => {
+    const dispatch = useAppDispatch();
+
+    useEffect(() => {
+        dispatch(getDiseaseName());
+    }, [dispatch]);
+
     const releaseNotesUrl = getReleaseNotesUrl(version);
+    const diseaseName = useAppSelector(selectDiseaseName);
 
     return (
         <div className={classes.linksContainer}>
@@ -140,7 +152,7 @@ const MoreInformationLinks = ({
                 </div>
                 <div className={classes.link}>
                     <a
-                        href={MapLink[env]}
+                        href={MapLink[diseaseName][env]}
                         rel="noopener noreferrer"
                         target="_blank"
                     >

verification/curator-service/ui/src/constants/types.ts

@@ -17,11 +17,28 @@ interface IMapLink {
     [id: string]: string;
 }
 
+interface IOutbreakEnvironments {
+    [id: string]: IMapLink;
+}
+
 // Link to the map application based on current env
-export const MapLink: IMapLink = {
-    local: 'http://dev-map.covid-19.global.health/',
-    locale2e: 'http://dev-map.covid-19.global.health/',
-    dev: 'http://dev-map.covid-19.global.health/',
-    qa: 'http://qa-map.covid-19.global.health',
-    prod: 'https://map.covid-19.global.health/',
+/*
+ * Note that the initial state of the app is disease name = '',
+ * env = 'prod' (see ../redux/app/slice.ts) and components
+ * that use this lookup table can see that if they mount
+ * before the selector has returned. They will soon update
+ * to show the correct URL, but to avoid a crash we will
+ * supply that value for the map link here.
+ */
+export const MapLink: IOutbreakEnvironments = {
+    'COVID-19': {
+        local: 'http://dev-map.covid-19.global.health/',
+        locale2e: 'http://dev-map.covid-19.global.health/',
+        dev: 'http://dev-map.covid-19.global.health/',
+        qa: 'http://qa-map.covid-19.global.health',
+        prod: 'https://map.covid-19.global.health/',
+    },
+    '': {
+        prod: 'https://map.covid-19.global.health/',
+    },
 };