feat: detailed assessments table

Author: diana-villalvazo-wgu

src/openResponses/OpenResponsesPage.tsx

@@ -1,10 +1,12 @@
 import { Container } from '@openedx/paragon';
 import ORSummary from './components/ORSummary';
+import DetailAssessmentsList from './components/DetailAssessmentsList';
 
 const OpenResponsesPage = () => {
   return (
     <Container fluid>
       <ORSummary />
+      <DetailAssessmentsList />
     </Container>
   );
 };

src/openResponses/components/DetailAssessmentsList.test.tsx

@@ -0,0 +1,83 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import DetailAssessmentsList from './DetailAssessmentsList';
+import { useDetailAssessmentsData } from '../../data/apiHook';
+import { renderWithIntl } from '../../testUtils';
+
+jest.mock('react-router-dom', () => ({
+  useParams: () => ({ courseId: 'course-v1:edX+Test+2024' }),
+}));
+
+jest.mock('../../data/apiHook', () => ({
+  useDetailAssessmentsData: jest.fn(),
+}));
+
+const mockResults = [
+  {
+    id: '1',
+    unitName: 'Unit 1',
+    assessment: 'Assessment 1',
+    totalResponses: 2,
+    training: 0,
+    peer: 1,
+    self: 0,
+    waiting: 0,
+    staff: 0,
+    finalGradeReceived: 1,
+    url: 'http://test-url.com',
+  },
+];
+
+describe('DetailAssessmentsList', () => {
+  it('renders loading state', () => {
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 0, results: [] },
+      isLoading: true,
+    });
+    renderWithIntl(<DetailAssessmentsList />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
+  it('renders table with data', () => {
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 1, results: mockResults },
+      isLoading: false,
+    });
+    renderWithIntl(<DetailAssessmentsList />);
+    expect(screen.getByText(mockResults[0].unitName)).toBeInTheDocument();
+    expect(screen.getByText(mockResults[0].assessment)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /View and Grade Responses/i })).toBeInTheDocument();
+  });
+
+  it('renders correct number of columns', () => {
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 1, results: mockResults },
+      isLoading: false,
+    });
+    renderWithIntl(<DetailAssessmentsList />);
+    expect(screen.getAllByRole('columnheader')).toHaveLength(10);
+  });
+
+  it('calls fetchData on page change', async () => {
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 30, results: mockResults },
+      isLoading: false,
+    });
+    renderWithIntl(<DetailAssessmentsList />);
+    const nextButton = screen.getByLabelText(/next/i);
+    fireEvent.click(nextButton);
+    await waitFor(() => {
+      expect(useDetailAssessmentsData).toHaveBeenCalled();
+    });
+  });
+
+  it('renders empty state when no data', () => {
+    (useDetailAssessmentsData as jest.Mock).mockReturnValue({
+      data: { count: 0, results: [] },
+      isLoading: false,
+    });
+    renderWithIntl(<DetailAssessmentsList />);
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('No results found')).toBeInTheDocument();
+    expect(screen.queryByText('View and Grade Responses')).not.toBeInTheDocument();
+  });
+});

src/openResponses/components/DetailAssessmentsList.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, DataTable } from '@openedx/paragon';
+import messages from '../messages';
+import { useDetailAssessmentsData } from '../../data/apiHook';
+
+const DETAILS_PAGE_SIZE = 25;
+
+interface DataTableFetchDataProps {
+  pageIndex: number,
+}
+
+// Example of api response to test on UI
+// const mockResults = [
+//   {
+//     id: '1',
+//     unitName: 'Example Unit',
+//     assessment: 'ORA block number 1',
+//     totalResponses: 2,
+//     training: 0,
+//     peer: 1,
+//     self: 0,
+//     waiting: 0,
+//     staff: 0,
+//     finalGradeReceived: 1,
+//     url: 'http://apps.local.openedx.io:8080/instructor/course-v1:DV-edtech+check+2025-05/open_responses'
+//   }
+// ];
+
+const DetailAssessmentsList = () => {
+  const intl = useIntl();
+  const { courseId } = useParams();
+  const [page, setPage] = useState(0);
+  const { data = { count: 0, results: [] }, isLoading } = useDetailAssessmentsData(courseId ?? '', {
+    page,
+    pageSize: DETAILS_PAGE_SIZE
+  });
+
+  const pageCount = Math.ceil(data.count / DETAILS_PAGE_SIZE);
+
+  const tableColumns = [
+    { accessor: 'unitName', Header: intl.formatMessage(messages.unitName) },
+    { accessor: 'assessment', Header: intl.formatMessage(messages.assessment) },
+    { accessor: 'totalResponses', Header: intl.formatMessage(messages.totalResponses) },
+    { accessor: 'training', Header: intl.formatMessage(messages.training) },
+    { accessor: 'peer', Header: intl.formatMessage(messages.peer) },
+    { accessor: 'self', Header: intl.formatMessage(messages.self) },
+    { accessor: 'waiting', Header: intl.formatMessage(messages.waiting) },
+    { accessor: 'staff', Header: intl.formatMessage(messages.staff) },
+    { accessor: 'finalGradeReceived', Header: intl.formatMessage(messages.finalGradeReceived) },
+    { accessor: 'staffGrader', Header: intl.formatMessage(messages.staffGrader) }
+  ];
+
+  const handleFetchData = (data: DataTableFetchDataProps) => {
+    setPage(data.pageIndex);
+  };
+
+  const tableData = data.results.map(item => ({
+    ...item,
+    staffGrader: <Button variant="link" size="inline" href={item.url}>View and Grade Responses</Button>,
+  }));
+
+  return (
+    <div className="mt-4.5">
+      <h3>{intl.formatMessage(messages.details)}</h3>
+      <DataTable
+        columns={tableColumns}
+        data={tableData}
+        fetchData={handleFetchData}
+        initialState={{
+          pageIndex: page,
+          pageSize: DETAILS_PAGE_SIZE
+        }}
+        isLoading={isLoading}
+        isPaginated
+        itemCount={data.count}
+        manualFilters
+        manualPagination
+        pageCount={pageCount}
+        pageSize={DETAILS_PAGE_SIZE}
+      />
+    </div>
+  );
+};
+
+export default DetailAssessmentsList;

src/openResponses/data/api.ts

@@ -6,3 +6,12 @@ export const getOpenResponsesData = async (courseId: string) => {
   const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data);
 };
+
+export const getDetailAssessmentsData = async (
+  courseId: string,
+  params: Record<string, string | number | boolean> = {},
+) => {
+  const url = `${getApiBaseUrl()}/api/instructor/v2/courses/${courseId}/open-responses/assessments`;
+  const { data } = await getAuthenticatedHttpClient().get(url, { params });
+  return camelCaseObject(data);
+};

src/openResponses/data/apiHook.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { getOpenResponsesData } from './api';
+import { getDetailAssessmentsData, getOpenResponsesData } from './api';
 import { openResponsesQueryKeys } from './queryKeys';
 
 export const useOpenResponsesData = (courseId: string) => (
@@ -9,3 +9,11 @@ export const useOpenResponsesData = (courseId: string) => (
     enabled: !!courseId,
   })
 );
+
+export const useDetailAssessmentsData = (courseId: string, params: Record<string, string | number | boolean> = {}) => (
+  useQuery({
+    queryKey: openResponsesQueryKeys.list(courseId, params),
+    queryFn: () => getDetailAssessmentsData(courseId, params),
+    enabled: !!courseId,
+  })
+);

src/openResponses/data/queryKeys.ts

@@ -3,4 +3,5 @@ import { appId } from '../../constants';
 export const openResponsesQueryKeys = {
   all: [appId, 'openResponses'],
   byCourse: (courseId: string) => [...openResponsesQueryKeys.all, courseId],
+  list: (courseId: string, params: Record<string, string | number | boolean> = {}) => [...openResponsesQueryKeys.byCourse(courseId), 'list', ...Object.entries(params).flat()]
 };

src/openResponses/messages.ts

@@ -50,6 +50,26 @@ const messages = defineMessages({
     id: 'instruct.openResponses.label.finalGradeReceived',
     defaultMessage: 'Final Grade Received',
     description: 'Label for the final grade received count'
+  },
+  details: {
+    id: 'instruct.openResponses.title.details',
+    defaultMessage: 'Details',
+    description: 'Title for the details section in open responses'
+  },
+  unitName: {
+    id: 'instruct.openResponses.table.header.unitName',
+    defaultMessage: 'Unit Name',
+    description: 'Label for the unit name header'
+  },
+  assessment: {
+    id: 'instruct.openResponses.table.header.assessment',
+    defaultMessage: 'Assessment',
+    description: 'Label for the assessment header'
+  },
+  staffGrader: {
+    id: 'instruct.openResponses.table.header.staffGrader',
+    defaultMessage: 'Staff Grader',
+    description: 'Label for the staff grader header'
   }
 });