Merge pull request #4679 from UniversityOfHelsinkiCS/material-ui-fron…

…tpage

Material UI: Front page

services/backend/src/routes/changelog.ts

@@ -2,39 +2,44 @@ import axios from 'axios'
 import { Request, Response, Router } from 'express'
 
 import { isDev } from '../config'
+import { Release } from '../shared/types'
 
 const router = Router()
 
-type ChangeLogData = {
-  description: string
-  time: Date
-  title: string
-}
-
-const changelog: { data?: ChangeLogData[] } = {}
+const changelog: { data?: Release[] } = {}
 
 router.get('/', async (_req: Request, res: Response) => {
   if (changelog.data) {
     return res.status(200).send(changelog.data)
   }
   if (isDev) {
-    const fakeChangeLogData: ChangeLogData[] = [
+    const fakeRelease: Release[] = [
+      {
+        description: '**Feature 1**\n- Added a fancy new feature \n\n**Feature 2**\n- Fixed a bug\n- Fixed another bug',
+        title: 'Release 1',
+        time: new Date().toISOString(),
+      },
+      {
+        description: "Let's not spam the GitHub API in development!",
+        title: 'Release 2',
+        time: new Date().toISOString(),
+      },
       {
-        description: "### Fake release\nLet's not spam the GitHub API in development!",
-        title: 'Fake title for fake release',
-        time: new Date(),
+        description: 'This release should not be visible on the frontpage',
+        title: 'Release 3',
+        time: new Date().toISOString(),
       },
     ]
-    return res.status(200).json(fakeChangeLogData)
+    return res.status(200).json(fakeRelease)
   }
   const response = await axios.get('https://api.github.com/repos/UniversityOfHelsinkiCS/oodikone/releases')
-  const newChangelogData = response.data.map((release: Record<string, any>) => ({
+  const releasesFromAPI: Release[] = response.data.map((release: Record<string, any>) => ({
     description: release.body,
     time: release.created_at,
     title: release.name,
   }))
-  changelog.data = newChangelogData
-  res.status(200).send(newChangelogData)
+  changelog.data = releasesFromAPI
+  res.status(200).json(releasesFromAPI)
 })
 
 export default router

services/frontend/src/common/index.js

@@ -434,7 +434,10 @@ export const getEnrollmentTypeTextForExcel = (type, statutoryAbsence) => {
 }
 
 export const isDefaultServiceProvider = () => {
-  return serviceProvider && serviceProvider === 'toska'
+  if (!serviceProvider) {
+    return false
+  }
+  return serviceProvider === 'toska'
 }
 
 export const formatContent = content => content.replace(/\n +/g, '\n')
@@ -447,3 +450,14 @@ export const getCalendarYears = years => {
     return all.concat(Number(year.slice(0, 4)))
   }, [])
 }
+
+export const filterInternalReleases = release => !release.title.startsWith('Internal:')
+
+export const getDescription = description => {
+  const lines = description.split('\n')
+  const internalIndex = lines.findIndex(line => line.toLowerCase().includes('internal'))
+  if (internalIndex === -1 || internalIndex === 0) {
+    return description
+  }
+  return lines.slice(0, internalIndex).join('\n')
+}

services/frontend/src/components/Routes/index.jsx

@@ -10,7 +10,6 @@ import { CustomPopulation } from '@/components/CustomPopulation'
 import { EvaluationOverview } from '@/components/EvaluationOverview'
 import { UniversityViewPage } from '@/components/EvaluationOverview/UniversityView'
 import { FacultyStatistics } from '@/components/FacultyStatistics'
-import { FrontPage } from '@/components/Frontpage'
 import { LanguageCenterView } from '@/components/LanguageCenterView'
 import { PopulationStatistics } from '@/components/PopulationStatistics'
 import { SegmentDimmer } from '@/components/SegmentDimmer'
@@ -21,7 +20,9 @@ import { Teachers } from '@/components/Teachers'
 import { Updater } from '@/components/Updater'
 import { Users } from '@/components/Users'
 import { languageCenterViewEnabled } from '@/conf'
+import { Changelog } from '@/pages/Changelog'
 import { Feedback } from '@/pages/Feedback'
+import { FrontPage } from '@/pages/FrontPage'
 import { ProtectedRoute } from './ProtectedRoute'
 
 const routes = {
@@ -43,12 +44,14 @@ const routes = {
   closeToGraduation: '/close-to-graduation',
   populations: '/populations',
   studyProgramme: '/study-programme/:studyProgrammeId?',
+  changelog: '/changelog',
 }
 
 export const Routes = () => (
   <Suspense fallback={<SegmentDimmer isLoading />}>
     <Switch>
       <Route component={FrontPage} exact path="/" />
+      <Route component={Changelog} exact path={routes.changelog} />
       {isDefaultServiceProvider() && <Route component={Feedback} exact path={routes.feedback} />}
       <ProtectedRoute
         component={PopulationStatistics}

services/frontend/src/components/material/PageTitle/index.tsx

@@ -1,16 +1,22 @@
-import { Box, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 
 /**
  * A title text displayed at the top of the page.
  *
+ * @param {string} [subtitle] - The subtitle of the page.
  * @param {string} title - The main title of the page.
  */
-export const PageTitle = ({ title }: { title: string }) => {
+export const PageTitle = ({ subtitle, title }: { subtitle?: string; title: string }) => {
   return (
-    <Box my={3}>
+    <Stack sx={{ gap: 1, my: 3, textAlign: 'center' }}>
       <Typography component="h1" variant="h4">
         {title}
       </Typography>
-    </Box>
+      {subtitle && (
+        <Typography color="text.secondary" component="h2" variant="h6">
+          {subtitle}
+        </Typography>
+      )}
+    </Stack>
   )
 }

services/frontend/src/conf.js

@@ -13,9 +13,6 @@ export const runningInCypress = typeof window !== 'undefined' && !!window.Cypres
 export const basePath = process.env.PUBLIC_URL || ''
 export const apiBasePath = `${basePath}/api`
 
-// Update time for frontpage
-export const builtAt = process.env.REACT_APP_BUILT_AT || ''
-
 // Service provider depending this hiding some not needed features default value toska
 export const serviceProvider = process.env.REACT_APP_SERVICE_PROVIDER
   ? process.env.REACT_APP_SERVICE_PROVIDER.toLowerCase()

services/frontend/src/pages/Changelog/ReleaseCard.tsx

@@ -0,0 +1,21 @@
+import { Card, Typography } from '@mui/material'
+import ReactMarkdown from 'react-markdown'
+
+import { getDescription } from '@/common'
+import { DISPLAY_DATE_FORMAT } from '@/constants/date'
+import { Release } from '@/shared/types'
+import { reformatDate } from '@/util/timeAndDate'
+
+export const ReleaseCard = ({ isLoading, release }: { isLoading: boolean; release: Release }) => {
+  return (
+    <Card elevation={1} sx={{ padding: 2 }} variant="outlined">
+      <Typography component="h4" sx={{ mb: 1 }} variant="h6">
+        {isLoading ? 'Loading title...' : release.title}
+      </Typography>
+      <Typography component="p" sx={{ color: 'text.secondary', mb: 2 }} variant="caption">
+        {isLoading ? 'Loading date...' : `Released on ${reformatDate(release.time, DISPLAY_DATE_FORMAT)}`}
+      </Typography>
+      <ReactMarkdown>{isLoading ? 'Loading description...' : getDescription(release.description)}</ReactMarkdown>
+    </Card>
+  )
+}