Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2712 curator UI disease name #2730

Merged
merged 6 commits into from
Jun 15, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions verification/curator-service/ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand All @@ -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();
});

Expand Down
9 changes: 6 additions & 3 deletions verification/curator-service/ui/src/components/App/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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']) && (
Expand All @@ -645,6 +647,7 @@ export default function App(): JSX.Element {
<EditCase
id={match.params.id}
onModalClose={onModalClose}
diseaseName={diseaseName}
/>
);
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ it('renders form', async () => {
onModalClose={(): void => {
return;
}}
diseaseName="COVID-19"
/>
</MemoryRouter>,
);
Expand All @@ -82,6 +83,7 @@ test('Check location error message to become red on submit', () => {
onModalClose={(): void => {
return;
}}
diseaseName="COVID-19"
/>
</MemoryRouter>,
);
Expand All @@ -99,6 +101,7 @@ it('can add and remove genome sequencing sections', async () => {
onModalClose={(): void => {
return;
}}
diseaseName="COVID-19"
/>
</MemoryRouter>,
);
Expand Down
3 changes: 2 additions & 1 deletion verification/curator-service/ui/src/components/CaseForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ describe('<EditCase />', () => {
onModalClose={(): void => {
return;
}}
diseaseName="COVID-19"
/>,
);
await waitFor(() => expect(mockedAxios.get).toHaveBeenCalledTimes(6));
Expand Down Expand Up @@ -146,6 +147,7 @@ describe('<EditCase />', () => {
onModalClose={(): void => {
return;
}}
diseaseName="COVID-19"
/>,
);

Expand Down
7 changes: 6 additions & 1 deletion verification/curator-service/ui/src/components/EditCase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import axios from 'axios';
interface Props {
id: string;
onModalClose: () => void;
diseaseName: string;
}

export default function EditCase(props: Props): JSX.Element {
Expand Down Expand Up @@ -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>
);
Expand Down
12 changes: 5 additions & 7 deletions verification/curator-service/ui/src/components/Profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
createNewIcon: {
marginRight: '12px',
},
covidTitle: {
diseaseTitle: {
fontSize: '28px',
marginLeft: '14px',
marginTop: '8px',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}>
Expand All @@ -140,7 +152,7 @@ const MoreInformationLinks = ({
</div>
<div className={classes.link}>
<a
href={MapLink[env]}
href={MapLink[diseaseName][env]}
rel="noopener noreferrer"
target="_blank"
>
Expand Down
29 changes: 23 additions & 6 deletions verification/curator-service/ui/src/constants/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/',
},
};