feat: add grade buttons to scheduled item cards

src/_shared/components/CardActionButtonRow/CardActionButtonRow.test.tsx

@@ -4,22 +4,27 @@ import userEvent from '@testing-library/user-event';
 
 import { CardActionButtonRow } from './CardActionButtonRow';
 
+import { approvedCorpusItem } from '../../../curated-corpus/helpers/approvedItem';
+
 describe('The CardActionButtonRow component', () => {
   const onMoveToBottom = jest.fn();
   const onEdit = jest.fn();
   const onReschedule = jest.fn();
   const onUnschedule = jest.fn();
   const onReject = jest.fn();
+  const onGrade = jest.fn();
 
   //TODO update when reject button flow ready
   it('should render all four card action buttons and call their callbacks', () => {
     render(
       <CardActionButtonRow
+        item={approvedCorpusItem}
         onEdit={onEdit}
         onUnschedule={onUnschedule}
         onReschedule={onReschedule}
         onMoveToBottom={onMoveToBottom}
         onReject={onReject}
+        onGrade={onGrade}
       />,
     );
 

src/_shared/components/CardActionButtonRow/CardActionButtonRow.tsx

@@ -1,12 +1,22 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import {
+  IconButton,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+} from '@mui/material';
 import { Stack } from '@mui/system';
 import ScheduleIcon from '@mui/icons-material/Schedule';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import EventBusyOutlinedIcon from '@mui/icons-material/EventBusyOutlined';
 import KeyboardDoubleArrowDownOutlinedIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';
 import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import { curationPalette } from '../../../theme';
+import {
+  ActionScreen,
+  ApprovedCorpusItem,
+  ApprovedItemGrade,
+} from '../../../api/generatedTypes';
 
 interface CardActionButtonRowProps {
   /**
@@ -33,6 +43,20 @@ interface CardActionButtonRowProps {
    * Callback for the "Reject" (trash) button
    */
   onReject: VoidFunction;
+
+  /**
+   * Callback for clicking a grade button
+   */
+  onGrade: (
+    item: ApprovedCorpusItem,
+    grade: ApprovedItemGrade,
+    actionScreen: ActionScreen,
+  ) => void;
+
+  /**
+   * The approved corpus item being graded
+   */
+  item: ApprovedCorpusItem;
 }
 
 export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
@@ -91,6 +115,26 @@ export const CardActionButtonRow: React.FC<CardActionButtonRowProps> = (
         </Tooltip>
       </Stack>
 
+      <Stack direction="row" justifyContent="flex-start">
+        <ToggleButtonGroup
+          size="small"
+          color="primary"
+          onChange={(event: React.MouseEvent, value: any) => {
+            props.onGrade(props.item, value[0], ActionScreen.Schedule);
+          }}
+        >
+          {Object.values(ApprovedItemGrade).map((grade) => (
+            <ToggleButton
+              key={grade}
+              value={grade}
+              selected={grade === props.item.grade}
+            >
+              {grade}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      </Stack>
+
       <Stack direction="row" justifyContent="flex-start">
         <Tooltip title="Unschedule" placement="bottom">
           <IconButton

src/api/fragments/curatedItemData.ts

@@ -22,6 +22,7 @@ export const CuratedItemData = gql`
     status
     source
     topic
+    grade
     isCollection
     isTimeSensitive
     isSyndicated