Enable cohorts (#70)

* feat: enable cohorts

* test: unit tests

* refactor: add disable/enable views

* fix: change endpoints to use v1

* test: add additional tests

* fix: fix title colors and add onError

* refactor: move cohorts data to its own folder

* refactor: rename lms base url

* docs: add documentation for override external urls

Author: diana-villalvazo-wgu

docs/how_tos/override-external-urls.rst

@@ -0,0 +1,55 @@
+Override External URLs
+======================
+
+What is getExternalLinkUrl?
+---------------------------
+
+The `getExternalLinkUrl` function is a utility from `@openedx/frontend-base` that allows for centralized management of external URLs. It enables the override of external links through configuration, making it possible to customize external references without modifying the source code directly.
+
+URLs wrapped with getExternalLinkUrl
+------------------------------------
+
+Currently, the following external URLs are wrapped with `getExternalLinkUrl` in the authoring application:
+
+- https://openedx.atlassian.net/wiki/spaces/ENG/pages/123456789/Cohorts+Feature+Documentation
+
+
+How to Override External URLs
+-----------------------------
+
+To override external URLs, you can use the frontend platform's configuration system.
+This object should be added to the config object defined in the env.config.[js,jsx,ts,tsx], and must be named externalLinkUrlOverrides.
+
+1. **Environment Configuration**
+   Add the URL overrides to your environment configuration:
+
+   .. code-block:: javascript
+
+      const config = {
+        // Other config options...
+        externalLinkUrlOverrides: {
+          'https://www.edx.org/accessibility': 'https://your-custom-domain.com/accessibility',
+          // Add other URL overrides here
+        }
+      };
+
+Examples
+--------
+
+**Original URL:** Default community accessibility link
+**Override:** Your institution's accessibility policy page
+
+.. code-block:: javascript
+
+   // In your app configuration
+   getExternalLinkUrl('https://www.edx.org/accessibility')
+   // Returns: 'https://your-custom-domain.com/accessibility'
+   // Instead of the default Open edX community link
+
+Benefits
+--------
+
+- **Customization**: Institutions can point to their own resources
+- **Maintainability**: URLs can be changed without code modifications  
+- **Consistency**: Centralized URL management across the application
+- **Flexibility**: Different environments can have different external links

src/cohorts/CohortsPage.test.tsx

@@ -0,0 +1,82 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CohortsPage from './CohortsPage';
+import { useCohorts, useCohortStatus, useToggleCohorts } from './data/apiHook';
+import { renderWithIntl } from '../testUtils';
+import messages from './messages';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ courseId: 'course-v1:edX+Test+2024' }),
+}));
+
+jest.mock('./data/apiHook', () => ({
+  useCohorts: jest.fn(),
+  useCohortStatus: jest.fn(),
+  useToggleCohorts: jest.fn(),
+}));
+
+describe('CohortsPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders cohorts list and add button when cohorts exist', () => {
+    (useCohorts as jest.Mock).mockReturnValue({ data: [{ id: '1', name: 'Cohort 1' }] });
+    (useCohortStatus as jest.Mock).mockReturnValue({ data: { isCohorted: true } });
+    (useToggleCohorts as jest.Mock).mockReturnValue({ mutate: jest.fn() });
+
+    renderWithIntl(<CohortsPage />);
+    expect(screen.getByText(messages.cohortsTitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Cohort 1' })).toBeInTheDocument();
+    expect(screen.getByText(`+ ${messages.addCohort.defaultMessage}`)).toBeInTheDocument();
+  });
+
+  it('renders no cohorts message and enable button when no cohorts', () => {
+    (useCohorts as jest.Mock).mockReturnValue({ data: [] });
+    (useCohortStatus as jest.Mock).mockReturnValue({ data: { isCohorted: false } });
+    (useToggleCohorts as jest.Mock).mockReturnValue({ mutate: jest.fn() });
+
+    renderWithIntl(<CohortsPage />);
+    expect(screen.getByText(messages.noCohortsMessage.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.enableCohorts.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: messages.learnMore.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls enableCohortsMutate when enable button is clicked', async () => {
+    const enableMock = jest.fn();
+    (useCohorts as jest.Mock).mockReturnValue({ data: [] });
+    (useCohortStatus as jest.Mock).mockReturnValue({ data: { isCohorted: false } });
+    (useToggleCohorts as jest.Mock).mockReturnValue({ mutate: enableMock });
+
+    renderWithIntl(<CohortsPage />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.enableCohorts.defaultMessage }));
+    expect(enableMock).toHaveBeenCalled();
+  });
+
+  it('opens and closes the disable cohorts modal', async () => {
+    (useCohorts as jest.Mock).mockReturnValue({ data: [{ id: '1', name: 'Cohort 1' }] });
+    (useCohortStatus as jest.Mock).mockReturnValue({ data: { isCohorted: true } });
+    (useToggleCohorts as jest.Mock).mockReturnValue({ mutate: jest.fn() });
+
+    renderWithIntl(<CohortsPage />);
+    const user = userEvent.setup();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: messages.disableCohorts.defaultMessage }));
+    expect(screen.getByRole('dialog', { name: messages.disableCohorts.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls disableCohortsMutate and closes modal on confirm', async () => {
+    const disableMock = jest.fn();
+    (useCohorts as jest.Mock).mockReturnValue({ data: [{ id: '1', name: 'Cohort 1' }] });
+    (useCohortStatus as jest.Mock).mockReturnValue({ data: { isCohorted: true } });
+    (useToggleCohorts as jest.Mock).mockReturnValue({ mutate: disableMock });
+
+    renderWithIntl(<CohortsPage />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.disableCohorts.defaultMessage }));
+    await user.click(screen.getByRole('button', { name: messages.disableLabel.defaultMessage }));
+    expect(disableMock).toHaveBeenCalled();
+  });
+});

src/cohorts/CohortsPage.tsx

@@ -0,0 +1,62 @@
+import { useIntl } from '@openedx/frontend-base';
+import { IconButton } from '@openedx/paragon';
+import { Settings } from '@openedx/paragon/icons';
+import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { useCohortStatus, useToggleCohorts } from './data/apiHook';
+import DisableCohortsModal from './components/DisableCohortsModal';
+import messages from './messages';
+import DisabledCohortsView from './components/DisabledCohortsView';
+import EnabledCohortsView from './components/EnabledCohortsView';
+
+const CohortsPage = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams();
+  const { data: cohortStatus } = useCohortStatus(courseId);
+  const { mutate: toggleCohortsMutate } = useToggleCohorts(courseId);
+  const [isOpenDisableModal, setIsOpenDisableModal] = useState(false);
+  const { isCohorted = false } = cohortStatus ?? {};
+
+  const handleEnableCohorts = () => {
+    toggleCohortsMutate({ isCohorted: true },
+      {
+        onError: (error) => console.log(error)
+      });
+  };
+
+  const handleDisableCohorts = () => {
+    toggleCohortsMutate({ isCohorted: false },
+      {
+        onError: (error) => console.log(error)
+      });
+    setIsOpenDisableModal(false);
+  };
+
+  return (
+    <div className="mt-4.5 mb-4 mx-4">
+      <div className="d-inline-flex align-items-center">
+        <h3 className="mb-0 text-gray-700">{intl.formatMessage(messages.cohortsTitle)}</h3>
+        {isCohorted && (
+          <div className="small">
+            <IconButton
+              alt={intl.formatMessage(messages.disableCohorts)}
+              iconAs={Settings}
+              iconClassNames="mb-2 text-gray-500"
+              size="sm"
+              variant="secondary"
+              onClick={() => setIsOpenDisableModal(true)}
+            />
+          </div>
+        )}
+      </div>
+      {isCohorted ? (
+        <EnabledCohortsView />
+      ) : (
+        <DisabledCohortsView onEnableCohorts={handleEnableCohorts} />
+      )}
+      <DisableCohortsModal isOpen={isOpenDisableModal} onClose={() => setIsOpenDisableModal(false)} onConfirmDisable={handleDisableCohorts} />
+    </div>
+  );
+};
+
+export default CohortsPage;

src/cohorts/components/DisableCohortsModal.test.tsx

@@ -0,0 +1,67 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DisableCohortsModal from './DisableCohortsModal';
+import { renderWithIntl } from '../../testUtils';
+import messages from '../messages';
+
+describe('DisableCohortsModal', () => {
+  const onClose = jest.fn();
+  const onConfirmDisable = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal when isOpen is true', () => {
+    renderWithIntl(
+      <DisableCohortsModal
+        isOpen={true}
+        onClose={onClose}
+        onConfirmDisable={onConfirmDisable}
+      />
+    );
+    expect(screen.getByRole('dialog', { name: messages.disableCohorts.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByText(messages.disableMessage.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.cancelLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.disableLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('does not render modal when isOpen is false', () => {
+    renderWithIntl(
+      <DisableCohortsModal
+        isOpen={false}
+        onClose={onClose}
+        onConfirmDisable={onConfirmDisable}
+      />
+    );
+    expect(screen.queryByText(messages.disableCohorts.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('calls onClose when cancel button is clicked', async () => {
+    renderWithIntl(
+      <DisableCohortsModal
+        isOpen={true}
+        onClose={onClose}
+        onConfirmDisable={onConfirmDisable}
+      />
+    );
+    const user = userEvent.setup();
+    const cancelButton = screen.getByRole('button', { name: messages.cancelLabel.defaultMessage });
+    await user.click(cancelButton);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onConfirmDisable when disable button is clicked', async () => {
+    renderWithIntl(
+      <DisableCohortsModal
+        isOpen={true}
+        onClose={onClose}
+        onConfirmDisable={onConfirmDisable}
+      />
+    );
+    const user = userEvent.setup();
+    const disableButton = screen.getByRole('button', { name: messages.disableLabel.defaultMessage });
+    await user.click(disableButton);
+    expect(onConfirmDisable).toHaveBeenCalled();
+  });
+});

src/cohorts/components/DisableCohortsModal.tsx

@@ -0,0 +1,29 @@
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+
+interface DisableCohortsModalProps {
+  isOpen: boolean,
+  onClose: () => void,
+  onConfirmDisable: () => void,
+}
+
+const DisableCohortsModal = ({ isOpen, onClose, onConfirmDisable }: DisableCohortsModalProps) => {
+  const intl = useIntl();
+
+  return (
+    <ModalDialog title={intl.formatMessage(messages.disableCohorts)} onClose={onClose} isOpen={isOpen} size="sm" hasCloseButton={false} isOverflowVisible={false}>
+      <div className="mx-4 mt-4 mb-2.5">
+        <p>{intl.formatMessage(messages.disableMessage)}</p>
+      </div>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <Button variant="tertiary" onClick={onClose}>{intl.formatMessage(messages.cancelLabel)}</Button>
+          <Button variant="primary" onClick={onConfirmDisable}>{intl.formatMessage(messages.disableLabel)}</Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default DisableCohortsModal;

src/cohorts/components/DisabledCohortsView.test.tsx

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '../../testUtils';
+import messages from '../messages';
+import DisabledCohortsView from './DisabledCohortsView';
+import userEvent from '@testing-library/user-event';
+
+describe('DisabledCohortsView', () => {
+  const onEnableCohorts = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the no cohorts message', () => {
+    renderWithIntl(<DisabledCohortsView onEnableCohorts={onEnableCohorts} />);
+    expect(screen.getByText(messages.noCohortsMessage.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders the learn more link with correct href', () => {
+    renderWithIntl(<DisabledCohortsView onEnableCohorts={onEnableCohorts} />);
+    const link = screen.getByRole('link', { name: messages.learnMore.defaultMessage }) as HTMLAnchorElement;
+    expect(link).toBeInTheDocument();
+    expect(link.href).toContain('https://openedx.atlassian.net/wiki/spaces/ENG/pages/123456789/Cohorts+Feature+Documentation');
+  });
+
+  it('renders the enable cohorts button', () => {
+    renderWithIntl(<DisabledCohortsView onEnableCohorts={onEnableCohorts} />);
+    expect(screen.getByRole('button', { name: messages.enableCohorts.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls onEnableCohorts when button is clicked', async () => {
+    renderWithIntl(<DisabledCohortsView onEnableCohorts={onEnableCohorts} />);
+    const user = userEvent.setup();
+    const enableCohortsButton = screen.getByRole('button', { name: messages.enableCohorts.defaultMessage });
+    await user.click(enableCohortsButton);
+    expect(onEnableCohorts).toHaveBeenCalledTimes(1);
+  });
+});

src/cohorts/components/DisabledCohortsView.tsx

@@ -0,0 +1,22 @@
+import { getExternalLinkUrl, useIntl } from '@openedx/frontend-base';
+import { Button } from '@openedx/paragon';
+import messages from '../messages';
+
+interface DisabledCohortsViewProps {
+  onEnableCohorts: () => void,
+}
+
+const DisabledCohortsView = ({ onEnableCohorts }: DisabledCohortsViewProps) => {
+  const intl = useIntl();
+
+  return (
+    <div className="d-flex bg-light-200 border border-light-400 p-5 mt-4.5 align-items-center">
+      <p className="m-0">
+        {intl.formatMessage(messages.noCohortsMessage)} <a href={getExternalLinkUrl('https://openedx.atlassian.net/wiki/spaces/ENG/pages/123456789/Cohorts+Feature+Documentation')}>{intl.formatMessage(messages.learnMore)}</a>
+      </p>
+      <Button className="ml-3 flex-shrink-0" onClick={onEnableCohorts}>{intl.formatMessage(messages.enableCohorts)}</Button>
+    </div>
+  );
+};
+
+export default DisabledCohortsView;