Export Leaderboards to CSV (#2892)

* Create export functions for leaderboards

* Add scoreleaderboard attribute to assessment overviews

* Fix imports

* Create new route for fetching assessment leaderboard

* Remove ground control actions and types

* Abstract out export buttons

* Create new request for leaderboard

* Bypass saga to fetch leaderboards

* Edit route to be part of admin endpoint

Author: jayjay19630

src/commons/sagas/RequestsSaga.ts

@@ -1128,6 +1128,48 @@ export const deleteSourcecastEntry = async (
   return resp;
 };
 
+/**
+ * GET /courses/{courseId}/admin/assessments/{assessmentId}/scoreLeaderboard
+ */
+export const getScoreLeaderboard = async (
+  assessmentId: number,
+  tokens: Tokens
+): Promise<ContestEntry[] | null> => {
+  const resp = await request(
+    `${courseId()}/admin/assessments/${assessmentId}/scoreLeaderboard`,
+    'GET',
+    {
+      ...tokens
+    }
+  );
+  if (!resp || !resp.ok) {
+    return null; // invalid accessToken _and_ refreshToken
+  }
+  const scoreLeaderboard = await resp.json();
+  return scoreLeaderboard as ContestEntry[];
+};
+
+/**
+ * GET /courses/{courseId}/admin/assessments/{assessmentId}/popularVoteLeaderboard
+ */
+export const getPopularVoteLeaderboard = async (
+  assessmentId: number,
+  tokens: Tokens
+): Promise<ContestEntry[] | null> => {
+  const resp = await request(
+    `${courseId()}/admin/assessments/${assessmentId}/popularVoteLeaderboard`,
+    'GET',
+    {
+      ...tokens
+    }
+  );
+  if (!resp || !resp.ok) {
+    return null; // invalid accessToken _and_ refreshToken
+  }
+  const popularVoteLeaderboard = await resp.json();
+  return popularVoteLeaderboard as ContestEntry[];
+};
+
 /**
  * POST /courses/{courseId}/admin/assessments/{assessmentId}
  */

src/pages/academy/groundControl/configureControls/ExportScoreLeaderboardButton.tsx

@@ -0,0 +1,40 @@
+import { IconNames } from '@blueprintjs/icons';
+import { createGrid, GridOptions } from 'ag-grid-community';
+import { Tokens } from 'src/commons/application/types/SessionTypes';
+import ControlButton from 'src/commons/ControlButton';
+import { getScoreLeaderboard } from 'src/commons/sagas/RequestsSaga';
+import { useSession } from 'src/commons/utils/Hooks';
+
+type Props = {
+  assessmentId: number;
+};
+
+const ExportScoreLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
+  const { accessToken, refreshToken } = useSession();
+  const tokens = { accessToken, refreshToken } as Tokens;
+
+  // onClick handler for fetching score leaderboard, putting it into a grid and exporting data
+  const exportScoreLeaderboardToCsv = async () => {
+    const scoreLeaderbaord = await getScoreLeaderboard(assessmentId, tokens);
+    const gridContainer = document.createElement('div');
+    const gridOptions: GridOptions = {
+      rowData: scoreLeaderbaord,
+      columnDefs: [{ field: 'student_name' }, { field: 'answer' }, { field: 'final_score' }]
+    };
+    const api = createGrid(gridContainer, gridOptions);
+    api.exportDataAsCsv();
+    api.destroy();
+  };
+
+  return (
+    <div className="control-button-container">
+      <ControlButton
+        icon={IconNames.PEOPLE}
+        onClick={exportScoreLeaderboardToCsv}
+        label="Export Score Leaderboard"
+      />
+    </div>
+  );
+};
+
+export default ExportScoreLeaderboardButton;

src/pages/academy/groundControl/configureControls/ExportVoteLeaderboardButton.tsx

@@ -0,0 +1,40 @@
+import { IconNames } from '@blueprintjs/icons';
+import { createGrid, GridOptions } from 'ag-grid-community';
+import { Tokens } from 'src/commons/application/types/SessionTypes';
+import ControlButton from 'src/commons/ControlButton';
+import { getPopularVoteLeaderboard } from 'src/commons/sagas/RequestsSaga';
+import { useSession } from 'src/commons/utils/Hooks';
+
+type Props = {
+  assessmentId: number;
+};
+
+const ExportVoteLeaderboardButton: React.FC<Props> = ({ assessmentId }) => {
+  const { accessToken, refreshToken } = useSession();
+  const tokens = { accessToken, refreshToken } as Tokens;
+
+  // onClick handler for fetching popular vote leaderboard, putting it into a grid and exporting data
+  const exportPopularVoteLeaderboardToCsv = async () => {
+    const popularVoteLeaderboard = await getPopularVoteLeaderboard(assessmentId, tokens);
+    const gridContainer = document.createElement('div');
+    const gridOptions: GridOptions = {
+      rowData: popularVoteLeaderboard,
+      columnDefs: [{ field: 'student_name' }, { field: 'answer' }, { field: 'final_score' }]
+    };
+    const api = createGrid(gridContainer, gridOptions);
+    api.exportDataAsCsv();
+    api.destroy();
+  };
+
+  return (
+    <div className="control-button-container">
+      <ControlButton
+        icon={IconNames.PEOPLE}
+        onClick={exportPopularVoteLeaderboardToCsv}
+        label="Export Popular Vote Leaderboard"
+      />
+    </div>
+  );
+};
+
+export default ExportVoteLeaderboardButton;

src/pages/academy/groundControl/subcomponents/GroundControlConfigureCell.tsx

@@ -13,6 +13,8 @@ import React, { useCallback, useState } from 'react';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
 import ControlButton from '../../../../commons/ControlButton';
+import ExportScoreLeaderboardButton from '../configureControls/ExportScoreLeaderboardButton';
+import ExportVoteLeaderboardButton from '../configureControls/ExportVoteLeaderboardButton';
 import AssignEntriesButton from './configureControls/AssignEntriesButton';
 
 type Props = {
@@ -112,20 +114,8 @@ const ConfigureCell: React.FC<Props> = ({
             />
             <Collapse isOpen={hasVotingFeatures}>
               <div className="voting-related-controls">
-                <div className="control-button-container">
-                  <ControlButton
-                    icon={IconNames.PEOPLE}
-                    isDisabled={true}
-                    label="Export Popular Vote Leaderboard (Coming soon!)"
-                  />
-                </div>
-                <div className="control-button-container">
-                  <ControlButton
-                    icon={IconNames.CROWN}
-                    isDisabled={true}
-                    label="Export Score Leaderboard (Coming soon!)"
-                  />
-                </div>
+                <ExportScoreLeaderboardButton assessmentId={data.id} />
+                <ExportVoteLeaderboardButton assessmentId={data.id} />
                 <AssignEntriesButton
                   handleAssignEntriesForVoting={handleAssignEntriesForVoting}
                   assessmentId={data.id}