Merge remote-tracking branch 'origin/staging'

Author: sealexan

public/locales/de/translation.json

@@ -65,5 +65,8 @@
   "Descending": "Absteigend",
   "Default": "Standard",
   "redirect_toast": "Weitergeleitet zum veröffentlichten Beispiel",
-  "Submission Successful": "Abgabe Erfolgreich"
+  "A new lecture example just has been published": "Eine neues Vorlesungsbeispiel wurde gerade eben veröffentlicht.",
+  "submission_received": "Abgabe erhalten",
+  "feedback_info": "Feedback wird nach Ablauf der Zeit bereitgestellt.",
+  "no_bookmarks": "Es wurden noch keine Lesezeichen gesetzt."
 }

public/locales/en/translation.json

@@ -57,6 +57,9 @@
   "Descending": "Descending",
   "Default": "Default",
   "redirect_toast": "Redirected to published example",
-  "Submission Successful": "Submission Successful",
-  "Correctness": "Correctness"
+  "Correctness": "Correctness",
+  "A new lecture example just has been published": "A new lecture example just has has been published",
+  "submission_received": "Submision received",
+  "feedback_info": "Feedback will be provided once the time runs out.",
+  "no_bookmarks": "No bookmarks have been set yet."
 }

src/components/BookmarkView.tsx

@@ -1,4 +1,5 @@
 import { Button, Flex, Text, VStack } from "@chakra-ui/react"
+import { t } from "i18next"
 
 const Bookmark: React.FC<{
   bookmark: Bookmark
@@ -39,7 +40,7 @@ export const BookmarkView: React.FC<{
   if (!bookmarks)
     return (
       <Flex justify={"center"} flex={1}>
-        <Text> There are no Bookmarks yet.</Text>
+        <Text> {t("no_bookmarks")}</Text>
       </Flex>
     )
 

src/components/Buttons.tsx

@@ -1,3 +1,4 @@
+import { InfoOutlineIcon } from "@chakra-ui/icons"
 import {
   Box,
   BoxProps,
@@ -15,31 +16,43 @@ import {
   Tooltip,
   VStack,
 } from "@chakra-ui/react"
-import React from "react"
-import { Link } from "react-router-dom"
-import { ActionIcon } from "./Icons"
-import { FcCalendar } from "react-icons/fc"
-import { InfoOutlineIcon } from "@chakra-ui/icons"
 import { flatMap, get, keys } from "lodash"
 import Countdown, { CountdownProps } from "react-countdown"
 import { useTranslation } from "react-i18next"
+import { FcCalendar } from "react-icons/fc"
+import { Link } from "react-router-dom"
+import { ActionIcon } from "./Icons"
 
 type EventBoxProps = {
   selected: string
   events: Record<string, Record<string, AssignmentProps[]>>
 }
 
-export const LogoButton = () => (
-  <Box
-    as={Link}
-    to="/courses"
-    fontFamily="monospace"
-    fontSize="4xl"
-    pt={2}
-    _hover={{ color: "purple.500" }}
-    children="ACCESS."
-  />
-)
+export const LogoButton: React.FC<{ disabled?: boolean }> = ({ disabled }) => {
+  if (disabled) {
+    return (
+      <Box
+        fontFamily="monospace"
+        fontSize="4xl"
+        pt={2}
+        children="ACCESS."
+        cursor={"not-allowed"}
+      />
+    )
+  }
+
+  return (
+    <Box
+      as={Link}
+      to="/courses"
+      fontFamily="monospace"
+      fontSize="4xl"
+      pt={2}
+      _hover={{ color: "purple.500" }}
+      children="ACCESS."
+    />
+  )
+}
 
 export const TooltipIconButton = ({
   "aria-label": label,
@@ -117,7 +130,7 @@ export const EventBox = ({ selected, events }: EventBoxProps) => {
                 {get(a, key + "Time")}
               </Text>
             </HStack>
-          ))
+          )),
         )}
       </Stack>
     </Stack>

src/components/Hooks.tsx

@@ -67,13 +67,7 @@ export const useCourse = (options: UseQueryOptions<CourseProps> = {}) => {
 export const usePublish = () => {
   const { courseSlug, exampleSlug } = useParams()
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { mutateAsync } = useMutation<any, AxiosError, any[]>({
-    // TODO: type this correctly once backend res is known.
-    onSuccess: () => {
-      // just for now
-      console.log("Redirected")
-    },
-  })
+  const { mutateAsync } = useMutation<any, AxiosError, any[]>({})
 
   const publish = (duration: number) =>
     mutateAsync([

src/components/SubmissionsCarousel.tsx

@@ -235,6 +235,9 @@ export const SubmissionsCarousel: React.FC<{
   lastDisplayedSubmissionId: number | null
   selectedFileName: string | null
   setSelectedFileName: React.Dispatch<SetStateAction<string | null>>
+  setTestsPassedCurrentSubmission: React.Dispatch<
+    SetStateAction<number[] | null>
+  >
   setLastDisplayedSubmissionId: React.Dispatch<SetStateAction<number | null>>
   handleOnBookmarkClick: (submission: SubmissionSsePayload) => void
   openInEditor: (studentId: string) => Promise<void>
@@ -245,6 +248,7 @@ export const SubmissionsCarousel: React.FC<{
   bookmarks,
   selectedFileName,
   setSelectedFileName,
+  setTestsPassedCurrentSubmission,
   setLastDisplayedSubmissionId,
   handleOnBookmarkClick,
   openInEditor,
@@ -333,6 +337,12 @@ export const SubmissionsCarousel: React.FC<{
     }
   }, [fileNames, selectedFileName, setSelectedFileName])
 
+  useEffect(() => {
+    if (submissions && currentIndex !== null) {
+      setTestsPassedCurrentSubmission(submissions[currentIndex]?.testsPassed)
+    }
+  }, [currentIndex, setTestsPassedCurrentSubmission, submissions])
+
   const showPrevButton = currentIndex !== 0
   const showJumpToEndButton = currentIndex === 0 && submissions.length > 1
   const showNextButton = currentIndex !== submissions.length - 1
@@ -371,13 +381,8 @@ export const SubmissionsCarousel: React.FC<{
           height={"auto"}
         >
           {submissions.map((submission, i) => {
-            const VISIBLE_RANGE = 3
-            const isVisible =
-              Math.abs(i - currentIndex) <= VISIBLE_RANGE ||
-              (i < VISIBLE_RANGE &&
-                currentIndex > submissions.length - VISIBLE_RANGE) ||
-              (i > submissions.length - VISIBLE_RANGE &&
-                currentIndex < VISIBLE_RANGE)
+            const VISIBLE_RANGE = 1 // renders 1 to the left and right of current visible editor => 3 in total
+            const isVisible = Math.abs(i - currentIndex) <= VISIBLE_RANGE
 
             return (
               <Slide

src/components/TestCaseBarChart.tsx

@@ -15,8 +15,15 @@ const CustomBar: React.FC<{
   name: string
   value: number
   testCaseSelection: Record<string, boolean> | null
+  failedForCurrentImplementation: boolean | null
   handleOnBarClick: (name: string) => void
-}> = ({ name, value, testCaseSelection, handleOnBarClick }) => {
+}> = ({
+  name,
+  value,
+  testCaseSelection,
+  failedForCurrentImplementation,
+  handleOnBarClick,
+}) => {
   const selectedColor = "purple.500"
   const unselectedColor = "purple.200"
 
@@ -38,9 +45,19 @@ const CustomBar: React.FC<{
       <Text justifyContent={"center"} pl={2} position={"absolute"} zIndex={1}>
         {name}
       </Text>
-      <Text position={"absolute"} right={2} zIndex={1}>
-        {value.toFixed()}%
-      </Text>
+      <Flex position={"absolute"} right={2} zIndex={1} align={"center"} gap={2}>
+        <Text>{value.toFixed()}%</Text>
+        {failedForCurrentImplementation !== null ? (
+          <Box
+            height={2}
+            width={2}
+            borderRadius={"full"}
+            background={
+              failedForCurrentImplementation ? "red.500" : "green.500"
+            }
+          />
+        ) : null}
+      </Flex>
       <Flex
         flex={Math.max(value, 1)}
         height={10}
@@ -62,8 +79,14 @@ type BarChartData = {
 const CustomBarChart: React.FC<{
   data: BarChartData[]
   testCaseSelection: Record<string, boolean> | null
+  namedTestsPassedCurrentSubmission: Record<string, boolean> | null
   handleOnBarClick: (name: string) => void
-}> = ({ data, testCaseSelection, handleOnBarClick }) => {
+}> = ({
+  data,
+  testCaseSelection,
+  namedTestsPassedCurrentSubmission,
+  handleOnBarClick,
+}) => {
   return (
     <VStack width={"full"} overflow={"auto"} align={"space-around"} gap={3}>
       {data.map((entry, i) => (
@@ -72,6 +95,11 @@ const CustomBarChart: React.FC<{
           value={entry.value}
           testCaseSelection={testCaseSelection}
           handleOnBarClick={handleOnBarClick}
+          failedForCurrentImplementation={
+            namedTestsPassedCurrentSubmission
+              ? !namedTestsPassedCurrentSubmission[entry.name]
+              : null
+          }
           key={i}
         />
       ))}
@@ -85,6 +113,8 @@ export const TestCaseBarChart: React.FC<{
   passRatePerTestCase: Record<string, number>
   exactMatch: boolean
   testCaseSelection: Record<string, boolean> | null
+  namedTestsPassedCurrentSubmission: Record<string, boolean> | null
+
   setTestCaseSelection: React.Dispatch<
     SetStateAction<Record<string, boolean> | null>
   >
@@ -93,6 +123,7 @@ export const TestCaseBarChart: React.FC<{
   passRatePerTestCase,
   exactMatch,
   testCaseSelection,
+  namedTestsPassedCurrentSubmission,
   setTestCaseSelection,
   setExactMatch,
 }) => {
@@ -187,6 +218,7 @@ export const TestCaseBarChart: React.FC<{
           data={sortedData}
           testCaseSelection={testCaseSelection}
           handleOnBarClick={handleOnBarClick}
+          namedTestsPassedCurrentSubmission={namedTestsPassedCurrentSubmission}
         />
       </Box>
 

src/pages/Examples.tsx

@@ -15,6 +15,7 @@ import {
   Td,
   Text,
   Tr,
+  useToast,
   VStack,
 } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
@@ -47,7 +48,6 @@ export const ExamplesCard: React.FC<{
   const { isSupervisor } = useOutletContext<UserContext>()
   const [examplesWithSubmissionCount, setExamplesWithSubmissionCount] =
     useState<(TaskOverview & { submissionCount: number })[] | null>(null)
-
   useEffect(() => {
     if (!isSupervisor) {
       // nr of submissions fetchable by supervisor only
@@ -67,7 +67,7 @@ export const ExamplesCard: React.FC<{
         queryKey,
       })
 
-      return data.numberOfStudentsWhoSubmitted
+      return data.numberOfReceivedSubmissions
     }
 
     const fetchAllSubmissionCounts = async () => {
@@ -130,16 +130,19 @@ export const ExamplesCard: React.FC<{
                       example.information["en"].title}
                   </Heading>
                 </Td>
-                <Td w="17em" maxW="17em">
-                  <VStack>
-                    {published ? (
-                      <Tag bg="transparent">
-                        <TagLeftIcon as={AiOutlineInfoCircle} />
-                        <TagLabel>{example.status}</TagLabel>
-                      </Tag>
-                    ) : null}
-                  </VStack>
-                </Td>
+                {isAssistant ? (
+                  <Td w="17em" maxW="17em">
+                    <VStack>
+                      {published ? (
+                        <Tag bg="transparent">
+                          <TagLeftIcon as={AiOutlineInfoCircle} />
+                          <TagLabel>{example.status}</TagLabel>
+                        </Tag>
+                      ) : null}
+                    </VStack>
+                  </Td>
+                ) : null}
+
                 <Td>
                   {example.start ? (
                     <VStack>
@@ -197,15 +200,33 @@ export const ExamplesCard: React.FC<{
 
 export default function Examples() {
   const { i18n, t } = useTranslation()
+  const toast = useToast()
   const currentLanguage = i18n.language
   const { isAssistant } = useOutletContext<UserContext>()
-  const { data: examples, refetch, isFetching } = useExamples() //  TODO: only get TaskOverview, not TaskProps, once related backend problem is fixed
+  const { data: examples, refetch, isLoading } = useExamples() //  TODO: only get TaskOverview, not TaskProps, once related backend problem is fixed
 
   useSSE<ExampleResetSsePayload>("example-reset", () => {
     refetch()
   })
 
-  if (!examples || isFetching) return <Placeholder />
+  useSSE<string>("published", () => {
+    refetch()
+    toast({
+      title: t("A new lecture example just has been published"),
+      status: "info",
+    })
+  })
+
+  useEffect(() => {
+    // to ensure update of exmaple states when no manual termination was triggered
+    const interval = setInterval(() => {
+      refetch()
+    }, 1000 * 10)
+
+    return () => clearInterval(interval)
+  }, [refetch])
+
+  if (!examples || isLoading) return <Placeholder />
 
   const [unpublishedExaples, publishedExamples] = fork(
     examples,

src/pages/Landing.tsx

@@ -9,11 +9,10 @@ import {
   VStack,
 } from "@chakra-ui/react"
 import { useKeycloak } from "@react-keycloak/web"
-import React from "react"
-import Typewriter from "typewriter-effect"
-import { SWITCHIcon } from "../components/Icons"
 import { Navigate } from "react-router-dom"
+import Typewriter from "typewriter-effect"
 import { LogoButton } from "../components/Buttons"
+import { SWITCHIcon } from "../components/Icons"
 
 export function Landing() {
   const { keycloak } = useKeycloak()

src/pages/Layout.tsx

@@ -115,7 +115,11 @@ export default function Layout() {
         zIndex={1}
       >
         <HStack p={3}>
-          <LogoButton />
+          <LogoButton
+            disabled={
+              !context.isAssistant && exampleStatusContext.hasInteractive
+            }
+          />
           {courseSlug && <CourseNav isAssistant={context.isAssistant} />}
         </HStack>
         <HStack>