Assign entries for voting (#2889)

* Implement assign entries for voting with request

* Create style for assign entries button

* Code quality improvements

* Add handleAssignEntries function to configure cell

* Create new AssignEntriesButton component and configure controls css module

Author: jayjay19630

src/commons/assessment/AssessmentTypes.ts

@@ -64,6 +64,7 @@ export type AssessmentOverview = {
   isPublished?: boolean;
   hasVotingFeatures: boolean;
   hasTokenCounter?: boolean;
+  isVotingPublished?: boolean;
   maxXp: number;
   earlySubmissionXp: number;
   number?: string; // For mission control

src/commons/sagas/BackendSaga.ts

@@ -16,6 +16,7 @@ import {
   GradingQuestion
 } from '../../features/grading/GradingTypes';
 import {
+  ASSIGN_ENTRIES_FOR_VOTING,
   CHANGE_DATE_ASSESSMENT,
   CHANGE_TEAM_SIZE_ASSESSMENT,
   CONFIGURE_ASSESSMENT,
@@ -1386,6 +1387,28 @@ function* BackendSaga(): SagaIterator {
       yield call(showSuccessMessage, 'Updated successfully!', 1000);
     }
   );
+
+  yield takeEvery(
+    ASSIGN_ENTRIES_FOR_VOTING,
+    function* (action: ReturnType<typeof actions.assignEntriesForVoting>): any {
+      const tokens: Tokens = yield selectTokens();
+      const id = action.payload.id;
+
+      const resp: Response | null = yield updateAssessment(
+        id,
+        {
+          assignEntriesForVoting: true
+        },
+        tokens
+      );
+      if (!resp || !resp.ok) {
+        return yield handleResponseError(resp);
+      }
+
+      yield put(actions.fetchAssessmentOverviews());
+      yield call(showSuccessMessage, 'Updated successfully!', 1000);
+    }
+  );
 }
 
 function* handleReautogradeResponse(resp: Response | null): any {

src/commons/sagas/RequestsSaga.ts

@@ -1140,6 +1140,7 @@ export const updateAssessment = async (
     maxTeamSize?: number;
     hasTokenCounter?: boolean;
     hasVotingFeatures?: boolean;
+    assignEntriesForVoting?: boolean;
   },
   tokens: Tokens
 ): Promise<Response | null> => {

src/features/groundControl/GroundControlActions.ts

@@ -1,6 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
 
 import {
+  ASSIGN_ENTRIES_FOR_VOTING,
   CHANGE_DATE_ASSESSMENT,
   CHANGE_TEAM_SIZE_ASSESSMENT,
   CONFIGURE_ASSESSMENT,
@@ -39,3 +40,7 @@ export const configureAssessment = createAction(
     payload: { id, hasVotingFeatures, hasTokenCounter }
   })
 );
+
+export const assignEntriesForVoting = createAction(ASSIGN_ENTRIES_FOR_VOTING, (id: number) => ({
+  payload: { id }
+}));

src/features/groundControl/GroundControlTypes.ts

@@ -4,3 +4,4 @@ export const DELETE_ASSESSMENT = 'DELETE_ASSESSMENT';
 export const PUBLISH_ASSESSMENT = 'PUBLISH_ASSESSMENT';
 export const UPLOAD_ASSESSMENT = 'UPLOAD_ASSESSMENT';
 export const CONFIGURE_ASSESSMENT = 'CONFIGURE_ASSESSMENT';
+export const ASSIGN_ENTRIES_FOR_VOTING = 'ASSIGN_ENTRIES_FOR_VOTING';

src/pages/academy/groundControl/GroundControl.tsx

@@ -40,6 +40,7 @@ export type DispatchProps = {
     hasVotingFeatures: boolean,
     hasTokenCounter: boolean
   ) => void;
+  handleAssignEntriesForVoting: (id: number) => void;
   handleFetchCourseConfigs: () => void;
 };
 
@@ -163,7 +164,8 @@ const GroundControl: React.FC<Props> = props => {
       field: 'placeholderConfigure' as any,
       cellRenderer: ConfigureCell,
       cellRendererParams: {
-        handleConfigureAssessment: props.handleConfigureAssessment
+        handleConfigureAssessment: props.handleConfigureAssessment,
+        handleAssignEntriesForVoting: props.handleAssignEntriesForVoting
       },
       width: 80,
       filter: false,

src/pages/academy/groundControl/GroundControlContainer.ts

@@ -7,6 +7,7 @@ import {
 } from '../../../commons/application/actions/SessionActions';
 import { OverallState } from '../../../commons/application/ApplicationTypes';
 import {
+  assignEntriesForVoting,
   changeDateAssessment,
   changeTeamSizeAssessment,
   configureAssessment,
@@ -28,7 +29,8 @@ const mapDispatchToProps: MapDispatchToProps<DispatchProps, {}> = (dispatch: Dis
       handleUploadAssessment: uploadAssessment,
       handlePublishAssessment: publishAssessment,
       handleFetchCourseConfigs: fetchCourseConfig,
-      handleConfigureAssessment: configureAssessment
+      handleConfigureAssessment: configureAssessment,
+      handleAssignEntriesForVoting: assignEntriesForVoting
     },
     dispatch
   );

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

@@ -13,31 +13,40 @@ import React, { useCallback, useState } from 'react';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
 import ControlButton from '../../../../commons/ControlButton';
+import AssignEntriesButton from './configureControls/AssignEntriesButton';
 
 type Props = {
   handleConfigureAssessment: (
     id: number,
     hasVotingFeatures: boolean,
     hasTokenCounter: boolean
   ) => void;
+  handleAssignEntriesForVoting: (id: number) => void;
   data: AssessmentOverview;
 };
 
-const ConfigureCell: React.FC<Props> = ({ handleConfigureAssessment, data }) => {
+const ConfigureCell: React.FC<Props> = ({
+  handleConfigureAssessment,
+  handleAssignEntriesForVoting,
+  data
+}) => {
   const [isDialogOpen, setDialogState] = useState(false);
   const [hasVotingFeatures, setHasVotingFeatures] = useState(!!data.hasVotingFeatures);
   const [hasTokenCounter, setHasTokenCounter] = useState(!!data.hasTokenCounter);
   const [isTeamAssessment, setIsTeamAssessment] = useState(false);
+  const [isVotingPublished] = useState(!!data.isVotingPublished);
 
   const handleOpenDialog = useCallback(() => setDialogState(true), []);
   const handleCloseDialog = useCallback(() => setDialogState(false), []);
 
+  // Updates assessment overview with changes to hasVotingFeatures and hasTokenCounter
   const handleConfigure = useCallback(() => {
     const { id } = data;
     handleConfigureAssessment(id, hasVotingFeatures, hasTokenCounter);
     handleCloseDialog();
   }, [data, handleCloseDialog, handleConfigureAssessment, hasTokenCounter, hasVotingFeatures]);
 
+  // Toggles in configuration pannel
   const toggleHasTokenCounter = useCallback(() => setHasTokenCounter(prev => !prev), []);
   const toggleVotingFeatures = useCallback(() => setHasVotingFeatures(prev => !prev), []);
   const toggleIsTeamAssessment = useCallback(() => setIsTeamAssessment(prev => !prev), []);
@@ -117,11 +126,10 @@ const ConfigureCell: React.FC<Props> = ({ handleConfigureAssessment, data }) =>
                     label="Export Score Leaderboard (Coming soon!)"
                   />
                 </div>
-                <Switch
-                  className="publish-voting"
-                  disabled={true}
-                  inline
-                  label="Publish Voting (Coming soon!)"
+                <AssignEntriesButton
+                  handleAssignEntriesForVoting={handleAssignEntriesForVoting}
+                  assessmentId={data.id}
+                  isVotingPublished={isVotingPublished}
                 />
               </div>
             </Collapse>

src/pages/academy/groundControl/subcomponents/configureControls/AssignEntriesButton.tsx

@@ -0,0 +1,68 @@
+import { Button, ButtonGroup, Icon } from '@blueprintjs/core';
+import { IconNames, InfoSign } from '@blueprintjs/icons';
+import { useCallback, useState } from 'react';
+import ControlButton from 'src/commons/ControlButton';
+import classes from 'src/styles/ConfigureControls.module.scss';
+
+type Props = {
+  handleAssignEntriesForVoting: (id: number) => void;
+  assessmentId: number;
+  isVotingPublished: boolean;
+};
+
+const AssignEntriesButton: React.FC<Props> = ({
+  handleAssignEntriesForVoting,
+  assessmentId,
+  isVotingPublished
+}) => {
+  const [confirmAssignEntries, setConfirmAssignEntries] = useState(false);
+
+  // OnClick and Handler functions for confirmation warnings when assigning entries for voting
+  const onAssignClick = useCallback(() => setConfirmAssignEntries(true), []);
+  const handleConfirmAssign = useCallback(() => {
+    handleAssignEntriesForVoting(assessmentId);
+  }, [assessmentId, handleAssignEntriesForVoting]);
+  const handleCancelAssign = useCallback(() => setConfirmAssignEntries(false), []);
+
+  return (
+    <>
+      <div className={classes['current-voting-status']}>
+        <InfoSign />
+        <p className={classes['voting-status-text']}>
+          Current Voting Status: Entries have {!isVotingPublished && <b>not </b>} been assigned
+        </p>
+      </div>
+      {!confirmAssignEntries ? (
+        <div className={'control-button-container'}>
+          <ControlButton
+            icon={IconNames.RESET}
+            onClick={onAssignClick}
+            label={`${!isVotingPublished ? 'Assign' : 'Reassign'} entries for voting`}
+          />
+        </div>
+      ) : (
+        <div className={classes['confirm-assign-voting']}>
+          <Icon icon="reset" />
+          <p className={classes['confirm-assign-text']}>
+            Are you sure you want to <b>{isVotingPublished ? 're-assign' : 'assign'} entries?</b>
+          </p>
+          <ButtonGroup>
+            <Button small intent="success" onClick={handleConfirmAssign}>
+              Assign
+            </Button>
+            <Button small intent="danger" onClick={handleCancelAssign}>
+              Cancel
+            </Button>
+          </ButtonGroup>
+        </div>
+      )}
+      {isVotingPublished && (
+        <p className={classes['reassign-voting-warning']}>
+          <b>All existing votes</b> will be <b>deleted</b> upon reassigning entries!
+        </p>
+      )}
+    </>
+  );
+};
+
+export default AssignEntriesButton;

src/styles/ConfigureControls.module.scss

@@ -0,0 +1,22 @@
+/* Container for warnings upon clicking assign entries button */
+.reassign-voting-warning {
+  font-size: 11px;
+  margin-left: 38px;
+}
+
+.confirm-assign-voting,
+.current-voting-status {
+  max-height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 15px;
+
+  .confirm-assign-text {
+    margin-top: 9px;
+  }
+
+  .voting-status-text {
+    margin-top: 10px;
+  }
+}