[Manage courses shown] Clarify in modal what it does

services/frontend/src/components/PopulationComponents/PopulationCourses/FilterDegreeCoursesModal.tsx

@@ -3,35 +3,30 @@ import Button from '@mui/material/Button'
 import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import DialogTitle from '@mui/material/DialogTitle'
-import { useState, Fragment } from 'react'
+import { useState } from 'react'
 
 import { DegreeCoursesTab } from '@/pages/StudyProgramme/DegreeCoursesTab'
 import { VisibilityIcon } from '@/theme'
+import { ManageCoursesShownInfo } from '@/pages/StudyProgramme/DegreeCoursesTab/InfoBox'
 
 export const FilterDegreeCoursesModal = ({ degreeProgramme }: { degreeProgramme: string }) => {
-  const [open, setOpen] = useState(false)
-
-  const setModalOpenState = (state: boolean) => setOpen(state)
+  const [modalOpen, setModalOpen] = useState(false)
 
   return (
-    <Fragment>
-      <Button onClick={() => setModalOpenState(true)} startIcon={<VisibilityIcon />} variant="outlined">
+    <>
+      <Button onClick={() => setModalOpen(true)} startIcon={<VisibilityIcon />} variant="outlined">
         Manage Courses Shown
       </Button>
-      <Dialog className="MyDialogThings" maxWidth="md" onClose={() => setModalOpenState(false)} open={open}>
-        <DialogTitle>Hide degree courses</DialogTitle>
-        <DialogContent className="MyDialogContent">
+      <Dialog maxWidth="md" onClose={() => setModalOpen(false)} open={modalOpen}>
+        <DialogTitle>Degree programme settings</DialogTitle>
+        <DialogContent>
+          <ManageCoursesShownInfo />
           <DegreeCoursesTab combinedProgramme="" degreeProgramme={degreeProgramme} />
-          <Button
-            color="primary"
-            onClick={() => setModalOpenState(false)}
-            style={{ marginTop: '10px' }}
-            variant="contained"
-          >
+          <Button color="primary" onClick={() => setModalOpen(false)} style={{ marginTop: '10px' }} variant="contained">
             Close
           </Button>
         </DialogContent>
       </Dialog>
-    </Fragment>
+    </>
   )
 }

services/frontend/src/pages/StudyProgramme/DegreeCoursesTab/InfoBox.tsx

@@ -0,0 +1,18 @@
+import { StyledMessage } from '@/components/common/StyledMessage'
+import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+
+const textContent = {
+  fi: `Nämä asetukset eivät ole henkilökohtaisia.
+ Esim. kurssin tai moduulin piilottaminen piilottaa sen myös muilta Oodikoneen käyttäjiltä.`,
+  en: `These settings are non-personal.
+  Example: hiding a course or a module will also hide it from other Oodikone users.`,
+}
+
+export const ManageCoursesShownInfo = () => {
+  const { getTextIn } = useLanguage()
+  return (
+    <StyledMessage showIcon variant="outlined" severity="info" sx={{ mb: 2, maxWidth: '100%' }}>
+      {getTextIn(textContent)}
+    </StyledMessage>
+  )
+}