Highlight submission selection buttons

__tests__/__snapshots__/storyshots.test.js.snap

@@ -13620,7 +13620,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
       onClick={[Function]}
     >
       <button
-        className="button m-2 btn btn-success"
+        className="button  m-2 btn btn-outline-danger"
         disabled={false}
         type="button"
       >
@@ -13638,7 +13638,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
       onClick={[Function]}
     >
       <button
-        className="button m-2 btn btn-info"
+        className="button active m-2 btn active btn-outline-warning"
         disabled={false}
         type="button"
       >
@@ -13656,7 +13656,7 @@ exports[`Storyshots Components/SelectIteration Active 1`] = `
       onClick={[Function]}
     >
       <button
-        className="button m-2 btn btn-success"
+        className="button  m-2 btn btn-outline-warning"
         disabled={false}
         type="button"
       >

__tests__/pages/review/__snapshots__/[lesson].test.js.snap

@@ -651,7 +651,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
                         data-testid="iteration 0"
                       >
                         <button
-                          class="button m-2 btn btn-success"
+                          class="button  m-2 btn btn-outline-danger"
                           type="button"
                         >
                           1
@@ -667,7 +667,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
                         data-testid="iteration 1"
                       >
                         <button
-                          class="button m-2 btn btn-success"
+                          class="button  m-2 btn btn-outline-warning"
                           type="button"
                         >
                           2
@@ -683,7 +683,7 @@ exports[`Lesson Page Should render new submissions 1`] = `
                         data-testid="iteration 2"
                       >
                         <button
-                          class="button m-2 btn btn-info"
+                          class="button active m-2 btn active btn-outline-warning"
                           type="button"
                         >
                           3

components/ChallengeMaterial.test.js

@@ -224,11 +224,11 @@ describe('Curriculum challenge page', () => {
     await screen.findByText('Select submission')
     expect(
       await screen.findByRole('button', { name: '3 2 comment count' })
-    ).toHaveClass('btn-info')
+    ).toHaveClass('active')
     userEvent.click(screen.getByTestId('iteration 1'))
     expect(
       await screen.findByRole('button', { name: '3 2 comment count' })
-    ).not.toHaveClass('btn-info')
+    ).not.toHaveClass('active')
     expect(container).toMatchSnapshot()
   })
   test('Should be able to select another challenge', async () => {

components/SelectIteration.tsx

@@ -1,14 +1,20 @@
 import React from 'react'
 import styles from '../scss/selectIteration.module.scss'
 import { ApolloError } from '@apollo/client'
-import { Submission, GetPreviousSubmissionsQuery } from '../graphql'
+import {
+  Submission,
+  GetPreviousSubmissionsQuery,
+  SubmissionStatus
+} from '../graphql'
 import { Badge, Button } from 'react-bootstrap'
 
 type IterationLink = {
   iteration: number
   current: number
   id: number
   comments: number | undefined
+  status: SubmissionStatus
+  loading?: boolean
 }
 
 type SelectIteration = {
@@ -21,30 +27,41 @@ type SelectIteration = {
   currentIndex: number
 }
 
+const statusToBtnVariant = {
+  [SubmissionStatus.Overwritten]: 'info',
+  [SubmissionStatus.Open]: 'warning',
+  [SubmissionStatus.NeedMoreWork]: 'danger',
+  [SubmissionStatus.Passed]: 'success'
+}
+
 const IterationLink: React.FC<IterationLink | { loading: boolean }> = props => {
-  if (!props.hasOwnProperty('loading')) {
-    props = props as IterationLink
-    return (
-      <Button
-        variant={props.current === props.id ? 'info' : 'success'}
-        className={`${styles['button']} m-2`}
-      >
-        {props.iteration}
-        {props.comments !== 0 && (
-          <Badge variant="light" className={styles['badge']}>
-            {props.comments}
-          </Badge>
-        )}
-        <span className="sr-only">comment count</span>
-      </Button>
-    )
-  } else
+  if (props.loading)
     return (
       <Button
         variant="light"
         className={`${styles['button']} ${styles['loading']}`}
       />
     )
+
+  props = props as IterationLink
+  const isSelected = props.current === props.id
+  return (
+    <Button
+      variant={`outline-${statusToBtnVariant[props.status]}`}
+      className={`${styles['button']} ${
+        isSelected ? styles['active'] : ''
+      } m-2`}
+      active={isSelected}
+    >
+      {props.iteration}
+      {props.comments !== 0 && (
+        <Badge variant="light" className={styles['badge']}>
+          {props.comments}
+        </Badge>
+      )}
+      <span className="sr-only">comment count</span>
+    </Button>
+  )
 }
 
 const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
@@ -54,7 +71,7 @@ const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
   setSubmission,
   currentId
 }) => {
-  if (loading) return <IterationLink loading={true} />
+  if (loading) return <IterationLink loading />
   if (data?.getPreviousSubmissions)
     return (
       <div>
@@ -74,6 +91,7 @@ const SelectDisplay: React.FC<Omit<SelectIteration, 'error'>> = ({
                 current={currentId}
                 id={submission.id}
                 comments={submission.comments?.length}
+                status={submission.status}
               />
             </div>
           )

components/__snapshots__/ChallengeMaterial.test.js.snap

@@ -95,7 +95,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
                 data-testid="iteration 0"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-danger"
                   type="button"
                 >
                   1
@@ -111,7 +111,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
                 data-testid="iteration 1"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-warning"
                   type="button"
                 >
                   2
@@ -127,7 +127,7 @@ exports[`Curriculum challenge page Should be able to select another challenge 1`
                 data-testid="iteration 2"
               >
                 <button
-                  class="button m-2 btn btn-info"
+                  class="button active m-2 btn active btn-outline-warning"
                   type="button"
                 >
                   3
@@ -7463,7 +7463,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
                 data-testid="iteration 0"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-danger"
                   type="button"
                 >
                   1
@@ -7479,7 +7479,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
                 data-testid="iteration 1"
               >
                 <button
-                  class="button m-2 btn btn-info"
+                  class="button active m-2 btn active btn-outline-warning"
                   type="button"
                 >
                   2
@@ -7495,7 +7495,7 @@ exports[`Curriculum challenge page Should select previous iterations 1`] = `
                 data-testid="iteration 2"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-warning"
                   type="button"
                 >
                   3

components/__snapshots__/ReviewCard.test.js.snap

@@ -581,7 +581,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
                 data-testid="iteration 0"
               >
                 <button
-                  class="button m-2 btn btn-info"
+                  class="button active m-2 btn active btn-outline-danger"
                   type="button"
                 >
                   1
@@ -597,7 +597,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
                 data-testid="iteration 1"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-warning"
                   type="button"
                 >
                   2
@@ -613,7 +613,7 @@ exports[`ReviewCard Component Should be able to select previous submissions 1`]
                 data-testid="iteration 2"
               >
                 <button
-                  class="button m-2 btn btn-success"
+                  class="button  m-2 btn btn-outline-warning"
                   type="button"
                 >
                   3

components/__snapshots__/SelectIteration.test.js.snap

@@ -54,7 +54,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
         data-testid="iteration 0"
       >
         <button
-          class="button m-2 btn btn-success"
+          class="button  m-2 btn btn-outline-danger"
           type="button"
         >
           1
@@ -70,7 +70,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
         data-testid="iteration 1"
       >
         <button
-          class="button m-2 btn btn-info"
+          class="button active m-2 btn active btn-outline-warning"
           type="button"
         >
           2
@@ -86,7 +86,7 @@ exports[`SelectIteration component Should be able to select submissions 1`] = `
         data-testid="iteration 2"
       >
         <button
-          class="button m-2 btn btn-success"
+          class="button  m-2 btn btn-outline-warning"
           type="button"
         >
           3
@@ -123,7 +123,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
         data-testid="iteration 0"
       >
         <button
-          class="button m-2 btn btn-success"
+          class="button  m-2 btn btn-outline-danger"
           type="button"
         >
           1
@@ -139,7 +139,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
         data-testid="iteration 1"
       >
         <button
-          class="button m-2 btn btn-info"
+          class="button active m-2 btn active btn-outline-warning"
           type="button"
         >
           2
@@ -155,7 +155,7 @@ exports[`SelectIteration component Should treat negative index as last iteration
         data-testid="iteration 2"
       >
         <button
-          class="button m-2 btn btn-success"
+          class="button  m-2 btn btn-outline-warning"
           type="button"
         >
           3

scss/selectIteration.module.scss

@@ -9,6 +9,12 @@
   min-width: 2.5rem;
   min-height: 2.5rem;
   max-width: max-content;
+
+  &.active, &:hover {
+    // Warning variant button has non-white color
+    color: white !important;
+  }
+
   & .badge {
     color: rgb(122, 126, 120);
     position: absolute;
@@ -17,6 +23,7 @@
     border: 1px solid gainsboro;
     border-radius: 50%;
   }
+
   &.loading {
     min-height: 3rem;
   }