prod deploy (#321)

* Load Google Fonts inline in index.html (#310) * Add missing 'Typography' text wrappers (#311) * Allow horizontal scroll when clustergrammer overflows (#312) * Add a meta description and valid robots.txt. (#314) * Fix profile menu navigation (#315) * Update test to illustrate bug * Fix test * Disable the 'explore the data' button for unapproved users (#316) * Address TrialCard feedback (#318) * 'back to file browser' button preserving filter state (#319) * Reword assay / analysis pages (#320)
CIMAC-CIDC · Nov 13, 2020 · aeac9ef · aeac9ef
1 parent cb004b3
commit aeac9ef
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 47 deletions.
diff --git a/src/components/browse-data/files/FileDetailsPage.test.tsx b/src/components/browse-data/files/FileDetailsPage.test.tsx
@@ -7,6 +7,7 @@ import {
 import FileDetailsPage, { AdditionalMetadataTable } from "./FileDetailsPage";
 import { renderAsRouteComponent } from "../../../../test/helpers";
 import { fireEvent, act, render, cleanup } from "@testing-library/react";
+import history from "../../identity/History";
 jest.mock("../../../api/api");
 jest.mock("../../../util/useRawFile");
 
@@ -231,3 +232,27 @@ describe("related files", () => {
         expect(downloadButton?.disabled).toBe(false);
     });
 });
+
+test("'back to file browser' button has expected href", async () => {
+    getSingleFile.mockResolvedValue(file);
+    const buttonText = /back to file browser/i;
+
+    // If there's no filter state, the button links to the file browser by default
+    const noState = renderFileDetails();
+    const noStateButton = await noState.findByText(buttonText);
+    expect(noStateButton.closest("a").href).toBe(
+        "http://localhost/browse-data?file_view=1"
+    );
+    cleanup();
+
+    // If there's filter state, the button includes that state in its href
+    const route = "/browse-data?some=1&filter=2&params=3";
+    history.push(`/browse-data/${file.id}`, { prevPath: route });
+    const withState = renderAsRouteComponent(FileDetailsPage, {
+        path: "/browse-data/:fileId",
+        authData: { state: "logged-in", userInfo: { idToken } },
+        history
+    });
+    const withStateButton = await withState.findByText(buttonText);
+    expect(withStateButton.closest("a").href).toBe(`http://localhost${route}`);
+});
diff --git a/src/components/browse-data/files/FileDetailsPage.tsx b/src/components/browse-data/files/FileDetailsPage.tsx
@@ -20,7 +20,7 @@ import {
 } from "@material-ui/core";
 import { withIdToken } from "../../identity/AuthProvider";
 import { DataFile } from "../../../model/file";
-import { RouteComponentProps } from "react-router";
+import { RouteComponentProps, StaticContext } from "react-router";
 import {
     ArrowLeft,
     Category,
@@ -337,9 +337,13 @@ const RelatedFiles: React.FC<{ file: DataFile; token: string }> = ({
     );
 };
 
-const FileDetailsPage: React.FC<RouteComponentProps<{
-    fileId: string;
-}> & { token: string }> = ({ token, ...props }) => {
+const FileDetailsPage: React.FC<RouteComponentProps<
+    {
+        fileId: string;
+    },
+    StaticContext,
+    { prevPath?: string }
+> & { token: string }> = ({ token, ...props }) => {
     const rootClasses = useRootStyles();
 
     const [file, setFile] = React.useState<DataFile | undefined>(undefined);
@@ -363,7 +367,10 @@ const FileDetailsPage: React.FC<RouteComponentProps<{
                     variant="outlined"
                     startIcon={<ArrowLeft />}
                     component={RRLink}
-                    to="/browse-data?file_view=1"
+                    to={
+                        props.history.location.state?.prevPath ||
+                        "/browse-data?file_view=1"
+                    }
                 >
                     back to file browser
                 </Button>

diff --git a/src/components/browse-data/files/FileTable.test.tsx b/src/components/browse-data/files/FileTable.test.tsx
@@ -5,7 +5,8 @@ import { renderWithRouter } from "../../../../test/helpers";
 import { getFiles, getFilelist } from "../../../api/api";
 import { DataFile } from "../../../model/file";
 import { AuthContext } from "../../identity/AuthProvider";
-import FileTable, { filterParams, sortParams } from "./FileTable";
+import FileTable, { filterParams, ObjectURL, sortParams } from "./FileTable";
+import history from "../../identity/History";
 jest.mock("../../../api/api");
 
 test("filterParams", () => {
@@ -31,7 +32,7 @@ test("sortParams", () => {
     });
 });
 
-const files: Array<Partial<DataFile>> = range(0, 5).map(id => ({
+const files: DataFile[] = range(0, 5).map(id => ({
     id,
     object_url: `file/url/${id}`,
     trial_id: "test-trial",
@@ -98,3 +99,13 @@ it("handles batch download requests", async () => {
     fireEvent.click(getByText(/download filelist.tsv/i));
     expect(getFilelist).toHaveBeenCalledWith("test-token", [0, 2, 4]);
 });
+
+test("ObjectURL provides filter state to file details page links", async () => {
+    const route = "/browse-files?some=1&filter=2&params=3";
+    history.push(route);
+    const { getByText } = renderWithRouter(<ObjectURL file={files[0]} />, {
+        history
+    });
+    fireEvent.click(getByText(/url/i));
+    expect(history.location.state.prevPath).toBe(route);
+});
diff --git a/src/components/browse-data/files/FileTable.tsx b/src/components/browse-data/files/FileTable.tsx
@@ -21,6 +21,7 @@ import {
     formatDate,
     formatFileSize
 } from "../../../util/formatters";
+import { useHistory } from "react-router-dom";
 
 const fileQueryDefaults = {
     page_size: 50
@@ -116,6 +117,28 @@ const BatchDownloadButton: React.FC<{
     );
 };
 
+export const ObjectURL: React.FC<{ file: DataFile }> = ({ file }) => {
+    const history = useHistory();
+    const paths = file.object_url.split("/");
+    return (
+        <MuiRouterLink
+            to={`/browse-data/${file.id}`}
+            state={{
+                prevPath: history.location.pathname + history.location.search
+            }}
+        >
+            <Grid container>
+                {paths.map((p, i) => (
+                    <Grid key={p} item>
+                        {p}
+                        {i === paths.length - 1 ? "" : "/"}
+                    </Grid>
+                ))}
+            </Grid>
+        </MuiRouterLink>
+    );
+};
+
 const CANCEL_MESSAGE = "cancelling stale filter request";
 
 const FileTable: React.FC<IFileTableProps & { token: string }> = props => {
@@ -220,22 +243,6 @@ const FileTable: React.FC<IFileTableProps & { token: string }> = props => {
         // eslint-disable-next-line
     }, [props.token, filters, sortHeader, queryPage, setQueryPage]);
 
-    const formatObjectURL = (row: DataFile) => {
-        const paths = row.object_url.split("/");
-        return (
-            <MuiRouterLink to={`/browse-data/${row.id}`}>
-                <Grid container>
-                    {paths.map((p, i) => (
-                        <Grid key={p} item>
-                            {p}
-                            {i === paths.length - 1 ? "" : "/"}
-                        </Grid>
-                    ))}
-                </Grid>
-            </MuiRouterLink>
-        );
-    };
-
     return (
         <Grid container direction="column" spacing={1}>
             <Grid item>
@@ -281,7 +288,7 @@ const FileTable: React.FC<IFileTableProps & { token: string }> = props => {
                             return (
                                 <>
                                     <TableCell>
-                                        {formatObjectURL(row)}
+                                        <ObjectURL file={row} />
                                     </TableCell>
                                     <TableCell>{row.trial_id}</TableCell>
                                     <TableCell>{row.file_ext}</TableCell>

diff --git a/src/components/browse-data/trials/TrialTable.test.tsx b/src/components/browse-data/trials/TrialTable.test.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { range } from "lodash";
 import { renderWithRouter } from "../../../../test/helpers";
 import { getTrials } from "../../../api/api";
 import { AuthContext } from "../../identity/AuthProvider";
 import { FilterContext } from "../shared/FilterProvider";
-import TrialTable from "./TrialTable";
+import TrialTable, { TrialCard } from "./TrialTable";
 jest.mock("../../../api/api");
 
 const fileBundle = {
@@ -94,7 +94,7 @@ it("renders trials with no filters applied", async () => {
     expect(queryAllByText(new RegExp("nice biobank", "i")).length).toBe(10);
 
     // renders batch download interface
-    expect(queryAllByText(/2 clinical overview files/i).length).toBe(10);
+    expect(queryAllByText(/2 participant\/sample files/i).length).toBe(10);
     expect(queryAllByText(/cytof/i).length).toBe(10);
     expect(queryAllByText(/4 files/i).length).toBe(10);
     expect(queryAllByText(/3 files/i).length).toBe(10);
@@ -157,3 +157,14 @@ it("filters by trial id", async () => {
     await findByText(/test-trial-0/i);
     expect(getTrials).toHaveBeenCalled();
 });
+
+test("TrialCard links out to clinicaltrials.gov", () => {
+    const { getByText } = render(
+        // @ts-ignore
+        <TrialCard token="foo" trial={trialsPageOne[0]} />
+    );
+    const nctLink = getByText(new RegExp(metadata.nct_id, "i")).closest("a");
+    expect(nctLink.href).toBe(
+        "https://clinicaltrials.gov/ct2/show/NCT11111111"
+    );
+});
diff --git a/src/components/browse-data/trials/TrialTable.tsx b/src/components/browse-data/trials/TrialTable.tsx
@@ -13,7 +13,8 @@ import {
     TableCell,
     TableHead,
     Divider,
-    withStyles
+    withStyles,
+    Link
 } from "@material-ui/core";
 import { getTrials } from "../../../api/api";
 import { IFileBundle, Trial } from "../../../model/trial";
@@ -170,10 +171,10 @@ const AssayButtonTable: React.FC<{
     );
 };
 
-const LabelAndValue: React.FC<{ label: string; value: string }> = ({
-    label,
-    value
-}) => {
+const LabelAndValue: React.FC<{
+    label: string;
+    value: string | React.ReactElement;
+}> = ({ label, value }) => {
     return (
         <Grid container alignItems="center">
             <Grid item>
@@ -190,7 +191,7 @@ const LabelAndValue: React.FC<{ label: string; value: string }> = ({
     );
 };
 
-const TrialCard: React.FC<ITrialCardProps> = ({ trial, token }) => {
+export const TrialCard: React.FC<ITrialCardProps> = ({ trial, token }) => {
     const {
         participants,
         trial_name,
@@ -227,9 +228,18 @@ const TrialCard: React.FC<ITrialCardProps> = ({ trial, token }) => {
             </Typography>
             <Grid container spacing={1}>
                 {[
-                    ["nct number", nct_id, 12],
                     [
-                        "principal investigator(s)",
+                        "nct number",
+                        <Link
+                            href={`https://clinicaltrials.gov/ct2/show/${nct_id}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            {nct_id}
+                        </Link>
+                    ],
+                    [
+                        "cimac investigator(s)",
                         lead_cimac_pis ? lead_cimac_pis.join(", ") : undefined,
                         12
                     ],
@@ -253,10 +263,10 @@ const TrialCard: React.FC<ITrialCardProps> = ({ trial, token }) => {
     const datasets = (
         <>
             <Typography variant="overline" color="textSecondary">
-                Clinical Data
+                Clinical/Sample Data
             </Typography>
             <BatchDownloadButton token={token} ids={clinicalIds}>
-                {clinicalIds.length} clinical overview files
+                {clinicalIds.length} participant/sample files
             </BatchDownloadButton>
             {!isEmpty(assayBundle) && (
                 <Box paddingTop={1}>

diff --git a/src/components/generic/MuiRouterLink.tsx b/src/components/generic/MuiRouterLink.tsx
@@ -10,6 +10,7 @@ const useStyles = makeStyles({
 const MuiRouterLink: React.FC<RouteComponentProps & {
     LinkProps?: LinkProps;
     to: string;
+    state?: any;
 }> = props => {
     const classes = useStyles();
     return (
@@ -19,7 +20,7 @@ const MuiRouterLink: React.FC<RouteComponentProps & {
             href={props.to}
             onClick={(e: any) => {
                 e.preventDefault();
-                props.history.push(props.to);
+                props.history.push(props.to, props.state);
             }}
         >
             {props.children}

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -266,15 +266,15 @@ const Header: React.FunctionComponent<RouteComponentProps> = props => {
                                             value: "/browse-data"
                                         },
                                         user.showAssays && {
-                                            label: "assays",
+                                            label: "transfer assays",
                                             value: "/assays"
                                         },
                                         user.showAnalyses && {
-                                            label: "analyses",
+                                            label: "transfer analyses",
                                             value: "/analyses"
                                         },
                                         user.showManifests && {
-                                            label: "manifests",
+                                            label: "transfer manifests",
                                             value: "/manifests"
                                         },
                                         {

diff --git a/src/components/pipelines/PipelinesPage.tsx b/src/components/pipelines/PipelinesPage.tsx
@@ -68,7 +68,7 @@ const PipelinesPage: React.FC<RouteComponentProps> = props => {
                     <Grid item xs={11}>
                         <List style={{ paddingTop: 0 }}>
                             <ListSubheader disableSticky>
-                                Pipeline Docs
+                                Pipelines
                             </ListSubheader>
                             <DocsListItem
                                 label={"RIMA (RNA-seq IMmune Analysis)"}

diff --git a/src/components/upload-docs/UploadDocsPages.tsx b/src/components/upload-docs/UploadDocsPages.tsx
@@ -140,15 +140,13 @@ const UploadDocsPage: React.FunctionComponent<IUploadDocsPageProps> = props => {
                 <Grid container>
                     <Grid item xs={11}>
                         <List>
-                            <ListSubheader disableSticky>
-                                General Overview
-                            </ListSubheader>
                             <DocsListItem
-                                label={"CLI Instructions"}
+                                label={"The CIDC CLI"}
                                 path={CLIInstructionsSitePath}
                             />
                             <ListSubheader disableSticky>
-                                Assay-Specific Docs
+                                {props.uploadType[0].toUpperCase() +
+                                    props.uploadType.slice(1)}
                             </ListSubheader>
                             {map(pathConfigs, (config, path) => {
                                 return (