Refactor mission control feature

[geshuming]

Right now, the mission control feature is slightly messy. The UI/UX is in urgent need of an upgrade too.

My suggestions:

• Migrate everything to use state as much as possible. Mission control should hopefully not use the global store (redux).

• Separate view and edit mode.

• Improve the UI/UX elements.

Until then, we should close off mission control

[alcen]

slightly

This is sadly an understatement. The mission control feature is a complete mess. Buttons, tabs, switches, icons, dropdown menus are placed arbitrarily throughout the UI, such that it is not clear where they are located or why they are located there. There are different "editing modes" that can be toggled, and sometimes nested tabs, leading to certain elements being very difficult to access and hidden from view. To make things worse, there is even an "Other options" (an extremely non-descriptive label) button outside of the interface on the assessment overview card. Overall, it is extremely difficult to determine how to do something from looking at the interface.

My suggestions:

• "Assessment Control" should be used instead of "Mission Control" to reflect the fact that other than Missions, the tool can be used to create Quests, Paths and Contests as well. In fact "Control" is quite vague and not really representative of the capabilities of the feature. Maybe "Assessment Editor"?
• Prepend and postpend should be located in new editors together with the editor on the left, stacked above and below the main editor, similar to how the missions are presented in the latest version. This eliminates the need for "Copy to Editor" and Copy from Editor" buttons
• Global, Local, Global Grader and Local Grader deployment should be grouped in one UI element, possibly with a dropdown menu to specify which one is currently being edited
• Question creation, deletion and cloning could be done with a popover that appears on hover over the "Question 1 of 1" text; this text will have to change in style to reflect this (possibly underlined)
• Removal of nested tabs; use other UI elements to simplify the interface, or put the elements together on the same panel

Overall I think that the interface should be decluttered to feel similar to what students see in the final assessment page, to reflect the fact that the assessments are being designed for the ease of use of the students. Creators of assessments will gain a better sense of what they are editing and how it will affect the final product.

[martin-henz]

I think it's a good study, done by Kai Zhe and Ger Hean in their CP3108 project last semester. On the long run, we want to give a tool like that to the advanced students, in order to foster their creativity and challenge their fellow student with new missions. We noticed that it's not ready for the students, yet, but it already usable for staff.

I agree that we need to take a closer look, to see what approach we should take, from here to a student-ready version.

There is no rush for that. We could for example re-visit the tool, along with some new ideas for external modules, in the next iteration of CP3108.

-martin

[martin-henz]

Note that the tool is currently available as
https://sourceacademy.nus.edu.sg/mission-control
and that we don't share this link with the students.

[alcen]

I think it's a good study, done by Kai Zhe and Ger Hean in their CP3108 project last semester. On the long run, we want to give a tool like that to the advanced students, in order to foster their creativity and challenge their fellow student with new missions. We noticed that it's not ready for the students, yet, but it already usable for staff.
I agree that we need to take a closer look, to see what approach we should take, from here to a student-ready version.
There is no rush for that. We could for example re-visit the tool, along with some new ideas for external modules, in the next iteration of CP3108.
-martin

No worries, I had some ideas on how to improve it and just wanted to put them down somewhere

[blackening]

Just FYI, the mission control lacks basic testing.

import { omit } from 'lodash';
import { parseString } from 'xml2js';
import {
  AssessmentCategories,
  AssessmentStatuses,
  IAssessment,
  IAssessmentOverview
} from '../../assessment/assessmentShape';
import { generateXmlString, makeEntireAssessment } from '../xmlParseHelper';
function parseXml(content: string) {
  return new Promise( (resolve, reject) => {
    parseString(content, (err: any, result: any) => {
      if(err){
        return reject(err);
      }
      return resolve(result);
    });
  });
}

function stripAssessment(assessment: IAssessment) {
  return omit(assessment, ['id']);
}

test.only('I/O on almost empty assignment', async () => {
  const title = 'A sample guided path';
  const assessment: IAssessment =   {
    category: AssessmentCategories.Path,
    id: 6,
    longSummary: `This is a sample assessment`,
    missionPDF: 'www.xxx.google.com',
    questions: [],
    title,
  };
  const overview: IAssessmentOverview = {
    category: AssessmentCategories.Path,
    closeAt: '2048-06-18T05:24:26.026Z',
    coverImage: 'https://fakeimg.pl/300/',
    grade: 1,
    id: 1,
    maxGrade: 3000,
    maxXp: 1000,
    openAt: '2038-06-18T05:24:26.026Z',
    title,
    shortSummary:
      'This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0',
    status: AssessmentStatuses.not_attempted,
    story: 'mission-1',
    xp: 0,
    gradingStatus: 'none'
  };

  const xmlStr = generateXmlString(assessment, overview);
  const parsed = await parseXml(xmlStr);
  const entireAssessment: [IAssessmentOverview, IAssessment] = makeEntireAssessment(parsed);
  const [newOverview, newAssessment] = entireAssessment;
  expect(stripAssessment(newAssessment)).toEqual(stripAssessment(assessment));
  expect(newOverview).toEqual(overview);
});

This is an example of a simple exercise in just exporting -> re-importing the items. There's at least a dozen errors when trying to do that.

Example, there's some serious hardcoding going on:

https://github.com/source-academy/cadet-frontend/blob/da87604b94064fd8b9957f40f208f54d229afa38/src/components/missionControl/xmlParseHelper.ts#L103

And very serious type hell.

https://github.com/source-academy/cadet-frontend/blob/da87604b94064fd8b9957f40f208f54d229afa38/src/components/missionControl/xmlParseHelper.ts#L363-L375

https://github.com/source-academy/cadet-frontend/blob/da87604b94064fd8b9957f40f208f54d229afa38/src/components/missionControl/xmlParseHelper.ts#L304