feat: grading tools

Author: diana-villalvazo-wgu

src/components/SpecifyProblem.tsx

@@ -0,0 +1,5 @@
+const SpecifyProblem = () => {
+  return <div>Specify Problem</div>;
+};
+
+export default SpecifyProblem;

src/grading/GradingPage.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, ButtonGroup, Card } from '@openedx/paragon';
+import SingleLearnerContent from './components/SingleLearnerContent';
+import AllLearnersContent from './components/AllLearnersContent';
+import messages from './messages';
+import GradingActionRow from './components/GradingActionRow';
+
+const GradingPage = () => {
+  const intl = useIntl();
+  const [selectedTools, setSelectedTools] = useState('single');
+
+  return (
+    <>
+      <div className="d-flex justify-content-between align-items-center">
+        <h3 className="text-primary-700">{intl.formatMessage(messages.pageTitle)}</h3>
+        <GradingActionRow />
+      </div>
+      <Card className="bg-light-200 p-4 mt-4.5">
+        <ButtonGroup className="d-block">
+          <Button
+            onClick={() => setSelectedTools('single')}
+            variant={selectedTools === 'single' ? 'primary' : 'outline-primary'}
+          >
+            {intl.formatMessage(messages.singleLearner)}
+          </Button>
+          <Button
+            onClick={() => setSelectedTools('all')}
+            variant={selectedTools === 'all' ? 'primary' : 'outline-primary'}
+          >
+            {intl.formatMessage(messages.allLearners)}
+          </Button>
+        </ButtonGroup>
+        {selectedTools === 'single' ? <SingleLearnerContent /> : <AllLearnersContent />}
+      </Card>
+    </>
+  );
+};
+
+export default GradingPage;

src/grading/components/AllLearnersContent.tsx

@@ -0,0 +1,5 @@
+const AllLearnersContent = () => {
+  return <div>All Learners Content</div>;
+};
+
+export default AllLearnersContent;

src/grading/components/GradingActionRow.test.tsx

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithIntl } from '@src/testUtils';
+import GradingActionRow from '@src/grading/components/GradingActionRow';
+import messages from '../messages';
+
+describe('GradingActionRow', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders ActionRow with gradebook and configuration buttons', () => {
+    renderWithIntl(<GradingActionRow />);
+    expect(screen.getByRole('button', { name: messages.viewGradebook.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('opens configuration menu when configuration button is clicked', async () => {
+    renderWithIntl(<GradingActionRow />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage }));
+    expect(screen.getByText('View Grading Configuration')).toBeInTheDocument();
+    expect(screen.getByText('View Course Grading Settings')).toBeInTheDocument();
+  });
+
+  it('opens and closes GradingConfigurationModal when menu item is clicked', async () => {
+    renderWithIntl(<GradingActionRow />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage }));
+    const gradingConfigButton = screen.getByText('View Grading Configuration');
+    await user.click(gradingConfigButton);
+    expect(screen.getByRole('dialog', { name: messages.gradingConfiguration.defaultMessage })).toBeInTheDocument();
+
+    // Close modal
+    await user.click(screen.getAllByRole('button', { name: messages.close.defaultMessage })[0]);
+    expect(screen.queryByRole('dialog', { name: messages.gradingConfiguration.defaultMessage })).not.toBeInTheDocument();
+  });
+});

src/grading/components/GradingActionRow.tsx

@@ -0,0 +1,44 @@
+import { useIntl } from '@openedx/frontend-base';
+import { useToggle, ActionRow, Button, IconButton, ModalPopup, Menu, MenuItem } from '@openedx/paragon';
+import { TrendingUp, MoreVert, OpenInNew } from '@openedx/paragon/icons';
+import { useState } from 'react';
+import messages from '../messages';
+import GradingConfigurationModal from './GradingConfigurationModal';
+
+const GradingActionRow = () => {
+  const intl = useIntl();
+  const [configurationMenuTarget, setConfigurationMenuTarget] = useState<HTMLButtonElement | null>(null);
+  const [isOpenMenu, openMenu, closeMenu] = useToggle(false);
+  const [isOpenConfigModal, openConfigModal, closeConfigModal] = useToggle(false);
+
+  const handleConfigurationMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setConfigurationMenuTarget(event?.currentTarget);
+    openMenu();
+  };
+  return (
+    <>
+      <ActionRow>
+        <Button iconBefore={TrendingUp} variant="outline-primary">{intl.formatMessage(messages.viewGradebook)}</Button>
+        <IconButton
+          alt={intl.formatMessage(messages.configurationAlt)}
+          className="lead"
+          iconAs={MoreVert}
+          onClick={handleConfigurationMenuClick}
+        />
+      </ActionRow>
+      <ModalPopup positionRef={configurationMenuTarget} onClose={closeMenu} isOpen={isOpenMenu}>
+        <Menu>
+          <MenuItem onClick={openConfigModal}>
+            {intl.formatMessage(messages.viewGradingConfiguration)}
+          </MenuItem>
+          <MenuItem iconAfter={OpenInNew} onClick={() => {}}>
+            {intl.formatMessage(messages.viewCourseGradingSettings)}
+          </MenuItem>
+        </Menu>
+      </ModalPopup>
+      <GradingConfigurationModal isOpen={isOpenConfigModal} onClose={closeConfigModal} />
+    </>
+  );
+};
+
+export default GradingActionRow;

src/grading/components/GradingConfigurationModal.tsx

@@ -0,0 +1,28 @@
+import { Button, ModalDialog } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+
+interface GradingConfigurationModalProps {
+  isOpen: boolean,
+  onClose: () => void,
+}
+
+const GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModalProps) => {
+  const intl = useIntl();
+
+  return (
+    <ModalDialog title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
+      <ModalDialog.Header>
+        <h3>{intl.formatMessage(messages.gradingConfiguration)}</h3>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <p>x</p>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <Button onClick={onClose}>{intl.formatMessage(messages.close)}</Button>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default GradingConfigurationModal;

src/grading/components/SingleLearnerContent.tsx

@@ -0,0 +1,16 @@
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+import SpecifyProblem from '../../components/SpecifyProblem';
+
+const SingleLearnerContent = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <p className="x-small text-primary mt-3">{intl.formatMessage(messages.descriptionSingleLearner)}</p>
+      <SpecifyProblem />
+    </>
+  );
+};
+
+export default SingleLearnerContent;

src/grading/data/api.ts

@@ -0,0 +1,8 @@
+// import { camelCaseObject, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+// import { getApiBaseUrl } from '@src/data/api';
+
+// export const getCourseInfo = async (courseId) => {
+//   const { data } = await getAuthenticatedHttpClient()
+//     .get(`${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}`);
+//   return camelCaseObject(data);
+// };