Preserve opened object details on lang change

src/__tests__/WizardObjectDetails.test.js

@@ -2,8 +2,7 @@ import React from "react"
 
 import "@testing-library/jest-dom/extend-expect"
 import { ThemeProvider } from "@material-ui/core/styles"
-import { render, screen, waitForElementToBeRemoved } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import { render, screen } from "@testing-library/react"
 import { rest } from "msw"
 import { setupServer } from "msw/node"
 import { Provider } from "react-redux"
@@ -18,7 +17,9 @@ import SelectedFolderDetails from "components/Home/SelectedFolderDetails"
 import WizardObjectDetails from "components/NewDraftWizard/WizardComponents/WizardObjectDetails"
 
 const mockStore = configureStore([])
-const store = mockStore({})
+const store = mockStore({
+  openedRows: [0],
+})
 
 const server = setupServer()
 
@@ -29,7 +30,7 @@ describe("Object details", () => {
   afterEach(() => server.resetHandlers())
   afterAll(() => server.close())
 
-  it("should render object details component on 'Show details' button click", async () => {
+  it("should render object details when row has been opened", async () => {
     server.use(
       rest.get("/schemas/:schema", (req, res, ctx) => {
         return res(ctx.json(schema))
@@ -76,12 +77,11 @@ describe("Object details", () => {
       </MemoryRouter>
     )
 
-    await waitForElementToBeRemoved(() => screen.getByRole("progressbar"))
-    userEvent.click(screen.getByTestId("toggle-details"))
+    const toggleDetailsButton = await screen.findByTestId("toggle-details")
+    expect(toggleDetailsButton).toBeInTheDocument()
 
-    await waitForElementToBeRemoved(() => screen.getByRole("progressbar"))
-    expect(screen.getByText("Hide details")).toBeInTheDocument()
-    expect(screen.getByTestId("section")).toBeInTheDocument()
+    const section = await screen.findByTestId("section")
+    expect(section).toBeInTheDocument()
   })
 
   it("should render object details by object data and schema", async () => {
@@ -108,10 +108,10 @@ describe("Object details", () => {
       </Provider>
     )
 
-    await waitForElementToBeRemoved(() => screen.getByRole("progressbar"))
-
     // Sections
     // Note: Nested properties have at least 2 sections
+    await screen.findAllByTestId("section")
+
     expect(screen.getAllByTestId("section")).toHaveLength(6)
 
     // List items

src/components/Home/SelectedFolderDetails.js

@@ -219,7 +219,7 @@ const SelectedFolderDetails = (): React$Element<typeof Grid> => {
             <Link
               color="inherit"
               component={RouterLink}
-              to={`${pathWithLocale("home")}${selectedFolder.published ? "published" : "drafts"}`}
+              to={`${pathWithLocale("home")}/${selectedFolder.published ? "published" : "drafts"}`}
             >
               {selectedFolder.published ? "Published" : "Drafts"}
             </Link>

src/components/Home/SubmissionDetailTable.js

@@ -1,5 +1,5 @@
 //@flow
-import React, { useState } from "react"
+import React, { useEffect } from "react"
 
 import Box from "@material-ui/core/Box"
 import Button from "@material-ui/core/Button"
@@ -26,11 +26,13 @@ import FolderIcon from "@material-ui/icons/Folder"
 import FolderOpenIcon from "@material-ui/icons/FolderOpen"
 import HelpOutlineIcon from "@material-ui/icons/HelpOutline"
 import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace"
+import { useDispatch, useSelector } from "react-redux"
 import { Link as RouterLink } from "react-router-dom"
 
 import WizardObjectDetails from "components/NewDraftWizard/WizardComponents/WizardObjectDetails"
 import { FolderSubmissionStatus } from "constants/wizardFolder"
 import { ObjectSubmissionTypes, DisplayObjectTypes } from "constants/wizardObject"
+import { addRow, removeRow, resetRows } from "features/openedRowsSlice"
 import type { ObjectDetails } from "types"
 import { pathWithLocale } from "utils"
 
@@ -98,13 +100,16 @@ type SubmissionDetailTableProps = {
 }
 
 type RowProps = {
+  index: number,
   row: any,
   onEdit: (objectId: string, objectType: string, objectStatus: string, submissionType: string) => Promise<any>,
   onDelete: (objectId: string, objectType: string, objectStatus: string) => Promise<any>,
 }
 
 const Row = (props: RowProps) => {
-  const { row, onEdit, onDelete } = props
+  const dispatch = useDispatch()
+  const openedRows = useSelector(state => state.openedRows) || []
+  const { index, row, onEdit, onDelete } = props
 
   const getDateFormat = (date: string) => {
     const d = new Date(date)
@@ -114,10 +119,10 @@ const Row = (props: RowProps) => {
     return `${day}.${month}.${year}`
   }
 
-  const [open, setOpen] = useState(false)
+  const rowOpen = openedRows.indexOf(index) > -1
 
   const showObjectDetails = () => {
-    setOpen(!open)
+    !rowOpen ? dispatch(addRow(index)) : dispatch(removeRow(index))
   }
 
   return (
@@ -152,14 +157,14 @@ const Row = (props: RowProps) => {
         </TableCell>
         <TableCell>
           <Button aria-label="Show object details" data-testid="toggle-details" onClick={() => showObjectDetails()}>
-            {open ? "Hide details" : "Show details"}
+            {rowOpen ? "Hide details" : "Show details"}
           </Button>
         </TableCell>
       </TableRow>
-      {open && (
+      {rowOpen && (
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={12}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
+            <Collapse in={rowOpen} timeout="auto" unmountOnExit>
               <WizardObjectDetails objectType={row.objectType} objectData={row.objectData}></WizardObjectDetails>
             </Collapse>
           </TableCell>
@@ -171,12 +176,20 @@ const Row = (props: RowProps) => {
 
 const SubmissionDetailTable = (props: SubmissionDetailTableProps): React$Element<any> => {
   const classes = useStyles()
+  const dispatch = useDispatch()
 
   const { folderTitle, bodyRows, folderType, location, onEditFolder, onPublishFolder, onEditObject, onDeleteObject } =
     props
 
   const folderPublishable = bodyRows.find(row => row.status === "Submitted")
 
+  // Reset opened rows
+  useEffect(() => {
+    return function cleanup() {
+      dispatch(resetRows())
+    }
+  }, [])
+
   const CurrentFolder = () => (
     <CardContent>
       <TableContainer component={Paper}>
@@ -234,7 +247,7 @@ const SubmissionDetailTable = (props: SubmissionDetailTableProps): React$Element
           </TableHead>
           <TableBody>
             {bodyRows?.map((row, index) => (
-              <Row key={index} row={row} onEdit={onEditObject} onDelete={onDeleteObject}></Row>
+              <Row key={index} index={index} row={row} onEdit={onEditObject} onDelete={onDeleteObject}></Row>
             ))}
           </TableBody>
         </Table>

src/features/openedRowsSlice.js

@@ -0,0 +1,17 @@
+//@flow
+import { createSlice } from "@reduxjs/toolkit"
+
+const initialState: [] | Array<number> = []
+
+const openedRowsSlice: any = createSlice({
+  name: "objectsArraySlice",
+  initialState,
+  reducers: {
+    addRow: (state, action) => state.concat(action.payload),
+    removeRow: (state, action) => state.filter(item => item !== action.payload),
+    resetRows: () => initialState,
+  },
+})
+
+export const { addRow, removeRow, resetRows } = openedRowsSlice.actions
+export default openedRowsSlice.reducer

src/rootReducer.js

@@ -8,6 +8,7 @@ import focusReducer from "features/focusSlice"
 import loadingReducer from "features/loadingSlice"
 import localeReducer from "features/localeSlice"
 import objectTypesArrayReducer from "features/objectTypesArraySlice"
+import openedRowsReducer from "features/openedRowsSlice"
 import publishedFoldersReducer from "features/publishedFoldersSlice"
 import selectedFolderReducer from "features/selectedFolderSlice"
 import templatesReducer from "features/templatesSlice"
@@ -37,6 +38,7 @@ const rootReducer: any = combineReducers({
   publishedFolders: publishedFoldersReducer,
   selectedFolder: selectedFolderReducer,
   objectTypesArray: objectTypesArrayReducer,
+  openedRows: openedRowsReducer,
   totalFolders: totalFoldersReducer,
   clearForm: clearFormReducer,
   templateAccessionIds: templatesReducer,