@capytale/meta-player 0.4.0 → 0.4.2

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@capytale/meta-player",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "start": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "vitest run",
     "format": "prettier --write .",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
     "type-check": "tsc --noEmit"
   },
   "overrides": {
@@ -19,7 +16,7 @@
     }
   },
   "dependencies": {
-    "@capytale/activity.js": "^3.1.7",
+    "@capytale/activity.js": "^3.1.10",
     "@capytale/capytale-anti-triche": "^0.2.1",
     "@capytale/capytale-rich-text-editor": "^0.4.3",
     "@reduxjs/toolkit": "^2.0.1",
@@ -39,20 +36,14 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^23.2.0",
     "prettier": "^3.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.75.0",
     "typescript": "^5.3.3",
-    "vite": "^5.4.6",
-    "vitest": "^1.2.0"
+    "vite": "^6.0.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/App.tsx

@@ -13,15 +13,17 @@ import {
   selectOrientation,
   toggleIsPedagoVisible,
 } from "./features/layout/layoutSlice";
-import { FC, PropsWithChildren } from "react";
+import { FC, KeyboardEvent, PropsWithChildren, useCallback } from "react";
 import { Tooltip } from "primereact/tooltip";
 import {
   selectHasGradingOrComments,
   selectHasInstructions,
+  selectIsDirty,
   selectMode,
 } from "./features/activityData/activityDataSlice";
 import settings from "./settings";
 import ReviewNavbar from "./features/navbar/ReviewNavbar";
+import { useSave } from "./features/activityData/hooks";
 
 type AppProps = PropsWithChildren<{}>;
 
@@ -32,9 +34,29 @@ const App: FC<AppProps> = (props) => {
   const isPedagoVisible = useAppSelector(selectIsPedagoVisible) as boolean;
   const hasInstructions = useAppSelector(selectHasInstructions);
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
-  const hasPedago = hasInstructions || hasGradingOrComments;
+  const hasPedago = hasInstructions || hasGradingOrComments || mode === "review";
   const dispatch = useAppDispatch();
   const showPedago = hasPedago && isPedagoVisible;
+  const isDirty = useAppSelector(selectIsDirty);
+  const save = useSave();
+
+  const handleCtrlS = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        if (isDirty) {
+          save();
+        }
+      }
+    },
+    [isDirty, save],
+  );
+
+  const pedagoOpenLabel = hasPedago
+    ? "Afficher les consignes"
+    : mode === "create"
+      ? "Ce type d'activité n'accepte pas de consigne"
+      : "Pas de consignes ni de note";
 
   return (
     <div
@@ -43,6 +65,7 @@ const App: FC<AppProps> = (props) => {
         isDark ? "dark-theme" : "light-theme",
         isHorizontal ? "layout-horizontal" : "layout-vertical",
       )}
+      onKeyDown={handleCtrlS}
     >
       <div>
         <Navbar />
@@ -63,16 +86,8 @@ const App: FC<AppProps> = (props) => {
             onClick={
               hasPedago ? () => dispatch(toggleIsPedagoVisible()) : undefined
             }
-            data-pr-tooltip={
-              hasPedago
-                ? "Afficher les consignes"
-                : "Pas de consignes ni de note"
-            }
-            aria-label={
-              hasPedago
-                ? "Afficher les consignes"
-                : "Pas de consignes ni de note"
-            }
+            data-pr-tooltip={pedagoOpenLabel}
+            aria-label={pedagoOpenLabel}
             role={hasPedago ? "button" : "note"}
           >
             <i

package/src/MetaPlayer.tsx

@@ -33,22 +33,17 @@ import {
 
 import { initialState as layoutInitialState } from "./features/layout/layoutSlice";
 import ExitWarning from "./features/activityData/ExitWarning";
-
-type AntiCheatOptions = {
-  preserveDom: boolean;
-  hasIframes: boolean;
-};
-
-type UIOptions = {
-  closePedagoByDefault: boolean;
-  noWorkflow: boolean;
-  noSaveForStudents: boolean;
-};
+import type { AntiCheatOptions, UIOptions } from "./types";
+import {
+  AttachedFilesOptions,
+  defaultAttachedFilesOptions,
+} from "./features/functionalities/functionalitiesSlice";
 
 type MetaPlayerProps = PropsWithChildren<{
   activityJSOptions?: LoadOptions;
   antiCheatOptions?: Partial<AntiCheatOptions>;
   uiOptions?: Partial<UIOptions>;
+  attachedFilesOptions?: AttachedFilesOptions;
 }>;
 
 const MetaPlayer: FC<MetaPlayerProps> = (props) => {
@@ -66,6 +61,10 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
     noSaveForStudents: false,
     ...props.uiOptions,
   };
+  const attachedFilesOptions: AttachedFilesOptions = {
+    ...defaultAttachedFilesOptions,
+    ...props.attachedFilesOptions,
+  };
   const store = useMemo(
     () =>
       makeStore({
@@ -75,6 +74,9 @@ const MetaPlayer: FC<MetaPlayerProps> = (props) => {
           showWorkflow: !uiOptions.noWorkflow,
           showSaveForStudents: !uiOptions.noSaveForStudents,
         },
+        functionalities: {
+          attachedFilesOptions,
+        },
       }),
     [],
   );

package/src/activityJs.ts

@@ -0,0 +1,5 @@
+import evaluationApi from "@capytale/activity.js/backend/capytale/evaluation";
+import type { Evaluation } from "@capytale/activity.js/activity/evaluation/evaluation";
+
+export { evaluationApi };
+export type { Evaluation };

package/src/app/store.ts

@@ -7,6 +7,7 @@ import { activityDataSlice } from "../features/activityData/activityDataSlice";
 import { navbarSlice } from "../features/navbar/navbarSlice";
 import { saverSlice } from "../features/activityJS/saverSlice";
 import { activitySettingsSlice } from "../features/activitySettings/activitySettingsSlice";
+import { functionalitiesSlice } from "../features/functionalities/functionalitiesSlice";
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
@@ -17,6 +18,7 @@ const rootReducer = combineSlices(
   navbarSlice,
   saverSlice,
   activitySettingsSlice,
+  functionalitiesSlice,
 );
 // Infer the `RootState` type from the root reducer
 export type RootState = ReturnType<typeof rootReducer>;
@@ -27,6 +29,10 @@ export const makeStore = (preloadedState?: Partial<RootState>) => {
   const store = configureStore({
     reducer: rootReducer,
     preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        serializableCheck: false
+      }),
   });
   // configure listeners using the provided defaults
   // optional, but required for `refetchOnFocus`/`refetchOnReconnect` behaviors

package/src/features/activityData/activityDataSlice.ts

@@ -33,7 +33,7 @@ interface ActivityJSData {
   mode: ActivityMode;
   returnUrl: string;
   helpUrl: string;
-  code: string;
+  code: string | null;
   nid: number;
   activityNid: number;
   accessTrMode: string;
@@ -44,7 +44,7 @@ interface ActivityJSData {
   pdfInstructions: Blob | null;
   sharedNotesContent: InitialEditorStateType | null;
   sharedNotesType: EditorType;
-  codeLink: string;
+  codeLink: string | null;
   icon: Icon | null;
   friendlyType: string;
   comments: string | null;
@@ -77,7 +77,7 @@ const initialState: ActivityDataState = {
   mode: "view",
   returnUrl: "",
   helpUrl: "",
-  code: "",
+  code: null,
   nid: 0,
   activityNid: 0,
   accessTrMode: "",
@@ -92,7 +92,7 @@ const initialState: ActivityDataState = {
   pdfInstructions: null,
   sharedNotesContent: null,
   sharedNotesType: "none",
-  codeLink: "",
+  codeLink: null,
   icon: null,
   friendlyType: "",
   comments: null,

package/src/features/activityJS/ActivityJSProvider.tsx

@@ -55,7 +55,8 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         helpUrl: data.type.helpUrl,
         nid: ab.mainNode.nid,
         activityNid: ab.activityNode.nid,
-        code: ab.code.value || "",
+        code: data.code,
+        codeLink: data.codeLink,
         accessTrMode: ab.access_tr_mode.value || "",
         accessTimerange: ab.access_timerange.value,
         studentInfo: data.student
@@ -85,7 +86,6 @@ export const ActivityJSProvider: FC<ActivityJSProviderProps> = (props) => {
         pdfInstructions: null,
         sharedNotesContent: sharedNotesContent,
         sharedNotesType: sharedNotesContent == null ? "none" : "rich",
-        codeLink: data.codeLink || "",
         icon: data.icon || null,
         friendlyType: data.friendlyType,
         comments: ab.assignmentNode?.comments.value || null,

package/src/features/functionalities/functionalitiesSlice.ts

@@ -0,0 +1,63 @@
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { createAppSlice } from "../../app/createAppSlice";
+
+export type AttachedFileData = {
+  name: string;
+  isTemporary: boolean;
+  interactionMode: "download" | "preview" | "preview-or-download" | "custom";
+  urlOrId: string;
+}
+
+export type AttachedFilesOptions = {
+  enabled: boolean;
+  uploadTemporaryFiles?: {
+    mimeTypes: string[];
+    handler: (files: File[]) => any;
+  };
+  middleware?: {
+    listFiles: (originalFiles: AttachedFileData[]) => AttachedFileData[];
+    handleFileClick?: ((originalFile: AttachedFileData) => any);
+  };
+};
+
+export interface FunctionalitiesState {
+  attachedFilesOptions: AttachedFilesOptions;
+}
+
+export const defaultAttachedFilesOptions: AttachedFilesOptions = {
+  enabled: false,
+};
+
+export const initialState: FunctionalitiesState = {
+  attachedFilesOptions: defaultAttachedFilesOptions
+};
+
+// If you are not using async thunks you can use the standalone `createSlice`.
+export const functionalitiesSlice = createAppSlice({
+  name: "functionalities",
+  // `createSlice` will infer the state type from the `initialState` argument
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: (create) => ({
+    setAttachedFilesOptions: create.reducer((state, action: PayloadAction<AttachedFilesOptions>) => {
+      state.attachedFilesOptions = action.payload;
+    }),
+  }),
+  // You can define your selectors here. These selectors receive the slice
+  // state as their first argument.
+  selectors: {
+    selectAttachedFilesOptions: (state) => state.attachedFilesOptions,
+    selectAttachedFilesEnabled: (state) => state.attachedFilesOptions.enabled,
+  },
+});
+
+// Action creators are generated for each case reducer function.
+export const {
+  setAttachedFilesOptions,
+} = functionalitiesSlice.actions;
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const {
+  selectAttachedFilesOptions,
+  selectAttachedFilesEnabled,
+} = functionalitiesSlice.selectors;

package/src/features/functionalities/hooks.ts

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+import { useAppSelector } from "../../app/hooks"
+import { useActivityJS } from "../activityJS/ActivityJSProvider";
+import { AttachedFileData, selectAttachedFilesOptions } from "./functionalitiesSlice"
+
+export const useAttachedFiles = () => {
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+
+  const activityJS = useActivityJS();
+  const files = useMemo(
+    () =>
+      activityJS.activitySession?.activityBunch.activityNode.attached_files
+        .items || [],
+    [activityJS],
+  );
+  const filesData = useMemo<AttachedFileData[]>(() => {
+    return files.map((file) => {
+      const name = decodeURIComponent(file.split("/").pop() || "");
+      return {
+        name: name,
+        urlOrId: file,
+        isTemporary: false,
+        interactionMode: "download",
+      };
+    });
+  }, [files]);
+
+  const treatedFilesData = useMemo(() => {
+    if (!attachedFilesOptions.enabled || !attachedFilesOptions.middleware?.listFiles) {
+      return filesData;
+    }
+    return attachedFilesOptions.middleware.listFiles(filesData);
+  }, [filesData, attachedFilesOptions]);
+
+  return treatedFilesData;
+}

package/src/features/navbar/ActivityMenu.tsx

@@ -3,7 +3,7 @@ import styles from "./style.module.scss";
 
 import { Button } from "primereact/button";
 import { Sidebar } from "primereact/sidebar";
-import SidebarContent from "./SidebarContent";
+import SettingsSidebarContent from "./SettingsSidebarContent";
 import settings from "../../settings";
 import ActivityQuickActions from "./ActivityQuickActions";
 import useFullscreen from "../../utils/useFullscreen";
@@ -12,9 +12,15 @@ import { Dialog } from "primereact/dialog";
 import capytaleUI from "@capytale/activity.js/backend/capytale/ui";
 import { useAppSelector } from "../../app/hooks";
 import { selectHasAntiCheat } from "../activityData/activityDataSlice";
+import AttachedFilesSidebarContent from "./AttachedFilesSidebarContent";
+import { Badge } from "primereact/badge";
+import { useAttachedFiles } from "../functionalities/hooks";
+import { selectAttachedFilesEnabled } from "../functionalities/functionalitiesSlice";
 
 const ActivityMenu: React.FC = memo(() => {
   const [settingsSidebarVisible, setSettingsSidebarVisible] = useState(false);
+  const [attachedFilesSidebarVisible, setAttachedFilesSidebarVisible] =
+    useState(false);
   const [wantFullscreen, setWantFullscreen] = useState(false);
   const isFullscreen = useFullscreen(wantFullscreen, () =>
     setWantFullscreen(false),
@@ -23,9 +29,32 @@ const ActivityMenu: React.FC = memo(() => {
   const [helpDialogVisible, setHelpDialogVisible] = useState(false);
   const activityJS = useActivityJS();
   const hasAntiCheat = useAppSelector(selectHasAntiCheat);
+  const attachedFiles = useAttachedFiles();
+  const attachedFilesEnabled = useAppSelector(selectAttachedFilesEnabled);
   return (
     <div className={styles.activityMenu}>
       <ActivityQuickActions />
+      {attachedFilesEnabled && (
+        <Button
+          severity="secondary"
+          size="small"
+          icon={
+            <i className="pi pi-paperclip p-overlay-badge">
+              {attachedFiles.length > 0 && (
+                <Badge value={attachedFiles.length}></Badge>
+              )}
+            </i>
+          }
+          outlined
+          tooltip="Fichiers joints"
+          tooltipOptions={{
+            position: "left",
+            showDelay: settings.TOOLTIP_SHOW_DELAY,
+          }}
+          className="p-overlay-badge"
+          onClick={() => setAttachedFilesSidebarVisible(true)}
+        />
+      )}
       <Button
         severity="secondary"
         size="small"
@@ -72,7 +101,7 @@ const ActivityMenu: React.FC = memo(() => {
         position="right"
         onHide={() => setSettingsSidebarVisible(false)}
       >
-        <SidebarContent
+        <SettingsSidebarContent
           showHelp={
             activityJS.activitySession?.type.helpUrl
               ? () => {
@@ -83,6 +112,14 @@ const ActivityMenu: React.FC = memo(() => {
           }
         />
       </Sidebar>
+      <Sidebar
+        header="Fichiers joints"
+        visible={attachedFilesSidebarVisible}
+        position="right"
+        onHide={() => setAttachedFilesSidebarVisible(false)}
+      >
+        <AttachedFilesSidebarContent />
+      </Sidebar>
       {activityJS.activitySession?.type.helpUrl && (
         <Dialog
           id="metaPlayerHelpDialog"

package/src/features/navbar/AttachedFilesSidebarContent.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import { useAttachedFiles } from "../functionalities/hooks";
+import { useAppSelector } from "../../app/hooks";
+import { selectAttachedFilesOptions } from "../functionalities/functionalitiesSlice";
+
+const AttachedFilesSidebarContent: FC = () => {
+  const filesData = useAttachedFiles();
+  const attachedFilesOptions = useAppSelector(selectAttachedFilesOptions);
+
+  return (
+    <div>
+      {filesData.map((file) => (
+        <p key={file.urlOrId}>
+          <a
+            href={file.urlOrId}
+            target="_blank"
+            rel="noreferrer"
+            download={file.name}
+            style={{
+              color: file.isTemporary ? "rgb(200, 0, 0)" : "rgb(0, 50, 200)",
+              textDecoration:
+                file.interactionMode === "download" ? "underline" : "none",
+            }}
+            onClick={(e) => {
+              if (file.interactionMode !== "download") {
+                e.preventDefault();
+                if (
+                  file.interactionMode === "custom" &&
+                  attachedFilesOptions.middleware?.handleFileClick
+                ) {
+                  attachedFilesOptions.middleware.handleFileClick(file);
+                }
+              }
+            }}
+          >
+            {file.name}
+          </a>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default AttachedFilesSidebarContent;

package/src/features/navbar/CapytaleMenu.tsx

@@ -115,7 +115,7 @@ const CapytaleMenu: React.FC = () => {
             }} */
         }
 
-        {mode === "create" && (
+        {mode === "create" && sharingInfo.code && (
           <SplitButton
             label={isLarge ? sharingInfo.code : undefined}
             severity="secondary"
@@ -130,7 +130,7 @@ const CapytaleMenu: React.FC = () => {
               },
             }}
             onClick={async () => {
-              await copyToClipboard(sharingInfo.code);
+              await copyToClipboard(sharingInfo.code!);
               toast.current!.show({
                 summary: "Code copié",
                 detail: "Le code de partage a été copié dans le presse-papier.",
@@ -143,7 +143,7 @@ const CapytaleMenu: React.FC = () => {
                 label: "Copier l'URL de partage",
                 icon: "pi pi-link",
                 command: () => {
-                  copyToClipboard(sharingInfo.codeLink).then(() => {
+                  copyToClipboard(sharingInfo.codeLink!).then(() => {
                     toast.current!.show({
                       summary: "URL copiée",
                       detail:

package/src/features/navbar/{SidebarContent.tsx → SettingsSidebarContent.tsx}

@@ -25,11 +25,11 @@ import { ConfirmPopup, confirmPopup } from "primereact/confirmpopup";
 import settings from "../../settings";
 import { useReset } from "../activityJS/hooks";
 
-type SidebarContentProps = {
+type SettingsSidebarContentProps = {
   showHelp?: () => void;
 };
 
-const SidebarContent: FC<SidebarContentProps> = (props) => {
+const SettingsSidebarContent: FC<SettingsSidebarContentProps> = (props) => {
   const canChooseOrientation = useAppSelector(selectCanChoosePedagoLayout);
   const canChooseTheme = useAppSelector(selectCanChooseTheme);
   const orientation = useAppSelector(selectOrientation);
@@ -182,4 +182,4 @@ const SidebarContent: FC<SidebarContentProps> = (props) => {
   );
 };
 
-export default SidebarContent;
+export default SettingsSidebarContent;

package/src/features/pedago/index.tsx

@@ -15,23 +15,22 @@ import {
   selectComments,
   selectGrading,
   selectHasGradingOrComments,
+  selectHasInstructions,
   selectMode,
   setComments,
   setGrading,
   setIsMPDirty,
 } from "../activityData/activityDataSlice";
-import { ChangeEventHandler } from "react";
+import { ChangeEventHandler, FC } from "react";
 import { DivProps } from "react-html-props";
 import SharedNotesEditor from "./SharedNotesEditor";
 import { PedagoCommands } from "./PedagoCommands";
 import { PdfEditor } from "./PdfEditor";
 
 const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
-  const dispatch = useAppDispatch();
   const mode = useAppSelector(selectMode);
-  const comments = useAppSelector(selectComments);
-  const grading = useAppSelector(selectGrading);
   const pedagoTab = useAppSelector(selectPedagoTab);
+  const hasInstructions = useAppSelector(selectHasInstructions);
   const hasGradingOrComments = useAppSelector(selectHasGradingOrComments);
   const isGradingVisible =
     useAppSelector(selectIsGradingVisible) &&
@@ -41,19 +40,13 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
     ? (tab: Array<any>) => tab.toReversed()
     : (tab: Array<any>) => tab;
 
-  const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
-    event,
-  ) => {
-    dispatch(setComments(event.target.value));
-    dispatch(setIsMPDirty(true));
-  };
-
-  const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
-    event,
-  ) => {
-    dispatch(setGrading(event.target.value));
-    dispatch(setIsMPDirty(true));
-  };
+  if (!hasInstructions) {
+    return (
+      <div className={styles.gradingPanel}>
+        <Grading />
+      </div>
+    );
+  }
 
   return (
     // @ts-ignore - Incompatibility for props in TS
@@ -82,56 +75,7 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
                 size={40}
                 className={styles.gradingPanel}
               >
-                <Panel
-                  className={classNames(
-                    styles.fullSizePanel,
-                    styles.pedagoFeedbackPanel,
-                  )}
-                  header="Appréciation"
-                >
-                  <div className={styles.pedagoFeedback}>
-                    {(comments || mode !== "assignment") && (
-                      <textarea
-                        value={comments || ""}
-                        placeholder={
-                          mode !== "review" ? "" : "Rédigez ici l'appréciation."
-                        }
-                        id="comments"
-                        name="comments"
-                        rows={2}
-                        readOnly={mode !== "review"}
-                        onChange={handleCommentsChange}
-                        className={styles.fullTextarea}
-                      />
-                    )}
-                  </div>
-                </Panel>
-                <Panel
-                  className={classNames(
-                    styles.fullSizePanel,
-                    styles.pedagoGradePanel,
-                  )}
-                  header="Évaluation"
-                >
-                  <div className={styles.pedagoGrade}>
-                    {(grading || mode !== "assignment") && (
-                      <textarea
-                        value={grading || ""}
-                        placeholder={
-                          mode !== "review"
-                            ? ""
-                            : "Écrivez ici l'évaluation libre (chiffrée ou non)."
-                        }
-                        id="grading"
-                        name="grading"
-                        rows={1}
-                        readOnly={mode !== "review"}
-                        onChange={handleGradingChange}
-                        className={styles.fullTextarea}
-                      />
-                    )}
-                  </div>
-                </Panel>
+                <Grading />
               </SplitterPanel>,
               <SplitterPanel
                 key="pedagoPanel"
@@ -162,4 +106,74 @@ const Pedago: React.FC<DivProps> = ({ className, ...props }) => {
   );
 };
 
+const Grading: FC = () => {
+  const mode = useAppSelector(selectMode);
+  const comments = useAppSelector(selectComments);
+  const grading = useAppSelector(selectGrading);
+  const dispatch = useAppDispatch();
+
+  const handleCommentsChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    dispatch(setComments(event.target.value));
+    dispatch(setIsMPDirty(true));
+  };
+
+  const handleGradingChange: ChangeEventHandler<HTMLTextAreaElement> = (
+    event,
+  ) => {
+    dispatch(setGrading(event.target.value));
+    dispatch(setIsMPDirty(true));
+  };
+
+  return (
+    <>
+      <Panel
+        className={classNames(styles.fullSizePanel, styles.pedagoFeedbackPanel)}
+        header="Appréciation"
+      >
+        <div className={styles.pedagoFeedback}>
+          {(comments || mode !== "assignment") && (
+            <textarea
+              value={comments || ""}
+              placeholder={
+                mode !== "review" ? "" : "Rédigez ici l'appréciation."
+              }
+              id="comments"
+              name="comments"
+              rows={2}
+              readOnly={mode !== "review"}
+              onChange={handleCommentsChange}
+              className={styles.fullTextarea}
+            />
+          )}
+        </div>
+      </Panel>
+      <Panel
+        className={classNames(styles.fullSizePanel, styles.pedagoGradePanel)}
+        header="Évaluation"
+      >
+        <div className={styles.pedagoGrade}>
+          {(grading || mode !== "assignment") && (
+            <textarea
+              value={grading || ""}
+              placeholder={
+                mode !== "review"
+                  ? ""
+                  : "Écrivez ici l'évaluation libre (chiffrée ou non)."
+              }
+              id="grading"
+              name="grading"
+              rows={1}
+              readOnly={mode !== "review"}
+              onChange={handleGradingChange}
+              className={styles.fullTextarea}
+            />
+          )}
+        </div>
+      </Panel>
+    </>
+  );
+};
+
 export default Pedago;

package/src/features/pedago/style.module.scss

@@ -129,6 +129,7 @@
 .gradingPanel {
   display: flex;
   gap: 4px;
+  width: 100%;
 }
 
 *:has(> .fullSizePanel) {

package/src/types.ts

@@ -0,0 +1,10 @@
+export type AntiCheatOptions = {
+  preserveDom: boolean;
+  hasIframes: boolean;
+};
+
+export type UIOptions = {
+  closePedagoByDefault: boolean;
+  noWorkflow: boolean;
+  noSaveForStudents: boolean;
+};

package/tsconfig.json

@@ -13,7 +13,6 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vitest/globals"],
 
     /* Linting */
     "strict": true,

package/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vitest/config"
+import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 
 // https://vitejs.dev/config/
@@ -8,10 +8,4 @@ export default defineConfig({
   server: {
     open: true,
   },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "src/setupTests",
-    mockReset: true,
-  },
 })

package/.eslintrc.json

@@ -1,36 +0,0 @@
-{
-  "extends": [
-    "eslint:recommended",
-    "react-app",
-    "plugin:react/jsx-runtime",
-    "prettier",
-    "plugin:react-hooks/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": { "project": true, "tsconfigRootDir": "./" },
-  "plugins": ["@typescript-eslint"],
-  "root": true,
-  "ignorePatterns": ["dist"],
-  "rules": {
-    "@typescript-eslint/consistent-type-imports": [
-      2,
-      { "fixStyle": "separate-type-imports" }
-    ],
-    "@typescript-eslint/no-restricted-imports": [
-      2,
-      {
-        "paths": [
-          {
-            "name": "react-redux",
-            "importNames": ["useSelector", "useStore", "useDispatch"],
-            "message": "Please use pre-typed versions from `src/app/hooks.ts` instead."
-          }
-        ]
-      }
-    ]
-  },
-  "overrides": [
-    { "files": ["*.{c,m,}{t,j}s", "*.{t,j}sx"] },
-    { "files": ["*{test,spec}.{t,j}s?(x)"], "env": { "jest": true } }
-  ]
-}

package/src/setupTests.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom/vitest"

package/src/utils/test-utils.tsx

@@ -1,65 +0,0 @@
-import type { RenderOptions } from "@testing-library/react"
-import { render } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import type { PropsWithChildren, ReactElement } from "react"
-import { Provider } from "react-redux"
-import type { AppStore, RootState } from "../app/store"
-import { makeStore } from "../app/store"
-
-/**
- * This type extends the default options for
- * React Testing Library's render function. It allows for
- * additional configuration such as specifying an initial Redux state and
- * a custom store instance.
- */
-interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
-  /**
-   * Defines a specific portion or the entire initial state for the Redux store.
-   * This is particularly useful for initializing the state in a
-   * controlled manner during testing, allowing components to be rendered
-   * with predetermined state conditions.
-   */
-  preloadedState?: Partial<RootState>
-
-  /**
-   * Allows the use of a specific Redux store instance instead of a
-   * default or global store. This flexibility is beneficial when
-   * testing components with unique store requirements or when isolating
-   * tests from a global store state. The custom store should be configured
-   * to match the structure and middleware of the store used by the application.
-   *
-   * @default makeStore(preloadedState)
-   */
-  store?: AppStore
-}
-
-/**
- * Renders the given React element with Redux Provider and custom store.
- * This function is useful for testing components that are connected to the Redux store.
- *
- * @param ui - The React component or element to render.
- * @param extendedRenderOptions - Optional configuration options for rendering. This includes `preloadedState` for initial Redux state and `store` for a specific Redux store instance. Any additional properties are passed to React Testing Library's render function.
- * @returns An object containing the Redux store used in the render, User event API for simulating user interactions in tests, and all of React Testing Library's query functions for testing the component.
- */
-export const renderWithProviders = (
-  ui: ReactElement,
-  extendedRenderOptions: ExtendedRenderOptions = {},
-) => {
-  const {
-    preloadedState = {},
-    // Automatically create a store instance if no store was passed in
-    store = makeStore(preloadedState),
-    ...renderOptions
-  } = extendedRenderOptions
-
-  const Wrapper = ({ children }: PropsWithChildren) => (
-    <Provider store={store}>{children}</Provider>
-  )
-
-  // Return an object with the store and all of RTL's query functions
-  return {
-    store,
-    user: userEvent.setup(),
-    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
-  }
-}