student feature: Add the ability to report exercises

__tests__/__snapshots__/storyshots.test.js.snap

@@ -6490,6 +6490,19 @@ a = a + 10
       </div>
     </div>
   </div>
+  <div>
+    <button
+      className="btn newButton container__reportBtn borderless"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "mute",
+        }
+      }
+    >
+      Report a problem
+    </button>
+  </div>
 </section>
 `;
 
@@ -6665,9 +6678,7 @@ exports[`Storyshots Components/ExerciseReportCard Basic 1`] = `
   <p>
     Leave the description empty and try to submit to display success message
   </p>
-  <div
-    className=""
-  >
+  <div>
     <button
       className="btn newButton container__reportBtn borderless"
       onClick={[Function]}

components/ExerciseCard/ExerciseCard.test.tsx

@@ -2,6 +2,7 @@ import '@testing-library/jest-dom'
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import ExerciseCard, { Message } from './ExerciseCard'
+import { MockedProvider } from '@apollo/client/testing'
 
 const exampleProblem = `let a = 5
 a = a + 10
@@ -16,16 +17,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.EMPTY}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.EMPTY}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+          exerciseId={1}
+        />
+      </MockedProvider>
     )
 
     // Test that an error message shows if the user is wrong
@@ -48,16 +52,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText, getByLabelText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.ERROR}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.ERROR}
+          setMessage={setMessage}
+          exerciseId={1}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.ERROR)).toBeInTheDocument()
@@ -87,16 +94,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { getByRole, queryByText } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={true}
-        setAnswerShown={setAnswerShown}
-        message={Message.SUCCESS}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          exerciseId={1}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          answerShown={true}
+          setAnswerShown={setAnswerShown}
+          message={Message.SUCCESS}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.SUCCESS)).toBeInTheDocument()
@@ -119,16 +129,19 @@ describe('ExerciseCard component', () => {
     const submitUserAnswer = jest.fn()
 
     const { queryByText, getByRole } = render(
-      <ExerciseCard
-        problem={exampleProblem}
-        answer={exampleAnswer}
-        explanation={exampleExplanation}
-        answerShown={false}
-        setAnswerShown={setAnswerShown}
-        message={Message.SUCCESS}
-        setMessage={setMessage}
-        submitUserAnswer={submitUserAnswer}
-      />
+      <MockedProvider>
+        <ExerciseCard
+          problem={exampleProblem}
+          answer={exampleAnswer}
+          explanation={exampleExplanation}
+          exerciseId={1}
+          answerShown={false}
+          setAnswerShown={setAnswerShown}
+          message={Message.SUCCESS}
+          setMessage={setMessage}
+          submitUserAnswer={submitUserAnswer}
+        />
+      </MockedProvider>
     )
 
     expect(queryByText(Message.SUCCESS)).toBeInTheDocument()

components/ExerciseCard/ExerciseCard.tsx

@@ -1,5 +1,6 @@
 import Markdown from 'markdown-to-jsx'
 import React, { useState } from 'react'
+import ExerciseReportCard from '../ExerciseReportCard'
 import { NewButton } from '../theme/Button'
 import { Text } from '../theme/Text'
 import styles from './exerciseCard.module.scss'
@@ -13,6 +14,7 @@ export type ExerciseCardProps = {
   message: Message
   setMessage: (message: Message) => void
   submitUserAnswer: (userAnswer: string) => void
+  exerciseId: number
 }
 
 export enum Message {
@@ -29,7 +31,8 @@ const ExerciseCard = ({
   setAnswerShown,
   message,
   setMessage,
-  submitUserAnswer
+  submitUserAnswer,
+  exerciseId
 }: ExerciseCardProps) => {
   const [studentAnswer, setStudentAnswer] = useState('')
 
@@ -102,6 +105,7 @@ const ExerciseCard = ({
           </div>
         </>
       )}
+      <ExerciseReportCard exerciseId={exerciseId} />
     </section>
   )
 }

components/ExerciseReportCard/ExerciseReportCard.test.js

@@ -35,7 +35,7 @@ describe('ExerciseReportCard Component', () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} answerShown={true} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     )
 
@@ -54,7 +54,7 @@ describe('ExerciseReportCard Component', () => {
 
     render(
       <MockedProvider mocks={mocks}>
-        <ExerciseReportCard exerciseId={1} answerShown={false} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     )
 

components/ExerciseReportCard/ExerciseReportCard.tsx

@@ -71,8 +71,8 @@ const Body = ({
           </Button>
           <Button
             outline
-            btnType="info"
-            color="info"
+            btnType="mute"
+            color="mute"
             onClick={() => setReportMode(false)}
           >
             Cancel
@@ -85,10 +85,9 @@ const Body = ({
 
 type Props = {
   exerciseId: number
-  answerShown: boolean
 }
 
-const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
+const ExerciseReportCard = ({ exerciseId }: Props) => {
   const [reportMode, setReportMode] = useState(false)
   const [description, setDescription] = useState('')
   const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({
@@ -98,11 +97,9 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
     }
   })
 
-  const marginOnExpand = answerShown ? 'mt-5' : ''
-
   if (data && !loading) {
     return (
-      <div className={`${styles.container} ${marginOnExpand}`}>
+      <div className={`${styles.container} mt-3`}>
         <h6>Reported a mistake in this exercise</h6>
         <p className="mb-0">
           We appreciate your input. We will shortly investigate the problem that
@@ -113,17 +110,20 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => {
   }
 
   return (
-    <div className={marginOnExpand}>
+    <div>
       {reportMode ? (
-        <Body
-          data={data}
-          loading={loading}
-          error={error}
-          description={description}
-          setDescription={setDescription}
-          flagExercise={flagExercise}
-          setReportMode={setReportMode}
-        />
+        <>
+          <hr />
+          <Body
+            data={data}
+            loading={loading}
+            error={error}
+            description={description}
+            setDescription={setDescription}
+            flagExercise={flagExercise}
+            setReportMode={setReportMode}
+          />
+        </>
       ) : (
         <Button
           className={`${btnStyles.newButton} ${styles.container__reportBtn}`}

components/ExerciseReportCard/exerciseReportCard.module.scss

@@ -1,7 +1,6 @@
 @use '../../scss/colors.module.scss';
 
 .container {
-  max-width: 400px;
   background-color: hsl(0, 0%, 96%);
   padding: 20px;
   border: 1px solid hsl(0, 0%, 84%);
@@ -21,8 +20,7 @@
 }
 
 .container__btns__container {
-  display: grid;
-  row-gap: 8px;
+  display: flex;
+  column-gap: 10px;
   margin-top: 18px;
-  width: 100%;
 }

pages/exercises/[lessonSlug].tsx

@@ -168,6 +168,7 @@ const Exercise = ({
           })
           submitUserAnswer(exercise.id, userAnswer)
         }}
+        exerciseId={exercise.id}
       />
       <div className="d-flex justify-content-between mt-4">
         {hasPrevious ? (

stories/components/ExerciseCard.stories.tsx

@@ -1,3 +1,4 @@
+import { MockedProvider } from '@apollo/client/testing'
 import React, { useState } from 'react'
 import ExerciseCard, { Message } from '../../components/ExerciseCard'
 
@@ -19,17 +20,20 @@ export const Basic = () => {
   const [message, setMessage] = useState(Message.EMPTY)
 
   return (
-    <ExerciseCard
-      problem={exampleProblem}
-      answer={exampleAnswer}
-      explanation={exampleExplanation}
-      answerShown={answerShown}
-      setAnswerShown={setAnswerShown}
-      message={message}
-      setMessage={setMessage}
-      submitUserAnswer={userAnswer => {
-        console.log(`User answer submitted: ${userAnswer}`)
-      }}
-    />
+    <MockedProvider>
+      <ExerciseCard
+        problem={exampleProblem}
+        answer={exampleAnswer}
+        explanation={exampleExplanation}
+        answerShown={answerShown}
+        setAnswerShown={setAnswerShown}
+        message={message}
+        setMessage={setMessage}
+        submitUserAnswer={userAnswer => {
+          console.log(`User answer submitted: ${userAnswer}`)
+        }}
+        exerciseId={1}
+      />
+    </MockedProvider>
   )
 }

stories/components/ExerciseReportCard.stories.tsx

@@ -34,7 +34,7 @@ export const Basic = () => {
           }
         ]}
       >
-        <ExerciseReportCard exerciseId={1} answerShown={false} />
+        <ExerciseReportCard exerciseId={1} />
       </MockedProvider>
     </div>
   )