refactor: migrate creation and editing process to new element instance structure

.github/workflows/cypress-testing.yml

@@ -132,7 +132,7 @@ jobs:
 
       - name: Cypress run
         uses: cypress-io/github-action@v6
-        timeout-minutes: 20
+        timeout-minutes: 60
         with:
           install: false
           wait-on: 'http://127.0.0.1:3000/api/graphql, http://127.0.0.1:3001, http://127.0.0.1:3002, http://127.0.0.1:3003, http://127.0.0.1:3010'

apps/frontend-control/src/components/layout/MobileMenuBar.tsx

@@ -50,7 +50,7 @@ function MobileMenuBar({ sessionId }: MobileMenuBarProps) {
         <EmbeddingModal
           open={embedModalOpen}
           setOpen={setEmbedModalOpen}
-          sessionId={sessionId}
+          quizId={sessionId}
         />
       )}
     </div>

apps/frontend-control/src/components/sessions/EmbeddingModal.tsx

@@ -2,8 +2,8 @@ import { useQuery } from '@apollo/client'
 import { faClipboard } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
-  GetSessionHmacDocument,
-  GetSingleLiveSessionDocument,
+  GetLiveQuizHmacDocument,
+  GetSingleLiveQuizDocument,
 } from '@klicker-uzh/graphql/dist/ops'
 import { Button, H2, Modal } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
@@ -13,29 +13,23 @@ import { useMemo } from 'react'
 interface EmbeddingModalProps {
   open: boolean
   setOpen: (newValue: boolean) => void
-  sessionId: string
+  quizId: string
 }
 
-function LazyHMACLink({
-  sessionId,
-  params,
-}: {
-  sessionId: string
-  params: string
-}) {
-  const sessionHMAC = useQuery(GetSessionHmacDocument, {
+function LazyHMACLink({ quizId, params }: { quizId: string; params: string }) {
+  const quizHMAC = useQuery(GetLiveQuizHmacDocument, {
     variables: {
-      id: sessionId,
+      id: quizId,
     },
   })
 
-  if (sessionHMAC.loading || !sessionHMAC.data?.sessionHMAC) {
+  if (quizHMAC.loading || !quizHMAC.data?.liveQuizHMAC) {
     return <></>
   }
 
   const link = `${
     process.env.NEXT_PUBLIC_MANAGE_URL
-  }/sessions/${sessionId}/evaluation?hmac=${sessionHMAC.data?.sessionHMAC}${
+  }/sessions/${quizId}/evaluation?hmac=${quizHMAC.data?.liveQuizHMAC}${
     params ? `&${params}` : ''
   }`
 
@@ -47,25 +41,24 @@ function LazyHMACLink({
         onClick={() => navigator?.clipboard?.writeText(link)}
       />
       <Link href={link} target="_blank" legacyBehavior passHref>
-        <a data-cy={`open-embedding-link-session-${sessionId}`}>{link}</a>
+        <a data-cy={`open-embedding-link-session-${quizId}`}>{link}</a>
       </Link>
     </div>
   )
 }
 
-function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
+function EmbeddingModal({ open, setOpen, quizId }: EmbeddingModalProps) {
   const t = useTranslations()
-  const { data: dataLiveSession } = useQuery(GetSingleLiveSessionDocument, {
-    variables: { sessionId: sessionId || '' },
-    skip: !sessionId,
+  const { data: dataLiveSession } = useQuery(GetSingleLiveQuizDocument, {
+    variables: { quizId: quizId || '' },
+    skip: !quizId,
   })
 
   const questions = useMemo(
     () =>
-      dataLiveSession?.liveSession?.blocks?.flatMap(
-        (block) => block.instances
-      ) || [],
-    [dataLiveSession?.liveSession?.blocks]
+      dataLiveSession?.liveQuiz?.blocks?.flatMap((block) => block.elements) ||
+      [],
+    [dataLiveSession?.liveQuiz?.blocks]
   )
 
   return (
@@ -97,18 +90,15 @@ function EmbeddingModal({ open, setOpen, sessionId }: EmbeddingModalProps) {
                 question.questionData.name
               }`}</div>
               <div className="bg-uzh-grey-40 mr-2 flex flex-row items-center gap-3 rounded border border-solid px-1.5 py-0.5">
-                <LazyHMACLink
-                  sessionId={sessionId}
-                  params={`questionIx=${ix}`}
-                />
+                <LazyHMACLink quizId={quizId} params={`questionIx=${ix}`} />
               </div>
             </div>
           )
         })}
       </div>
       <div className="mt-3">
         <div className="w-30 font-bold">{t('shared.generic.leaderboard')}:</div>
-        <LazyHMACLink sessionId={sessionId} params={`leaderboard=true`} />
+        <LazyHMACLink quizId={quizId} params={`leaderboard=true`} />
       </div>
     </Modal>
   )

apps/frontend-control/src/components/sessions/SessionLists.tsx

@@ -106,7 +106,7 @@ function SessionLists({ runningSessions, plannedSessions }: SessionListsProps) {
       <EmbeddingModal
         open={embedOpen}
         setOpen={(newValue: boolean) => setEmbedOpen(newValue)}
-        sessionId={sessionId}
+        quizId={sessionId}
       />
       <StartModal
         startId={startId}

apps/frontend-control/src/components/sessions/StartModal.tsx

@@ -1,5 +1,8 @@
 import { useMutation } from '@apollo/client'
-import { StartSessionDocument } from '@klicker-uzh/graphql/dist/ops'
+import {
+  PublicationStatus,
+  StartLiveQuizDocument,
+} from '@klicker-uzh/graphql/dist/ops'
 import { Button, H3, Modal } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { useRouter } from 'next/router'
@@ -21,8 +24,19 @@ function StartModal({
 }: StartModalProps) {
   const t = useTranslations()
   const router = useRouter()
-  const [startSession, { loading: startingSession }] =
-    useMutation(StartSessionDocument)
+  const [startLiveQuiz, { loading: startingSession }] = useMutation(
+    StartLiveQuizDocument,
+    {
+      optimisticResponse: {
+        startLiveQuiz: {
+          __typename: 'LiveQuizMeta',
+          id: startId,
+          name: startName,
+          status: PublicationStatus.Published,
+        },
+      },
+    }
+  )
 
   return (
     <Modal
@@ -33,7 +47,7 @@ function StartModal({
           loading={startingSession}
           onClick={async () => {
             try {
-              await startSession({
+              await startLiveQuiz({
                 variables: { id: startId },
               })
               router.push(`/session/${startId}`)
@@ -63,13 +77,13 @@ function StartModal({
       className={{ content: 'mx-auto my-auto h-max w-max md:min-w-[30rem]' }}
       hideCloseButton
     >
-      <H3>{t('control.course.startSession')}</H3>
+      <H3>{t('control.course.startLiveQuiz')}</H3>
       <div className="border-uzh-grey-100 bg-uzh-grey-20 rounded border border-solid p-2">
-        {t('control.course.confirmStartSession')}
+        {t('control.course.confirmStartLiveQuiz')}
         <div className="font-bold">{startName}</div>
       </div>
       <div className="mt-4 text-sm italic">
-        {t('control.course.explanationStartSession')}
+        {t('control.course.explanationStartLiveQuiz')}
       </div>
     </Modal>
   )

apps/frontend-control/src/pages/session/[id].tsx

@@ -6,7 +6,7 @@ import {
   DeactivateSessionBlockDocument,
   EndSessionDocument,
   GetControlSessionDocument,
-  GetUserRunningSessionsDocument,
+  GetUserRunningLiveQuizzesDocument,
   SessionBlockStatus,
 } from '@klicker-uzh/graphql/dist/ops'
 import Loader from '@klicker-uzh/shared-components/src/Loader'
@@ -35,7 +35,20 @@ function RunningSession() {
   const [endSession, { loading: endingLiveQuiz }] = useMutation(
     EndSessionDocument,
     {
-      refetchQueries: [{ query: GetUserRunningSessionsDocument }],
+      update(cache, res) {
+        const data = cache.readQuery({
+          query: GetUserRunningLiveQuizzesDocument,
+        })
+        cache.writeQuery({
+          query: GetUserRunningLiveQuizzesDocument,
+          data: {
+            userRunningLiveQuizzes:
+              data?.userRunningLiveQuizzes?.filter(
+                (q) => q.id !== res.data?.endSession?.id
+              ) ?? [],
+          },
+        })
+      },
     }
   )
 

apps/frontend-manage/src/components/common/Header.tsx

@@ -6,7 +6,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
-  GetUserRunningSessionsDocument,
+  GetUserRunningLiveQuizzesDocument,
   User,
 } from '@klicker-uzh/graphql/dist/ops'
 import { Navigation } from '@uzh-bf/design-system'
@@ -25,7 +25,8 @@ function Header({ user }: HeaderProps): React.ReactElement {
   const t = useTranslations()
   const [showSupportModal, setShowSupportModal] = useState(false)
 
-  const { data } = useQuery(GetUserRunningSessionsDocument)
+  const { data } = useQuery(GetUserRunningLiveQuizzesDocument)
+  const quizzes = data?.userRunningLiveQuizzes
 
   const navigationItems = [
     {
@@ -99,16 +100,15 @@ function Header({ user }: HeaderProps): React.ReactElement {
               root: 'group h-10 w-2',
               icon: twMerge(
                 'text-uzh-grey-80',
-                data?.userRunningSessions?.length !== 0 && 'text-green-600'
+                quizzes?.length !== 0 && 'text-green-600'
               ),
               disabled: '!text-gray-400',
               dropdown: 'gap-0 p-1.5',
             }}
-            disabled={data?.userRunningSessions?.length === 0}
+            disabled={quizzes?.length === 0}
           >
-            {data?.userRunningSessions &&
-            data?.userRunningSessions.length > 0 ? (
-              data?.userRunningSessions.map((session) => {
+            {quizzes && quizzes.length > 0 ? (
+              quizzes.map((session) => {
                 return (
                   <Navigation.DropdownItem
                     key={session.id}

apps/frontend-manage/src/components/courses/LiveQuizElement.tsx

@@ -90,7 +90,7 @@ function LiveQuizElement({ session }: LiveQuizElementProps) {
     },
     optimisticResponse: {
       deleteLiveQuiz: {
-        __typename: 'Session',
+        __typename: 'LiveQuiz',
         id: session.id,
       },
     },
@@ -155,7 +155,7 @@ function LiveQuizElement({ session }: LiveQuizElementProps) {
                     label: (
                       <div className="text-primary-100 flex cursor-pointer flex-row items-center gap-2">
                         <FontAwesomeIcon icon={faPencil} />
-                        <div>{t('manage.sessions.editSession')}</div>
+                        <div>{t('manage.sessions.editLiveQuiz')}</div>
                       </div>
                     ),
                     onClick: () =>

apps/frontend-manage/src/components/courses/actions/StartLiveQuizButton.tsx

@@ -1,7 +1,11 @@
 import { useMutation } from '@apollo/client'
 import { faPlay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Session, StartSessionDocument } from '@klicker-uzh/graphql/dist/ops'
+import {
+  GetUserRunningLiveQuizzesDocument,
+  Session,
+  StartLiveQuizDocument,
+} from '@klicker-uzh/graphql/dist/ops'
 import { Button } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import { useRouter } from 'next/router'
@@ -13,16 +17,36 @@ interface StartLiveQuizButtonProps {
 function StartLiveQuizButton({ liveQuiz }: StartLiveQuizButtonProps) {
   const t = useTranslations()
   const router = useRouter()
-  const [startSession, { loading: startingSession }] =
-    useMutation(StartSessionDocument)
+  const [startLiveQuiz, { loading: startingQuiz }] = useMutation(
+    StartLiveQuizDocument,
+    {
+      update(cache) {
+        const data = cache.readQuery({
+          query: GetUserRunningLiveQuizzesDocument,
+        })
+        cache.writeQuery({
+          query: GetUserRunningLiveQuizzesDocument,
+          data: {
+            userRunningLiveQuizzes:
+              liveQuiz.id && liveQuiz.name
+                ? [
+                    ...(data?.userRunningLiveQuizzes ?? []),
+                    { id: liveQuiz.id, name: liveQuiz.name },
+                  ]
+                : (data?.userRunningLiveQuizzes ?? []),
+          },
+        })
+      },
+    }
+  )
 
   return (
     <Button
       basic
-      disabled={startingSession}
+      disabled={startingQuiz}
       onClick={async () => {
         try {
-          await startSession({
+          await startLiveQuiz({
             variables: { id: liveQuiz.id || '' },
           })
           router.push(`/sessions/${liveQuiz.id}/cockpit`)
@@ -36,7 +60,7 @@ function StartLiveQuizButton({ liveQuiz }: StartLiveQuizButtonProps) {
       <Button.Icon>
         <FontAwesomeIcon icon={faPlay} />
       </Button.Icon>
-      <Button.Label>{t('manage.sessions.startSession')}</Button.Label>
+      <Button.Label>{t('manage.sessions.startLiveQuiz')}</Button.Label>
     </Button>
   )
 }