feat: Migrate groupsConfiguration from Redux store to ReactQuery (#2980)

Author: ChrisChV

src/certificates/layout/MainLayout.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { Container, Layout } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { RequestStatus } from '@src/data/constants';
 
 import { SavingErrorAlert } from '../../generic/saving-error-alert';
 import SubHeader from '../../generic/sub-header/SubHeader';
@@ -48,7 +49,7 @@ const MainLayout = ({ courseId, showHeaderButtons, children }) => {
       </Container>
       <div className="certificates alert-toast">
         <SavingErrorAlert
-          savingStatus={savingStatus}
+          isQueryFailed={savingStatus === RequestStatus.FAILED}
           errorMessage={errorMessage}
         />
       </div>

src/course-unit/CourseUnit.tsx

@@ -403,7 +403,7 @@ const CourseUnit = () => {
         </Container>
         <div className="alert-toast">
           <SavingErrorAlert
-            savingStatus={savingStatus}
+            isQueryFailed={savingStatus === RequestStatus.FAILED}
             errorMessage={errorMessage}
           />
         </div>

…/saving-error-alert/SavingErrorAlert.jsx …/saving-error-alert/SavingErrorAlert.tsxsrc/generic/saving-error-alert/SavingErrorAlert.jsx renamed to src/generic/saving-error-alert/SavingErrorAlert.tsx src/generic/saving-error-alert/SavingErrorAlert.jsx renamed to src/generic/saving-error-alert/SavingErrorAlert.tsx

@@ -1,20 +1,23 @@
 import { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { Warning as WarningIcon } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { RequestStatus } from '../../data/constants';
 import AlertMessage from '../alert-message';
 import messages from './messages';
 
+export interface SavingErrorAlertProps {
+  /** Whether a mutation query has failed, triggering the error alert to appear. */
+  isQueryFailed: boolean;
+  errorMessage?: string;
+}
+
 const SavingErrorAlert = ({
-  savingStatus,
+  isQueryFailed,
   errorMessage,
-}) => {
+}: SavingErrorAlertProps) => {
   const intl = useIntl();
   const [showAlert, setShowAlert] = useState(false);
   const [isOnline, setIsOnline] = useState(window.navigator.onLine);
-  const isQueryFailed = savingStatus === RequestStatus.FAILED;
 
   useEffect(() => {
     const handleOnlineStatus = () => setIsOnline(window.navigator.onLine);
@@ -54,13 +57,4 @@ const SavingErrorAlert = ({
   );
 };
 
-SavingErrorAlert.defaultProps = {
-  errorMessage: undefined,
-};
-
-SavingErrorAlert.propTypes = {
-  savingStatus: PropTypes.string.isRequired,
-  errorMessage: PropTypes.string,
-};
-
 export default SavingErrorAlert;

src/generic/saving-error-alert/utils.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { AxiosError } from 'axios';
+import { RequestStatus } from '@src/data/constants';
+
+export const handleResponseErrors = (error: any, dispatch?: Function, savingStatusFunction?: Function) => {
+  let errorMessage = '';
+
+  try {
+    const {
+      customAttributes: { httpErrorResponseData },
+    } = error;
+    const parsedData = JSON.parse(httpErrorResponseData);
+    errorMessage = parsedData?.error || errorMessage;
+  } catch {
+    errorMessage = '';
+  }
+
+  if (dispatch && savingStatusFunction) {
+    dispatch(
+      savingStatusFunction({
+        status: RequestStatus.FAILED,
+        errorMessage,
+      }),
+    );
+  }
+
+  return false;
+};
+
+export const getMessageFromAxiosError = (error: AxiosError) => {
+  let errorMessage: string | undefined;
+  try {
+    // @ts-ignore
+    errorMessage = error.response?.data?.error;
+  } catch {
+    errorMessage = undefined;
+  }
+
+  return errorMessage;
+};

src/generic/saving-error-alert/utils.ts

@@ -0,0 +1,98 @@
+import { screen } from '@testing-library/react';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import {
+  initializeMocks,
+  render,
+  within,
+} from '../testUtils';
+import { getContentStoreApiUrl } from './data/api';
+import { groupConfigurationResponseMock } from './__mocks__';
+import messages from './messages';
+import experimentMessages from './experiment-configurations-section/messages';
+import contentGroupsMessages from './content-groups-section/messages';
+import GroupConfigurations from '.';
+
+let axiosMock;
+const courseId = 'course-v1:org+101+101';
+const enrollmentTrackGroups = groupConfigurationResponseMock.allGroupConfigurations[0];
+const contentGroups = groupConfigurationResponseMock.allGroupConfigurations[1];
+const teamGroups = groupConfigurationResponseMock.allGroupConfigurations[2];
+
+const renderComponent = () =>
+  render(
+    <CourseAuthoringProvider courseId={courseId}>
+      <GroupConfigurations />
+    </CourseAuthoringProvider>,
+  );
+
+describe('<GroupConfigurations />', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(200, groupConfigurationResponseMock);
+  });
+
+  it('renders component correctly', async () => {
+    renderComponent();
+
+    const mainContent = await screen.findByTestId('group-configurations-main-content-wrapper');
+    const groupConfigurationsTitle = screen.getAllByText(messages.headingTitle.defaultMessage)[0];
+
+    expect(groupConfigurationsTitle).toBeInTheDocument();
+    expect(
+      screen.getByText(messages.headingSubtitle.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      within(mainContent).getByText(contentGroupsMessages.addNewGroup.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      within(mainContent).getByText(experimentMessages.addNewGroup.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      within(mainContent).getByText(experimentMessages.title.defaultMessage),
+    ).toBeInTheDocument();
+    expect(screen.getByText(contentGroups.name)).toBeInTheDocument();
+    expect(screen.getByText(enrollmentTrackGroups.name)).toBeInTheDocument();
+    expect(screen.getByText(teamGroups.name)).toBeInTheDocument();
+  });
+
+  it('does not render an empty section for enrollment track groups if it is empty', async () => {
+    const shouldNotShowEnrollmentTrackResponse = {
+      ...groupConfigurationResponseMock,
+      shouldShowEnrollmentTrack: false,
+    };
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(200, shouldNotShowEnrollmentTrackResponse);
+
+    renderComponent();
+
+    await screen.findByTestId('group-configurations-main-content-wrapper');
+    expect(
+      screen.queryByTestId('group-configurations-empty-placeholder'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('does not show a connection error when the request fails with a non-403 status', async () => {
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(404);
+
+    renderComponent();
+
+    await screen.findByTestId('group-configurations-main-content-wrapper');
+    expect(screen.queryByTestId('connectionErrorAlert')).not.toBeInTheDocument();
+  });
+
+  it('displays a connection error alert when API responds with 403', async () => {
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(403);
+
+    renderComponent();
+
+    expect(await screen.findByTestId('connectionErrorAlert')).toBeInTheDocument();
+  });
+});

src/group-configurations/GroupConfigurations.test.jsx

@@ -101,26 +101,22 @@ describe('group configurations API calls', () => {
   it('should delete content group', async () => {
     const parentGroupId = contentGroups.id;
     const groupId = contentGroups.groups[0].id;
-    const response = { ...groupConfigurationResponseMock };
     const updatedContentGroups = {
       ...contentGroups,
       groups: contentGroups.groups.filter((group) => group.id !== groupId),
     };
 
-    response.allGroupConfigurations[1] = updatedContentGroups;
     axiosMock
       .onDelete(
         getLegacyApiUrl(courseId, parentGroupId, groupId),
       )
-      .reply(200, response);
+      .reply(200, {});
 
-    const result = await deleteContentGroup(courseId, parentGroupId, groupId);
-    const expected = camelCaseObject(response);
+    await deleteContentGroup(courseId, parentGroupId, groupId);
 
     expect(axiosMock.history.delete[0].url).toEqual(
       getLegacyApiUrl(courseId, updatedContentGroups.id, groupId),
     );
-    expect(result).toEqual(expected);
   });
 
   it('should create experiment configurations', async () => {