Feature/design improvements

cypress/integration/home.spec.js

@@ -12,7 +12,6 @@ describe("Home e2e", function () {
     cy.contains("Your Published Submissions").should("be.visible")
 
     cy.get("ul.MuiList-root").eq(0).children().should("have.length.at.most", 5)
-    cy.get("ul.MuiList-root").eq(1).children().should("have.length.at.most", 5)
 
     // Create a new Unpublished folder
     cy.get("button").contains("Create Submission").click()
@@ -82,16 +81,6 @@ describe("Home e2e", function () {
     cy.contains("Your draft submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close unpublished folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 
   it("create a published folder, navigate to see folder details, delete object inside folder, navigate back to Overview submissions", () => {
@@ -157,15 +146,5 @@ describe("Home e2e", function () {
     cy.contains("Your published submissions")
       .should("be.visible")
       .then($el => $el.click())
-
-    // Close published folders list
-    cy.get("div.MuiCardActions-root")
-      .contains("Close")
-      .should("be.visible")
-      .then($btn => $btn.click())
-
-    // Check Overview submissions page is shown
-    cy.contains("Your Draft Submissions").should("be.visible")
-    cy.contains("Your Published Submissions").should("be.visible")
   })
 })

docker-compose.yml

@@ -16,8 +16,8 @@ services:
     tty: true
     networks:
       # Change if using different network for backend container
-      - metadatasubmitter_default
+      - metadata-submitter_default
 
 networks:
-  metadatasubmitter_default:
+  metadata-submitter_default:
     external: true

src/App.js

@@ -6,6 +6,8 @@ import CssBaseline from "@material-ui/core/CssBaseline"
 import { makeStyles } from "@material-ui/core/styles"
 import { Switch, Route, useLocation } from "react-router-dom"
 
+import SelectedFolderDetails from "components/Home/SelectedFolderDetails"
+import SubmissionFolderList from "components/Home/SubmissionFolderList"
 import Nav from "components/Nav"
 import Page401 from "views/ErrorPages/Page401"
 import Page403 from "views/ErrorPages/Page403"
@@ -79,6 +81,26 @@ const App = (): React$Element<typeof React.Fragment> => {
             <Home />
           </Container>
         </Route>
+        <Route exact path="/home/drafts">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SubmissionFolderList />
+          </Container>
+        </Route>
+        <Route path="/home/drafts/:folderId">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SelectedFolderDetails />
+          </Container>
+        </Route>
+        <Route exact path="/home/published">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SubmissionFolderList />
+          </Container>
+        </Route>
+        <Route path="/home/published/:folderId">
+          <Container component="main" maxWidth="md" className={classes.content}>
+            <SelectedFolderDetails />
+          </Container>
+        </Route>
         <Route path="/error401">
           <Page401 />
         </Route>

src/__tests__/WizardAddObjectStep.test.js

@@ -1,12 +1,14 @@
 import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
+import { ThemeProvider } from "@material-ui/core/styles"
 import { render, screen, act } from "@testing-library/react"
 import { Provider } from "react-redux"
 import configureStore from "redux-mock-store"
 import { toMatchDiffSnapshot } from "snapshot-diff"
 
 import WizardAddObjectStep from "../components/NewDraftWizard/WizardSteps/WizardAddObjectStep"
+import CSCtheme from "../theme"
 
 import { ObjectSubmissionTypes, ObjectSubmissionsArray, ObjectTypes } from "constants/wizardObject"
 
@@ -72,7 +74,9 @@ describe("WizardAddObjectStep", () => {
         })
         render(
           <Provider store={store}>
-            <WizardAddObjectStep />
+            <ThemeProvider theme={CSCtheme}>
+              <WizardAddObjectStep />
+            </ThemeProvider>
           </Provider>
         )
         expect(screen.getByTestId(typeName)).toBeInTheDocument()

src/__tests__/WizardDraftObjectPicker.test.js

@@ -1,12 +1,14 @@
 import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
+import { ThemeProvider } from "@material-ui/core/styles"
 import { render, screen } from "@testing-library/react"
 import { Provider } from "react-redux"
 import configureStore from "redux-mock-store"
 import thunk from "redux-thunk"
 
 import WizardDraftObjectPicker from "../components/NewDraftWizard/WizardComponents/WizardDraftObjectPicker"
+import CSCtheme from "../theme"
 
 import { ObjectSubmissionTypes, ObjectTypes } from "constants/wizardObject"
 
@@ -33,7 +35,9 @@ describe("WizardStepper", () => {
   it("should have drafts listed for selected object type", async () => {
     render(
       <Provider store={store}>
-        <WizardDraftObjectPicker />
+        <ThemeProvider theme={CSCtheme}>
+          <WizardDraftObjectPicker />
+        </ThemeProvider>
       </Provider>
     )
     expect(screen.getAllByRole("button")).toHaveLength(4)

src/__tests__/WizardFillObjectDetailsForm.test.js

@@ -1,11 +1,13 @@
 import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
+import { ThemeProvider } from "@material-ui/core/styles"
 import { render, screen, waitFor } from "@testing-library/react"
 import { Provider } from "react-redux"
 import configureStore from "redux-mock-store"
 
 import WizardFillObjectDetailsForm from "../components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm"
+import CSCtheme from "../theme"
 
 import { ObjectSubmissionTypes, ObjectTypes } from "constants/wizardObject"
 
@@ -48,7 +50,9 @@ describe("WizardFillObjectDetailsForm", () => {
   it("should create study form from schema in sessionStorage", async () => {
     render(
       <Provider store={store}>
-        <WizardFillObjectDetailsForm />
+        <ThemeProvider theme={CSCtheme}>
+          <WizardFillObjectDetailsForm />
+        </ThemeProvider>
       </Provider>
     )
     await waitFor(() => screen.getByText("Study Description"))
@@ -60,7 +64,9 @@ describe("WizardFillObjectDetailsForm", () => {
     const spy = jest.spyOn(Storage.prototype, "getItem")
     render(
       <Provider store={store}>
-        <WizardFillObjectDetailsForm />
+        <ThemeProvider theme={CSCtheme}>
+          <WizardFillObjectDetailsForm />
+        </ThemeProvider>
       </Provider>
     )
     expect(spy).toBeCalledWith("cached_study_schema")

src/__tests__/WizardObjectIndex.test.js

@@ -31,6 +31,12 @@ describe("WizardObjectIndex", () => {
           { accessionId: "TESTID0101", schema: `draft-${ObjectTypes.analysis}` },
           { accessionId: "TESTID0202", schema: `draft-${ObjectTypes.experiment}` },
         ],
+        metadataObjects: [
+          { accessionId: "TESTID1234", schema: ObjectTypes.study },
+          { accessionId: "TESTID5678", schema: ObjectTypes.study },
+          { accessionId: "TESTID0101", schema: ObjectTypes.analysis },
+          { accessionId: "TESTID0202", schema: ObjectTypes.experiment },
+        ],
       },
     })
 
@@ -41,10 +47,10 @@ describe("WizardObjectIndex", () => {
     )
 
     const badge = await screen.queryAllByTestId("badge")
-    expect(badge).toHaveLength(8)
+    expect(badge).toHaveLength(3)
     const studyBadge = screen.queryAllByTestId("badge")[0]
     expect(studyBadge).toHaveTextContent(2)
-    const analysisBadge = screen.queryAllByTestId("badge")[4]
+    const analysisBadge = screen.queryAllByTestId("badge")[1]
     expect(analysisBadge).toHaveTextContent(1)
     const experimentBadge = screen.queryAllByTestId("badge")[2]
     expect(experimentBadge).toHaveTextContent(1)

src/__tests__/WizardSavedObjectsList.test.js

@@ -1,11 +1,13 @@
 import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
+import { ThemeProvider } from "@material-ui/core/styles"
 import { render, screen, within } from "@testing-library/react"
 import { Provider } from "react-redux"
 import configureStore from "redux-mock-store"
 
 import WizardSavedObjectsList from "../components/NewDraftWizard/WizardComponents/WizardSavedObjectsList"
+import CSCtheme from "../theme"
 
 import { ObjectTypes, ObjectSubmissionTypes } from "constants/wizardObject"
 
@@ -26,7 +28,9 @@ describe("WizardStepper", () => {
   beforeEach(() => {
     render(
       <Provider store={store}>
-        <WizardSavedObjectsList submissions={submissions} />
+        <ThemeProvider theme={CSCtheme}>
+          <WizardSavedObjectsList submissions={submissions} />
+        </ThemeProvider>
       </Provider>
     )
   })

src/__tests__/WizardShowSummaryStep.test.js

@@ -1,12 +1,14 @@
 import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
+import { ThemeProvider } from "@material-ui/core/styles"
 import { render, screen } from "@testing-library/react"
 import { Provider } from "react-redux"
 import configureStore from "redux-mock-store"
 import { toMatchDiffSnapshot } from "snapshot-diff"
 
 import WizardShowSummaryStep from "../components/NewDraftWizard/WizardSteps/WizardShowSummaryStep"
+import CSCtheme from "../theme"
 
 import { ObjectTypes } from "constants/wizardObject"
 
@@ -43,7 +45,9 @@ describe("WizardShowSummaryStep", () => {
     })
     wrapper = (
       <Provider store={store}>
-        <WizardShowSummaryStep />
+        <ThemeProvider theme={CSCtheme}>
+          <WizardShowSummaryStep />
+        </ThemeProvider>
       </Provider>
     )
   })