Merge pull request #870 from jinjunoh/SWC-6753

SWC-6753: prevent Available Evaluation Lists from collapsing twice
Sage-Bionetworks · Apr 9, 2024 · 9a9d3bb · 9a9d3bb
2 parents 50467a5 + 69be69d
commit 9a9d3bb
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 34 deletions.
diff --git a/...-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.stories.tsx b/...-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.stories.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import {
   generatedEvaulations,
   mockEvaluationQueue,
+  sevenGeneratedEvaulations,
 } from '../../mocks/entity/mockEvaluationQueue'
 import AvailableEvaluationQueueList from './AvailableEvaluationQueueList'
 
@@ -36,6 +37,12 @@ export const OneAvailable: Story = {
   },
 }
 
+export const SevenAvailable: Story = {
+  args: {
+    evaluations: sevenGeneratedEvaulations,
+  },
+}
+
 export const ManyAvailable: Story = {
   args: {
     evaluations: generatedEvaulations,

diff --git a/...pse-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.test.tsx b/...pse-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.test.tsx
@@ -13,6 +13,11 @@ const secondEvaluation = {
   id: '12345',
   name: 'another evaluation queue',
 }
+const eightEvaluationQueues: any[] = Array.from({ length: 8 }, (_, index) => ({
+  ...mockEvaluationQueue,
+  id: `${index + 1}`,
+  name: `Evaluation Queue ${index + 1}`,
+}))
 
 async function chooseAutocompleteOption(
   el: HTMLElement,
@@ -67,22 +72,22 @@ describe('AvailableEvaluationQueueList', () => {
   })
 
   it('handles 1 available evaluation', () => {
-    const { selectInput, showStaticListButton, staticListHeading } = setUp({
+    const { selectInput, staticListHeading, showStaticListButton } = setUp({
       ...defaultProps,
       evaluations: [mockEvaluationQueue],
     })
 
     screen.getByText(mockEvaluationQueue.name!)
     expect(selectInput).toBeNull()
-    expect(showStaticListButton).toBeNull()
     expect(staticListHeading).toBeNull()
+    expect(showStaticListButton).toBeNull()
 
     expect(onChangeSelectedEvaluation).toHaveBeenCalledTimes(1)
     expect(onChangeSelectedEvaluation).toHaveBeenCalledWith(mockEvaluationQueue)
   })
 
   it('handles 1 available evaluation that is not selectable', () => {
-    const { selectInput, showStaticListButton, staticListHeading } = setUp({
+    const { selectInput, staticListHeading, showStaticListButton } = setUp({
       ...defaultProps,
       evaluations: [mockEvaluationQueue],
       isSelectable: false,
@@ -95,14 +100,15 @@ describe('AvailableEvaluationQueueList', () => {
     expect(onChangeSelectedEvaluation).not.toHaveBeenCalled()
   })
 
-  it('handles >1 available evaluations', async () => {
-    const { selectInput, showStaticListButton, staticListHeading, user } =
+  it('displays collapsed list for <8 selectable available evaluations', async () => {
+    const { selectInput, staticListHeading, showStaticListButton, user } =
       setUp({
         ...defaultProps,
         evaluations: [mockEvaluationQueue, secondEvaluation],
       })
 
     expect(selectInput).not.toBeNull()
+    expect(staticListHeading).not.toBeNull()
     expect(showStaticListButton).not.toBeNull()
     expect(showStaticListButton?.textContent).toContain('Show')
     expect(staticListHeading).not.toBeVisible()
@@ -121,23 +127,77 @@ describe('AvailableEvaluationQueueList', () => {
     expect(onChangeSelectedEvaluation).toHaveBeenCalledWith(secondEvaluation)
   })
 
-  it('handles >1 available evaluations that are not selectable', async () => {
-    const { selectInput, staticListHeading, showStaticListButton, user } =
+  it('displays static list for <8 available evaluations that are not selectable', () => {
+    const { selectInput, staticListHeading, showStaticListButton } = setUp({
+      ...defaultProps,
+      evaluations: [mockEvaluationQueue, secondEvaluation],
+      isSelectable: false,
+    })
+
+    expect(selectInput).toBeNull()
+    expect(staticListHeading).toBeVisible()
+    expect(showStaticListButton).toBeNull()
+    expect(screen.getByText(mockEvaluationQueue.name!)).toBeVisible()
+    expect(screen.getByText(secondEvaluation.name)).toBeVisible()
+
+    expect(onChangeSelectedEvaluation).not.toHaveBeenCalled()
+  })
+
+  it('displays collapsed list for >8 selectable available evaluations', async () => {
+    const { selectInput, showStaticListButton, staticListHeading, user } =
       setUp({
         ...defaultProps,
-        evaluations: [mockEvaluationQueue, secondEvaluation],
+        evaluations: eightEvaluationQueues,
+      })
+
+    expect(selectInput).not.toBeNull()
+    expect(showStaticListButton).not.toBeNull()
+    expect(showStaticListButton?.textContent).toContain('Show')
+    expect(staticListHeading).not.toBeVisible()
+
+    await user.click(showStaticListButton!)
+
+    expect(showStaticListButton?.textContent).toContain('Hide')
+    expect(staticListHeading).toBeVisible()
+    eightEvaluationQueues.forEach((queue, index) => {
+      expect(screen.getByText(queue.name)).toBeVisible()
+    })
+
+    await chooseAutocompleteOption(
+      selectInput!,
+      eightEvaluationQueues[1].name,
+      user,
+    )
+
+    expect(selectInput).toHaveValue(eightEvaluationQueues[1].name)
+    expect(onChangeSelectedEvaluation).toHaveBeenCalledTimes(1)
+    expect(onChangeSelectedEvaluation).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: eightEvaluationQueues[1].name,
+      }),
+    )
+  })
+
+  it('displays collapsed list for >8 available evaluations that are not selectable', async () => {
+    const { selectInput, showStaticListButton, staticListHeading, user } =
+      setUp({
+        ...defaultProps,
+        evaluations: eightEvaluationQueues,
         isSelectable: false,
       })
 
     expect(selectInput).toBeNull()
     expect(showStaticListButton).not.toBeNull()
+    expect(showStaticListButton?.textContent).toContain('Show')
     expect(staticListHeading).not.toBeVisible()
 
     await user.click(showStaticListButton!)
 
+    expect(showStaticListButton?.textContent).toContain('Hide')
     expect(staticListHeading).toBeVisible()
-    expect(screen.getByText(mockEvaluationQueue.name!)).toBeVisible()
-    expect(screen.getByText(secondEvaluation.name)).toBeVisible()
+    eightEvaluationQueues.forEach((queue, index) => {
+      expect(screen.getByText(queue.name)).toBeVisible()
+    })
 
     expect(onChangeSelectedEvaluation).not.toHaveBeenCalled()
   })

diff --git a/.../synapse-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.tsx b/.../synapse-react-client/src/components/ChallengeSubmission/AvailableEvaluationQueueList.tsx
@@ -52,37 +52,60 @@ type AvailableEvaluationQueueStaticListProps = Pick<
   AvailableEvaluationQueueListProps,
   'evaluations'
 >
-
 function AvailableEvaluationQueueStaticList(
   props: AvailableEvaluationQueueStaticListProps,
 ) {
   const { evaluations } = props
+  return (
+    <>
+      <Typography variant="body1">Available Evaluation Queues:</Typography>
+      <List dense={true}>
+        {evaluations.map(evaluation => (
+          <ListItem key={evaluation.id}>
+            <TextWithHelpIcon
+              text={evaluation.name!}
+              tooltipMarkdownText={evaluation.submissionInstructionsMessage}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </>
+  )
+}
+
+type AvailableEvaluationQueueCollapsableListProps = Pick<
+  AvailableEvaluationQueueListProps,
+  'evaluations' | 'isSelectable'
+>
+
+function AvailableEvaluationQueueCollapsableList(
+  props: AvailableEvaluationQueueCollapsableListProps,
+) {
+  const { evaluations, isSelectable } = props
   const [showList, setShowList] = useState<boolean>(false)
+  const nEvaluationsCollapseLimit = isSelectable ? 2 : 8
+  const shouldCollapse = evaluations.length >= nEvaluationsCollapseLimit
 
   return (
     <Box mt={2}>
-      <Button
-        variant="contained"
-        sx={{ mb: 1 }}
-        onClick={() => setShowList(!showList)}
-      >
-        {`${showList ? 'Hide' : 'Show'} All Available Evaluation Queues`}
-      </Button>
-      <Collapse in={showList}>
-        <Typography variant="body1">Available Evaluation Queues:</Typography>
-        <List dense={true}>
-          {evaluations.map(evaluation => {
-            return (
-              <ListItem key={evaluation.id}>
-                <TextWithHelpIcon
-                  text={evaluation.name!}
-                  tooltipMarkdownText={evaluation.submissionInstructionsMessage}
-                />
-              </ListItem>
-            )
-          })}
-        </List>
-      </Collapse>
+      {shouldCollapse ? (
+        <>
+          <Button
+            variant="contained"
+            sx={{ mb: 1 }}
+            onClick={() => setShowList(!showList)}
+          >
+            {`${showList ? 'Hide' : 'Show'} All Available Evaluation Queues`}
+          </Button>
+          <Collapse in={showList}>
+            <AvailableEvaluationQueueStaticList {...props} />
+          </Collapse>
+        </>
+      ) : (
+        <>
+          <AvailableEvaluationQueueStaticList {...props} />
+        </>
+      )}
     </Box>
   )
 }
@@ -172,7 +195,7 @@ function AvailableEvaluationQueueList(
       className="AvailableEvaluationQueueList"
     >
       {isSelectable && <AvailableEvaluationQueueAutocompleteList {...props} />}
-      <AvailableEvaluationQueueStaticList {...props} />
+      <AvailableEvaluationQueueCollapsableList {...props} />
     </Box>
   )
 }

diff --git a/packages/synapse-react-client/src/mocks/entity/mockEvaluationQueue.ts b/packages/synapse-react-client/src/mocks/entity/mockEvaluationQueue.ts
@@ -30,3 +30,7 @@ export const mockEvaluations: Evaluation[] = [mockEvaluationQueue]
 export const generatedEvaulations: Evaluation[] = times(10, () =>
   generateEvaluation(),
 )
+
+export const sevenGeneratedEvaulations: Evaluation[] = times(7, () =>
+  generateEvaluation(),
+)