Add Back To Workflow button

Add a back button to the subject set picker, and an onClose callback which is called when the button is clicked.

packages/app-project/src/screens/ClassifyPage/ClassifyPage.js

@@ -42,6 +42,10 @@ function ClassifyPage (props) {
     return true
   }
 
+  function onClose() {
+    setActiveWorkflow(null)
+  }
+
   return (
     <StandardLayout>
 
@@ -55,8 +59,8 @@ function ClassifyPage (props) {
           {!canClassify && (
             <Modal
               active
-              closeFn={() => setActiveWorkflow(null)}
-              onEsc={() => setActiveWorkflow(null)}
+              closeFn={onClose}
+              onEsc={onClose}
               headingBackground='brand'
               title={activeWorkflow ? (activeWorkflow.displayName || 'Choose a subject set') : 'Choose a workflow'}
               titleColor='neutral-6'
@@ -67,6 +71,7 @@ function ClassifyPage (props) {
                   workflows={workflows}
                 /> :
                 <SubjectSetPicker
+                  onClose={onClose}
                   owner={owner}
                   project={project}
                   workflow={activeWorkflow}

packages/app-project/src/screens/ProjectHomePage/components/Hero/components/WorkflowMenu/WorkflowMenu.js

@@ -19,6 +19,11 @@ export default function WorkflowMenu({ workflows }) {
     }
     return true
   }
+
+  function onClose() {
+    setActiveWorkflow(null)
+  }
+
   return (
     <>
     <WorkflowSelector
@@ -28,12 +33,13 @@ export default function WorkflowMenu({ workflows }) {
     {activeWorkflow &&
       <Modal
         active
-        closeFn={() => setActiveWorkflow(null)}
+        closeFn={onClose}
         headingBackground='brand'
         title={activeWorkflow.displayName || 'Choose a subject set'}
         titleColor='neutral-6'
       >
         <SubjectSetPicker
+          onClose={onClose}
           owner={owner}
           project={project}
           workflow={activeWorkflow}

packages/app-project/src/shared/components/SubjectSetPicker/SubjectSetPicker.js

@@ -1,8 +1,8 @@
 import { SpacedText } from '@zooniverse/react-components'
 import counterpart from 'counterpart'
-import { Anchor, Box, Grid, Heading, Paragraph } from 'grommet'
+import { Anchor, Box, Button, Grid, Heading, Paragraph } from 'grommet'
 import Link from 'next/link'
-import { array, bool, number, shape, string } from 'prop-types'
+import { array, bool, func, number, shape, string } from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -21,8 +21,20 @@ const StyledHeading = styled(Heading)`
   line-height: 100%;
 `
 
+function BackButton({ onClick }) {
+  return (
+    <Button
+      plain
+      onClick={onClick}
+    >
+      <SpacedText color='accent-2'>
+        {counterpart('SubjectSetPicker.back')}
+      </SpacedText>
+    </Button>
+  )
+}
 function SubjectSetPicker (props) {
-  const { active, closeFn, owner, project, title, workflow } = props
+  const { onClose, owner, project, workflow } = props
   /*
     Vertical spacing for the picker instructions.
     The theme's named margins are set in multiples of 10px, so set 15px explicitly.
@@ -36,6 +48,7 @@ function SubjectSetPicker (props) {
 
   return (
     <>
+      {onClose && <BackButton onClick={onClose} />}
       <StyledHeading
         level={3}
         margin={{ top: 'xsmall', bottom: 'none' }}
@@ -79,6 +92,9 @@ function SubjectSetPicker (props) {
 }
 
 SubjectSetPicker.propTypes = {
+  onClose: func,
+  owner: string.isRequired,
+  project: string.isRequired,
   workflow: shape({
     completeness: number,
     default: bool,
@@ -89,4 +105,4 @@ SubjectSetPicker.propTypes = {
 }
 
 export default SubjectSetPicker
-export { StyledHeading }
+export { BackButton, StyledHeading }

packages/app-project/src/shared/components/SubjectSetPicker/SubjectSetPicker.spec.js

@@ -1,9 +1,10 @@
-import { Modal } from '@zooniverse/react-components'
+import { SpacedText } from '@zooniverse/react-components'
 import { shallow } from 'enzyme'
-import { Paragraph } from 'grommet'
+import { Button, Paragraph } from 'grommet'
 import React from 'react'
+import sinon from 'sinon'
 
-import SubjectSetPicker, { StyledHeading } from './SubjectSetPicker'
+import SubjectSetPicker, { BackButton, StyledHeading } from './SubjectSetPicker'
 import SubjectSetCard from './components/SubjectSetCard'
 import en from './locales/en'
 import { mockWorkflow } from './helpers'
@@ -64,4 +65,25 @@ describe('Component > SubjectSetPicker', function () {
     const cards = wrapper.find(SubjectSetCard)
     expect(cards.length).to.equal(mockWorkflow.subjectSets.length)
   })
+
+  describe('the onClose callback', function () {
+
+    before(function () {
+      wrapper.setProps({
+        onClose: sinon.stub()
+      })
+    })
+
+    it('should show a back button', function () {
+      const button = wrapper.find(BackButton).first()
+      expect(button).to.have.lengthOf(1)
+    })
+
+    it('should be called when the back button is clicked', function () {
+      const button = wrapper.find(BackButton).first()
+      const onClose = button.prop('onClick')
+      button.simulate('click')
+      expect(onClose).to.have.been.calledOnce()
+    })
+  })
 })

packages/app-project/src/shared/components/SubjectSetPicker/SubjectSetPicker.stories.js

@@ -46,6 +46,20 @@ export function Default({ dark, workflow }) {
   )
 }
 
+export function WithBackButton({ dark, workflow }) {
+  function onClose() {
+    alert('you clicked the back button.')
+  }
+  return (
+    <StoryContext theme={{ ...zooTheme, dark }}>
+      <SubjectSetPicker
+        onClose={onClose}
+        workflow={workflow}
+      />
+    </StoryContext>
+  )
+}
+
 export function Tablet({ active, dark, title, workflow }) {
   return (
     <StoryContext theme={{ ...zooTheme, dark }}>

packages/app-project/src/shared/components/SubjectSetPicker/locales/en.json

@@ -1,5 +1,6 @@
 {
   "SubjectSetPicker": {
+    "back": "Back to workflow",
     "heading": "Choose where to start",
     "byline": "Choose a subject set to start transcribing."
   }