Merge branch 'master' into improvement/react-18-update

Author: skyepurchase

.github/workflows/cypress.yml

@@ -16,6 +16,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Cypress run (Ada)
         uses: cypress-io/github-action@v6
         with:
@@ -24,15 +26,62 @@ jobs:
         env:
           CYPRESS_SITE: ada
       - name: Cypress run (Physics)
+        if: ${{ success() || failure() }}
         uses: cypress-io/github-action@v6
         with:
           component: true
           browser: chrome
         env:
           CYPRESS_SITE: phy
-      - name: Upload artifacts
+      - name: VRT update - create or update branch
+        id: cypress-create-branch
         if: ${{ failure() }}
-        uses: actions/upload-artifact@v4
+        run: |
+          target_ref=${{ github.head_ref || github.ref_name }}
+          update_branch_name=vrt/$target_ref
+          git config --global user.email "actions@github.com"
+          git config --global user.name "GitHub Actions"
+          find ./src/test/pages/__image_snapshots__ -type f -name "*.actual.png" -exec bash -c 'mv "$1" "${1/.actual./.}"' shell {} \;
+          git fetch origin $target_ref
+          git checkout -B $update_branch_name origin/$target_ref
+          git commit -am "Update VRT baselines"
+          git push --set-upstream origin $update_branch_name --force
+          echo "TARGET_REF=$target_ref" >> "$GITHUB_ENV"
+          echo "UPDATE_BRANCH_NAME=$update_branch_name" >> "$GITHUB_ENV"
+      - name: VRT update - create PR if required
+        id: cypress-create-pr
+        if: ${{ failure() && steps.cypress-create-branch.outcome == 'success' }}
+        uses: actions/github-script@v7
         with:
-          name: visual-diffs
-          path: src/test/**/*.diff.png
+          result-encoding: string
+          script: |
+            const { repo, owner } = context.repo;
+            const pulls = await github.rest.pulls.list({
+              owner: owner,
+              repo: repo,
+              head: "${{ env.UPDATE_BRANCH_NAME }}",
+              base: "${{ env.TARGET_REF }}",
+              state: 'open',
+            });
+            
+            if (pulls.data.length == 0) {
+              const pr = await github.rest.pulls.create({
+                title: '[VRT] Update baselines for ${{ env.TARGET_REF }}',
+                owner: owner,
+                repo: repo,
+                head: "${{ env.UPDATE_BRANCH_NAME }}",
+                base: "${{ env.TARGET_REF }}",
+                body: 'Updates VRT baselines'
+              });
+              return pr.data.html_url;
+            } else {
+              return pulls.data[0].html_url;
+            };
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: VRT update - write job summary
+        if: ${{ failure() && steps.cypress-create-pr.outcome == 'success' }}
+        run: |
+          echo '## 👀 Visual Regression Test updates' >> $GITHUB_STEP_SUMMARY
+          echo 'This run failed due to visual differences compared to our baseline images. A PR with new baseline images has been generated. Please review it [here](${{ steps.cypress-create-pr.outputs.result }}) and merge it if the differences are expected.' >> $GITHUB_STEP_SUMMARY
+

package.json

@@ -23,8 +23,8 @@
     "html-to-text": "^9.0.5",
     "identity-obj-proxy": "3.0.0",
     "immer": "^9.0.21",
-    "inequality": "1.1.0",
-    "inequality-grammar": "1.2.2",
+    "inequality": "1.1.1",
+    "inequality-grammar": "1.3.2",
     "isaac-graph-sketcher": "0.13.7",
     "js-cookie": "^3.0.5",
     "katex": "^0.16.11",

src/IsaacApiTypes.tsx

@@ -18,10 +18,6 @@ export interface IsaacCardDeckDTO extends ContentDTO {
     cards?: (IsaacCardDTO & { imageClassName?: string; buttonText?: string })[];
 }
 
-export interface ChemicalFormulaDTO extends ChoiceDTO {
-    mhchemExpression?: string;
-}
-
 export interface TestCaseDTO extends QuestionValidationResponseDTO {
     expected?: boolean;
 }
@@ -210,6 +206,7 @@ export interface IsaacRegexMatchQuestionDTO extends QuestionDTO {
 }
 
 export interface IsaacSymbolicChemistryQuestionDTO extends IsaacSymbolicQuestionDTO {
+    isNuclear?: boolean;
 }
 
 export interface IsaacSymbolicLogicQuestionDTO extends IsaacSymbolicQuestionDTO {

src/app/components/content/IsaacCard.tsx

@@ -15,10 +15,10 @@ const PhysicsCard = ({doc, imageClassName}: IsaacCardProps) => {
     const classes = classNames("menu-card", {"disabled": disabled, "isaac-card-vertical": verticalContent});
     const imgSrc = image?.src && apiHelper.determineImageUrl(image.src);
 
-    const link = (clickUrl && isAppLink(clickUrl)) ? <Link to={clickUrl} className={classes + " stretched-link"} aria-label={title} aria-disabled={disabled}/> :
-        <a href={clickUrl} className={classes + " stretched-link"} aria-label={title} aria-disabled={disabled}/>
+    const link = (clickUrl && isAppLink(clickUrl)) ? <Link to={clickUrl} className={"stretched-link"} aria-label={title} aria-disabled={disabled}/> :
+        <a href={clickUrl} className={"stretched-link"} aria-label={title} aria-disabled={disabled}/>
 
-    return <Col className="d-flex justify-content-center">
+    return <Col className="d-flex h-100 justify-content-center">
         {verticalContent ?
             <Card className={classes}>
                 {image && <Row className={imageClassName}>
@@ -39,7 +39,7 @@ const PhysicsCard = ({doc, imageClassName}: IsaacCardProps) => {
                     {title}
                 </CardTitle>
                 <CardBody>
-                    <Row className="mx-2">
+                    <Row className="h-100 mx-2">
                         {image && <Col xs={4} sm={12} lg={4} className="col-centered">
                             <img className={classes} src={imgSrc} alt=""/>
                         </Col>}

src/app/components/content/IsaacClozeQuestion.tsx

@@ -13,6 +13,7 @@ import {
     NULL_CLOZE_ITEM,
     NULL_CLOZE_ITEM_ID,
     isDefined,
+    isTouchDevice,
     useCurrentQuestionAttempt,
     useDeviceSize
 } from "../../services";
@@ -497,7 +498,7 @@ const IsaacClozeQuestion = ({doc, questionId, readonly, validationResponse}: Isa
                     {doc.children}
                 </IsaacContentValueOrChildren>
 
-                {deviceSize !== "xs" && <>
+                {(!(deviceSize === "xs" || isTouchDevice())) && <>
                     {/* The item attached to the users cursor while dragging (just for display, shouldn't contain useDraggable/useSortable hooks) */}
                     <DragOverlay>
                         {activeItem && <Badge className="p-2 cloze-item is-dragging">

src/app/components/content/IsaacCoordinateQuestion.tsx

@@ -5,6 +5,7 @@ import {Button, Input} from "reactstrap";
 import {isDefined, useCurrentQuestionAttempt} from "../../services";
 import {IsaacQuestionProps} from "../../../IsaacAppTypes";
 import {Immutable} from "immer";
+import QuestionInputValidation from "../elements/inputs/QuestionInputValidation";
 
 // Custom input component for coordinates - a pair of inputs, one for x and one for y, formatted with brackets
 // and a comma in between.
@@ -16,6 +17,15 @@ interface CoordinateInputProps {
     readonly?: boolean;
     remove?: () => void;
 }
+
+export const coordinateInputValidator = (input: string) => {
+    const errors = [];
+    if (/[0-9]\s*[+/÷\-x×]\s*[0-9]/.test(input)) {
+        errors.push('Simplify your answer into a single decimal number.');
+    }
+    return errors;
+};
+
 const CoordinateInput = (props: CoordinateInputProps) => {
     const {value, placeholderXValue, placeholderYValue, onChange, readonly, remove} = props;
     return <span className="coordinate-input">
@@ -105,6 +115,7 @@ const IsaacCoordinateQuestion = ({doc, questionId, readonly}: IsaacQuestionProps
                     onChange={value => updateItem(0, value)}
                 />
         }
+        <QuestionInputValidation userInput={currentAttempt?.items?.map(answer => ((answer.x ?? "").concat(" ", answer.y ?? ""))).toString() ?? ""} validator={coordinateInputValidator}/>
         {!doc.numberOfCoordinates && <Button color="secondary" size="sm" className="mt-3" onClick={() => updateItem(currentAttempt?.items?.length ?? 1, {...DEFAULT_COORDINATE_ITEM})}>Add coordinate</Button>}
     </div>;
 };