Adding section on Data Downloads for Pending Tasks

src/app.scss

@@ -4,3 +4,7 @@
     left: unset;
     right: var(--pgn-spacing-toast-container-gutter-lg);
 }
+
+.text-prewrap {
+    white-space: pre-wrap;
+}

src/components/ObjectCell.tsx

@@ -0,0 +1,15 @@
+import { parseObject } from '@src/utils/formatters';
+
+interface ObjectCellProps {
+  value: Record<string, any> | null,
+}
+
+const ObjectCell = ({ value }: ObjectCellProps) => {
+  return (
+    <pre className="text-prewrap text-break">
+      {parseObject(value ?? {})}
+    </pre>
+  );
+};
+
+export { ObjectCell };

src/components/PendingTasks.test.tsx

@@ -0,0 +1,98 @@
+import { screen } from '@testing-library/react';
+import { PendingTasks } from './PendingTasks';
+import { usePendingTasks } from '@src/data/apiHook';
+import { renderWithQueryClient } from '@src/testUtils';
+
+jest.mock('@src/data/apiHook');
+
+const mockUsePendingTasks = usePendingTasks as jest.MockedFunction<typeof usePendingTasks>;
+
+describe('PendingTasks', () => {
+  const mockFetchTasks = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUsePendingTasks.mockReturnValue({
+      data: undefined,
+      isPending: false,
+      isLoading: false,
+    } as any);
+  });
+
+  it('should render the collapsible pending tasks section', () => {
+    renderWithQueryClient(<PendingTasks />);
+
+    expect(screen.getByText('Pending Tasks')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('should show loading skeleton when tasks are being fetched', async () => {
+    mockUsePendingTasks.mockReturnValue({
+      data: undefined,
+      isPending: true,
+      isLoading: true,
+    } as any);
+
+    const { container } = renderWithQueryClient(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await toggleButton.click();
+
+    expect(screen.queryByText('No tasks currently running.')).not.toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.queryByText('Task Type')).not.toBeInTheDocument();
+
+    const skeletons = container.querySelectorAll('.react-loading-skeleton');
+    expect(skeletons).toHaveLength(3);
+  });
+
+  it('should display no tasks message when tasks array is empty', async () => {
+    mockUsePendingTasks.mockReturnValue({
+      mutate: mockFetchTasks,
+      data: [],
+      isPending: false,
+    } as any);
+
+    renderWithQueryClient(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await toggleButton.click();
+
+    expect(screen.getByText('No tasks currently running.')).toBeInTheDocument();
+  });
+
+  it('should render data table with tasks when data is available', async () => {
+    const mockTasks = [
+      {
+        taskType: 'grade_course',
+        taskInput: 'course data',
+        taskId: '12345',
+        requester: 'instructor@example.com',
+        taskState: 'SUCCESS',
+        created: '2023-01-01',
+        taskOutput: 'output.csv',
+        duration: '5 minutes',
+        status: 'Completed',
+        taskMessage: 'Task completed successfully',
+      },
+    ];
+
+    mockUsePendingTasks.mockReturnValue({
+      data: mockTasks,
+      isPending: false,
+      isLoading: false,
+    } as any);
+
+    renderWithQueryClient(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await toggleButton.click();
+
+    expect(screen.getByText('Task Type')).toBeInTheDocument();
+    expect(screen.getByText('Task ID')).toBeInTheDocument();
+    expect(screen.getByText('grade_course')).toBeInTheDocument();
+    expect(screen.getByText('12345')).toBeInTheDocument();
+  });
+
+  it('should fetch tasks on component mount', async () => {
+    renderWithQueryClient(<PendingTasks />);
+    expect(mockUsePendingTasks).toHaveBeenCalledTimes(1);
+  });
+});

src/components/PendingTasks.tsx

@@ -0,0 +1,81 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Collapsible, DataTable, Icon, Skeleton } from '@openedx/paragon';
+import { useMemo } from 'react';
+import messages from './messages';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import { usePendingTasks } from '@src/data/apiHook';
+import { useParams } from 'react-router';
+import { ObjectCell } from './ObjectCell';
+import { PendingTask, TableCellValue } from '@src/types';
+
+interface PendingTasksProps {
+  isPolling?: boolean,
+}
+
+const PendingTasks = ({ isPolling = false }: PendingTasksProps) => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams();
+  const { data: tasks, isLoading } = usePendingTasks(courseId, { enablePolling: isPolling });
+
+  const tableColumns = useMemo(() => [
+    { accessor: 'taskType', Header: intl.formatMessage(messages.taskTypeColumnName) },
+    { accessor: 'taskInput', Header: intl.formatMessage(messages.taskInputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskInput} /> },
+    { accessor: 'taskId', Header: intl.formatMessage(messages.taskIdColumnName) },
+    { accessor: 'requester', Header: intl.formatMessage(messages.requesterColumnName) },
+    { accessor: 'taskState', Header: intl.formatMessage(messages.taskStateColumnName) },
+    { accessor: 'created', Header: intl.formatMessage(messages.createdColumnName) },
+    { accessor: 'taskOutput', Header: intl.formatMessage(messages.taskOutputColumnName), Cell: ({ row }: TableCellValue<PendingTask>) => <ObjectCell value={row.original.taskOutput} /> },
+    { accessor: 'durationSec', Header: intl.formatMessage(messages.durationColumnName) },
+    { accessor: 'status', Header: intl.formatMessage(messages.statusColumnName) },
+    { accessor: 'taskMessage', Header: intl.formatMessage(messages.taskMessageColumnName) },
+  ], [intl]);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return <Skeleton count={3} />;
+    }
+
+    if (!tasks || tasks?.length === 0) {
+      return <div className="my-3">{intl.formatMessage(messages.noTasksMessage)}</div>;
+    }
+
+    return (
+      <DataTable
+        columns={tableColumns}
+        data={tasks}
+        RowStatusComponent={() => null}
+      />
+    );
+  };
+
+  return (
+    <Collapsible.Advanced
+      className="mt-4 pt-4 border-top"
+      styling="basic"
+    >
+      <Collapsible.Trigger
+        className="collapsible-trigger d-flex border-0 align-items-center text-decoration-none"
+      >
+        <div className="d-flex">
+          <h3>{intl.formatMessage(messages.pendingTasksTitle)}</h3>
+        </div>
+
+        <Collapsible.Visible whenClosed>
+          <div className="pl-2 d-flex">
+            <Icon src={ExpandMore} />
+          </div>
+        </Collapsible.Visible>
+        <Collapsible.Visible whenOpen>
+          <div className="pl-2 d-flex">
+            <Icon src={ExpandLess} />
+          </div>
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+      <Collapsible.Body>
+        {renderContent() }
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
+};
+
+export { PendingTasks };

src/components/messages.ts

@@ -26,6 +26,66 @@ const messages = defineMessages({
     defaultMessage: "The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again.",
     description: 'Body text for page not found error',
   },
+  pendingTasksTitle: {
+    id: 'instruct.pendingTasks.section.title',
+    defaultMessage: 'Pending Tasks',
+    description: 'Title for the pending tasks section',
+  },
+  noTasksMessage: {
+    id: 'instruct.pendingTasks.section.noTasks',
+    defaultMessage: 'No tasks currently running.',
+    description: 'Message displayed when there are no pending tasks',
+  },
+  taskTypeColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskType',
+    defaultMessage: 'Task Type',
+    description: 'Column name for task type in pending tasks table',
+  },
+  taskInputColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskInput',
+    defaultMessage: 'Task Input',
+    description: 'Column name for task input in pending tasks table',
+  },
+  taskIdColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskId',
+    defaultMessage: 'Task ID',
+    description: 'Column name for task ID in pending tasks table',
+  },
+  requesterColumnName: {
+    id: 'instruct.pendingTasks.table.column.requester',
+    defaultMessage: 'Requester',
+    description: 'Column name for requester in pending tasks table',
+  },
+  taskStateColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskState',
+    defaultMessage: 'Task State',
+    description: 'Column name for task state in pending tasks table',
+  },
+  createdColumnName: {
+    id: 'instruct.pendingTasks.table.column.created',
+    defaultMessage: 'Created',
+    description: 'Column name for created date in pending tasks table',
+  },
+  taskOutputColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskOutput',
+    defaultMessage: 'Task Output',
+    description: 'Column name for task output in pending tasks table',
+  },
+  durationColumnName: {
+    id: 'instruct.pendingTasks.table.column.duration',
+    defaultMessage: 'Duration (sec)',
+    description: 'Column name for duration in pending tasks table',
+  },
+  statusColumnName: {
+    id: 'instruct.pendingTasks.table.column.status',
+    defaultMessage: 'Status',
+    description: 'Column name for status in pending tasks table',
+  },
+  taskMessageColumnName: {
+    id: 'instruct.pendingTasks.table.column.taskMessage',
+    defaultMessage: 'Task Message',
+    description: 'Column name for task message in pending tasks table',
+  },
 });
 
 export default messages;

src/data/api.test.ts

@@ -1,42 +1,86 @@
 import { getCourseInfo } from './api';
 import { camelCaseObject, getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { fetchPendingTasks } from './api';
 
-jest.mock('@openedx/frontend-base');
-
-const mockHttpClient = {
-  get: jest.fn(),
-  put: jest.fn(),
-};
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  camelCaseObject: jest.fn((obj) => obj),
+  getAppConfig: jest.fn(),
+  getAuthenticatedHttpClient: jest.fn(),
+}));
 
 const mockGetAppConfig = getAppConfig as jest.MockedFunction<typeof getAppConfig>;
 const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as jest.MockedFunction<typeof getAuthenticatedHttpClient>;
 const mockCamelCaseObject = camelCaseObject as jest.MockedFunction<typeof camelCaseObject>;
 
-describe('getCourseInfo', () => {
-  const mockCourseData = { course_name: 'Test Course' };
-  const mockCamelCaseData = { courseName: 'Test Course' };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://test-lms.com' });
-    mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
-    mockCamelCaseObject.mockReturnValue(mockCamelCaseData);
-    mockHttpClient.get.mockResolvedValue({ data: mockCourseData });
+describe('base api', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
   });
 
-  it('fetches course info successfully', async () => {
-    const courseId = 'test-course-123';
-    const result = await getCourseInfo(courseId);
-    expect(mockGetAppConfig).toHaveBeenCalledWith('org.openedx.frontend.app.instructor');
-    expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
-    expect(mockHttpClient.get).toHaveBeenCalledWith('https://test-lms.com/api/instructor/v2/courses/test-course-123');
-    expect(mockCamelCaseObject).toHaveBeenCalledWith(mockCourseData);
-    expect(result).toBe(mockCamelCaseData);
+  describe('getCourseInfo', () => {
+    const mockHttpClient = {
+      get: jest.fn(),
+    };
+    const mockCourseData = { course_name: 'Test Course' };
+    const mockCamelCaseData = { courseName: 'Test Course' };
+
+    beforeEach(() => {
+      mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://test-lms.com' });
+      mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+      mockCamelCaseObject.mockReturnValue(mockCamelCaseData);
+      mockHttpClient.get.mockResolvedValue({ data: mockCourseData });
+    });
+
+    it('fetches course info successfully', async () => {
+      const courseId = 'test-course-123';
+      const result = await getCourseInfo(courseId);
+      expect(mockGetAppConfig).toHaveBeenCalledWith('org.openedx.frontend.app.instructor');
+      expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
+      expect(mockHttpClient.get).toHaveBeenCalledWith('https://test-lms.com/api/instructor/v2/courses/test-course-123');
+      expect(mockCamelCaseObject).toHaveBeenCalledWith(mockCourseData);
+      expect(result).toBe(mockCamelCaseData);
+    });
+
+    it('throws error when API call fails', async () => {
+      const error = new Error('Network error');
+      mockHttpClient.get.mockRejectedValue(error);
+      await expect(getCourseInfo('test-course')).rejects.toThrow('Network error');
+    });
   });
 
-  it('throws error when API call fails', async () => {
-    const error = new Error('Network error');
-    mockHttpClient.get.mockRejectedValue(error);
-    await expect(getCourseInfo('test-course')).rejects.toThrow('Network error');
+  describe('fetchPendingTasks', () => {
+    const mockHttpClient = {
+      post: jest.fn(),
+    };
+
+    beforeEach(() => {
+      mockCamelCaseObject.mockImplementation((obj) => obj);
+      mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://example.com' });
+      mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+    });
+
+    it('should fetch pending tasks successfully', async () => {
+      const mockCourseId = 'course-v1:Example+Course+2025';
+      const mockTasks = [
+        {
+          task_type: 'grade_course',
+          task_id: '12345',
+          task_state: 'SUCCESS',
+          requester: 'instructor@example.com',
+        },
+      ];
+
+      mockHttpClient.post.mockResolvedValue({
+        data: { tasks: mockTasks },
+      });
+
+      const result = await fetchPendingTasks(mockCourseId);
+
+      expect(mockHttpClient.post).toHaveBeenCalledWith(
+        'https://example.com/courses/course-v1:Example+Course+2025/instructor/api/list_instructor_tasks'
+      );
+      expect(result).toEqual(mockTasks);
+    });
   });
 });