From 367e5c25415bd6b6ca969d40d1ec1607bec87b8d Mon Sep 17 00:00:00 2001
From: Julius Schlapbach <80708107+sjschlapbach@users.noreply.github.com>
Date: Thu, 23 Jan 2025 18:48:33 +0100
Subject: [PATCH] feat(apps/manage-frontend): auto-save of user inputs in
 element edit modal (#4474)

---
 .github/workflows/cypress-testing.yml         |   2 +-
 .../src/components/questions/Question.tsx     |  29 +-
 .../questions/manipulation/AutoSaveMonitor.ts |  45 +++
 .../manipulation/ElementContentInput.tsx      |   1 -
 .../manipulation/ElementEditModal.tsx         |  45 ++-
 .../questions/manipulation/RecoveryPrompt.tsx |  63 ++++
 apps/frontend-manage/src/pages/index.tsx      |  33 +-
 .../e2e/B-feature-access-workflow.cy.ts       |   2 +-
 .../cypress/e2e/D-questions-workflow.cy.ts    | 324 +++++++++++++++++-
 cypress/cypress/fixtures/D-questions.json     |  14 +
 packages/i18n/messages/de.ts                  |   7 +
 packages/i18n/messages/en.ts                  |   7 +
 12 files changed, 540 insertions(+), 32 deletions(-)
 create mode 100644 apps/frontend-manage/src/components/questions/manipulation/AutoSaveMonitor.ts
 create mode 100644 apps/frontend-manage/src/components/questions/manipulation/RecoveryPrompt.tsx

diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml
index 8b475aaa5f..518af9013c 100644
--- a/.github/workflows/cypress-testing.yml
+++ b/.github/workflows/cypress-testing.yml
@@ -139,7 +139,7 @@ jobs:
 
       - name: Upload service logs
         if: always() # This ensures logs are uploaded even if the previous step fails
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: service-logs
           path: service.log
diff --git a/apps/frontend-manage/src/components/questions/Question.tsx b/apps/frontend-manage/src/components/questions/Question.tsx
index 49680ed50e..e0631643dd 100644
--- a/apps/frontend-manage/src/components/questions/Question.tsx
+++ b/apps/frontend-manage/src/components/questions/Question.tsx
@@ -20,6 +20,7 @@ import { twMerge } from 'tailwind-merge'
 import ElementEditModal, {
   ElementEditMode,
 } from './manipulation/ElementEditModal'
+import RecoveryPrompt from './manipulation/RecoveryPrompt'
 import QuestionTags from './QuestionTags'
 
 const StatusColors: Record<ElementStatus, string> = {
@@ -81,6 +82,7 @@ function Question({
   const [isModificationModalOpen, setIsModificationModalOpen] = useState(false)
   const [isDuplicationModalOpen, setIsDuplicationModalOpen] = useState(false)
   const [isDeletionModalOpen, setIsDeletionModalOpen] = useState(false)
+  const [showRecoveryPrompt, setShowRecoveryPrompt] = useState(false)
   const [deleteQuestion, { loading: deleting }] = useMutation(
     DeleteQuestionDocument
   )
@@ -177,7 +179,15 @@ function Question({
               className={{
                 root: 'space-x-2 bg-white text-sm md:w-36 md:text-base',
               }}
-              onClick={(): void => setIsModificationModalOpen(true)}
+              onClick={() => {
+                const value = localStorage.getItem(`autosave-element-${id}`)
+
+                if (value) {
+                  setShowRecoveryPrompt(true)
+                } else {
+                  setIsModificationModalOpen(true)
+                }
+              }}
               data={{ cy: `edit-question-${title}` }}
             >
               <Button.Icon>
@@ -185,6 +195,21 @@ function Question({
               </Button.Icon>
               <Button.Label>{t('shared.generic.edit')}</Button.Label>
             </Button>
+            {showRecoveryPrompt && (
+              <RecoveryPrompt
+                open={showRecoveryPrompt}
+                onRecovery={() => {
+                  setShowRecoveryPrompt(false)
+                  setIsModificationModalOpen(true)
+                }}
+                onDiscard={() => {
+                  localStorage.removeItem(`autosave-element-${id}`)
+                  setShowRecoveryPrompt(false)
+                  setIsModificationModalOpen(true)
+                }}
+                editMode={false}
+              />
+            )}
             {isModificationModalOpen && (
               <ElementEditModal
                 handleSetIsOpen={setIsModificationModalOpen}
@@ -198,7 +223,7 @@ function Question({
               className={{
                 root: 'space-x-2 bg-white text-sm md:w-36 md:text-base',
               }}
-              onClick={(): void => setIsDuplicationModalOpen(true)}
+              onClick={() => setIsDuplicationModalOpen(true)}
               data={{ cy: `duplicate-question-${title}` }}
             >
               <Button.Icon>
diff --git a/apps/frontend-manage/src/components/questions/manipulation/AutoSaveMonitor.ts b/apps/frontend-manage/src/components/questions/manipulation/AutoSaveMonitor.ts
new file mode 100644
index 0000000000..0edf4bfe73
--- /dev/null
+++ b/apps/frontend-manage/src/components/questions/manipulation/AutoSaveMonitor.ts
@@ -0,0 +1,45 @@
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef } from 'react'
+import { ElementFormTypes } from './types'
+
+function AutoSaveMonitor({
+  values,
+  initialValuesString,
+  setAutoSavedElement,
+}: {
+  values: ElementFormTypes
+  initialValuesString: string
+  setAutoSavedElement: Dispatch<SetStateAction<ElementFormTypes>>
+}) {
+  // create a call-back function that will save the editor's content every 2 seconds
+  // (if not actively typing -> do not disturb other state updates)
+  const savingTimeout = useRef<NodeJS.Timeout | null>(null)
+  const autoSaveContent = useCallback(
+    ({ values }: { values: ElementFormTypes }) => {
+      if (savingTimeout.current) {
+        clearTimeout(savingTimeout.current as NodeJS.Timeout)
+      }
+
+      savingTimeout.current = setTimeout(async () => {
+        // only update the stored content if it has changed
+        if (JSON.stringify(values) !== initialValuesString) {
+          setAutoSavedElement(values)
+        }
+      }, 2000)
+    },
+    [setAutoSavedElement, initialValuesString]
+  )
+
+  useEffect(() => {
+    autoSaveContent({ values })
+
+    return () => {
+      if (savingTimeout.current) {
+        clearTimeout(savingTimeout.current as NodeJS.Timeout)
+      }
+    }
+  }, [values])
+
+  return null
+}
+
+export default AutoSaveMonitor
diff --git a/apps/frontend-manage/src/components/questions/manipulation/ElementContentInput.tsx b/apps/frontend-manage/src/components/questions/manipulation/ElementContentInput.tsx
index 6fdd9d20f8..3e45a29865 100644
--- a/apps/frontend-manage/src/components/questions/manipulation/ElementContentInput.tsx
+++ b/apps/frontend-manage/src/components/questions/manipulation/ElementContentInput.tsx
@@ -41,7 +41,6 @@ function ElementContentInput({
               tooltip={t('manage.questionForms.questionTooltip')}
             />
             <ContentInput
-              autoFocus
               error={meta.error}
               touched={meta.touched}
               content={field.value || '<br>'}
diff --git a/apps/frontend-manage/src/components/questions/manipulation/ElementEditModal.tsx b/apps/frontend-manage/src/components/questions/manipulation/ElementEditModal.tsx
index faf343a275..a6a2457f03 100644
--- a/apps/frontend-manage/src/components/questions/manipulation/ElementEditModal.tsx
+++ b/apps/frontend-manage/src/components/questions/manipulation/ElementEditModal.tsx
@@ -13,11 +13,13 @@ import {
   ManipulateSelectionQuestionDocument,
   UpdateElementInstancesDocument,
 } from '@klicker-uzh/graphql/dist/ops'
+import { useLocalStorage } from '@uidotdev/usehooks'
 import { Button, Modal } from '@uzh-bf/design-system'
 import { Form, Formik } from 'formik'
 import { useTranslations } from 'next-intl'
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
+import AutoSaveMonitor from './AutoSaveMonitor'
 import ElementContentInput from './ElementContentInput'
 import ElementExplanationField from './ElementExplanationField'
 import ElementFailureToast from './ElementFailureToast'
@@ -42,6 +44,7 @@ import NumericalOptions from './options/NumericalOptions'
 import OptionsLabel from './options/OptionsLabel'
 import SampleSolutionSetting from './options/SampleSolutionSetting'
 import SelectionOptions from './options/SelectionOptions'
+import { ElementFormTypes } from './types'
 import useElementFormInitialValues from './useElementFormInitialValues'
 import useValidationSchema from './useValidationSchema'
 
@@ -81,6 +84,14 @@ function ElementEditModal({
     numberOfAnswerOptions: answerCollectionEntries.length,
   })
 
+  const [autoSavedElement, setAutoSavedElement] =
+    useLocalStorage<ElementFormTypes>(
+      typeof elementId === 'undefined' || isDuplication
+        ? 'autosave-element-creation'
+        : `autosave-element-${elementId}`,
+      undefined
+    )
+
   const { loading: loadingQuestion, data: dataQuestion } = useQuery(
     GetSingleQuestionDocument,
     {
@@ -115,7 +126,17 @@ function ElementEditModal({
     isDuplication,
   })
 
-  if (!initialValues || Object.keys(initialValues).length === 0) {
+  // only update the form values on initial rendering in creation or edit mode (not in duplication mode)
+  // (otherwise, saving the question will directly trigger another save)
+  const formikInitialValues = useMemo(() => {
+    if (!initialValues) {
+      return undefined
+    }
+    return isDuplication ? initialValues : (autoSavedElement ?? initialValues)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, isDuplication, initialValues])
+
+  if (!formikInitialValues || Object.keys(formikInitialValues).length === 0) {
     return <div />
   }
 
@@ -123,7 +144,7 @@ function ElementEditModal({
     <Formik
       validateOnMount
       enableReinitialize
-      initialValues={initialValues}
+      initialValues={formikInitialValues}
       validationSchema={questionManipulationSchema}
       onSubmit={async (values, { setSubmitting }) => {
         setSubmitting(true)
@@ -284,6 +305,16 @@ function ElementEditModal({
           }
         }
 
+        // remove local storage entry
+        if (autoSavedElement) {
+          localStorage.removeItem(
+            typeof elementId === 'undefined' || isDuplication
+              ? 'autosave-element-creation'
+              : `autosave-element-${elementId}`
+          )
+        }
+
+        // close modal, set success toast
         setSubmitting(false)
         triggerSuccessToast()
         handleSetIsOpen(false)
@@ -334,12 +365,17 @@ function ElementEditModal({
               <Button
                 className={{ root: 'border-uzh-grey-80 mt-2' }}
                 onClick={() => handleSetIsOpen(false)}
-                data={{ cy: 'close-question-modal' }}
+                data={{ cy: 'close-element-modal' }}
               >
                 <Button.Label>{t('shared.generic.close')}</Button.Label>
               </Button>
             }
           >
+            <AutoSaveMonitor
+              values={values}
+              initialValuesString={JSON.stringify(formikInitialValues)}
+              setAutoSavedElement={setAutoSavedElement}
+            />
             <ElementTypeMonitor
               elementType={values.type ?? ElementType.Sc}
               setElementDataTypename={setElementDataTypename}
@@ -398,7 +434,6 @@ function ElementEditModal({
                   <ElementFormErrors errors={errors} />
                 )}
               </div>
-
               <StudentElementPreview
                 values={values}
                 elementDataTypename={elementDataTypename}
diff --git a/apps/frontend-manage/src/components/questions/manipulation/RecoveryPrompt.tsx b/apps/frontend-manage/src/components/questions/manipulation/RecoveryPrompt.tsx
new file mode 100644
index 0000000000..8b01f6c98c
--- /dev/null
+++ b/apps/frontend-manage/src/components/questions/manipulation/RecoveryPrompt.tsx
@@ -0,0 +1,63 @@
+import { faArrowsRotate, faBan } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Button, Modal, UserNotification } from '@uzh-bf/design-system'
+import { useTranslations } from 'next-intl'
+
+function RecoveryPrompt({
+  open,
+  onRecovery,
+  onDiscard,
+  editMode,
+}: {
+  open: boolean
+  onRecovery: () => void
+  onDiscard: () => void
+  editMode: boolean
+}) {
+  const t = useTranslations()
+
+  return (
+    <Modal
+      hideCloseButton
+      escapeDisabled
+      open={open}
+      onClose={() => null}
+      title={t('manage.questionForms.recoverData')}
+      className={{ content: 'gap-1' }}
+    >
+      <UserNotification
+        type="warning"
+        message={
+          editMode
+            ? t('manage.questionForms.temporaryStorageEditing')
+            : t('manage.questionForms.temporaryStorageCreation')
+        }
+        className={{ root: 'text-base' }}
+      />
+      <div className="mt-2 flex flex-row justify-between">
+        <Button
+          onClick={onDiscard}
+          className={{
+            root: 'border-2 border-red-600 hover:border-red-600 hover:text-red-600',
+          }}
+          data={{ cy: 'discard-recovered-element-data' }}
+        >
+          <FontAwesomeIcon icon={faBan} />
+          <div>{t('manage.questionForms.discard')}</div>
+        </Button>
+        <Button
+          onClick={onRecovery}
+          className={{
+            root: 'border-primary-80 hover:border-primary-80 border-2',
+          }}
+          data={{ cy: 'load-recovered-element-data' }}
+        >
+          <FontAwesomeIcon icon={faArrowsRotate} />
+          <div>{t('manage.questionForms.loadData')}</div>
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default RecoveryPrompt
diff --git a/apps/frontend-manage/src/pages/index.tsx b/apps/frontend-manage/src/pages/index.tsx
index 4a361c6b2b..6aaa8310e6 100644
--- a/apps/frontend-manage/src/pages/index.tsx
+++ b/apps/frontend-manage/src/pages/index.tsx
@@ -28,6 +28,7 @@ import { Suspense, useEffect, useMemo, useState } from 'react'
 import { isEmpty, pickBy } from 'remeda'
 import { buildIndex, processItems } from 'src/lib/utils/filters'
 import ElementSuccessToast from '~/components/questions/manipulation/ElementSuccessToast'
+import RecoveryPrompt from '~/components/questions/manipulation/RecoveryPrompt'
 import SuspendedCreationButtons from '../components/activities/creation/SuspendedCreationButtons'
 import ElementCreation, {
   WizardMode,
@@ -52,13 +53,14 @@ function Index() {
   )
 
   const [searchInput, setSearchInput] = useState('')
+  const [sortBy, setSortBy] = useState('')
+  const [successToast, setSuccessToast] = useState(false)
+  const [showRecoveryPrompt, setShowRecoveryPrompt] = useState(false)
   const [creationMode, setCreationMode] = useState<undefined | WizardMode>(
     undefined
   )
   const [isQuestionCreationModalOpen, setIsQuestionCreationModalOpen] =
     useState(false)
-  const [sortBy, setSortBy] = useState('')
-  const [successToast, setSuccessToast] = useState(false)
 
   const [selectedQuestions, setSelectedQuestions] = useState<
     Record<number, Element | undefined>
@@ -390,9 +392,17 @@ function Index() {
                   )}
                 </div>
                 <Button
-                  onClick={() =>
-                    setIsQuestionCreationModalOpen(!isQuestionCreationModalOpen)
-                  }
+                  onClick={() => {
+                    const value = localStorage.getItem(
+                      'autosave-element-creation'
+                    )
+
+                    if (value) {
+                      setShowRecoveryPrompt(true)
+                    } else {
+                      setIsQuestionCreationModalOpen(true)
+                    }
+                  }}
                   className={{
                     root: 'bg-primary-80 h-10 font-bold text-white',
                   }}
@@ -446,6 +456,19 @@ function Index() {
           mode={ElementEditMode.CREATE}
         />
       )}
+      <RecoveryPrompt
+        open={showRecoveryPrompt}
+        onRecovery={() => {
+          setShowRecoveryPrompt(false)
+          setIsQuestionCreationModalOpen(true)
+        }}
+        onDiscard={() => {
+          localStorage.removeItem('autosave-element-creation')
+          setShowRecoveryPrompt(false)
+          setIsQuestionCreationModalOpen(true)
+        }}
+        editMode={false}
+      />
       <Suspense fallback={<div />}>
         <SuspendedFirstLoginModal />
       </Suspense>
diff --git a/cypress/cypress/e2e/B-feature-access-workflow.cy.ts b/cypress/cypress/e2e/B-feature-access-workflow.cy.ts
index dcaf79e6dc..e240d7b115 100644
--- a/cypress/cypress/e2e/B-feature-access-workflow.cy.ts
+++ b/cypress/cypress/e2e/B-feature-access-workflow.cy.ts
@@ -91,7 +91,7 @@ describe('Tests the availability of certain functionalities to catalyst users on
         `[data-cy="select-question-type-${messages.shared.SC.typeLabel}"]`
       ).click()
     }
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   }
 
   it('Test login for catalyst users and non-catalyst users', function () {
diff --git a/cypress/cypress/e2e/D-questions-workflow.cy.ts b/cypress/cypress/e2e/D-questions-workflow.cy.ts
index 9807d9de7e..6313f2fdfe 100644
--- a/cypress/cypress/e2e/D-questions-workflow.cy.ts
+++ b/cypress/cypress/e2e/D-questions-workflow.cy.ts
@@ -9,6 +9,7 @@ describe('Create different types of elements (with and without sample solution)
   })
 
   // ! Part 1: Content elements
+  // #region
   it('Create a content element', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="select-question-type"]')
@@ -58,7 +59,7 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-question-text"]')
       .realClick()
       .contains(this.data.CT.content)
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a content element', function () {
@@ -100,10 +101,12 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-question-text"]')
       .realClick()
       .contains(this.data.CT.contentEdited)
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 2: Flashcards
+  // #region
   it('Create a flashcard element', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="select-question-type"]')
@@ -159,7 +162,7 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-question-explanation"]')
       .realClick()
       .contains(this.data.FC.explanation)
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a flashcard element', function () {
@@ -208,10 +211,12 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-question-explanation"]')
       .realClick()
       .contains(this.data.FC.explanationEdited)
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 3: Single choice questions
+  // #region
   it('Create a single choice question', function () {
     // fill in minimal information for SC question
     cy.get('[data-cy="create-question"]').click()
@@ -313,7 +318,7 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-answer-field-1"]')
       .realClick()
       .contains(this.data.SC.choices[1])
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a single choice question and add a sample solution', function () {
@@ -488,10 +493,12 @@ describe('Create different types of elements (with and without sample solution)
         .contains(feedback)
     })
 
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 4: Multiple choice questions
+  // #region
   it('Create a multiple choice question', function () {
     // insert general information for MC question
     cy.get('[data-cy="create-question"]').click()
@@ -621,7 +628,7 @@ describe('Create different types of elements (with and without sample solution)
         .realClick()
         .contains(choice)
     })
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a multiple choice question and add a sample solution', function () {
@@ -787,10 +794,12 @@ describe('Create different types of elements (with and without sample solution)
         .contains(feedback)
     })
 
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 5: KPRIM questions
+  // #region
   it('Create a KPRIM question', function () {
     // create KPRIM question with minimal information
     cy.get('[data-cy="create-question"]').click()
@@ -967,7 +976,7 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="insert-answer-field-3"]')
       .realClick()
       .contains(this.data.KP.choices[0])
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a KPRIM question and add a sample solution', function () {
@@ -1038,7 +1047,7 @@ describe('Create different types of elements (with and without sample solution)
         .realClick()
         .contains(choice)
     })
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit the KPRIM question again and add answer feedbacks', function () {
@@ -1131,8 +1140,10 @@ describe('Create different types of elements (with and without sample solution)
     cy.get('[data-cy="save-new-question"]').click({ force: true })
     cy.wait(1000)
   })
+  // #endregion
 
   // ! Part 6: Numerical questions
+  // #region
   it('Create a Numerical question', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="select-question-type"]')
@@ -1218,7 +1229,7 @@ describe('Create different types of elements (with and without sample solution)
       'have.value',
       String(this.data.NR.accuracy)
     )
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a Numerical question and add a sample solution', function () {
@@ -1352,7 +1363,7 @@ describe('Create different types of elements (with and without sample solution)
       }
     )
 
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit the numerical question again and set an exact solution', function () {
@@ -1397,10 +1408,12 @@ describe('Create different types of elements (with and without sample solution)
         String(solution)
       )
     })
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 7: Free Text questions
+  // #region
   it('Create a Free Text question', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="select-question-type"]')
@@ -1457,7 +1470,7 @@ describe('Create different types of elements (with and without sample solution)
       'have.value',
       this.data.FT.maxLength
     )
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Edit a Free Text question', function () {
@@ -1509,10 +1522,12 @@ describe('Create different types of elements (with and without sample solution)
     cy.wrap(this.data.FT.sampleSolution).each((solution: string, ix) => {
       cy.get(`[data-cy="set-solution-ix-${ix}"]`).should('have.value', solution)
     })
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
+  // #endregion
 
   // ! Part 8: Selection questions
+  // #region
   it('Create a Selection question', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="select-question-type"]')
@@ -1625,7 +1640,7 @@ describe('Create different types of elements (with and without sample solution)
       'have.value',
       this.data.SE.inputs
     )
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Verify that creation was successful and that preview is visible and correct', function () {
@@ -1704,7 +1719,7 @@ describe('Create different types of elements (with and without sample solution)
     cy.wrap(this.data.SE.solutions).each((solution: string) => {
       cy.get('[data-cy="choose-correct-answer-options"]').contains(solution)
     })
-    cy.get('[data-cy="close-question-modal"]').click()
+    cy.get('[data-cy="close-element-modal"]').click()
   })
 
   it('Verify that the options that are used as a solution cannot be deleted anymore', function () {
@@ -1836,8 +1851,10 @@ describe('Create different types of elements (with and without sample solution)
     })
     cy.get("[data-cy='close-answer-collection-edit-modal']").click()
   })
+  // #endregion
 
   // ! Part 9: Question duplication
+  // #region
   it('Create a new question, duplicates it and then deletes them again', function () {
     cy.get('[data-cy="create-question"]').click()
     cy.get('[data-cy="insert-question-title"]').type(
@@ -1894,8 +1911,279 @@ describe('Create different types of elements (with and without sample solution)
       'not.exist'
     )
   })
+  // #endregion
+
+  // ! Part 10: Auto-Save functionality for Elements
+  // #region
+  function enterSCQuestionContent(data) {
+    cy.get('[data-cy="insert-question-title"]').type(data.autoSave.title)
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .type(data.autoSave.content)
+    cy.get('[data-cy="insert-answer-field-0"]')
+      .realClick()
+      .type(data.autoSave.choices[0].content)
+    cy.wrap(data.autoSave.choices.slice(1)).each(
+      (choice: { content: string }, ix) => {
+        cy.get('[data-cy="add-new-answer"]').click()
+        cy.wait(500)
+        cy.get(`[data-cy="insert-answer-field-${ix + 1}"]`)
+          .realClick()
+          .type(choice.content)
+      }
+    )
+    cy.get('[data-cy="configure-sample-solution"]').click({ force: true })
+    cy.wrap(data.autoSave.choices).each((choice: { correct?: boolean }, ix) => {
+      if (choice.correct) {
+        cy.get(`[data-cy="set-correctness-${ix}"]`).click()
+      }
+    })
+  }
+
+  it('Verify that empty questions are not stored in local storage (creation)', function () {
+    // open modal, wait for auto-save, close modal
+    cy.get('[data-cy="create-question"]').click()
+    cy.wait(3000) // wait longer than auto-save requires
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // recovery prompt should not be shown
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="discard-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="load-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="select-question-type"]').contains(
+      messages.shared.SC.typeLabel
+    )
+    cy.get('[data-cy="insert-question-title"]').should('have.value', '')
+  })
+
+  it('Verify that non-empty questions are stored and loaded correctly on demand (creation)', function () {
+    cy.get('[data-cy="create-question"]').click()
+
+    // create SC question with content
+    enterSCQuestionContent(this.data)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // re-open modal, load data, verify content, close modal
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="load-recovered-element-data"]').click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .contains(this.data.autoSave.content)
+    cy.wrap(this.data.autoSave.choices).each(
+      (choice: { content: string }, ix) => {
+        cy.get(`[data-cy="insert-answer-field-${ix}"]`).contains(choice.content)
+      }
+    )
+  })
+
+  it('Verify that non-empty questions are stored and discarded on request (creation)', function () {
+    cy.get('[data-cy="create-question"]').click()
+
+    // create SC question with content
+    enterSCQuestionContent(this.data)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="discard-recovered-element-data"]').click()
+    cy.get('[data-cy="insert-question-title"]').should('have.value', '')
+  })
+
+  it('Verify that local storage is correctly cleared after creating a question', function () {
+    cy.get('[data-cy="create-question"]').click()
+
+    // create SC question with content
+    enterSCQuestionContent(this.data)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="save-new-question"]').click()
+    cy.wait(500)
+
+    // check that local storage is cleared correctly on save and new editor is empty
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="load-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="insert-question-title"]').should('have.value', '')
+  })
+
+  it('Verify that opening the edit modal and closing without modifications does not trigger prompt', function () {
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // recovery prompt should not be shown
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+    cy.get('[data-cy="discard-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="load-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+  })
+
+  it('Verify that after editing a question and waiting for auto-save the corresponding content can be loaded', function () {
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+
+    // modify title and content
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.get('[data-cy="insert-question-title"]')
+      .clear()
+      .type(this.data.autoSave.titleEdited)
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.content
+    )
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .clear()
+      .type(this.data.autoSave.contentEdited)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // recovery prompt should not be shown & load data, verify updated content is visible
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+    cy.get('[data-cy="load-recovered-element-data"]').click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.titleEdited
+    )
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.contentEdited
+    )
+  })
+
+  it('Verify that after editing a question, auto-saving and discarding the saved content, the original content is loaded', function () {
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+
+    // modify title and content
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.get('[data-cy="insert-question-title"]')
+      .clear()
+      .type(this.data.autoSave.titleEdited)
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.content
+    )
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .clear()
+      .type(this.data.autoSave.contentEdited)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // recovery prompt should not be shown & discard data, verify original content is visible
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+    cy.get('[data-cy="discard-recovered-element-data"]').click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.content
+    )
+    cy.wait(3000)
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // verify that when closing and opening now after discarding, no prompt is shown
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+    cy.get('[data-cy="discard-recovered-element-data"]').should('not.exist')
+    cy.get('[data-cy="load-recovered-element-data"]').should('not.exist')
+  })
+
+  it('Verify that after editing an element and saving it, no prompt is shown to the user', function () {
+    cy.get(`[data-cy="edit-question-${this.data.autoSave.title}"]`).click()
+
+    // modify title and content
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.title
+    )
+    cy.get('[data-cy="insert-question-title"]')
+      .clear()
+      .type(this.data.autoSave.titleEdited)
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.content
+    )
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .clear()
+      .type(this.data.autoSave.contentEdited)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="save-new-question"]').click()
+
+    // recovery prompt should not be shown, verify edited content is visible
+    cy.get(
+      `[data-cy="edit-question-${this.data.autoSave.titleEdited}"]`
+    ).click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.titleEdited
+    )
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.contentEdited
+    )
+  })
+
+  it('Verify that when duplicating a question, wating for auto-save and opening the creation form, the content cannot be loaded', function () {
+    cy.get(
+      `[data-cy="duplicate-question-${this.data.autoSave.titleEdited}"]`
+    ).click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.titleEditedDuplicated
+    )
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.contentEdited
+    )
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // verify that the duplicated
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="load-recovered-element-data"]').should('not.exist')
+  })
+
+  it('Verify that when duplicating a question, modifying it slightly,wating for auto-save and opening the creation form, the content can be loaded', function () {
+    cy.get(
+      `[data-cy="duplicate-question-${this.data.autoSave.titleEdited}"]`
+    ).click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.titleEditedDuplicated
+    )
+    cy.get('[data-cy="insert-question-text"]')
+      .realClick()
+      .clear()
+      .type(this.data.autoSave.contentEdited2)
+    cy.wait(3000) // wait for auto-save to trigger
+    cy.get('[data-cy="close-element-modal"]').click()
+
+    // verify that the duplicated
+    cy.get('[data-cy="create-question"]').click()
+    cy.get('[data-cy="load-recovered-element-data"]').click()
+    cy.get('[data-cy="insert-question-title"]').should(
+      'have.value',
+      this.data.autoSave.titleEditedDuplicated
+    )
+    cy.get('[data-cy="insert-question-text"]').contains(
+      this.data.autoSave.contentEdited2
+    )
+  })
+  // #endregion
 
   // ! Cleanup
+  // #region
   it('Cleanup: Delete all created questions', function () {
     const questions = [
       this.data.CT.titleEdited,
@@ -1906,6 +2194,7 @@ describe('Create different types of elements (with and without sample solution)
       this.data.NR.titleEdited,
       this.data.FT.titleEdited,
       this.data.SE.titleEdited,
+      this.data.autoSave.titleEdited,
     ]
 
     cy.wrap(questions).each((title: string) => {
@@ -1933,4 +2222,5 @@ describe('Create different types of elements (with and without sample solution)
     })
     cy.get("[data-cy='close-answer-collection-edit-modal']").click()
   })
+  // #endregion
 })
diff --git a/cypress/cypress/fixtures/D-questions.json b/cypress/cypress/fixtures/D-questions.json
index e286efdc48..12dc73ce7b 100644
--- a/cypress/cypress/fixtures/D-questions.json
+++ b/cypress/cypress/fixtures/D-questions.json
@@ -100,5 +100,19 @@
   "duplication": {
     "title": "Duplication question title",
     "content": "Duplication question content"
+  },
+  "autoSave": {
+    "title": "Auto Save question title",
+    "content": "Auto Save question content",
+    "choices": [
+      { "content": "Choice 1" },
+      { "content": "Choice 2" },
+      { "content": "Choice 3", "correct": true },
+      { "content": "Choice 4" }
+    ],
+    "titleEdited": "Auto Save question title new",
+    "contentEdited": "Auto Save question content new",
+    "contentEdited2": "Auto Save question content new 2",
+    "titleEditedDuplicated": "Auto Save question title new (Copy)"
   }
 }
diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
index 16840692dc..58d649b8d4 100644
--- a/packages/i18n/messages/de.ts
+++ b/packages/i18n/messages/de.ts
@@ -981,6 +981,13 @@ Da die KlickerUZH-App noch nicht im iOS-App-Store verfügbar ist, folgen Sie die
       selectQuestionStatus: 'Status auswählen',
       questionStatus: 'Status',
       elementTitle: 'Elementtitel',
+      recoverData: 'Daten-Wiederherstellung',
+      temporaryStorageCreation:
+        'Der Erstellungsprozess wurde ohne Speichern abgebrochen. Möchten Sie das letzte automatische Daten-Backup wiederherstellen oder diese Informationen verwerfen?',
+      temporaryStorageEditing:
+        'Der Bearbeitungsprozess wurde ohne Speichern abgebrochen. Möchten Sie das letzte automatische Daten-Backup wiederherstellen oder diese Informationen verwerfen?',
+      discard: 'Verwerfen',
+      loadData: 'Daten laden',
       titleTooltip:
         'Geben Sie einen kurzen, zusammenfassenden Titel für das Element ein. Dieser dient lediglich zur besseren Übersicht.',
       tagsTooltip:
diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
index fbfaed188c..77436f677d 100644
--- a/packages/i18n/messages/en.ts
+++ b/packages/i18n/messages/en.ts
@@ -982,6 +982,13 @@ Since the KlickerUZH app is not yet available on the iOS App Store, follow these
       selectQuestionStatus: 'Select status',
       questionStatus: 'Status',
       elementTitle: 'Element title',
+      recoverData: 'Data Recovery',
+      temporaryStorageCreation:
+        'The element creation process was aborted without saving. Please choose if you want to recover the last automatic data backup or discard this information.',
+      temporaryStorageEditing:
+        'The element editing process was aborted without saving. Please choose if you want to recover the last automatic data backup or discard this information.',
+      discard: 'Discard',
+      loadData: 'Load data',
       titleTooltip:
         'Enter a short, summary title for the element. This is only used for better overview.',
       tagsTooltip: