Skip to content

Commit

Permalink
feat: Use configured DEFAULT_GRADE_DESIGNATIONS (#1227)
Browse files Browse the repository at this point in the history 
Support was recently added to edx-platform to add customisised default grade
designations, this change adds support for them to this MFE as well to bring it
to partiy with the edx-platform UI

It also refactors the grading-settings page to use React Query and updates the
logic used when partitioning grades by default to make it work better when there
are more than 5 partitions.

Co-authored-by: Farhaan Bukhsh <[email protected]>
  • Loading branch information
@xitij2000 @farhaanbukhsh
xitij2000 and farhaanbukhsh authored Oct 25, 2024
1 parent 774728a commit 4d4adce
Show file tree
Hide file tree
Showing 12 changed files with 316 additions and 320 deletions.
101 changes: 53 additions & 48 deletions src/grading-settings/GradingSettings.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,59 @@
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useIntl } from '@edx/frontend-platform/i18n';
import {
Container, Layout, Button, StatefulButton,
Button, Container, Layout, StatefulButton,
} from '@openedx/paragon';
import { CheckCircle, Warning, Add as IconAdd } from '@openedx/paragon/icons';

import { useModel } from '../generic/model-store';
import { Add as IconAdd, CheckCircle, Warning } from '@openedx/paragon/icons';
import {
useCourseSettings,
useGradingSettings,
useGradingSettingUpdater,
} from 'CourseAuthoring/grading-settings/data/apiHooks';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import { STATEFUL_BUTTON_STATES } from '../constants';
import AlertMessage from '../generic/alert-message';
import { RequestStatus } from '../data/constants';
import InternetConnectionAlert from '../generic/internet-connection-alert';
import SubHeader from '../generic/sub-header/SubHeader';

import { useModel } from '../generic/model-store';
import SectionSubHeader from '../generic/section-sub-header';
import { STATEFUL_BUTTON_STATES } from '../constants';
import {
getGradingSettings,
getCourseAssignmentLists,
getSavingStatus,
getLoadingStatus,
getCourseSettings,
} from './data/selectors';
import { fetchGradingSettings, sendGradingSetting, fetchCourseSettingsQuery } from './data/thunks';
import GradingScale from './grading-scale/GradingScale';
import GradingSidebar from './grading-sidebar';
import messages from './messages';
import SubHeader from '../generic/sub-header/SubHeader';
import getPageHeadTitle from '../generic/utils';
import AssignmentSection from './assignment-section';
import CreditSection from './credit-section';
import DeadlineSection from './deadline-section';
import GradingScale from './grading-scale/GradingScale';
import GradingSidebar from './grading-sidebar';
import { useConvertGradeCutoffs, useUpdateGradingData } from './hooks';
import getPageHeadTitle from '../generic/utils';
import messages from './messages';

const GradingSettings = ({ courseId }) => {
const intl = useIntl();
const {
data: gradingSettings,
isLoading: isGradingSettingsLoading,
} = useGradingSettings(courseId);
const {
data: courseSettingsData,
isLoading: isCourseSettingsLoading,
} = useCourseSettings(courseId);
const {
mutate: updateGradingSettings,
isLoading: savePending,
isSuccess: savingStatus,
isError: savingFailed,
} = useGradingSettingUpdater(courseId);

const courseAssignmentLists = gradingSettings?.courseAssignmentLists;
const courseGradingDetails = gradingSettings?.courseDetails;

const GradingSettings = ({ intl, courseId }) => {
const gradingSettingsData = useSelector(getGradingSettings);
const courseSettingsData = useSelector(getCourseSettings);
const courseAssignmentLists = useSelector(getCourseAssignmentLists);
const savingStatus = useSelector(getSavingStatus);
const loadingStatus = useSelector(getLoadingStatus);
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
const dispatch = useDispatch();
const isLoading = loadingStatus === RequestStatus.IN_PROGRESS;
const isLoading = isCourseSettingsLoading || isGradingSettingsLoading;
const [isQueryPending, setIsQueryPending] = useState(false);
const [showOverrideInternetConnectionAlert, setOverrideInternetConnectionAlert] = useState(false);
const [eligibleGrade, setEligibleGrade] = useState(null);

const courseDetails = useModel('courseDetails', courseId);
document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle));
const courseName = useModel('courseDetails', courseId)?.name;

const {
graders,
Expand All @@ -60,7 +68,7 @@ const GradingSettings = ({ intl, courseId }) => {
handleResetPageData,
handleAddAssignment,
handleRemoveAssignment,
} = useUpdateGradingData(gradingSettingsData, setOverrideInternetConnectionAlert, setShowSuccessAlert);
} = useUpdateGradingData(courseGradingDetails, setOverrideInternetConnectionAlert, setShowSuccessAlert);

const {
gradeLetters,
Expand All @@ -69,28 +77,22 @@ const GradingSettings = ({ intl, courseId }) => {
} = useConvertGradeCutoffs(gradeCutoffs);

useEffect(() => {
if (savingStatus === RequestStatus.SUCCESSFUL) {
if (savingStatus) {
setShowSuccessAlert(!showSuccessAlert);
setShowSavePrompt(!showSavePrompt);
setTimeout(() => setShowSuccessAlert(false), 15000);
setIsQueryPending(!isQueryPending);
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [savingStatus]);

useEffect(() => {
dispatch(fetchGradingSettings(courseId));
dispatch(fetchCourseSettingsQuery(courseId));
}, [courseId]);
}, [savePending]);

if (isLoading) {
// eslint-disable-next-line react/jsx-no-useless-fragment
return <></>;
return null;
}

const handleQueryProcessing = () => {
setShowSuccessAlert(false);
dispatch(sendGradingSetting(courseId, gradingData));
updateGradingSettings(gradingData);
};

const handleSendGradingSettingsData = () => {
Expand All @@ -110,11 +112,14 @@ const GradingSettings = ({ intl, courseId }) => {
default: intl.formatMessage(messages.buttonSaveText),
pending: intl.formatMessage(messages.buttonSavingText),
},
disabledStates: [RequestStatus.PENDING],
disabledStates: [STATEFUL_BUTTON_STATES.pending],
};

return (
<>
<Helmet>
<title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
</Helmet>
<Container size="xl" className="grading px-4">
<div className="mt-5">
<AlertMessage
Expand Down Expand Up @@ -156,6 +161,7 @@ const GradingSettings = ({ intl, courseId }) => {
resetDataRef={resetDataRef}
setOverrideInternetConnectionAlert={setOverrideInternetConnectionAlert}
setEligibleGrade={setEligibleGrade}
defaultGradeDesignations={gradingSettings?.defaultGradeDesignations}
/>
</section>
{courseSettingsData.creditEligibilityEnabled && courseSettingsData.isCreditCourse && (
Expand Down Expand Up @@ -226,7 +232,7 @@ const GradingSettings = ({ intl, courseId }) => {
<div className="alert-toast">
{showOverrideInternetConnectionAlert && (
<InternetConnectionAlert
isFailed={savingStatus === RequestStatus.FAILED}
isFailed={savingFailed}
isQueryPending={isQueryPending}
onQueryProcessing={handleQueryProcessing}
onInternetConnectionFailed={handleInternetConnectionFailed}
Expand Down Expand Up @@ -263,8 +269,7 @@ const GradingSettings = ({ intl, courseId }) => {
};

GradingSettings.propTypes = {
intl: intlShape.isRequired,
courseId: PropTypes.string.isRequired,
};

export default injectIntl(GradingSettings);
export default GradingSettings;
116 changes: 70 additions & 46 deletions src/grading-settings/GradingSettings.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
import React from 'react';
import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeMockApp } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { render, waitFor, fireEvent } from '@testing-library/react';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { AppProvider } from '@edx/frontend-platform/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
act, fireEvent, render, screen,
} from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import React from 'react';

import initializeStore from '../store';
import { getGradingSettingsApiUrl } from './data/api';
import gradingSettings from './__mocks__/gradingSettings';
import { getCourseSettingsApiUrl, getGradingSettingsApiUrl } from './data/api';
import GradingSettings from './GradingSettings';
import messages from './messages';

const courseId = '123';
let axiosMock;
let store;

const queryClient = new QueryClient();

const RootWrapper = () => (
<AppProvider store={store}>
<IntlProvider locale="en" messages={{}}>
<GradingSettings intl={injectIntl} courseId={courseId} />
<QueryClientProvider client={queryClient}>
<GradingSettings intl={injectIntl} courseId={courseId} />
</QueryClientProvider>
</IntlProvider>
</AppProvider>
);
Expand All @@ -28,10 +35,7 @@ describe('<GradingSettings />', () => {
beforeEach(() => {
initializeMockApp({
authenticatedUser: {
userId: 3,
username: 'abc123',
administrator: true,
roles: [],
userId: 3, username: 'abc123', administrator: true, roles: [],
},
});

Expand All @@ -40,52 +44,72 @@ describe('<GradingSettings />', () => {
axiosMock
.onGet(getGradingSettingsApiUrl(courseId))
.reply(200, gradingSettings);
axiosMock
.onPost(getGradingSettingsApiUrl(courseId))
.reply(200, {});
axiosMock.onGet(getCourseSettingsApiUrl(courseId))
.reply(200, {});
render(<RootWrapper />);
});

it('should render without errors', async () => {
const { getByText, getAllByText } = render(<RootWrapper />);
await waitFor(() => {
const gradingElements = getAllByText(messages.headingTitle.defaultMessage);
const gradingTitle = gradingElements[0];
expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
expect(gradingTitle).toBeInTheDocument();
expect(getByText(messages.policy.defaultMessage)).toBeInTheDocument();
expect(getByText(messages.policiesDescription.defaultMessage)).toBeInTheDocument();
function testSaving() {
const saveBtn = screen.getByText(messages.buttonSaveText.defaultMessage);
expect(saveBtn).toBeInTheDocument();
fireEvent.click(saveBtn);
expect(screen.getByText(messages.buttonSavingText.defaultMessage)).toBeInTheDocument();
}

function setOnlineStatus(isOnline) {
jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(isOnline);
act(() => {
window.dispatchEvent(new window.Event(isOnline ? 'online' : 'offline'));
});
}

it('should render without errors', async () => {
const gradingElements = await screen.findAllByText(messages.headingTitle.defaultMessage);
const gradingTitle = gradingElements[0];
expect(screen.getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
expect(gradingTitle).toBeInTheDocument();
expect(screen.getByText(messages.policy.defaultMessage)).toBeInTheDocument();
expect(screen.getByText(messages.policiesDescription.defaultMessage)).toBeInTheDocument();
});

it('should update segment input value and show save alert', async () => {
const { getByTestId, getAllByTestId } = render(<RootWrapper />);
await waitFor(() => {
const segmentInputs = getAllByTestId('grading-scale-segment-input');
expect(segmentInputs).toHaveLength(5);
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
expect(segmentInput).toHaveValue('Test');
expect(getByTestId('grading-settings-save-alert')).toBeVisible();
});
const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
expect(segmentInputs).toHaveLength(5);
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
expect(segmentInput).toHaveValue('Test');
expect(screen.getByTestId('grading-settings-save-alert')).toBeVisible();
});

it('should update grading scale segment input value on change and cancel the action', async () => {
const { getByText, getAllByTestId } = render(<RootWrapper />);
await waitFor(() => {
const segmentInputs = getAllByTestId('grading-scale-segment-input');
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
fireEvent.click(getByText(messages.buttonCancelText.defaultMessage));
expect(segmentInput).toHaveValue('a');
});
const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
fireEvent.click(screen.getByText(messages.buttonCancelText.defaultMessage));
expect(segmentInput).toHaveValue('a');
});

it('should save segment input changes and display saving message', async () => {
const { getByText, getAllByTestId } = render(<RootWrapper />);
await waitFor(() => {
const segmentInputs = getAllByTestId('grading-scale-segment-input');
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
const saveBtn = getByText(messages.buttonSaveText.defaultMessage);
expect(saveBtn).toBeInTheDocument();
fireEvent.click(saveBtn);
expect(getByText(messages.buttonSavingText.defaultMessage)).toBeInTheDocument();
});
const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
testSaving();
});

it('should handle being offline gracefully', async () => {
setOnlineStatus(false);
const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
const segmentInput = segmentInputs[1];
fireEvent.change(segmentInput, { target: { value: 'Test' } });
const saveBtn = screen.getByText(messages.buttonSaveText.defaultMessage);
expect(saveBtn).toBeInTheDocument();
fireEvent.click(saveBtn);
expect(screen.getByText(/studio's having trouble saving your work/i)).toBeInTheDocument();
expect(screen.queryByText(messages.buttonSavingText.defaultMessage)).not.toBeInTheDocument();
setOnlineStatus(true);
testSaving();
});
});
26 changes: 26 additions & 0 deletions src/grading-settings/data/apiHooks.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { getCourseSettings, getGradingSettings, sendGradingSettings } from './api';

export const useGradingSettings = (courseId: string) => (
useQuery({
queryKey: ['gradingSettings', courseId],
queryFn: () => getGradingSettings(courseId),
})
);

export const useCourseSettings = (courseId: string) => (
useQuery({
queryKey: ['courseSettings', courseId],
queryFn: () => getCourseSettings(courseId),
})
);

export const useGradingSettingUpdater = (courseId: string) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (settings) => sendGradingSettings(courseId, settings),
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['gradingSettings', courseId] });
},
});
};
13 changes: 0 additions & 13 deletions src/grading-settings/data/selectors.js
View file

This file was deleted.

Loading

0 comments on commit 4d4adce

Please sign in to comment.