better error reporting on the syllabus generation

src/js/api.js

@@ -226,7 +226,7 @@ class Wrapper {
 				return this.post(url + "/registry/asset", args);
 			},
 			testSyllabus: args => {
-				return this.post(url + "/registry/syllabus/test", args);
+				return this.post(url + "/admissions/syllabus/test", args);
 			},
 			searchOnJSON: slug => {
 				return this.get(url + "/admissions/admin/syllabus/asset/" + slug);

src/js/component/modal.js

@@ -228,3 +228,53 @@ ExtendedInstructions.propTypes = {
 ExtendedInstructions.defaultProps = {
 	defaultValue: "Hello *World*!"
 };
+
+export const IntegrityReport = ({ messages, onClose }) => {
+	return (
+		<div className="modal show d-block" tabIndex="-1" role="dialog">
+			<div className="modal-dialog" role="document">
+				<div className="modal-content">
+					<div className="modal-body text-left" style={{ maxHeight: "400px", overflowY: "auto" }}>
+						<h3>
+							<i className="fas fa-bug"></i> Integrity Report
+						</h3>
+						<p>After running a scan on the syllabus we found the following problems: </p>
+						{messages.errors.length == 0 ? (
+							<p>
+								<i className="fas fa-check text-success" /> No major errors found.
+							</p>
+						) : (
+							<ul className="pl-2">
+								{messages.errors.map((m, i) => (
+									<li key={i}>{m}</li>
+								))}
+							</ul>
+						)}
+						{messages.warnings.length > 0 && (
+							<>
+								<p className="mb-2">
+									<i className="fas fa-exclamation-triangle text-warning"></i> Some minor warnings:
+								</p>
+								<ul className="pl-2">
+									{messages.warnings.map((m, i) => (
+										<li key={i}>{m}</li>
+									))}
+								</ul>
+							</>
+						)}
+					</div>
+					<div className="modal-footer">
+						<button onClick={() => onClose()} type="button" className="btn btn-secondary btn-small" data-dismiss="modal">
+							Close
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+IntegrityReport.propTypes = {
+	messages: PropTypes.array,
+	onClose: PropTypes.func
+};

src/js/component/topbar.js

@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect } from "react";
 import { ContentContext } from "../context.js";
 import swal from "@sweetalert/with-react";
 import { Notify } from "bc-react-notifier";
-import { UploadSyllabus, SyllabusDetails } from "./modal";
+import { UploadSyllabus, SyllabusDetails, IntegrityReport } from "./modal";
 import Dropdown from "./dropdown";
 import SearchSyllabus from "./modals/SearchOnSyllabus";
 import API from "../api.js";
@@ -14,7 +14,8 @@ export const TopBar = () => {
 	const [loading, setLoading] = useState(false);
 	const [syllabusStatus, setSyllabusStatus] = useState({
 		status: "btn-dark",
-		messages: []
+		messages: [],
+		showReport: false
 	});
 	const [openSyllabusDetails, setOpenSyllabusDetails] = useState(false);
 	const notInfoEmpty = key => store.info[key] && store.info[key] !== undefined && store.info[key] != "";
@@ -25,6 +26,9 @@ export const TopBar = () => {
 		<div className="topbar text-right px-3 pt-1 pb-2 position-sticky sticky-top bg-light">
 			{openSyllabusDetails && <SyllabusDetails onConfirm={confirm => setOpenSyllabusDetails(false)} />}
 			{openSearchOnSyllabus && <SearchSyllabus actions={actions} onCancel={() => setOpenSearchOnSyllabus(false)} />}
+			{syllabusStatus.showReport && syllabusStatus.messages && (
+				<IntegrityReport messages={syllabusStatus.messages} onClose={() => setSyllabusStatus({ ...syllabusStatus, showReport: false })} />
+			)}
 			<div className="d-flex">
 				<p className="m-0 p-0 text-left w-100">Academy: {academy ? academy.name : "Uknown"}</p>
 				<div
@@ -83,23 +87,30 @@ export const TopBar = () => {
 							onClick={() => {
 								actions
 									.test()
-									.then(data =>
+									.then(report =>
 										setSyllabusStatus({
-											status: "btn-success",
-											messages: []
+											status: report.errors > 0 ? "btn-danger" : report.warnings > 0 ? "btn-warning" : "btn-success",
+											messages: report,
+											showReport: true
 										})
 									)
-									.catch(async error => {
+									.catch(async report => {
+										let _report = report;
+										const showReport = Array.isArray(_report.msg?.errors);
 										setSyllabusStatus({
+											showReport,
 											status: "btn-danger",
-											messages: [error.detail || error.msg]
-										});
-										await swal({
-											title: "Errors found on syllabus",
-											text: error.detail || error.msg,
-											icon: "error",
-											dangerMode: true
+											messages: showReport ? _report.msg : null
 										});
+										if (showReport) {
+											return _report.msg;
+										} else
+											return await swal({
+												title: "Errors found on syllabus",
+												text: "Please test your syllabus before submiting and review the integrity report.",
+												icon: "error",
+												dangerMode: true
+											});
 									});
 							}}>
 							<i className="fas fa-check" /> Test

src/js/component/utils.js

@@ -91,6 +91,8 @@ export const getAPIErrors = payload => {
 
 	if (payload.detail !== undefined || payload.details !== undefined) return payload.detail || payload.details;
 
+	if (Array.isArray(payload.errors)) return payload;
+
 	for (let field in payload) {
 		errors.push(`Invalid ${field}: ${payload[field]}`);
 	}

src/js/context.js

@@ -557,10 +557,10 @@ const getState = ({ getStore, getActions, setStore }) => {
 			test: async () => {
 				const store = getStore();
 				try {
-					const resp = await API.registry().testSyllabus({
+					const report = await API.registry().testSyllabus({
 						days: store.days
 					});
-					return true;
+					return report;
 				} catch (error) {
 					throw error;
 				}