Adding pending task section on course info page

src/components/ObjectCell.tsx

@@ -0,0 +1,15 @@
+import { parseObject } from '../utils/formatters';
+
+interface ObjectCellProps {
+  value: Record<string, any> | null,
+}
+
+const ObjectCell = ({ value }: ObjectCellProps) => {
+  return (
+    <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+      {parseObject(value ?? '')}
+    </pre>
+  );
+};
+
+export { ObjectCell };

src/components/PedingTasks.test.tsx

@@ -0,0 +1,101 @@
+import { screen, waitFor } from '@testing-library/react';
+import { PendingTasks } from './PendingTasks';
+import { usePendingTasks } from '../data/apiHook';
+import { renderWithProviders } from '../testUtils';
+
+jest.mock('../data/apiHook');
+
+const mockUsePendingTasks = usePendingTasks as jest.MockedFunction<typeof usePendingTasks>;
+
+describe('PendingTasks', () => {
+  const mockFetchTasks = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUsePendingTasks.mockReturnValue({
+      mutate: mockFetchTasks,
+      data: undefined,
+      isPending: false,
+    } as any);
+  });
+
+  it('should render the collapsible pending tasks section', () => {
+    renderWithProviders(<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({
+      mutate: mockFetchTasks,
+      data: undefined,
+      isPending: true,
+    } as any);
+
+    const { container } = renderWithProviders(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await waitFor(() => 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);
+
+    renderWithProviders(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await waitFor(() => 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: '[email protected]',
+        taskState: 'SUCCESS',
+        created: '2023-01-01',
+        taskOutput: 'output.csv',
+        duration: '5 minutes',
+        status: 'Completed',
+        taskMessage: 'Task completed successfully',
+      },
+    ];
+
+    mockUsePendingTasks.mockReturnValue({
+      mutate: mockFetchTasks,
+      data: mockTasks,
+      isPending: false,
+    } as any);
+
+    renderWithProviders(<PendingTasks />);
+    const toggleButton = screen.getByRole('button');
+    await waitFor(() => 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 () => {
+    renderWithProviders(<PendingTasks />);
+
+    await waitFor(() => {
+      expect(mockFetchTasks).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/components/PendingTasks.tsx

@@ -0,0 +1,82 @@
+import { useIntl } from '@openedx/frontend-base';
+import { Collapsible, DataTable, Icon, Skeleton } from '@openedx/paragon';
+import { useEffect, useMemo } from 'react';
+import { messages } from './messages';
+import { ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import { usePendingTasks } from '../data/apiHook';
+import { useParams } from 'react-router';
+import { ObjectCell } from './ObjectCell';
+import { PendingTask, TableCellValue } from '../types';
+
+const PendingTasks = () => {
+  const intl = useIntl();
+  const { courseId = '' } = useParams();
+  const { mutate: fetchTasks, data: tasks, isPending } = usePendingTasks(courseId);
+
+  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]);
+
+  useEffect(() => {
+    fetchTasks();
+  }, [fetchTasks]);
+
+  const renderContent = () => {
+    if (isPending) {
+      return <Skeleton count={3} />;
+    }
+
+    if (tasks?.length === 0) {
+      return <div className="my-3">{intl.formatMessage(messages.noTasksMessage)}</div>;
+    }
+
+    return (
+      <DataTable
+        columns={tableColumns}
+        data={tasks}
+        isLoading={isPending}
+        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

@@ -0,0 +1,66 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  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 { messages };

src/courseInfo/CourseInfoPage.test.tsx

@@ -30,4 +30,9 @@ describe('CourseInfoPage', () => {
     renderComponent();
     expect(screen.getByText('General Course Info Component')).toBeInTheDocument();
   });
+
+  it('renders pending tasks section', () => {
+    renderComponent();
+    expect(screen.getByText('Pending Tasks')).toBeInTheDocument();
+  });
 });

src/courseInfo/CourseInfoPage.tsx

@@ -1,10 +1,12 @@
 import { Container } from '@openedx/paragon';
 import { GeneralCourseInfo } from './components/generalCourseInfo';
+import { PendingTasks } from '../components/PendingTasks';
 
 const CourseInfoPage = () => {
   return (
     <Container className="mt-4.5 mb-4" fluid="xl">
       <GeneralCourseInfo />
+      <PendingTasks />
     </Container>
   );
 };