Merge pull request #4875 from UniversityOfHelsinkiCS/OOD-90-config-json

[FRONTEND] OOD-90: fetching frontend config from json

Author: santeri0200

services/frontend/public/frontend-config.json

@@ -0,0 +1 @@
+{ "sisUrl": "https://sis-qa.funidata.fi" }

services/frontend/src/components/common/SisuLinkItem.tsx

@@ -1,15 +1,37 @@
+import { useState, useEffect } from 'react'
 import { Icon, Item } from 'semantic-ui-react'
-import { sisUrl } from '@/conf'
+import { sisUrl, serviceProvider } from '@/conf'
 
 interface SisuLinkItemProps {
   id: string
 }
 
-export const SisuLinkItem = ({ id }: SisuLinkItemProps) => (
-  <div data-cy="sisulink">
-    <Item as="a" href={`${sisUrl}/tutor/role/staff/student/${id}/basic/basic-info`} target="_blank">
-      <Icon name="external alternate" />
-      Sisu
-    </Item>
-  </div>
-)
+export const SisuLinkItem = ({ id }: SisuLinkItemProps) => {
+  const [runtimeConfiguredSisUrl, setRuntimeConfiguredSisUrl] = useState(sisUrl)
+  useEffect(() => {
+    fetch('/frontend-config.json')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Json response was not ok')
+        }
+        return response.json()
+      })
+      .then(data => {
+        if (data.sisUrl) setRuntimeConfiguredSisUrl(data.sisUrl)
+      })
+      .catch(error => {
+        throw new Error(error)
+      })
+  }, [])
+
+  const usableSisUrl = serviceProvider === 'fd' ? runtimeConfiguredSisUrl : sisUrl
+
+  return (
+    <div data-cy="sisulink">
+      <Item as="a" href={`${usableSisUrl}/tutor/role/staff/student/${id}/basic/basic-info`} target="_blank">
+        <Icon name="external alternate" />
+        Sisu
+      </Item>
+    </div>
+  )
+}

services/frontend/src/components/material/StudentInfoItem.tsx

@@ -3,19 +3,42 @@ import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 
+import { useState, useEffect } from 'react'
 import { Link } from 'react-router'
 
-import { sisUrl } from '@/conf'
+import { sisUrl, serviceProvider } from '@/conf'
 import { ExternalLink } from './ExternalLink'
 
-export const StudentInfoItem = ({ sisPersonId, studentNumber }: { sisPersonId: string; studentNumber: string }) => (
-  <Stack direction="row" justifyContent="space-between">
-    <Typography component="span" sx={{ alignContent: 'center', padding: '0 0.25em' }} variant="body2">
-      {studentNumber}
-    </Typography>
-    <IconButton component={Link} target="_blank" to={`/students/${studentNumber}`}>
-      <PersonIcon color="primary" fontSize="small" />
-    </IconButton>
-    <ExternalLink href={`${sisUrl}/tutor/role/staff/student/${sisPersonId}/basic/basic-info`} text="Sisu" />
-  </Stack>
-)
+export const StudentInfoItem = ({ sisPersonId, studentNumber }: { sisPersonId: string; studentNumber: string }) => {
+  const [runtimeConfiguredSisUrl, setRuntimeConfiguredSisUrl] = useState(sisUrl)
+
+  useEffect(() => {
+    fetch('/frontend-config.json')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Json response was not ok')
+        }
+        return response.json()
+      })
+      .then(data => {
+        if (data.sisUrl) setRuntimeConfiguredSisUrl(data.sisUrl)
+      })
+      .catch(error => {
+        throw new Error(error)
+      })
+  }, [])
+
+  const usableSisUrl = serviceProvider === 'fd' ? runtimeConfiguredSisUrl : sisUrl
+
+  return (
+    <Stack direction="row" justifyContent="space-between">
+      <Typography component="span" sx={{ alignContent: 'center', padding: '0 0.25em' }} variant="body2">
+        {studentNumber}
+      </Typography>
+      <IconButton component={Link} target="_blank" to={`/students/${studentNumber}`}>
+        <PersonIcon color="primary" fontSize="small" />
+      </IconButton>
+      <ExternalLink href={`${usableSisUrl}/tutor/role/staff/student/${sisPersonId}/basic/basic-info`} text="Sisu" />
+    </Stack>
+  )
+}

services/frontend/src/pages/Students/StudentDetails/StudentInfoCard.tsx

@@ -6,22 +6,43 @@ import CardContent from '@mui/material/CardContent'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 
+import { useState, useEffect } from 'react'
+
 import { callApi } from '@/apiConnection'
 import { ExternalLink } from '@/components/material/ExternalLink'
 import { useStudentNameVisibility } from '@/components/material/StudentNameVisibilityToggle'
-import { sisUrl } from '@/conf'
+import { sisUrl, serviceProvider } from '@/conf'
 import { DateFormat } from '@/constants/date'
 import { useGetAuthorizedUserQuery } from '@/redux/auth'
 import { reformatDate } from '@/util/timeAndDate'
 import { StudentPageStudent } from '@oodikone/shared/types/studentData'
 import { EnrollmentAccordion } from './EnrollmentAccordion'
 
 export const StudentInfoCard = ({ student }: { student: StudentPageStudent }) => {
+  const [runtimeConfiguredSisUrl, setRuntimeConfiguredSisUrl] = useState(sisUrl)
   const { visible: showName } = useStudentNameVisibility()
   const { isAdmin } = useGetAuthorizedUserQuery()
   const name = showName ? `${student.name}, ` : ''
   const email = showName && student.email ? `${student.email}` : ''
 
+  useEffect(() => {
+    fetch('/frontend-config.json')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Json response was not ok')
+        }
+        return response.json()
+      })
+      .then(data => {
+        if (data.sisUrl) setRuntimeConfiguredSisUrl(data.sisUrl)
+      })
+      .catch(error => {
+        throw new Error(error)
+      })
+  }, [])
+
+  const usableSisUrl = serviceProvider === 'fd' ? runtimeConfiguredSisUrl : sisUrl
+
   const formattedTimestamp = reformatDate(
     student.updatedAt,
     isAdmin ? DateFormat.DISPLAY_DATE_DEV : DateFormat.DISPLAY_DATE
@@ -41,7 +62,7 @@ export const StudentInfoCard = ({ student }: { student: StudentPageStudent }) =>
             </Typography>
             <ExternalLink
               cypress="sisu-link"
-              href={`${sisUrl}/tutor/role/staff/student/${student.sisPersonId}/basic/basic-info`}
+              href={`${usableSisUrl}/tutor/role/staff/student/${student.sisPersonId}/basic/basic-info`}
               text="Sisu"
               variant="h6"
             />