Merge remote-tracking branch 'origin/main' into 48-ractivate-gunicorn

Author: xMinhx

.github/workflows/cicd-actions.yml

@@ -8,6 +8,10 @@ on:
     branches:
       - '**'
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
   DOCKER_DRIVER: overlay2
   DOCKER_TLS_CERTDIR: ""
@@ -16,7 +20,7 @@ env:
 
 jobs:
   create_dotenv_file:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -60,7 +64,7 @@ jobs:
           include-hidden-files: true
 
   testing:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     needs: create_dotenv_file
     steps:
       - name: Checkout code
@@ -114,7 +118,7 @@ jobs:
           path: backend/htmlcov
 
   cleanup:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     needs: testing
     if: always()
     steps:
@@ -133,7 +137,7 @@ jobs:
           docker compose -f docker-compose.ci.yml down
 
   build_frontend_files:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/main'
     needs: cleanup
     steps:
@@ -153,7 +157,7 @@ jobs:
           path: backend/assets/*
 
   build_and_push_container:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read
@@ -198,7 +202,7 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
 
   build_and_push_adapter:
-    runs-on: [ self-hosted ]
+    runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read

frontend/src/components/DropdownMenu.tsx

@@ -55,4 +55,4 @@ const dropdownStyle = (props: DropdownProps, backgroundColor: string) => {
     }
 }
 
-export default DropdownMenu
+export default DropdownMenu

frontend/src/components/ImageDropDown.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {colors, ListItemIcon, ListItemText, MenuItem, Select} from "@mui/material";
+import {ListItemText, MenuItem, Select} from "@mui/material";
 import KeyboardDoubleArrowDownRoundedIcon from "@mui/icons-material/KeyboardDoubleArrowDownRounded";
 import {ImageDropdownProps} from "../utilities/interfaces/ImageDropdownProps";
 
@@ -24,25 +24,22 @@ const ImageDropDown: React.FunctionComponent<ImageDropdownProps> = (props: Image
     currentValue = e.target.value;
     props.localStorageItemKey ? localStorage.setItem(props.localStorageItemKey, currentValue) : gotImageURLs = gotImageURLs /* Do nothing */;
     currentIndex = props.values.indexOf(currentValue);
-    setText(props.texts[currentIndex]);
+    const currText = props.texts[currentIndex]
+    setText(currText);
     props.imageURLs ? setImageURL(props.imageURLs[currentIndex]) : setImageURL("");
     props.colors ? setBackgroundColor(props.colors[currentIndex]) : setBackgroundColor(currentBackgroundColor);
+    props.onSelectionChange?.(currText, currentValue)
   }
 
   return (
       <Select
           sx={imageDropDownStyle(currentBackgroundColor)}
           IconComponent={KeyboardDoubleArrowDownRoundedIcon}
           onChange={handleChange}
-          value={props.texts}
-          renderValue={() => (
-              <MenuItem sx={menuItemStyle} value={currentValue}>
-                <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={currentText}/>
-              </MenuItem>
-          )}
+          value={currentValue}
       >
-        {props.texts.map((value) => (
-            <MenuItem sx={menuItemStyle} value={props.values[props.texts.indexOf(value)]}>
+        {props.texts.map((value, index) => (
+            <MenuItem key={value} sx={menuItemStyle} value={props.values[index]}>
               <ListItemText sx={visibleElement(!showImagesOnly)} style={{textAlign:"left"}} primary={value}/>
             </MenuItem>
         ))}

frontend/src/components/LoginBox.tsx

@@ -41,7 +41,7 @@ const LoginBox: React.FunctionComponent = () => {
                     username: username,
                     password: password,
                     keepMeLoggedIn: stayLoggedIn,
-                }).then(navigateAfterLogin).catch(() => {
+                }).then(reloadPage).catch(() => {
                     notification.error(localization.notificationMessage.incorrectLogin)
                 })
             } else {
@@ -50,7 +50,7 @@ const LoginBox: React.FunctionComponent = () => {
         }
     }
 
-    const navigateAfterLogin = () => {
+    const reloadPage = () => {
         window.location.reload();
     }
 
@@ -64,6 +64,7 @@ const LoginBox: React.FunctionComponent = () => {
                                imagesOnly={false}
                                localStorageItemKey={localStorageItemKeys.selectedLanguage}
                                defaultIndex={defaultLanguageIndex != -1 ? defaultLanguageIndex : 0}
+                               onSelectionChange={reloadPage}
                 />
         </Stack>
         <Stack sx={headlineContainer}>

frontend/src/utilities/interfaces/ImageDropdownProps.tsx

@@ -39,4 +39,8 @@ export interface ImageDropdownProps {
      * Show images only (no text)
      */
     imagesOnly?: boolean
+    /**
+     * Triggered whenever the selection changes
+     */
+    onSelectionChange?: (text: string, value: string) => void
 }