From 3b83a51265133d4ecdd60c8e2937ac7399a38b31 Mon Sep 17 00:00:00 2001
From: Tristan Verbeken <tristan.verbeken@ugent.be>
Date: Wed, 22 May 2024 23:08:04 +0200
Subject: [PATCH 01/12] temp changes @matthias help me :sob:

---
 .../forms/projectFormTabs/DockerFormTab.tsx   | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index c28ac625..0470f846 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -1,5 +1,5 @@
 import { InboxOutlined, UploadOutlined } from "@ant-design/icons"
-import {Button, Form, Input, Switch, Upload} from "antd"
+import {Button, Dropdown, Form, Input, Menu, Select, Switch, Upload} from "antd"
 import { TextAreaProps } from "antd/es/input"
 import { FormInstance } from "antd/lib"
 import {FC, useState} from "react"
@@ -9,6 +9,7 @@ import useAppApi from "../../../hooks/useAppApi"
 import MarkdownTooltip from "../../common/MarkdownTooltip"
 import { classicNameResolver } from "typescript"
 import MarkdownTextfield from "../../input/MarkdownTextfield"
+import TextArea from "antd/es/input/TextArea";
 
 const UploadBtn: React.FC<{ form: FormInstance; fieldName: string; textFieldProps?: TextAreaProps; disabled?: boolean }> = ({ form, fieldName, disabled }) => {
   const handleFileUpload = (file: File) => {
@@ -42,13 +43,30 @@ const UploadBtn: React.FC<{ form: FormInstance; fieldName: string; textFieldProp
   )
 }
 
+interface Script {
+  displayName: string;
+  scriptGenerator: (script: string) => string;
+  image?: string;
+}
+
+interface ScriptCollection {
+  [key: string]: Script;
+}
+
 const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const { t } = useTranslation()
   const {message} = useAppApi()
   const [withTemplate, setWithTemplate] = useState<boolean>(true)
+  const [imageSelect, setImageSelect] = useState<string>("alpine")
   const dockerImage = Form.useWatch("dockerImage", form)
 
   const dockerDisabled = !dockerImage?.length
+  const languageOptions:ScriptCollection = {
+    "bash": {displayName:"Bash", scriptGenerator: (script: string) => script, image: "fedora"},
+    "python": {displayName:"Python", scriptGenerator: (script: string) => `python -c '${script}'`, image: "python"},
+    "javascript": {displayName:"Javascript (node)", scriptGenerator: (script: string) => `node -e '${script}', image: "node"`},
+    "haskell": {displayName:"Haskell", scriptGenerator: (script: string) => `runhaskell -e '${script}'`, image: "haskell"}
+  }
 
   function isValidTemplate(template: string): string {
     if (!template?.length) return "" // Template is optional
@@ -114,14 +132,22 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
             placement="right"
           />
         }
+
         name="dockerImage"
       >
-        <Input
+        { <Input
           style={{ marginTop: "8px" }}
+          value={imageSelect}
           placeholder={t("project.tests.dockerImagePlaceholder")}
-        />
+        />}
       </Form.Item>
 
+      <Select defaultValue={Object.keys(languageOptions)[0]}>
+        {Object.keys(languageOptions).map((key) => (
+            <Select.Option value={key}>{languageOptions[key].displayName}</Select.Option>
+        ))}
+      </Select>
+
       <>
         <Form.Item
           rules={[{ required: !dockerDisabled, message: "Docker script is required" }]}
@@ -134,7 +160,7 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           }
           name="dockerScript"
         >
-          <Input.TextArea
+          <TextArea
             disabled={dockerDisabled}
             autoSize={{ minRows: 3 }}
             style={{ fontFamily: "monospace", whiteSpace: "pre", overflowX: "auto" }}

From 5c24c055490dce743180b532274b309f122e69c6 Mon Sep 17 00:00:00 2001
From: Matthias-VE <mvaneyck@telenet.be>
Date: Thu, 23 May 2024 00:01:52 +0200
Subject: [PATCH 02/12] Fixed textfield input

---
 .../forms/projectFormTabs/DockerFormTab.tsx   | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index 0470f846..8433e82f 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -2,7 +2,7 @@ import { InboxOutlined, UploadOutlined } from "@ant-design/icons"
 import {Button, Dropdown, Form, Input, Menu, Select, Switch, Upload} from "antd"
 import { TextAreaProps } from "antd/es/input"
 import { FormInstance } from "antd/lib"
-import {FC, useState} from "react"
+import {FC, useEffect, useState} from "react"
 import { useTranslation } from "react-i18next"
 import { ApiRoutes } from "../../../@types/requests"
 import useAppApi from "../../../hooks/useAppApi"
@@ -58,9 +58,10 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const {message} = useAppApi()
   const [withTemplate, setWithTemplate] = useState<boolean>(true)
   const [imageSelect, setImageSelect] = useState<string>("alpine")
-  const dockerImage = Form.useWatch("dockerImage", form)
+  const [dockerDisabled, setDockerImage] = useState<boolean>(false)
+
+
 
-  const dockerDisabled = !dockerImage?.length
   const languageOptions:ScriptCollection = {
     "bash": {displayName:"Bash", scriptGenerator: (script: string) => script, image: "fedora"},
     "python": {displayName:"Python", scriptGenerator: (script: string) => `python -c '${script}'`, image: "python"},
@@ -68,6 +69,10 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
     "haskell": {displayName:"Haskell", scriptGenerator: (script: string) => `runhaskell -e '${script}'`, image: "haskell"}
   }
 
+  useEffect(() => {
+    setDockerImage(imageSelect.length == 0)
+  }, [imageSelect]);
+
   function isValidTemplate(template: string): string {
     if (!template?.length) return "" // Template is optional
     let atLeastOne = false // Template should not be empty
@@ -132,17 +137,23 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
             placement="right"
           />
         }
-
-        name="dockerImage"
+        //name = "dockerImage"    //Als je deze uncomment dan werkt de value van de input niet meer.
       >
-        { <Input
+        <Input
           style={{ marginTop: "8px" }}
           value={imageSelect}
-          placeholder={t("project.tests.dockerImagePlaceholder")}
-        />}
+          onChange={(event) => setImageSelect(event.target.value)}
+        />
+      </Form.Item>
+      <Form.Item
+      >
+        <Input
+          value = {"WAHOOO"}
+        />
+
       </Form.Item>
 
-      <Select defaultValue={Object.keys(languageOptions)[0]}>
+      <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => setImageSelect(val)} >
         {Object.keys(languageOptions).map((key) => (
             <Select.Option value={key}>{languageOptions[key].displayName}</Select.Option>
         ))}

From 1e7ede314dfae264aa0d116646b6752ce5035842 Mon Sep 17 00:00:00 2001
From: Matthias-VE <mvaneyck@telenet.be>
Date: Thu, 23 May 2024 00:06:10 +0200
Subject: [PATCH 03/12] remove wahoo

---
 .../src/components/forms/projectFormTabs/DockerFormTab.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index 8433e82f..c2efbbaa 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -145,13 +145,6 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           onChange={(event) => setImageSelect(event.target.value)}
         />
       </Form.Item>
-      <Form.Item
-      >
-        <Input
-          value = {"WAHOOO"}
-        />
-
-      </Form.Item>
 
       <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => setImageSelect(val)} >
         {Object.keys(languageOptions).map((key) => (

From 5f3843f5c95348da543c6b6db2e67f574225f0bd Mon Sep 17 00:00:00 2001
From: Matthias-VE <mvaneyck@telenet.be>
Date: Thu, 23 May 2024 00:13:46 +0200
Subject: [PATCH 04/12] Revert "remove wahoo"

This reverts commit 1e7ede314dfae264aa0d116646b6752ce5035842.
---
 .../src/components/forms/projectFormTabs/DockerFormTab.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index c2efbbaa..8433e82f 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -145,6 +145,13 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           onChange={(event) => setImageSelect(event.target.value)}
         />
       </Form.Item>
+      <Form.Item
+      >
+        <Input
+          value = {"WAHOOO"}
+        />
+
+      </Form.Item>
 
       <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => setImageSelect(val)} >
         {Object.keys(languageOptions).map((key) => (

From 90f47f98ffda48f7f854c4285bf2b0ad5bd7044d Mon Sep 17 00:00:00 2001
From: Matthias-VE <mvaneyck@telenet.be>
Date: Thu, 23 May 2024 00:13:51 +0200
Subject: [PATCH 05/12] Revert "Fixed textfield input"

This reverts commit 5c24c055490dce743180b532274b309f122e69c6.
---
 .../forms/projectFormTabs/DockerFormTab.tsx   | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index 8433e82f..0470f846 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -2,7 +2,7 @@ import { InboxOutlined, UploadOutlined } from "@ant-design/icons"
 import {Button, Dropdown, Form, Input, Menu, Select, Switch, Upload} from "antd"
 import { TextAreaProps } from "antd/es/input"
 import { FormInstance } from "antd/lib"
-import {FC, useEffect, useState} from "react"
+import {FC, useState} from "react"
 import { useTranslation } from "react-i18next"
 import { ApiRoutes } from "../../../@types/requests"
 import useAppApi from "../../../hooks/useAppApi"
@@ -58,10 +58,9 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const {message} = useAppApi()
   const [withTemplate, setWithTemplate] = useState<boolean>(true)
   const [imageSelect, setImageSelect] = useState<string>("alpine")
-  const [dockerDisabled, setDockerImage] = useState<boolean>(false)
-
-
+  const dockerImage = Form.useWatch("dockerImage", form)
 
+  const dockerDisabled = !dockerImage?.length
   const languageOptions:ScriptCollection = {
     "bash": {displayName:"Bash", scriptGenerator: (script: string) => script, image: "fedora"},
     "python": {displayName:"Python", scriptGenerator: (script: string) => `python -c '${script}'`, image: "python"},
@@ -69,10 +68,6 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
     "haskell": {displayName:"Haskell", scriptGenerator: (script: string) => `runhaskell -e '${script}'`, image: "haskell"}
   }
 
-  useEffect(() => {
-    setDockerImage(imageSelect.length == 0)
-  }, [imageSelect]);
-
   function isValidTemplate(template: string): string {
     if (!template?.length) return "" // Template is optional
     let atLeastOne = false // Template should not be empty
@@ -137,23 +132,17 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
             placement="right"
           />
         }
-        //name = "dockerImage"    //Als je deze uncomment dan werkt de value van de input niet meer.
+
+        name="dockerImage"
       >
-        <Input
+        { <Input
           style={{ marginTop: "8px" }}
           value={imageSelect}
-          onChange={(event) => setImageSelect(event.target.value)}
-        />
-      </Form.Item>
-      <Form.Item
-      >
-        <Input
-          value = {"WAHOOO"}
-        />
-
+          placeholder={t("project.tests.dockerImagePlaceholder")}
+        />}
       </Form.Item>
 
-      <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => setImageSelect(val)} >
+      <Select defaultValue={Object.keys(languageOptions)[0]}>
         {Object.keys(languageOptions).map((key) => (
             <Select.Option value={key}>{languageOptions[key].displayName}</Select.Option>
         ))}

From 9643c2bee1901f3bf2f2c9634bee0aa2293a7ce9 Mon Sep 17 00:00:00 2001
From: Matthias-VE <mvaneyck@telenet.be>
Date: Thu, 23 May 2024 00:18:46 +0200
Subject: [PATCH 06/12] working but now with form states instead of react
 states

---
 .../src/components/forms/projectFormTabs/DockerFormTab.tsx    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index 0470f846..f8f3e4e8 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -57,7 +57,6 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const { t } = useTranslation()
   const {message} = useAppApi()
   const [withTemplate, setWithTemplate] = useState<boolean>(true)
-  const [imageSelect, setImageSelect] = useState<string>("alpine")
   const dockerImage = Form.useWatch("dockerImage", form)
 
   const dockerDisabled = !dockerImage?.length
@@ -137,12 +136,11 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
       >
         { <Input
           style={{ marginTop: "8px" }}
-          value={imageSelect}
           placeholder={t("project.tests.dockerImagePlaceholder")}
         />}
       </Form.Item>
 
-      <Select defaultValue={Object.keys(languageOptions)[0]}>
+      <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => form.setFieldValue( "dockerImage", val)}>
         {Object.keys(languageOptions).map((key) => (
             <Select.Option value={key}>{languageOptions[key].displayName}</Select.Option>
         ))}

From 35d3f62bc0cf29f80ef828d9624f5de1dc6e5dfd Mon Sep 17 00:00:00 2001
From: Tristan Verbeken <tristan.verbeken@ugent.be>
Date: Thu, 23 May 2024 12:32:31 +0200
Subject: [PATCH 07/12] added docker icons

---
 frontend/public/docker_langauges/bash.svg    | 1 +
 frontend/public/docker_langauges/haskell.svg | 1 +
 frontend/public/docker_langauges/node-js.svg | 1 +
 frontend/public/docker_langauges/python.svg  | 1 +
 4 files changed, 4 insertions(+)
 create mode 100644 frontend/public/docker_langauges/bash.svg
 create mode 100644 frontend/public/docker_langauges/haskell.svg
 create mode 100644 frontend/public/docker_langauges/node-js.svg
 create mode 100644 frontend/public/docker_langauges/python.svg

diff --git a/frontend/public/docker_langauges/bash.svg b/frontend/public/docker_langauges/bash.svg
new file mode 100644
index 00000000..928d5a9d
--- /dev/null
+++ b/frontend/public/docker_langauges/bash.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5 9h2.31l.32-3h2l-.32 3h2l.32-3h2l-.32 3h1.69v2h-1.9l-.2 2h2.1v2h-2.31l-.32 3h-2l.32-3h-2l-.32 3h-2l.32-3h-1.69v-2h1.9l.2-2h-2.1zm4.1 2-.2 2h2l.2-2m7.9-5h-2v8h2m0 2h-2v2h2z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/docker_langauges/haskell.svg b/frontend/public/docker_langauges/haskell.svg
new file mode 100644
index 00000000..0c627ebd
--- /dev/null
+++ b/frontend/public/docker_langauges/haskell.svg
@@ -0,0 +1 @@
+<svg fill="none" height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m2 25.882 6.588-9.882-6.588-9.882h4.941l6.588 9.882-6.588 9.882z" fill="#453a62"/><path d="m8.588 25.882 6.589-9.882-6.589-9.882h4.941l13.177 19.764h-4.941l-4.118-6.176-4.118 6.176z" fill="#5e5086"/><path d="m24.51 20.118-2.196-3.294 7.686-.001v3.295zm-3.294-4.941-2.196-3.294 10.98-.001v3.295z" fill="#8f4e8b"/></svg>
\ No newline at end of file
diff --git a/frontend/public/docker_langauges/node-js.svg b/frontend/public/docker_langauges/node-js.svg
new file mode 100644
index 00000000..3e77c253
--- /dev/null
+++ b/frontend/public/docker_langauges/node-js.svg
@@ -0,0 +1 @@
+<svg height="289" preserveAspectRatio="xMidYMid" viewBox="0 0 256 289" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m127.999999 288.463771c-3.975155 0-7.6853-1.060043-11.130435-2.915115l-35.2463756-20.935818c-5.3002084-2.915114-2.650103-3.975156-1.0600426-4.505177 7.1552801-2.385091 8.4803317-2.915114 15.900623-7.15528.7950291-.53002 1.8550717-.265009 2.650103.265011l27.0310552 16.165632c1.060043.530021 2.385094.530021 3.180126 0l105.739129-61.21739c1.060043-.530023 1.590063-1.590063 1.590063-2.915115v-122.1697723c0-1.3250538-.53002-2.3850941-1.590063-2.9151143l-105.739129-60.9523818c-1.060043-.5300201-2.385094-.5300201-3.180126 0l-105.7391316 60.9523818c-1.0600403.5300202-1.5900605 1.8550717-1.5900605 2.9151143v122.1697723c0 1.060041.5300202 2.385092 1.5900605 2.915115l28.8861293 16.695652c15.6356117 7.950309 25.4409949-1.325052 25.4409949-10.600415v-120.579712c0-1.5900605 1.3250515-3.1801232 3.1801232-3.1801232h13.5155288c1.5900627 0 3.1801232 1.3250515 3.1801232 3.1801232v120.579712c0 20.935818-11.3954436 33.126293-31.2712211 33.126293-6.0952375 0-10.8654235 0-24.3809523-6.625258l-27.8260867-15.90062c-6.89026889-3.975157-11.1304347-11.395446-11.1304347-19.345758v-122.1697723c0-7.9503092 4.24016581-15.3706005 11.1304347-19.3457551l105.7391293-61.21739308c6.62526-3.71014336 15.635612-3.71014336 22.260872 0l105.739129 61.21739308c6.890269 3.9751546 11.130435 11.3954459 11.130435 19.3457551v122.1697723c0 7.950312-4.240166 15.370601-11.130435 19.345758l-105.739129 61.21739c-3.445137 1.590063-7.420291 2.385095-11.130437 2.385095zm32.596275-84.008283c-46.376813 0-55.917185-21.200829-55.917185-39.221533 0-1.590062 1.325052-3.180123 3.180123-3.180123h13.78054c1.590061 0 2.915112 1.06004 2.915112 2.650103 2.120083 14.045549 8.215323 20.935818 36.306419 20.935818 22.260871 0 31.801243-5.035197 31.801243-16.960663 0-6.890269-2.650103-11.925466-37.366461-15.370601-28.886127-2.915114-46.90683-9.275363-46.90683-32.331263 0-21.4658385 18.020703-34.1863359 48.231884-34.1863359 33.921324 0 50.616976 11.6604571 52.737059 37.1014499 0 .795031-.265011 1.590063-.795031 2.385094-.53002.53002-1.325052 1.06004-2.120083 1.06004h-13.780538c-1.325051 0-2.650103-1.06004-2.915114-2.385092-3.180123-14.575569-11.395446-19.345757-33.126293-19.345757-24.380954 0-27.296066 8.480332-27.296066 14.84058 0 7.685301 3.445134 10.070395 36.306418 14.310561 32.596273 4.240165 47.966873 10.335403 47.966873 33.126292-.265011 23.320912-19.345755 36.57143-53.00207 36.57143z" fill="#539e43"/></svg>
\ No newline at end of file
diff --git a/frontend/public/docker_langauges/python.svg b/frontend/public/docker_langauges/python.svg
new file mode 100644
index 00000000..bf2a1601
--- /dev/null
+++ b/frontend/public/docker_langauges/python.svg
@@ -0,0 +1 @@
+<svg height="255" preserveAspectRatio="xMidYMid" viewBox="0 0 256 255" width="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="12.959359%" x2="79.638833%" y1="12.039393%" y2="78.200854%"><stop offset="0" stop-color="#387eb8"/><stop offset="1" stop-color="#366994"/></linearGradient><linearGradient id="b" x1="19.127525%" x2="90.741533%" y1="20.579181%" y2="88.429037%"><stop offset="0" stop-color="#ffe052"/><stop offset="1" stop-color="#ffc331"/></linearGradient><path d="m126.915866.07227555c-64.8322829.00000462-60.7837372 28.11518925-60.7837372 28.11518925l.0722755 29.1270467h61.8678717v8.7453417h-86.4415589s-41.486166-4.7049094-41.486166 60.7114618c-.00000463 65.416358 36.2100508 63.096556 36.2100508 63.096556h21.6103896v-30.355731s-1.1648552-36.210051 35.6318464-36.210051h61.3619421s34.475438.557297 34.475438-33.3190286v-56.0135516c0-.0000047 5.234323-33.89723325-62.518352-33.89723325zm-34.1140591 19.58667415c6.1553999-.0000045 11.1304351 4.9750349 11.1304351 11.1304348.000004 6.1553999-4.9750352 11.1304348-11.1304351 11.1304348-6.1553999.0000046-11.1304348-4.9750349-11.1304348-11.1304348-.0000047-6.1553999 4.9750349-11.1304348 11.1304348-11.1304348z" fill="url(#a)"/><path d="m128.757101 254.126271c64.832302 0 60.783738-28.11519 60.783738-28.11519l-.072275-29.127046h-61.867872v-8.745342h86.441559s41.486166 4.704896 41.486166-60.711485c.000023-65.4163514-36.210051-63.0965491-36.210051-63.0965491h-21.61039v30.3557243s1.164874 36.2100508-35.631846 36.2100508h-61.361948s-34.475437-.557296-34.475437 33.319052v56.013552s-5.2343225 33.897233 62.518356 33.897233zm34.114059-19.586674c-6.155401 0-11.130434-4.975033-11.130434-11.130435 0-6.155403 4.975033-11.130435 11.130434-11.130435 6.155403 0 11.130435 4.975032 11.130435 11.130435.000023 6.155402-4.975032 11.130435-11.130435 11.130435z" fill="url(#b)"/></svg>
\ No newline at end of file

From 8e0f1f7f626932db1a8abd694ada20ddae69e189 Mon Sep 17 00:00:00 2001
From: Tristan Verbeken <tristan.verbeken@ugent.be>
Date: Thu, 23 May 2024 19:02:04 +0200
Subject: [PATCH 08/12] added container menu dropdown

---
 frontend/public/docker_langauges/custom.svg   |   1 +
 .../forms/projectFormTabs/DockerFormTab.tsx   | 105 +++++++++++-------
 frontend/src/i18n/en/translation.json         |   2 +-
 frontend/src/i18n/nl/translation.json         |   4 +-
 .../src/pages/editProject/EditProject.tsx     |  11 +-
 5 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 frontend/public/docker_langauges/custom.svg

diff --git a/frontend/public/docker_langauges/custom.svg b/frontend/public/docker_langauges/custom.svg
new file mode 100644
index 00000000..39ead495
--- /dev/null
+++ b/frontend/public/docker_langauges/custom.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="m210.91162 146.91211a72.37653 72.37653 0 0 1 -79.84424 15.03613l-52.04248 60.25196q-.19116.22119-.39746.42773a32.00021 32.00021 0 0 1 -45.25537-45.25488c.1377-.1377.28076-.27051.42773-.39844l60.25293-52.043a72.02489 72.02489 0 0 1 94.06153-95.23437 8.004 8.004 0 0 1 2.53374 13.02737l-38.93413 38.93359 3.77148 18.85645 18.856 3.77148 38.93457-38.93457a8.00429 8.00429 0 0 1 13.02685 2.53418 71.72729 71.72729 0 0 1 -15.39115 79.02637z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index f8f3e4e8..24c14d26 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -11,6 +11,12 @@ import { classicNameResolver } from "typescript"
 import MarkdownTextfield from "../../input/MarkdownTextfield"
 import TextArea from "antd/es/input/TextArea";
 
+import BashIcon from "../../../../public/docker_langauges/bash.svg"
+import PythonIcon from "../../../../public/docker_langauges/python.svg"
+import NodeIcon from "../../../../public/docker_langauges/node-js.svg"
+import HaskellIcon from "../../../../public/docker_langauges/haskell.svg"
+import Custom from "../../../../public/docker_langauges/custom.svg"
+
 const UploadBtn: React.FC<{ form: FormInstance; fieldName: string; textFieldProps?: TextAreaProps; disabled?: boolean }> = ({ form, fieldName, disabled }) => {
   const handleFileUpload = (file: File) => {
     const reader = new FileReader()
@@ -45,27 +51,41 @@ const UploadBtn: React.FC<{ form: FormInstance; fieldName: string; textFieldProp
 
 interface Script {
   displayName: string;
-  scriptGenerator: (script: string) => string;
-  image?: string;
+  image: string;
+  icon: string;
 }
 
 interface ScriptCollection {
   [key: string]: Script;
 }
 
+export const languageOptions: ScriptCollection = {
+  "bash": { displayName: "Bash", image: "fedora", icon: BashIcon },
+  "python": { displayName: "Python", image: "python", icon: PythonIcon },
+  "javascript": { displayName: "Javascript (node)", image: "node", icon: NodeIcon },
+  "haskell": { displayName: "Haskell", image: "haskell", icon: HaskellIcon },
+  "custom": { displayName: "Custom", image: "", icon: Custom }
+}
+
+export function imageToLanguage(script: string): string {
+  for(const language in languageOptions) {
+    if(script === languageOptions[language].image) {
+      return language
+    }
+  }
+  return ""
+}
+
+
 const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const { t } = useTranslation()
   const {message} = useAppApi()
   const [withTemplate, setWithTemplate] = useState<boolean>(true)
+  const [selectedLanguage, setSelectedLanguage] = useState<string>("bash")
   const dockerImage = Form.useWatch("dockerImage", form)
 
   const dockerDisabled = !dockerImage?.length
-  const languageOptions:ScriptCollection = {
-    "bash": {displayName:"Bash", scriptGenerator: (script: string) => script, image: "fedora"},
-    "python": {displayName:"Python", scriptGenerator: (script: string) => `python -c '${script}'`, image: "python"},
-    "javascript": {displayName:"Javascript (node)", scriptGenerator: (script: string) => `node -e '${script}', image: "node"`},
-    "haskell": {displayName:"Haskell", scriptGenerator: (script: string) => `runhaskell -e '${script}'`, image: "haskell"}
-  }
+
 
   function isValidTemplate(template: string): string {
     if (!template?.length) return "" // Template is optional
@@ -124,28 +144,46 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   return (
     <>
       <Form.Item
-        label={
-          <MarkdownTooltip
-            label={"Docker Image"}
-            tooltipContent={t("project.tests.dockerImageTooltip")}
-            placement="right"
-          />
-        }
-
-        name="dockerImage"
+          label={
+            <MarkdownTooltip
+                label={"Docker Image"}
+                tooltipContent={t("project.tests.dockerImageTooltip")}
+                placement="right"
+            />
+          }
+          name="dockerImage"
       >
-        { <Input
-          style={{ marginTop: "8px" }}
-          placeholder={t("project.tests.dockerImagePlaceholder")}
-        />}
+        <Input.Group compact>
+          <Form.Item
+              name="languageSelect"
+              noStyle
+          >
+            <Select
+                defaultValue={Object.keys(languageOptions)[0]}
+                onChange={(val) => form.setFieldValue( "dockerImage", languageOptions[val].image)}
+                style={{ width: '30%' }}
+            >
+              {Object.keys(languageOptions).map((key) => (
+                  <Select.Option key={key} value={key}>
+            <span style={{ marginRight: 8 }}>
+              <img src={languageOptions[key].icon} alt={languageOptions[key].displayName} style={{ height: '16px', verticalAlign: 'middle' }} />
+            </span>
+                    {languageOptions[key].displayName}
+                  </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+              name="dockerImage"
+              noStyle
+          >
+            <Input
+                style={{ width: '70%' }}
+                placeholder={t("project.tests.dockerImagePlaceholder")}
+            />
+          </Form.Item>
+        </Input.Group>
       </Form.Item>
-
-      <Select defaultValue={Object.keys(languageOptions)[0]} onChange={(val) => form.setFieldValue( "dockerImage", val)}>
-        {Object.keys(languageOptions).map((key) => (
-            <Select.Option value={key}>{languageOptions[key].displayName}</Select.Option>
-        ))}
-      </Select>
-
       <>
         <Form.Item
           rules={[{ required: !dockerDisabled, message: "Docker script is required" }]}
@@ -193,11 +231,6 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           <Button disabled={dockerDisabled} icon={<UploadOutlined />}>Upload test directory (zip)</Button>
         </Upload>
       </Form.Item>
-        {/* <UploadBtn
-          form={form}
-          disabled={dockerDisabled}
-          fieldName="dockerScript"
-        /> */}
         <div style={{ paddingBottom: '14px'}}>
           <Switch
               checked={withTemplate}
@@ -212,6 +245,7 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
             <div>
               <MarkdownTextfield content={t("project.tests.templateModeInfo")} />
 
+
             <Form.Item
                 label={t("project.tests.dockerTemplate")}
                 name="dockerTemplate"
@@ -231,11 +265,6 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
                   style={{fontFamily: "monospace", whiteSpace: "pre", overflowX: "auto"}}
                   placeholder={"@helloWorldTest\n>required\n>description=\"This is a test\"\nExpected output 1\n\n@helloUGent\n>optional\nExpected output 2\n"}
               />
-                {/*<UploadBtn
-                  form={form}
-                  disabled={dockerDisabled}
-                  fieldName="dockerTemplate"
-              />*/}
             </Form.Item> </div>: <Form.Item
           name="simpleMode"
           children={<MarkdownTextfield content={t("project.tests.simpleModeInfo")} />}
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index da297bf2..6aaf520a 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -211,7 +211,7 @@
       "simpleMode": "Without template",
       "templateMode": "With template",
       "fileStructureTooltip": "This templates specifies the file structure a submission has to follow.\nIt uses the following syntax:\n* Folders end on `'/'`\n* Use indents to specify files inside a folder\n* Regex can be used\n\t* `'.'` is still a normal `'.'`\n\t* `'\\.'` can be used as regex `'.'`\n* `'-'` at the start of a line specifies a file/folder that is not allowed",
-      "dockerImageTooltip": "Specify a valid Docker-container from [Docker Hub](https://hub.docker.com/) on which the test script will be run.",
+      "dockerImageTooltip": "Specify a valid Docker container from [Docker Hub](https://hub.docker.com/) on which the test script will be run. You can also choose a language with a preselected container.",
       "dockerScriptTooltip": "Bash-script that is executed.\n* The files of the student's submission can be found in `'/shared/input'`\n* Extra files uploaded below can be found in `'/shared/extra'`\n\n More information about the required output depends on the mode and can be found below.",
       "dockerTemplateTooltip": "To specify specific tests, you need to provide a template. First, enter the test name with '@{test}'. Below this, you can use '>' to provide options such as ('>required', '>optional', '>description'). Everything under these options until the next test or the end of the file is the expected output.",
       "dockerTestDirTooltip": "Upload additional files needed for the Docker test.\n\nThese files are available in the folder `'/shared/extra'`.",
diff --git a/frontend/src/i18n/nl/translation.json b/frontend/src/i18n/nl/translation.json
index 39820ff9..522fc6c5 100644
--- a/frontend/src/i18n/nl/translation.json
+++ b/frontend/src/i18n/nl/translation.json
@@ -213,7 +213,7 @@
       "templateMode": "Met sjabloon",
       "fileStructurePreview": "Voorbeeld van bestandsstructuur",
       "fileStructureTooltip": "Dit sjabloon specificeert de bestandsstructuur die een indiening moet volgen.\nHet gebruikt de volgende syntax:\n* Mappen eindigen op `'/'`\n* Gebruik inspringing om bestanden binnen een map aan te geven\n* Regex kan worden gebruikt\n\t* `'.'` is nog steeds een normale `'.'`\n\t* `'\\.'` kan worden gebruikt als regex `'.'`\n* `'-'` aan het begin van een regel geeft aan dat een bestand/map niet is toegestaan",
-      "dockerImageTooltip": "Specificeer een geldige Docker-container van [Docker Hub](https://hub.docker.com/) waarop het testscript zal worden uitgevoerd.",
+      "dockerImageTooltip": "Specificeer een geldige Docker-container van [Docker Hub](https://hub.docker.com/) waarop het testscript zal worden uitgevoerd. Je kan ook kiezen voor een voorgeconfigureerde programmeertaal met bijhorende container.",
       "dockerScriptTooltip": "Bash-script dat wordt uitgevoerd.\n* De bestanden van de student zijn indieningen zijn te vinden in `'/shared/input'`\n* Extra bestanden die hieronder zijn geüpload, zijn te vinden in `'/shared/extra'`\n\nMeer informatie over de vereiste uitvoer is afhankelijk van de modus en is hieronder te vinden.",
       "dockerTemplateTooltip": "Om specifieke tests te definiëren, moet je een sjabloon invoeren. Geef eerst de naam van de test in met '@{test}'. Hieronder kun je met een '>' opties geven zoals ('>required', '>optional', '>description'). Alles onder de opties tot de volgende test of het einde van het bestand is de verwachte output.",
       "dockerTestDirTooltip": "Upload extra bestanden die nodig zijn voor de dockertest.\n\nDeze bestanden zijn beschikbaar in de map `'/shared/extra'`.",
@@ -247,7 +247,7 @@
     "getStarted": "Aan de slag",
     "docs": "Documentatie"
   },
-  
+
   "submission": {
     "submission": "Indiening",
     "submittedFiles": "Ingediende bestanden:",
diff --git a/frontend/src/pages/editProject/EditProject.tsx b/frontend/src/pages/editProject/EditProject.tsx
index c5bc4dc9..898e4517 100644
--- a/frontend/src/pages/editProject/EditProject.tsx
+++ b/frontend/src/pages/editProject/EditProject.tsx
@@ -13,6 +13,7 @@ import { AppRoutes } from "../../@types/routes"
 import { ProjectContext } from "../../router/ProjectRoutes"
 import useApi from "../../hooks/useApi"
 import saveDockerForm, { DockerFormData } from "../../components/common/saveDockerForm"
+import {imageToLanguage} from "../../components/forms/projectFormTabs/DockerFormTab";
 
 const EditProject: React.FC = () => {
     const [form] = Form.useForm<ProjectFormData & DockerFormData>()
@@ -40,10 +41,9 @@ const EditProject: React.FC = () => {
             dockerScript: null,
             dockerImage: null,
         }
+
         if (response.success) {
             const tests = response.response.data
-            console.log(tests)
-
             if (tests.extraFilesName) {
                 const downloadLink = AppRoutes.DOWNLOAD_PROJECT_TESTS.replace(":projectId", projectId).replace(":courseId", courseId!)
 
@@ -64,10 +64,12 @@ const EditProject: React.FC = () => {
                 dockerScript: tests.dockerScript ?? "",
                 dockerImage: tests.dockerImage ?? "",
             }
+            const selectedLanguage = imageToLanguage(formVals.dockerImage ?? "")
+            formVals.dockerScript = selectedLanguage[1] // We only want the script, not the language
+            form.setFieldValue("languageSelect", selectedLanguage)
         }
 
         form.setFieldsValue(formVals)
-
         setInitialDockerValues(formVals)
     }
 
@@ -80,6 +82,9 @@ const EditProject: React.FC = () => {
 
     const handleCreation = async () => {
         const values: ProjectFormData & DockerFormData = form.getFieldsValue()
+
+        console.log(values)
+
         if (values.visible) {
             values.visibleAfter = null
         }

From 368c6f7f216b96f2cb5d454deb6cf007be8d8f93 Mon Sep 17 00:00:00 2001
From: Aqua-sc <108478185+Aqua-sc@users.noreply.github.com>
Date: Thu, 23 May 2024 00:37:54 +0200
Subject: [PATCH 09/12] start docker toggle fix

(doesn't work yet, pushing to get help)
---
 frontend/public/docker_langauges/bash.svg     |   2 +-
 frontend/public/docker_langauges/custom.svg   |   2 +-
 .../forms/projectFormTabs/DockerFormTab.tsx   | 228 ++++++++----------
 .../forms/projectFormTabs/GeneralFormTab.tsx  | 166 ++++++-------
 .../src/pages/editProject/EditProject.tsx     |  17 +-
 frontend/src/styles.css                       |   7 +
 6 files changed, 193 insertions(+), 229 deletions(-)

diff --git a/frontend/public/docker_langauges/bash.svg b/frontend/public/docker_langauges/bash.svg
index 928d5a9d..890b5d92 100644
--- a/frontend/public/docker_langauges/bash.svg
+++ b/frontend/public/docker_langauges/bash.svg
@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5 9h2.31l.32-3h2l-.32 3h2l.32-3h2l-.32 3h1.69v2h-1.9l-.2 2h2.1v2h-2.31l-.32 3h-2l.32-3h-2l-.32 3h-2l.32-3h-1.69v-2h1.9l.2-2h-2.1zm4.1 2-.2 2h2l.2-2m7.9-5h-2v8h2m0 2h-2v2h2z"/></svg>
\ No newline at end of file
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill="#111" d="m5 9h2.31l.32-3h2l-.32 3h2l.32-3h2l-.32 3h1.69v2h-1.9l-.2 2h2.1v2h-2.31l-.32 3h-2l.32-3h-2l-.32 3h-2l.32-3h-1.69v-2h1.9l.2-2h-2.1zm4.1 2-.2 2h2l.2-2m7.9-5h-2v8h2m0 2h-2v2h2z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/docker_langauges/custom.svg b/frontend/public/docker_langauges/custom.svg
index 39ead495..c3416414 100644
--- a/frontend/public/docker_langauges/custom.svg
+++ b/frontend/public/docker_langauges/custom.svg
@@ -1 +1 @@
-<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="m210.91162 146.91211a72.37653 72.37653 0 0 1 -79.84424 15.03613l-52.04248 60.25196q-.19116.22119-.39746.42773a32.00021 32.00021 0 0 1 -45.25537-45.25488c.1377-.1377.28076-.27051.42773-.39844l60.25293-52.043a72.02489 72.02489 0 0 1 94.06153-95.23437 8.004 8.004 0 0 1 2.53374 13.02737l-38.93413 38.93359 3.77148 18.85645 18.856 3.77148 38.93457-38.93457a8.00429 8.00429 0 0 1 13.02685 2.53418 71.72729 71.72729 0 0 1 -15.39115 79.02637z"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path fill="#444" d="m210.91162 146.91211a72.37653 72.37653 0 0 1 -79.84424 15.03613l-52.04248 60.25196q-.19116.22119-.39746.42773a32.00021 32.00021 0 0 1 -45.25537-45.25488c.1377-.1377.28076-.27051.42773-.39844l60.25293-52.043a72.02489 72.02489 0 0 1 94.06153-95.23437 8.004 8.004 0 0 1 2.53374 13.02737l-38.93413 38.93359 3.77148 18.85645 18.856 3.77148 38.93457-38.93457a8.00429 8.00429 0 0 1 13.02685 2.53418 71.72729 71.72729 0 0 1 -15.39115 79.02637z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
index cf6569cb..f09d02a6 100644
--- a/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/DockerFormTab.tsx
@@ -1,15 +1,13 @@
-import { InboxOutlined, UploadOutlined } from "@ant-design/icons"
-import {Button, Dropdown, Form, Input, Menu, Select, Switch, Upload} from "antd"
+import { CodepenCircleFilled, InboxOutlined, UploadOutlined } from "@ant-design/icons"
+import { Button, Dropdown, Form, Input, Menu, Select, SelectProps, Switch, Upload } from "antd"
 import { TextAreaProps } from "antd/es/input"
 import { FormInstance } from "antd/lib"
-import React, {FC, useEffect, useLayoutEffect, useState} from "react"
+import React, { FC, useEffect, useLayoutEffect, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { ApiRoutes } from "../../../@types/requests"
 import useAppApi from "../../../hooks/useAppApi"
 import MarkdownTooltip from "../../common/MarkdownTooltip"
-import { classicNameResolver } from "typescript"
 import MarkdownTextfield from "../../input/MarkdownTextfield"
-import TextArea from "antd/es/input/TextArea";
+import TextArea from "antd/es/input/TextArea"
 
 import BashIcon from "../../../../public/docker_langauges/bash.svg"
 import PythonIcon from "../../../../public/docker_langauges/python.svg"
@@ -17,80 +15,66 @@ import NodeIcon from "../../../../public/docker_langauges/node-js.svg"
 import HaskellIcon from "../../../../public/docker_langauges/haskell.svg"
 import Custom from "../../../../public/docker_langauges/custom.svg"
 
-const UploadBtn: React.FC<{ form: FormInstance; fieldName: string; textFieldProps?: TextAreaProps; disabled?: boolean }> = ({ form, fieldName, disabled }) => {
-  const handleFileUpload = (file: File) => {
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      const contents = e.target?.result as string
-      form.setFieldValue(fieldName, contents)
-    }
-    reader.readAsText(file)
-    // Prevent default upload action
-    return false
-  }
 
-  return (
-    <>
-      <div style={{ marginTop: "8px", display: "flex", justifyContent: "flex-end" }}>
-        <Upload
-          showUploadList={false}
-          beforeUpload={handleFileUpload}
-          disabled={disabled}
-        >
-          <Button
-            disabled={disabled}
-            icon={<InboxOutlined />}
-          >
-            Upload
-          </Button>
-        </Upload>
-      </div>
-    </>
-  )
+type DockerLanguage = "bash" | "python" | "node" | "haskell" | "custom"
+const languageOptions: Record<DockerLanguage, string> = {
+  bash: "fedora",
+  python: "python",
+  node: "node",
+  haskell: "haskell",
+  custom: ""
 }
 
-interface Script {
-  displayName: string;
-  image: string;
-  icon: string;
+const imageToLanguage: Record<string, DockerLanguage> = {
+  fedora: "bash",
+  python: "python",
+  node: "node",
+  haskell: "haskell",
 }
 
-interface ScriptCollection {
-  [key: string]: Script;
-}
 
-export const languageOptions: ScriptCollection = {
-  "bash": { displayName: "Bash", image: "fedora", icon: BashIcon },
-  "python": { displayName: "Python", image: "python", icon: PythonIcon },
-  "javascript": { displayName: "Javascript (node)", image: "node", icon: NodeIcon },
-  "haskell": { displayName: "Haskell", image: "haskell", icon: HaskellIcon },
-  "custom": { displayName: "Custom", image: "", icon: Custom }
-}
-
-export function imageToLanguage(script: string): string {
-  for(const language in languageOptions) {
-    if(script === languageOptions[language].image) {
-      return language
-    }
+const languagesSelectorItems:SelectProps["options"] = [
+  {
+    label:  <><img src={BashIcon} className="select-icon" />Bash</>,
+    value: "bash",
+  },{
+    label:  <><img src={PythonIcon} className="select-icon" />Python</>,
+    value: "python",
+  }, {
+    label:  <><img src={NodeIcon} className="select-icon" />NodeJS</>,
+    value: "node",
+  }, {
+    label:  <><img src={HaskellIcon} className="select-icon" />Haskell</>,
+    value: "haskell",
+  }, {
+    label:  <><img src={Custom} className="select-icon" />Custom</>,
+    value: "custom",
   }
-  return ""
-}
+]
+
 
 
 const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
   const { t } = useTranslation()
-  const {message} = useAppApi()
-  const [withTemplate, setWithTemplate] = useState<boolean>(true)
-  const [selectedLanguage, setSelectedLanguage] = useState<string>("bash")
+  const { message } = useAppApi()
   const dockerImage = Form.useWatch("dockerImage", form)
+  const dockerTemplate = Form.useWatch("dockerTemplate", form)
+  const dockerMode = Form.useWatch("dockerMode", form)
 
   const dockerDisabled = !dockerImage?.length
 
-    useEffect(() =>  {
 
+  const withTemplate = (dockerMode === null && !!dockerTemplate?.length) || !!dockerMode
+
+ 
+    useEffect(() =>  {
+      
         form.validateFields(["dockerScript", "dockerTemplate"])
     }, [dockerDisabled])
 
+    
+  const dockerImageSelect= useMemo(()=>  imageToLanguage[dockerImage] || "custom",[dockerImage])
+
   function isValidTemplate(template: string): string {
     if (template.length === 0) {
       return t("project.tests.dockerTemplateValidation.emptyTemplate")
@@ -118,7 +102,7 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           const isDescription = line.length >= 13 && line.substring(0, 13).toLowerCase() === ">description="
           // option lines
           if (line.toLowerCase() !== ">required" && line.toLowerCase() !== ">optional" && !isDescription) {
-            return t("project.tests.dockerTemplateValidation.inValidOptions", { line:lineNumber.toString() })
+            return t("project.tests.dockerTemplateValidation.inValidOptions", { line: lineNumber.toString() })
           }
         } else {
           isConfigurationLine = false
@@ -131,74 +115,47 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
     return ""
   }
 
-
   const normFile = (e: any) => {
     if (Array.isArray(e)) {
-      return e;
+      return e
     }
-    return e?.fileList;
-  };
+    return e?.fileList
+  }
 
-  let switchClassName = 'template-switch'
+  let switchClassName = "template-switch"
   let scriptPlaceholder
 
   if (withTemplate) {
-    switchClassName += ' template-switch-active'
-    scriptPlaceholder = "bash /shared/input/helloworld.sh > \"/shared/output/helloWorldTest\"\n"+
-    "bash /shared/input/helloug.sh > \"/shared/output/helloUGent\"\n"
+    switchClassName += " template-switch-active"
+    scriptPlaceholder = 'bash /shared/input/helloworld.sh > "/shared/output/helloWorldTest"\n' + 'bash /shared/input/helloug.sh > "/shared/output/helloUGent"\n'
   } else {
-    switchClassName += ' template-switch-inactive'
-    scriptPlaceholder = "output=$(bash /shared/input/helloworld.sh)\n"+
-    "if [[ \"$output\" == \"Hello World\" ]]; then \n"+
-    "  echo 'Test one is successful\n"+
-    "  echo 'PUSH ALLOWED' > /shared/output/testOutput\n"+
-    "else\n"+
-    "  echo 'Test one failed: script failed to print \"Hello World\"'\n"+
-    "fi"
+    switchClassName += " template-switch-inactive"
+    scriptPlaceholder = "output=$(bash /shared/input/helloworld.sh)\n" + 'if [[ "$output" == "Hello World" ]]; then \n' + "  echo 'Test one is successful\n" + "  echo 'PUSH ALLOWED' > /shared/output/testOutput\n" + "else\n" + "  echo 'Test one failed: script failed to print \"Hello World\"'\n" + "fi"
   }
+  
 
   return (
     <>
       <Form.Item
-          label={
-            <MarkdownTooltip
-                label={"Docker Image"}
-                tooltipContent={t("project.tests.dockerImageTooltip")}
-                placement="right"
-            />
-          }
-          name="dockerImage"
+        label={
+          <MarkdownTooltip
+            label={"Docker Image"}
+            tooltipContent={t("project.tests.dockerImageTooltip")}
+            placement="right"
+          />
+        }
+        name="dockerImage"
       >
-        <Input.Group compact>
-          <Form.Item
-              name="languageSelect"
-              noStyle
-          >
+        <Input
+          addonBefore={
             <Select
-                defaultValue={Object.keys(languageOptions)[0]}
-                onChange={(val) => form.setFieldValue( "dockerImage", languageOptions[val].image)}
-                style={{ width: '30%' }}
-            >
-              {Object.keys(languageOptions).map((key) => (
-                  <Select.Option key={key} value={key}>
-            <span style={{ marginRight: 8 }}>
-              <img src={languageOptions[key].icon} alt={languageOptions[key].displayName} style={{ height: '16px', verticalAlign: 'middle' }} />
-            </span>
-                    {languageOptions[key].displayName}
-                  </Select.Option>
-              ))}
-            </Select>
-          </Form.Item>
-          <Form.Item
-              name="dockerImage"
-              noStyle
-          >
-            <Input
-                style={{ width: '70%' }}
-                placeholder={t("project.tests.dockerImagePlaceholder")}
-            />
-          </Form.Item>
-        </Input.Group>
+              style={{ width: 150 }}
+              value={dockerImageSelect}
+              onChange={(val:DockerLanguage) => form.setFieldValue("dockerImage", languageOptions[val])}
+              options={languagesSelectorItems}
+            />}
+          placeholder={t("project.tests.dockerImagePlaceholder")}
+        />
       </Form.Item>
       <>
         <Form.Item
@@ -215,7 +172,7 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           <TextArea
             disabled={dockerDisabled}
             autoSize={{ minRows: 8 }}
-            style={{ fontFamily: "monospace", whiteSpace: "pre", overflowX: "auto"}}
+            style={{ fontFamily: "monospace", whiteSpace: "pre", overflowX: "auto" }}
             placeholder={scriptPlaceholder}
           />
         </Form.Item>
@@ -248,20 +205,25 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
           <Button disabled={dockerDisabled} icon={<UploadOutlined />}>Upload test directory (zip)</Button>
         </Upload>
       </Form.Item>
+        {/* <UploadBtn
+          form={form}
+          disabled={dockerDisabled}
+          fieldName="dockerScript"
+        /> */}
         <div style={{ paddingBottom: '14px'}}>
+          <Form.Item name="dockerMode" label="" valuePropName="checked">
+
           <Switch
-              checked={withTemplate}
               checkedChildren={t("project.tests.templateMode")}
               unCheckedChildren={t("project.tests.simpleMode")}
-              onChange={setWithTemplate}
               className={switchClassName}
-          />
+              />
+              </Form.Item>
         </div>
 
-        {withTemplate ?
-            <div>
-              <MarkdownTextfield content={t("project.tests.templateModeInfo")} />
-
+        
+          <div style={withTemplate ? {} : {display: "none"}}>
+            <MarkdownTextfield content={t("project.tests.templateModeInfo")} />
 
             <Form.Item
                 label={t("project.tests.dockerTemplate")}
@@ -270,7 +232,7 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
                   {
                     validator: (_, value) => {
                       value ??= ""
-                      if (dockerDisabled) {
+                      if (dockerDisabled || !withTemplate) {
                         return Promise.resolve()
                       }
                       const errorMessage = isValidTemplate(value)
@@ -286,14 +248,22 @@ const DockerFormTab: FC<{ form: FormInstance }> = ({ form }) => {
                   style={{fontFamily: "monospace", whiteSpace: "pre", overflowX: "auto"}}
                   placeholder={"@helloWorldTest\n>required\n>description=\"This is a test\"\nExpected output 1\n\n@helloUGent\n>optional\nExpected output 2\n"}
               />
-            </Form.Item> </div>: <Form.Item
-          name="simpleMode"
-          children={<MarkdownTextfield content={t("project.tests.simpleModeInfo")} />}
+                {/*<UploadBtn
+                  form={form}
+                  disabled={dockerDisabled}
+                  fieldName="dockerTemplate"
+              />*/}
+            </Form.Item> 
+          </div> 
+
+          <Form.Item
+            name="simpleMode"
             rules={[{ required: false}]}
-        />}
+            style={withTemplate ? {display: "none"} : {}}
+          ><MarkdownTextfield content={t("project.tests.simpleModeInfo")} /></Form.Item>
       </>
     </>
   )
 }
 
-export default DockerFormTab
+export default DockerFormTab
\ No newline at end of file
diff --git a/frontend/src/components/forms/projectFormTabs/GeneralFormTab.tsx b/frontend/src/components/forms/projectFormTabs/GeneralFormTab.tsx
index 37d1357d..df5ca7c5 100644
--- a/frontend/src/components/forms/projectFormTabs/GeneralFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/GeneralFormTab.tsx
@@ -2,106 +2,88 @@ import { DatePicker, Form, FormInstance, Input, Switch, Typography } from "antd"
 import { useTranslation } from "react-i18next"
 import { FC } from "react"
 import MarkdownEditor from "../../input/MarkdownEditor"
-import dayjs from 'dayjs';
+import dayjs from "dayjs"
 
 const GeneralFormTab: FC<{ form: FormInstance }> = ({ form }) => {
-    const { t } = useTranslation()
-    const description = Form.useWatch("description", form)
-    const visible = Form.useWatch("visible", form)
+  const { t } = useTranslation()
+  const description = Form.useWatch("description", form)
+  const visible = Form.useWatch("visible", form)
 
-    return (
-        <>
-            <Form.Item
-                label={t("project.change.name")}
-                name="name"
-                rules={[{ required: true, message: t("project.change.nameMessage") }]}
-            >
-                <Input />
-            </Form.Item>
+  return (
+    <>
+      <Form.Item
+        label={t("project.change.name")}
+        name="name"
+        rules={[{ required: true, message: t("project.change.nameMessage") }]}
+      >
+        <Input />
+      </Form.Item>
 
-            <Typography.Text>
-                {t("project.change.description")}
-            </Typography.Text>
-            <MarkdownEditor value={description} maxLength={5000} />
+      <Typography.Text>{t("project.change.description")}</Typography.Text>
+      <MarkdownEditor
+        value={description}
+        maxLength={5000}
+      />
 
-            <Form.Item
-                label={t("project.change.visible")}
-                required
-                name="visible"
-                valuePropName="checked"
-            >
-                <Switch />
-            </Form.Item>
+      <Form.Item
+        label={t("project.change.visible")}
+        required
+        name="visible"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
 
-            {!visible && (
-                <Form.Item
-                    label={t("project.change.visibleAfter")}
-                    tooltip={t("project.change.visibleAfterTooltip")}
-                    name="visibleAfter"
-                >
-                    <DatePicker
-                        showTime
-                        format="YYYY-MM-DD HH:mm:ss"
-                        allowClear={true}
-                        disabledDate={(current) => current && current.isBefore(dayjs().startOf('day'))}
-                        />
-                </Form.Item>
-            )}
+      {!visible && (
+        <Form.Item
+          label={t("project.change.visibleAfter")}
+          tooltip={t("project.change.visibleAfterTooltip")}
+          name="visibleAfter"
+        >
+          <DatePicker
+            showTime
+            format="YYYY-MM-DD HH:mm:ss"
+            allowClear={true}
+            disabledDate={(current) => current && current.isBefore(dayjs().startOf("day"))}
+          />
+        </Form.Item>
+      )}
 
-            <Form.Item
-                label={t("project.change.maxScore")}
-                name="maxScore"
-                tooltip={t("project.change.maxScoreHelp")}
-                rules={[{ required: false, message: t("project.change.maxScoreMessage") }]}
-            >
-                <Input
-                    min={1}
-                    max={1000}
-                    type="number"
-                />
-            </Form.Item>
+      <Form.Item
+        label={t("project.change.maxScore")}
+        name="maxScore"
+        tooltip={t("project.change.maxScoreHelp")}
+        rules={[{ required: false, message: t("project.change.maxScoreMessage") }]}
+      >
+        <Input
+          min={1}
+          max={1000}
+          type="number"
+        />
+      </Form.Item>
 
-            <Form.Item
-                label={t("project.change.deadline")}
-                name="deadline"
-                rules={[{ required: true }]}
-                >
-                <DatePicker
-                    showTime={{
-                        format: "HH:mm:ss",
-                        disabledHours: () => {
-                          const hours = [];
-                          for (let i = 0; i < dayjs().hour(); i++) {
-                            hours.push(i);
-                          }
-                          return hours;
-                        },
-                        disabledMinutes: (selectedHour) => {
-                          const minutes = [];
-                          if (selectedHour === dayjs().hour()) {
-                            for (let i = 0; i < dayjs().minute(); i++) {
-                              minutes.push(i);
-                            }
-                          }
-                          return minutes;
-                        },
-                        disabledSeconds: (selectedHour, selectedMinute) => {
-                          const seconds = [];
-                          if (selectedHour === dayjs().hour() && selectedMinute === dayjs().minute()) {
-                            for (let i = 0; i < dayjs().second(); i++) {
-                              seconds.push(i);
-                            }
-                          }
-                          return seconds;
-                        },
-                      }}
-                    format="YYYY-MM-DD HH:mm:ss"
-                    disabledDate={(current) => current && current.isBefore(dayjs().startOf('day'))}
-
-                />
-            </Form.Item>
-        </>
-    )
+      <Form.Item
+        label={t("project.change.deadline")}
+        name="deadline"
+        rules={[{ required: true }]}
+      >
+        <DatePicker
+          showTime={{
+            format: "HH:mm:ss",
+            disabledHours: () => {
+              const hours = []
+              for (let i = 0; i < dayjs().hour(); i++) {
+                hours.push(i)
+              }
+              return hours
+            },
+          }}
+          format="YYYY-MM-DD HH:mm:ss"
+          disabledDate={(current) => current && current.isBefore(dayjs().startOf("day"))}
+        />
+      </Form.Item>
+    </>
+  )
 }
 
 export default GeneralFormTab
diff --git a/frontend/src/pages/editProject/EditProject.tsx b/frontend/src/pages/editProject/EditProject.tsx
index d4fae3c9..7098c253 100644
--- a/frontend/src/pages/editProject/EditProject.tsx
+++ b/frontend/src/pages/editProject/EditProject.tsx
@@ -13,7 +13,8 @@ import { AppRoutes } from "../../@types/routes"
 import { ProjectContext } from "../../router/ProjectRoutes"
 import useApi from "../../hooks/useApi"
 import saveDockerForm, { DockerFormData } from "../../components/common/saveDockerForm"
-import {imageToLanguage} from "../../components/forms/projectFormTabs/DockerFormTab";
+
+type DockerStuff =  POST_Requests[ApiRoutes.PROJECT_TESTS] & {dockerMode: boolean}
 
 const EditProject: React.FC = () => {
     const [form] = Form.useForm<ProjectFormData & DockerFormData>()
@@ -25,7 +26,7 @@ const EditProject: React.FC = () => {
     const navigate = useNavigate()
     const project = useProject()
     const { updateProject } = useContext(ProjectContext)
-    const [initialDockerValues, setInitialDockerValues] = useState<POST_Requests[ApiRoutes.PROJECT_TESTS] | null>(null)
+    const [initialDockerValues, setInitialDockerValues] = useState<DockerStuff | null>(null)
     const [disabled, setDisabled] = useState(true)
 
 
@@ -35,11 +36,12 @@ const EditProject: React.FC = () => {
         setDisabled(false)
         if (!response.success) return setInitialDockerValues(null)
 
-        let formVals: POST_Requests[ApiRoutes.PROJECT_TESTS] = {
+        let formVals: DockerStuff= {
             structureTest: null,
             dockerTemplate: null,
             dockerScript: null,
             dockerImage: null,
+            dockerMode: false
         }
 
         if (response.success) {
@@ -58,15 +60,17 @@ const EditProject: React.FC = () => {
                 form.setFieldValue("dockerTestDir", uploadVal)
             }
 
+            if(tests.dockerTemplate) {
+                form.setFieldValue("dockerMode", true)
+            }
+
             formVals = {
                 structureTest: tests.structureTest ?? "",
                 dockerTemplate: tests.dockerTemplate ?? "",
                 dockerScript: tests.dockerScript ?? "",
                 dockerImage: tests.dockerImage ?? "",
+                dockerMode: !!tests.dockerTemplate
             }
-            const selectedLanguage = imageToLanguage(formVals.dockerImage ?? "")
-            formVals.dockerScript = selectedLanguage[1] // We only want the script, not the language
-            form.setFieldValue("languageSelect", selectedLanguage)
         }
 
         form.setFieldsValue(formVals)
@@ -143,6 +147,7 @@ const EditProject: React.FC = () => {
                     visibleAfter: project.visible ? null : (project.visibleAfter ? dayjs(project.visibleAfter) : null),
                     maxScore: project.maxScore,
                     deadline: dayjs(project.deadline),
+                    dockerMode: null
                 }}
                 form={form}
                 onFinishFailed={onInvalid}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8d61f9c2..9c426dcb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -181,6 +181,13 @@ html {
   
 }
 
+.select-icon {
+  width: 1em;
+  margin-right: 0.5rem;
+  position: relative;
+  top: 2px;
+}
+
 /* *************************** Landing page *************************** */
 
 .landing-page * {

From 75667d73e7ce1ee8cc09b1aca3f83d18ac4160c9 Mon Sep 17 00:00:00 2001
From: usserwoutV2 <wout.verdyck@gmail.com>
Date: Thu, 23 May 2024 00:53:22 +0200
Subject: [PATCH 10/12] Fixed requested issue (I think)

---
 frontend/src/auth/MsGraphApiCall.ts           | 29 -------------------
 .../src/components/common/saveDockerForm.tsx  |  1 -
 .../projectFormTabs/StructureFormTab.tsx      |  3 +-
 3 files changed, 1 insertion(+), 32 deletions(-)
 delete mode 100644 frontend/src/auth/MsGraphApiCall.ts

diff --git a/frontend/src/auth/MsGraphApiCall.ts b/frontend/src/auth/MsGraphApiCall.ts
deleted file mode 100644
index 3a2cc7d5..00000000
--- a/frontend/src/auth/MsGraphApiCall.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { loginRequest, graphConfig } from "./AuthConfig";
-import { msalInstance } from "../index";
-
-export async function callMsGraph() {
-    const account = msalInstance.getActiveAccount();
-    if (!account) {
-        throw Error("No active account! Verify a user has been signed in and setActiveAccount has been called.");
-    }
-
-
-    const response = await msalInstance.acquireTokenSilent({
-        ...loginRequest,
-        account: account
-    });
-
-    const headers = new Headers();
-    const bearer = `Bearer ${response.accessToken}`;
-
-    headers.append("Authorization", bearer);
-
-    const options = {
-        method: "GET",
-        headers: headers
-    };
-
-    return fetch(graphConfig.graphMeEndpoint, options)
-        .then(response => response.json())
-        .catch(error => console.log(error));
-}
\ No newline at end of file
diff --git a/frontend/src/components/common/saveDockerForm.tsx b/frontend/src/components/common/saveDockerForm.tsx
index 7ead51c5..58dedeed 100644
--- a/frontend/src/components/common/saveDockerForm.tsx
+++ b/frontend/src/components/common/saveDockerForm.tsx
@@ -61,7 +61,6 @@ const saveDockerForm = async (form: FormInstance, initialDockerValues: DockerFor
       //   "message"
       // )
     }
-    console.log(val)
   }
   return success
 }
diff --git a/frontend/src/components/forms/projectFormTabs/StructureFormTab.tsx b/frontend/src/components/forms/projectFormTabs/StructureFormTab.tsx
index 43cf0d0c..211aeed2 100644
--- a/frontend/src/components/forms/projectFormTabs/StructureFormTab.tsx
+++ b/frontend/src/components/forms/projectFormTabs/StructureFormTab.tsx
@@ -1,5 +1,4 @@
-import { Form, Input, Typography, Tooltip, Space } from "antd"
-import { QuestionCircleOutlined } from "@ant-design/icons"
+import { Form, Input, Typography } from "antd"
 import { FC } from "react"
 import SubmitStructure from "../../../pages/submit/components/SubmitStructure"
 import { useTranslation } from "react-i18next"

From c7ec782c1533c3aa652e72e70233665e848b485b Mon Sep 17 00:00:00 2001
From: usserwoutV2 <wout.verdyck@gmail.com>
Date: Thu, 23 May 2024 01:17:19 +0200
Subject: [PATCH 11/12] Attempt 2 to fix docker mode switch

---
 frontend/src/components/common/saveDockerForm.tsx  | 5 ++++-
 frontend/src/pages/projectCreate/ProjectCreate.tsx | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/saveDockerForm.tsx b/frontend/src/components/common/saveDockerForm.tsx
index 58dedeed..c7912dee 100644
--- a/frontend/src/components/common/saveDockerForm.tsx
+++ b/frontend/src/components/common/saveDockerForm.tsx
@@ -16,11 +16,14 @@ const saveDockerForm = async (form: FormInstance, initialDockerValues: DockerFor
 
   if (form.isFieldsTouched(["dockerImage", "dockerScript", "dockerTemplate", "structureTest"]) && (!initialDockerValues || initialDockerValues.dockerImage !== dockerImage || initialDockerValues.dockerScript !== dockerScript || initialDockerValues.dockerTemplate !== dockerTemplate || initialDockerValues.structureTest !== structureTest)) {
     let data: DockerFormData = form.getFieldsValue(["dockerImage", "dockerScript", "dockerTemplate", "structureTest"])
-    if(!data.dockerImage) {
+    if(!data.dockerImage?.length) {
       data.dockerScript = null
       data.dockerTemplate = null
     }
 
+    const dockerMode = form.getFieldValue("dockerMode")
+    if( !dockerMode) data.dockerTemplate = null
+
     if (!initialDockerValues) {
       // We do a POST request
       const r = await API.POST(ApiRoutes.PROJECT_TESTS, { body: data, pathValues: { id: projectId } },"message")
diff --git a/frontend/src/pages/projectCreate/ProjectCreate.tsx b/frontend/src/pages/projectCreate/ProjectCreate.tsx
index b8441a1b..c79b4801 100644
--- a/frontend/src/pages/projectCreate/ProjectCreate.tsx
+++ b/frontend/src/pages/projectCreate/ProjectCreate.tsx
@@ -82,6 +82,7 @@ const ProjectCreate: React.FC = () => {
                     visibleAfter: null,
                     maxScore: 20,
                     deadline: null,
+                    dockerMode: null,
                 }}
                 form={form}
                 onFinishFailed={onInvalid}

From 1f786b1f72661a40e667ff82246033714cafc0b5 Mon Sep 17 00:00:00 2001
From: usserwoutV2 <wout.verdyck@gmail.com>
Date: Thu, 23 May 2024 11:05:06 +0200
Subject: [PATCH 12/12] Fixed docker form not always saving

---
 .../src/components/common/saveDockerForm.tsx  | 23 +++++++++----------
 .../components/HorizontalCourseScroll.tsx     |  2 +-
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/common/saveDockerForm.tsx b/frontend/src/components/common/saveDockerForm.tsx
index c7912dee..e31c0392 100644
--- a/frontend/src/components/common/saveDockerForm.tsx
+++ b/frontend/src/components/common/saveDockerForm.tsx
@@ -1,40 +1,39 @@
-import { FormInstance, GetProp, UploadProps } from "antd"
+import { FormInstance} from "antd"
 import { ApiRoutes, POST_Requests } from "../../@types/requests.d"
 import { UseApiType } from "../../hooks/useApi"
-import apiCall from "../../util/apiFetch"
 import { RcFile } from "antd/es/upload"
 
 export type DockerFormData = POST_Requests[ApiRoutes.PROJECT_TESTS]
 type FileType = RcFile //Parameters<GetProp<UploadProps, "beforeUpload">>[0]
 
-const saveDockerForm = async (form: FormInstance, initialDockerValues: DockerFormData | null, API: UseApiType, projectId: string) => {
+const saveDockerForm = async (form: FormInstance, initialDockerValues: (DockerFormData & {dockerMode:boolean}) | null, API: UseApiType, projectId: string) => {
   const dockerImage = form.getFieldValue("dockerImage")
   const dockerScript = form.getFieldValue("dockerScript")
   const dockerTemplate = form.getFieldValue("dockerTemplate")
   const structureTest = form.getFieldValue("structureTest")
+  const dockerMode = form.getFieldValue("dockerMode")
+
   let success = true
 
-  if (form.isFieldsTouched(["dockerImage", "dockerScript", "dockerTemplate", "structureTest"]) && (!initialDockerValues || initialDockerValues.dockerImage !== dockerImage || initialDockerValues.dockerScript !== dockerScript || initialDockerValues.dockerTemplate !== dockerTemplate || initialDockerValues.structureTest !== structureTest)) {
+  if (form.isFieldsTouched(["dockerImage", "dockerScript", "dockerTemplate", "structureTest", "dockerMode"]) && (!initialDockerValues || initialDockerValues.dockerImage !== dockerImage || initialDockerValues.dockerScript !== dockerScript || initialDockerValues.dockerTemplate !== dockerTemplate || initialDockerValues.structureTest !== structureTest || initialDockerValues.dockerMode !== dockerMode)) {
     let data: DockerFormData = form.getFieldsValue(["dockerImage", "dockerScript", "dockerTemplate", "structureTest"])
-    if(!data.dockerImage?.length) {
+    if (!data.dockerImage?.length) {
       data.dockerScript = null
       data.dockerTemplate = null
     }
-
-    const dockerMode = form.getFieldValue("dockerMode")
-    if( !dockerMode) data.dockerTemplate = null
+    if (!dockerMode) data.dockerTemplate = null
 
     if (!initialDockerValues) {
       // We do a POST request
-      const r = await API.POST(ApiRoutes.PROJECT_TESTS, { body: data, pathValues: { id: projectId } },"message")
+      const r = await API.POST(ApiRoutes.PROJECT_TESTS, { body: data, pathValues: { id: projectId } }, "message")
       success &&= r.success
     } else if ((data.dockerImage == null || data.dockerImage.length === 0) && !data.structureTest?.length) {
       // We do a delete
-      const r = await API.DELETE(ApiRoutes.PROJECT_TESTS, { pathValues: { id: projectId } },"message")
+      const r = await API.DELETE(ApiRoutes.PROJECT_TESTS, { pathValues: { id: projectId } }, "message")
       success &&= r.success
     } else {
       // We do a PUT
-      const r = await API.PUT(ApiRoutes.PROJECT_TESTS, { body: data, pathValues: { id: projectId }, headers: {} },"message")
+      const r = await API.PUT(ApiRoutes.PROJECT_TESTS, { body: data, pathValues: { id: projectId }, headers: {} }, "message")
       success &&= r.success
     }
   }
@@ -49,7 +48,7 @@ const saveDockerForm = async (form: FormInstance, initialDockerValues: DockerFor
     } else {
       const formData = new FormData()
       formData.append("file", val, val.name)
-      const r = await API.PUT(ApiRoutes.PROJECT_TESTS_UPLOAD, {body: formData, pathValues: { id: projectId }}, "message")
+      const r = await API.PUT(ApiRoutes.PROJECT_TESTS_UPLOAD, { body: formData, pathValues: { id: projectId } }, "message")
       success &&= r.success
 
       // await API.PUT(
diff --git a/frontend/src/pages/index/components/HorizontalCourseScroll.tsx b/frontend/src/pages/index/components/HorizontalCourseScroll.tsx
index cf5229fa..c0c22fe2 100644
--- a/frontend/src/pages/index/components/HorizontalCourseScroll.tsx
+++ b/frontend/src/pages/index/components/HorizontalCourseScroll.tsx
@@ -55,7 +55,7 @@ const HorizontalCourseScroll: FC<{ title: string; projects: CourseProjectList |
 
       <Space
         className="small-scroll-bar"
-        style={{ display: "flex", maxWidth: "100%", overflowX: "auto", whiteSpace: "nowrap", padding: "10px 2rem", alignItems: "stretch" }}
+        style={{ display: "flex", maxWidth: "100%", overflowX: "auto", whiteSpace: "nowrap", padding: "10px 2rem", alignItems: "stretch",paddingBottom:"1rem" }}
       >
         {projects === null ? (
           <Space