@@ -284,10 +284,7 @@ const ReviewerConsole = ({ appContext }) => {
const { setBannerContent } = appContext
const [reviewerConsoleData, setReviewerConsoleData] = useState({})
const [enablePaperRanking, setEnablePaperRanking] = useState(true)
- const [activeTabId, setActiveTabId] = useState(
- decodeURIComponent(window.location.hash) ||
- `#assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`
- )
+ const [activeTabId, setActiveTabId] = useState(null)
const paperRankingId = `${venueId}/${reviewerName}/-/Paper_Ranking`
const reviewerUrlFormat = reviewerName ? getRoleHashFragment(reviewerName) : null
@@ -603,20 +600,6 @@ const ReviewerConsole = ({ appContext }) => {
}
}, [reviewerConsoleData.notes])
- useEffect(() => {
- if (user && !userLoading) {
- const validTabIds = [
- `#assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`,
- `#${reviewerUrlFormat}-tasks`,
- ]
- if (!validTabIds.includes(activeTabId)) {
- setActiveTabId(`#assigned-${pluralizeString(submissionName ?? '').toLowerCase()}`)
- return
- }
- router.replace(activeTabId)
- }
- }, [activeTabId, user, userLoading])
-
const missingConfig = Object.entries({
header,
group,
@@ -651,48 +634,31 @@ const ReviewerConsole = ({ appContext }) => {
customLoad={reviewerConsoleData.customLoad}
submissionName={submissionName}
/>
-
-
-
- setActiveTabId(`#assigned-${pluralizeString(submissionName).toLowerCase()}`)
- }
- >
- Assigned {pluralizeString(submissionName)}
-
- setActiveTabId(`#${reviewerUrlFormat}-tasks`)}
- >
- {getSingularRoleName(prettyField(reviewerName))} Tasks
-
-
-
-
-
- {activeTabId === `#assigned-${pluralizeString(submissionName).toLowerCase()}` &&
- renderTable()}
-
-
-
- {activeTabId === `#${reviewerUrlFormat}-tasks` && (
+
- )}
-
-
-
+ ),
+ visible: true,
+ },
+ ]}
+ updateActiveTabId={setActiveTabId}
+ />
)
}
diff --git a/components/webfield/SeniorAreaChairConsole.js b/components/webfield/SeniorAreaChairConsole.js
index 9615d289a..fc9db079f 100644
--- a/components/webfield/SeniorAreaChairConsole.js
+++ b/components/webfield/SeniorAreaChairConsole.js
@@ -2,7 +2,6 @@
import { useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import WebFieldContext from '../WebFieldContext'
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../Tabs'
import BasicHeader from './BasicHeader'
import AreaChairStatus from './SeniorAreaChairConsole/AreaChairStatus'
import PaperStatus from './SeniorAreaChairConsole/PaperStatus'
@@ -25,6 +24,7 @@ import {
} from '../../lib/utils'
import { formatProfileContent } from '../../lib/edge-utils'
import RejectedWithdrawnPapers from './ProgramChairConsole/RejectedWithdrawnPapers'
+import ConsoleTabs from './ConsoleTabs'
const SeniorAreaChairConsole = ({ appContext }) => {
const {
@@ -68,9 +68,6 @@ const SeniorAreaChairConsole = ({ appContext }) => {
const [isLoadingData, setIsLoadingData] = useState(false)
const router = useRouter()
const query = useQuery()
- const [activeTabId, setActiveTabId] = useState(
- decodeURIComponent(window.location.hash) || `#${submissionName ?? ''.toLowerCase()}-status`
- )
const seniorAreaChairUrlFormat = getRoleHashFragment(seniorAreaChairName)
const areaChairUrlFormat = getRoleHashFragment(areaChairName)
@@ -657,21 +654,6 @@ const SeniorAreaChairConsole = ({ appContext }) => {
loadData()
}, [user, userLoading, group])
- useEffect(() => {
- // if (!activeTabId) return
- const validTabIds = [
- `#${(submissionName ?? '').toLowerCase()}-status`,
- `#${areaChairUrlFormat}-status`,
- '#deskrejectwithdrawn-status',
- `#${seniorAreaChairUrlFormat}-tasks`,
- ]
- if (!validTabIds.includes(activeTabId)) {
- setActiveTabId(`#${(submissionName ?? '').toLowerCase()}-status`)
- return
- }
- router.replace(activeTabId)
- }, [activeTabId])
-
const missingConfig = Object.entries({
header,
entity: group,
@@ -693,72 +675,43 @@ const SeniorAreaChairConsole = ({ appContext }) => {
return (
<>
-
-
-
- setActiveTabId(`#${submissionName.toLowerCase()}-status`)}
- >
- {submissionName} Status
-
- setActiveTabId(`#${areaChairUrlFormat}-status`)}
- hidden={!assignmentInvitation}
- >
- {getSingularRoleName(prettyField(areaChairName))} Status
-
- {(withdrawnVenueId || deskRejectedVenueId) && (
- setActiveTabId('#deskrejectwithdrawn-status')}
- >
- Desk Rejected/Withdrawn {pluralizeString(submissionName)}
-
- )}
- setActiveTabId(`#${seniorAreaChairUrlFormat}-tasks`)}
- >
- {getSingularRoleName(prettyField(seniorAreaChairName))} Tasks
-
-
-
-
-
- {activeTabId === `#${submissionName.toLowerCase()}-status` && (
-
- )}
-
- {activeTabId === `#${areaChairUrlFormat}-status` && (
-
+ ,
+ visible: true,
+ },
+ {
+ id: `${areaChairUrlFormat}-status`,
+ label: `${getSingularRoleName(prettyField(areaChairName))} Status`,
+ content: (
-
- )}
- {activeTabId === '#deskrejectwithdrawn-status' && (
-
+ ),
+ visible: assignmentInvitation,
+ },
+ {
+ id: 'deskrejectwithdrawn-status',
+ label: `Desk Rejected/Withdrawn ${pluralizeString(submissionName)}`,
+ content: (
-
- )}
-
- {activeTabId === `#${seniorAreaChairUrlFormat}-tasks` && (
-
-
-
- )}
-
-
+ ),
+ visible: withdrawnVenueId || deskRejectedVenueId,
+ },
+ {
+ id: `${seniorAreaChairUrlFormat}-tasks`,
+ label: `${getSingularRoleName(prettyField(seniorAreaChairName))} Tasks`,
+ content:
,
+ visible: true,
+ },
+ ]}
+ />
)
}
diff --git a/lib/utils.js b/lib/utils.js
index d69802d56..ce99fbccb 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -662,7 +662,7 @@ export function pluralizeString(word) {
* @param {string} roleName - role name to convert
*/
export function getSingularRoleName(roleName) {
- return roleName.endsWith('s') ? roleName.slice(0, -1) : roleName
+ return roleName?.endsWith('s') ? roleName.slice(0, -1) : roleName
}
/**
diff --git a/unitTests/AreaChairConsole.test.js b/unitTests/AreaChairConsole.test.js
index 34f67a4af..931b3f695 100644
--- a/unitTests/AreaChairConsole.test.js
+++ b/unitTests/AreaChairConsole.test.js
@@ -12,10 +12,12 @@ let noteReviewStatusProps
jest.mock('next/router', () => ({
useRouter: () => ({
- replace: (params) => {
+ replace: jest.fn((params) => {
routerParams = params
- return jest.fn()
- },
+ return {
+ catch: jest.fn(),
+ }
+ }),
}),
}))
jest.mock('../hooks/useUser', () => () => useUserReturnValue)
@@ -45,25 +47,6 @@ beforeEach(() => {
})
describe('AreaChairConsole', () => {
- test('default to assigned papers tab when window.location does not contain any hash', async () => {
- const providerProps = { value: { submissionName: 'Submissions' } }
- renderWithWebFieldContext(
-
,
- providerProps
- )
- expect(routerParams).toEqual('#assigned-submissions')
- })
-
- test('default to assigned papers tab when window.location.hash does not match any tab', async () => {
- window.location.hash = '#some-unknown-tab'
- const providerProps = { value: { submissionName: 'Submissions' } }
- renderWithWebFieldContext(
-
,
- providerProps
- )
- expect(routerParams).toEqual('#assigned-submissions')
- })
-
test('show error when config is not complete', async () => {
const providerProps = { value: { areaChairName: undefined } }
const { rerender } = renderWithWebFieldContext(
diff --git a/unitTests/ConsoleTabs.test.js b/unitTests/ConsoleTabs.test.js
new file mode 100644
index 000000000..e51c48d12
--- /dev/null
+++ b/unitTests/ConsoleTabs.test.js
@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import ConsoleTabs from '../components/webfield/ConsoleTabs'
+
+let routerParams
+
+jest.mock('next/router', () => ({
+ useRouter: () => ({
+ replace: jest.fn((params) => {
+ routerParams = params
+ return {
+ catch: jest.fn(),
+ }
+ }),
+ }),
+}))
+
+beforeEach(() => {
+ routerParams = null
+ window.location.hash = ''
+})
+
+describe('ConsoleTabs', () => {
+ test('render first tab by default', () => {
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: true, content:
tab 1 content },
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content },
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getAllByRole('tab').length).toBe(3)
+ expect(screen.getAllByRole('tabpanel').length).toBe(1)
+ expect(screen.getByText('tab 1 content')).toBeInTheDocument()
+ })
+
+ test('render specified default tab in properties', () => {
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: true, content:
tab 1 content },
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content },
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getAllByRole('tab').length).toBe(3)
+ expect(screen.getAllByRole('tabpanel').length).toBe(1)
+ expect(screen.getByText('tab 3 content')).toBeInTheDocument()
+ })
+
+ test('render tab specified in url', () => {
+ window.location.hash = '#tab2Id' // higher priority than defaultActiveTabId
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: true, content:
tab 1 content },
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content },
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getAllByRole('tab').length).toBe(3)
+ expect(screen.getAllByRole('tabpanel').length).toBe(1)
+ expect(screen.getByText('tab 2 content')).toBeInTheDocument()
+ })
+
+ test('render only visible tabs', () => {
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: false, content:
tab 1 content }, // first tab is invisible
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content }, // tab 2 becomes first tab
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getAllByRole('tab').length).toBe(2)
+ expect(screen.getAllByRole('tabpanel').length).toBe(1)
+ expect(screen.getByText('tab 2 content')).toBeInTheDocument()
+ })
+
+ test('handle invalid hash in url', () => {
+ window.location.hash = '#invalidTabId'
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: true, content:
tab 1 content },
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content },
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getAllByRole('tab').length).toBe(3)
+ expect(screen.getAllByRole('tabpanel').length).toBe(1)
+ expect(screen.getByText('tab 1 content')).toBeInTheDocument()
+ })
+
+ test('switch tab and pass active tab id to parent', async () => {
+ const tabs = [
+ { id: 'tab1Id', label: 'Tab One', visible: true, content:
tab 1 content },
+ { id: 'tab2Id', label: 'Tab Two', visible: true, content:
tab 2 content },
+ { id: 'tab3Id', label: 'Tab Three', visible: true, content:
tab 3 content },
+ ]
+ render(
)
+
+ expect(screen.getByText('tab 1 content')).toBeInTheDocument()
+
+ await userEvent.click(screen.getByText('Tab Two'))
+ expect(screen.getByText('tab 2 content')).toBeInTheDocument()
+ expect(routerParams).toBe('#tab2Id')
+
+ await userEvent.click(screen.getByText('Tab Three'))
+ expect(screen.getByText('tab 3 content')).toBeInTheDocument()
+ expect(routerParams).toBe('#tab3Id')
+ })
+})
diff --git a/unitTests/ReviewerConsole.test.js b/unitTests/ReviewerConsole.test.js
index 0e5930eb2..7701f8962 100644
--- a/unitTests/ReviewerConsole.test.js
+++ b/unitTests/ReviewerConsole.test.js
@@ -11,10 +11,12 @@ let noteReviewStatusProps
jest.mock('next/router', () => ({
useRouter: () => ({
- replace: (params) => {
+ replace: jest.fn((params) => {
routerParams = params
- return jest.fn()
- },
+ return {
+ catch: jest.fn(),
+ }
+ }),
}),
}))
jest.mock('../hooks/useUser', () => () => useUserReturnValue)
diff --git a/unitTests/SeniorAreaChairConsole.test.js b/unitTests/SeniorAreaChairConsole.test.js
index 19f5e81d2..ee20b99ab 100644
--- a/unitTests/SeniorAreaChairConsole.test.js
+++ b/unitTests/SeniorAreaChairConsole.test.js
@@ -1,7 +1,5 @@
-import { screen, waitFor } from '@testing-library/react'
+import { screen } from '@testing-library/react'
import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-import api from '../lib/api-client'
import { reRenderWithWebFieldContext, renderWithWebFieldContext } from './util'
import SeniorAreaChairConsole from '../components/webfield/SeniorAreaChairConsole'
@@ -14,10 +12,12 @@ let sacTasksProps
jest.mock('nanoid', () => ({ nanoid: () => 'some id' }))
jest.mock('next/router', () => ({
useRouter: () => ({
- replace: (params) => {
+ replace: jest.fn((params) => {
routerParams = params
- return jest.fn()
- },
+ return {
+ catch: jest.fn(),
+ }
+ }),
}),
}))
jest.mock('../hooks/useUser', () => () => useUserReturnValue)
@@ -53,25 +53,6 @@ beforeEach(() => {
})
describe('SeniorAreaChairConsole', () => {
- test('default to paper status tab when window.location does not contain any hash', async () => {
- const providerProps = { value: { submissionName: 'Submission' } }
- renderWithWebFieldContext(
-
,
- providerProps
- )
- expect(routerParams).toEqual('#submission-status')
- })
-
- test('default to assigned papers tab when window.location.hash does not match any tab', async () => {
- window.location.hash = '#some-unknown-tab'
- const providerProps = { value: { submissionName: 'Submission' } }
- renderWithWebFieldContext(
-
,
- providerProps
- )
- expect(routerParams).toEqual('#submission-status')
- })
-
test('show error message based on sac name when config is not complete', async () => {
const providerProps = { value: { seniorAreaChairName: undefined } }
const { rerender } = renderWithWebFieldContext(