feat: add overall feedback instructions to tooltip (#1)

* refactor: show feedback instructions rather than default text on overall feedback tooltip

* chore: update snapshots

* style: fix style issues

* chore: update packages

Author: nsprenkle

src/components/Assessment/EditableAssessment/OverallFeedback/index.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useViewStep } from 'hooks/routing';
 import {
-  useOverallFeedbackPrompt,
+  useOverallFeedbackInstructions,
   useOverallFeedbackFormFields,
 } from 'hooks/assessment';
 
@@ -19,7 +19,7 @@ import { stepNames } from 'constants/index';
  */
 const OverallFeedback = () => {
   const { formatMessage } = useIntl();
-  const prompt = useOverallFeedbackPrompt();
+  const instructions = useOverallFeedbackInstructions();
   const { value, onChange } = useOverallFeedbackFormFields();
 
   const step = useViewStep();
@@ -33,7 +33,7 @@ const OverallFeedback = () => {
           {formatMessage(messages.overallComments)}
         </span>
         <InfoPopover>
-          <div data-testid="prompt-test-id">{prompt}</div>
+          <div data-testid="instructions-test-id">{instructions}</div>
         </InfoPopover>
       </Form.Label>
       <Form.Control

src/components/Assessment/EditableAssessment/OverallFeedback/index.test.jsx

@@ -1,13 +1,13 @@
 import { screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useOverallFeedbackPrompt, useOverallFeedbackFormFields } from 'hooks/assessment';
+import { useOverallFeedbackInstructions, useOverallFeedbackFormFields } from 'hooks/assessment';
 import { useViewStep } from 'hooks/routing';
 import { stepNames } from 'constants/index';
 import { renderWithIntl } from '../../../../testUtils';
 import OverallFeedback from '.';
 
 jest.mock('hooks/assessment', () => ({
-  useOverallFeedbackPrompt: jest.fn(),
+  useOverallFeedbackInstructions: jest.fn(),
   useOverallFeedbackFormFields: jest.fn(),
 }));
 
@@ -27,11 +27,11 @@ jest.mock('hooks/routing', () => ({
 describe('<OverallFeedback />', () => {
   const mockOnChange = jest.fn();
   const mockFeedbackValue = 'Test feedback content';
-  const mockPrompt = 'Please provide overall feedback';
+  const mockInstructions = 'Please provide overall feedback';
 
   beforeEach(() => {
     jest.clearAllMocks();
-    useOverallFeedbackPrompt.mockReturnValue(mockPrompt);
+    useOverallFeedbackInstructions.mockReturnValue(mockInstructions);
     useOverallFeedbackFormFields.mockReturnValue({
       value: mockFeedbackValue,
       onChange: mockOnChange,

src/components/Assessment/types.ts

@@ -1,4 +1,4 @@
-import { CriterionConfig, MutationStatus } from "data/services/lms/types";
+import { CriterionConfig, MutationStatus } from 'data/services/lms/types';
 
 export type Criterion = {
   optionsValue: string | null;
@@ -21,4 +21,4 @@ export type RubricHookData = {
   overallFeedbackDisabled: boolean;
   overallFeedbackIsInvalid: boolean;
   overallFeedbackPrompt: string;
-};
+};

src/data/services/lms/hooks/selectors/index.ts

@@ -57,19 +57,21 @@ export const useStepState = ({ step = null } = {}) => {
   if (stepName === stepNames.peer && stepInfo?.peer) {
     const config = stepConfig[stepName];
     const { numberOfAssessmentsCompleted, numberOfReceivedAssessments } = stepInfo.peer;
-    const { minNumberToGrade, minNumberToBeGradedBy, startDatetime, endDatetime } = config;
+    const {
+      minNumberToGrade, minNumberToBeGradedBy, startDatetime, endDatetime,
+    } = config;
     const gradingDone = minNumberToGrade <= numberOfAssessmentsCompleted;
     const receivingDone = minNumberToBeGradedBy <= numberOfReceivedAssessments;
     if (now.isBefore(startDatetime)) {
       return stepStates.notAvailable;
     }
-    else if (now.isAfter(endDatetime)) {
+    if (now.isAfter(endDatetime)) {
       return stepStates.closed;
     }
-    else if (gradingDone && !receivingDone) {
+    if (gradingDone && !receivingDone) {
       return stepStates.waitingForPeerGrades;
     }
-    else if (stepInfo.peer.isWaitingForSubmissions) {
+    if (stepInfo.peer.isWaitingForSubmissions) {
       return stepStates.waiting;
     }
   }
@@ -80,7 +82,7 @@ export const useStepState = ({ step = null } = {}) => {
     if (now.isBefore(startDatetime)) {
       return stepStates.notAvailable;
     }
-    else if (now.isAfter(endDatetime)) {
+    if (now.isAfter(endDatetime)) {
       return stepStates.closed;
     }
   }

src/data/services/lms/hooks/selectors/oraConfig.ts

@@ -75,8 +75,8 @@ export const useEmptyRubric = () => {
   }), [rubric]);
 };
 export const useCriteriaConfig = () => useRubricConfig()?.criteria;
-export const useOverallFeedbackConfig = () => useRubricConfig()?.feedbackConfig;
-export const useOverallFeedbackPrompt = () => useRubricConfig()?.feedbackConfig?.defaultText;
+export const useOverallFeedbackDefaultText = () => useRubricConfig()?.feedbackConfig?.defaultText;
+export const useOverallFeedbackInstructions = () => useRubricConfig()?.feedbackConfig?.description;
 
 export const useLeaderboardConfig = (): types.LeaderboardConfig | undefined => (
   useORAConfigData()?.leaderboardConfig

src/hooks/assessment.js

@@ -245,5 +245,6 @@ export const {
 export const {
   useCriteriaConfig,
   useEmptyRubric,
-  useOverallFeedbackPrompt,
+  useOverallFeedbackDefaultText,
+  useOverallFeedbackInstructions,
 } = lmsSelectors;

src/hooks/assessment.test.js

@@ -46,7 +46,8 @@ jest.mock('data/services/lms/hooks/selectors', () => ({
   useCriteriaConfig: jest.fn(),
   useStepInfo: jest.fn(),
   useEmptyRubric: jest.fn(),
-  useOverallFeedbackPrompt: jest.fn(),
+  useOverallFeedbackDefaultText: jest.fn(),
+  useOverallFeedbackInstructions: jest.fn(),
   useResponseData: jest.fn(),
 }));
 
@@ -619,7 +620,7 @@ describe('Assessment hooks', () => {
     [
       lmsSelectorKeys.useCriteriaConfig,
       lmsSelectorKeys.useEmptyRubric,
-      lmsSelectorKeys.useOverallFeedbackPrompt,
+      lmsSelectorKeys.useOverallFeedbackInstructions,
     ].forEach((key) => testExport(lmsSelectors, key));
   });
 });