Fixes 347 (#1277)

* Display longer exercise titles

* Support unlisted courses

* Allow a lot more blocks in exercise assignments

* Make it possible to edit the title on more quiz types

* Display the instructions header only for the instructions of the first task

* System test fixes

* System test fixes

.husky/lint-staged.config.js

@@ -22,6 +22,6 @@ module.exports = {
     `./bin/check-no-test-only-in-system-tests`,
     "npx tsc -p system-tests --noEmit",
   ],
-  "shared-module/src/locales/**/*.json": () => ["./bin/translations-sort"],
+  "shared-module/packages/common/src/locales/**/*.json": () => ["./bin/translations-sort"],
   ".github/workflows/**/*.{yaml,yml}": () => ["actionlint"],
 }

.husky/pre-commit

@@ -1,6 +1,9 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+# Makes the check faster, and the database does not have to be running to commit
+export SQLX_OFFLINE=1
+
 npx lint-staged -c ./.husky/lint-staged.config.js
 
 # Save the last time this was succesfully ran so that we can detect in post-commit if this script was skipped with --no-verify

bin/generate-bindings

@@ -14,28 +14,28 @@ run_command cd "$RELATIVE_PATH" || exit
 run_command env SQLX_OFFLINE=1 cargo test --features ts_rs --lib ts_binding_generator
 
 # Fix formatting
-run_command sed -i '1s;^;// ###########################################\n// ## This file is autogenerated by running ## \n// ## "bin/generate-bindings" in the root   ##\n// ## folder of this repo                   ##\n// ##                                       ##\n// ## Do not edit this file by hand.        ##\n// ###########################################\n\n;' ../../shared-module/common/src/bindings.ts
+run_command sed -i '1s;^;// ###########################################\n// ## This file is autogenerated by running ## \n// ## "bin/generate-bindings" in the root   ##\n// ## folder of this repo                   ##\n// ##                                       ##\n// ## Do not edit this file by hand.        ##\n// ###########################################\n\n;' ../../shared-module/packages/common/src/bindings.ts
 
 run_command npm run eslint:format-bindings
 
 # Go back from headless-lms to the root directory
 run_command cd ../..
 
-if [ -f "./shared-module/src/bindings.guard.ts" ]; then
-  run_command rm ./shared-module/src/bindings.guard.ts
+if [ -f "./shared-module/packages/common/src/bindings.guard.ts" ]; then
+  run_command rm ./shared-module/packages/common/src/bindings.guard.ts
 fi
 
-run_command npx ts-auto-guard --export-all --paths ./shared-module/src/bindings.ts --project shared-module/tsconfig.json
-run_command sed -i '1s;^;/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\n;' shared-module/src/bindings.guard.ts
-run_command npx eslint --fix shared-module/src/bindings.ts shared-module/src/bindings.guard.ts
+run_command npx ts-auto-guard --export-all --paths ./shared-module/packages/common/src/bindings.ts --project shared-module/packages/common/tsconfig.json
+run_command sed -i '1s;^;/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\n;' shared-module/packages/common/src/bindings.guard.ts
+run_command npx eslint --fix shared-module/packages/common/src/bindings.ts shared-module/packages/common/src/bindings.guard.ts
 
-if [ -f "./shared-module/src/exercise-service-protocol-types.guard.ts" ]; then
-  run_command rm ./shared-module/src/exercise-service-protocol-types.guard.ts
+if [ -f "./shared-module/packages/common/src/exercise-service-protocol-types.guard.ts" ]; then
+  run_command rm ./shared-module/packages/common/src/exercise-service-protocol-types.guard.ts
 fi
 
-run_command npx ts-auto-guard --export-all --paths ./shared-module/src/exercise-service-protocol-types.ts --project shared-module/tsconfig.json
-run_command sed -i '1s;^;/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\n;' shared-module/src/exercise-service-protocol-types.guard.ts
-run_command npx eslint --fix shared-module/src/exercise-service-protocol-types.guard.ts
+run_command npx ts-auto-guard --export-all --paths ./shared-module/packages/common/src/exercise-service-protocol-types.ts --project shared-module/packages/common/tsconfig.json
+run_command sed -i '1s;^;/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\n;' shared-module/packages/common/src/exercise-service-protocol-types.guard.ts
+run_command npx eslint --fix shared-module/packages/common/src/exercise-service-protocol-types.guard.ts
 
 # Post-update for shared module
 

bin/translations-add-new-ones-to-non-en

@@ -1,15 +1,15 @@
 #!/usr/bin/env python3
 
 BASEDIR="$(dirname "${BASH_SOURCE[0]}")"
-TRANSLATIONS_EN_PATH="$BASEDIR/../shared-module/common/src/locales/en"
+TRANSLATIONS_EN_PATH="$BASEDIR/../shared-module/packages/common/src/locales/en"
 TRANSLATIONS_EN_RELATIVE_PATH=$(realpath --relative-to="$(pwd)" "$TRANSLATIONS_EN_PATH")
-FOLDERS_PATH="$BASEDIR/../shared-module/common/src/locales"
+FOLDERS_PATH="$BASEDIR/../shared-module/packages/common/src/locales"
 FOLDERS_RELATIVE_PATH=$(realpath --relative-to="$(pwd)" "$FOLDERS_PATH")
 
 BASEDIR = os.path.dirname(os.path.realpath(__file__))
-TRANSLATIONS_EN_PATH = os.path.join(BASEDIR, "../shared-module/src/locales/en")
+TRANSLATIONS_EN_PATH = os.path.join(BASEDIR, "../shared-module/packages/common/src/locales/en")
 TRANSLATIONS_EN_RELATIVE_PATH = os.path.relpath(TRANSLATIONS_EN_PATH)
-FOLDERS_PATH = os.path.join(BASEDIR, "../shared-module/src/locales")
+FOLDERS_PATH = os.path.join(BASEDIR, "../shared-module/packages/common/src/locales")
 FOLDERS_RELATIVE_PATH = os.path.relpath(FOLDERS_PATH)
 
 def ensure_program_in_path(program):

bin/translations-sort

@@ -3,7 +3,7 @@ set -euo pipefail
 source "$(dirname "$0")/.common"
 
 BASEDIR="$(dirname "${BASH_SOURCE[0]}")"
-FOLDER_PATH="$BASEDIR/../shared-module/common/src/locales"
+FOLDER_PATH="$BASEDIR/../shared-module/packages/common/src/locales"
 RELATIVE_PATH=$(realpath --relative-to="$(pwd)" "$FOLDER_PATH")
 
 ensure_program_in_path jq

docs/mobile-first-design.md

@@ -8,7 +8,7 @@ In summary mobile first design is to start the design process from the smallest
 
 ## In practice
 
-Use [respondToOrLarger](secret-project-331/shared-module/src/styles/respond.ts) in your css. Its a helper tool to easily implement media-queries in to your css. **Always** first design how the component looks in a mobile viewport and inside media-query block implement the design if the screen gets bigger.
+Use [respondToOrLarger](secret-project-331/shared-module/packages/common/src/styles/respond.ts) in your css. Its a helper tool to easily implement media-queries in to your css. **Always** first design how the component looks in a mobile viewport and inside media-query block implement the design if the screen gets bigger.
 
 eg.
 

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "eslint": "eslint --fix .",
-    "eslint:format-bindings": "eslint --fix shared-module/src/bindings.ts",
+    "eslint:format-bindings": "eslint --fix shared-module/packages/common/src/bindings.ts",
     "eslint:format-generated-docs": "eslint --cache --fix services/headless-lms/server/generated-docs/*.ts && prettier --write services/headless-lms/server/generated-docs/*.json",
     "eslint:open:vscode": "eslint . --format json | jq '(.[] | select((.errorCount > 0) or (.warningCount > 0))).filePath' | xargs code",
     "eslint:ci": "eslint .",

services/cms/src/blocks/Exercise/ExerciseTask/ExerciseTaskEditor.tsx

@@ -22,7 +22,30 @@ import Spinner from "@/shared-module/common/components/Spinner"
 import { baseTheme, primaryFont, typography } from "@/shared-module/common/styles"
 import { runCallbackIfEnterPressed } from "@/shared-module/common/utils/accessibility"
 
-const ALLOWED_NESTED_BLOCKS = ["core/image", "core/paragraph", "core/list", "moocfi/latex"]
+const ALLOWED_NESTED_BLOCKS = [
+  "core/paragraph",
+  "core/image",
+  "core/heading",
+  "core/list",
+  "core/list-item",
+  "core/quote",
+  "core/audio",
+  "core/code",
+  "core/columns",
+  "core/column", // core/column is child of core/columns
+  "core/embed", // This is used by youtube, twitter etc.
+  "core/file",
+  "core/html",
+  "core/preformatted",
+  "core/pullquote",
+  "core/separator",
+  "core/block",
+  "core/spacer",
+  "core/table",
+  "core/verse",
+  "moocfi/latex",
+  "moocfi/iframe",
+]
 
 const ExerciseTaskEditorCard = styled.div`
   padding: 2rem 0;

services/course-material/src/components/ContentRenderer/core/embeds/EmbedBlock.tsx

@@ -20,12 +20,33 @@ const EmbedBlock: React.FC<React.PropsWithChildren<BlockRendererProps<EmbedAttri
 
   return (
     <div>
-      {type === "youtube" && <YoutubeEmbedBlock {...props.data.attributes} />}
+      {type === "youtube" && (
+        <YoutubeEmbedBlock
+          dontAllowBlockToBeWiderThanContainerWidth={
+            props.dontAllowBlockToBeWiderThanContainerWidth ?? false
+          }
+          {...props.data.attributes}
+        />
+      )}
       {type === "twitter" && <TwitterEmbedBlock {...props.data.attributes} />}
       {type === "spotify" && <SpotifyEmbedBlock {...props.data.attributes} />}
-      {type === "vimeo" && <VimeoEmbedBlock {...props.data.attributes} />}
+      {type === "vimeo" && (
+        <VimeoEmbedBlock
+          dontAllowBlockToBeWiderThanContainerWidth={
+            props.dontAllowBlockToBeWiderThanContainerWidth ?? false
+          }
+          {...props.data.attributes}
+        />
+      )}
       {type === "mentimeter" && <MentimeterEmbedBlock {...props.data.attributes} />}
-      {type === "thinglink" && <ThingLinkEmbedBlock {...props.data.attributes} />}
+      {type === "thinglink" && (
+        <ThingLinkEmbedBlock
+          dontAllowBlockToBeWiderThanContainerWidth={
+            props.dontAllowBlockToBeWiderThanContainerWidth ?? false
+          }
+          {...props.data.attributes}
+        />
+      )}
     </div>
   )
 }

services/course-material/src/components/ContentRenderer/core/embeds/variants/ThingLinkEmbedBlock.tsx

@@ -10,7 +10,9 @@ import { baseTheme } from "@/shared-module/common/styles/theme"
 const THINGLINK = "thinglink"
 const GET_NUMERIC_ID_FROM_STRING_REGEX = /\/(\d+)/g
 
-export const ThingLinkEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttributes>> = (props) => {
+export const ThingLinkEmbedBlock: React.FC<
+  React.PropsWithChildren<EmbedAttributes & { dontAllowBlockToBeWiderThanContainerWidth: boolean }>
+> = (props) => {
   const { t } = useTranslation()
   let id: string | null = null
 
@@ -20,7 +22,7 @@ export const ThingLinkEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttribut
   }
 
   return (
-    <BreakFromCentered sidebar={false}>
+    <BreakFromCentered sidebar={false} disabled={props.dontAllowBlockToBeWiderThanContainerWidth}>
       <figure
         className={css`
           width: 100%;

services/course-material/src/components/ContentRenderer/core/embeds/variants/VimeoEmbedBlock.tsx

@@ -14,7 +14,9 @@ import { baseTheme } from "@/shared-module/common/styles/theme"
 
 const VIMEO_MAX_WIDTH = 780
 
-export const VimeoEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttributes>> = (props) => {
+export const VimeoEmbedBlock: React.FC<
+  React.PropsWithChildren<EmbedAttributes & { dontAllowBlockToBeWiderThanContainerWidth: boolean }>
+> = (props) => {
   const [embedHtml, setEmbedHtml] = useState(undefined)
   const [fetching, setFetching] = useState(true)
   const { t } = useTranslation()
@@ -41,7 +43,10 @@ export const VimeoEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttributes>>
     <>
       {fetching && <Spinner variant="medium" />}
       {embedHtml && !fetching && (
-        <BreakFromCentered sidebar={false}>
+        <BreakFromCentered
+          sidebar={false}
+          disabled={props.dontAllowBlockToBeWiderThanContainerWidth}
+        >
           <figure
             className={css`
               width: 100%;

services/course-material/src/components/ContentRenderer/core/embeds/variants/YoutubeEmbedBlock.tsx

@@ -8,7 +8,9 @@ import { sanitizeCourseMaterialHtml } from "../../../../../utils/sanitizeCourseM
 import BreakFromCentered from "@/shared-module/common/components/Centering/BreakFromCentered"
 import { baseTheme } from "@/shared-module/common/styles/theme"
 
-export const YoutubeEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttributes>> = (props) => {
+export const YoutubeEmbedBlock: React.FC<
+  React.PropsWithChildren<EmbedAttributes> & { dontAllowBlockToBeWiderThanContainerWidth: boolean }
+> = (props) => {
   const { t } = useTranslation()
   const { url } = props
   let video = ""
@@ -27,7 +29,7 @@ export const YoutubeEmbedBlock: React.FC<React.PropsWithChildren<EmbedAttributes
   }
 
   return (
-    <BreakFromCentered sidebar={false}>
+    <BreakFromCentered sidebar={false} disabled={props.dontAllowBlockToBeWiderThanContainerWidth}>
       <figure
         className={css`
           width: 100%;

services/course-material/src/components/ContentRenderer/index.tsx

@@ -76,6 +76,8 @@ export interface ContentRendererProps {
   isExam: boolean
   /// This wrapper div providing styles must be skipped for innerblocks because list block's inner blocks cannot contain any div elements. See: https://dequeuniversity.com/rules/axe/4.4/list
   dontAddWrapperDivMeantForMostOutermostContentRenderer?: boolean
+  // e.g. makes embed blocks less wide inside exercise task blocks.
+  dontAllowBlockToBeWiderThanContainerWidth?: boolean
 }
 
 /**
@@ -248,6 +250,9 @@ const ContentRenderer: React.FC<React.PropsWithChildren<ContentRendererProps>> =
               setEdits={props.setEdits}
               isExam={props.isExam}
               wrapperClassName={wrapperClassName}
+              dontAllowBlockToBeWiderThanContainerWidth={
+                props.dontAllowBlockToBeWiderThanContainerWidth
+              }
             />
           )
         }
@@ -262,6 +267,9 @@ const ContentRenderer: React.FC<React.PropsWithChildren<ContentRendererProps>> =
               setEdits={props.setEdits}
               isExam={props.isExam}
               wrapperClassName={wrapperClassName}
+              dontAllowBlockToBeWiderThanContainerWidth={
+                props.dontAllowBlockToBeWiderThanContainerWidth
+              }
             />
           </div>
         )

services/course-material/src/components/ContentRenderer/moocfi/ExerciseBlock/ExerciseTask.tsx

@@ -79,13 +79,14 @@ const ExerciseTask: React.FC<React.PropsWithChildren<ExerciseTaskProps>> = ({
             }
           `}
         >
-          <span>{t("title-instructions")}</span>
+          {exerciseTask.order_number === 0 && <span>{t("title-instructions")}</span>}
           <ContentRenderer
             data={currentExerciseTaskAssignment}
             editing={false}
             selectedBlockId={null}
             setEdits={(map) => map}
             isExam={isExam}
+            dontAllowBlockToBeWiderThanContainerWidth={true}
           />
         </div>
       )}