Merge pull request #4748 from UniversityOfHelsinkiCS/material-ui-stud…

…y-programme-update-statistics

Material UI: Study programme overview - Update statistics tab

cypress/e2e/Population_statistics.js

@@ -354,7 +354,7 @@ describe('Population statistics tests', () => {
           cy.contains('Tags').click()
           cy.contains('No tags defined. You can define them here.').find('a').click()
         })
-        cy.url().should('include', '/study-programme/KH50_001?p_m_tab=0&p_tab=4')
+        cy.url().should('include', '/study-programme/KH50_001?tab=4')
         cy.contains('Matemaattisten tieteiden kandiohjelma')
         cy.contains('Create tags for study programme')
         cy.contains('button', 'Create a new tag').should('be.disabled')

cypress/e2e/Study_programme_overview.js

@@ -37,7 +37,7 @@ describe('Study programme overview', () => {
     })
   })
 
-  describe('Basic information view works for basic user', () => {
+  describe('Basic information tab works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
       cy.contains('a', 'Matemaattisten tieteiden kandiohjelma').click({ force: true })
@@ -261,15 +261,15 @@ describe('Study programme overview', () => {
     })
   })
 
-  describe('Study track overview works for basic user', () => {
+  describe('Study tracks and class statistics tab works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
       cy.contains('a', 'Matemaattisten tieteiden kandiohjelma').click()
-      cy.get('.attached').contains('Study tracks and class statistics').click()
+      cy.cs('study-tracks-and-class-statistics-tab').click()
     })
 
     // If the backend breaks for one of the sections, the section header is not rendered and this will fail
-    it('Study tracks and class statistics -tab loads', () => {
+    it('Study tracks and class statistics', () => {
       cy.get('[data-cy=Section-studyTrackOverview]')
       cy.get('[data-cy=Section-studyTrackProgress]')
       cy.get('[data-cy=Section-averageGraduationTimesStudyTracks]')
@@ -494,11 +494,11 @@ describe('Study programme overview', () => {
     })
   })
 
-  describe('Programme courses works for basic user', () => {
+  describe('Programme courses tab works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
       cy.contains('a', 'Matemaattisten tieteiden kandiohjelma').click()
-      cy.get('.attached').contains('Programme courses').click()
+      cy.cs('programme-courses-tab').click()
     })
 
     it('content loads', () => {
@@ -681,11 +681,11 @@ describe('Study programme overview', () => {
     })
   })
 
-  describe('Degree courses works for basic user', () => {
+  describe('Degree courses tab works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
       cy.contains('a', 'Matemaattisten tieteiden kandiohjelma').click()
-      cy.get('.attached').contains('Degree courses').click()
+      cy.cs('degree-courses-tab').click()
     })
 
     it('content loads', () => {
@@ -702,11 +702,11 @@ describe('Study programme overview', () => {
     })
   })
 
-  describe('Tags view works for basic user', () => {
+  describe('Tags tab works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
       cy.contains('a', 'Matemaattisten tieteiden kandiohjelma').click({ force: true })
-      cy.get('.attached').contains('Tags').click()
+      cy.cs('tags-tab').click()
     })
 
     it('can create and delete tags for population', () => {
@@ -751,7 +751,9 @@ describe('Study programme overview', () => {
 
         cy.contains('Successfully added tags to students.')
 
-        cy.contains('td', name).get('i.level.up.alternate.icon').click()
+        cy.contains('td', name).within(() => {
+          cy.get('i.level.up.alternate.icon').click()
+        })
 
         cy.contains('Matemaattisten tieteiden kandiohjelma 2022 - 2023')
         cy.contains(`Tagged with: ${name}`)
@@ -772,7 +774,7 @@ describe('Study programme overview', () => {
         }
 
         cy.get('a').contains('Matemaattisten tieteiden kandiohjelma').invoke('removeAttr', 'target').click()
-        cy.url().should('include', '/study-programme/KH50_001?p_tab=4')
+        cy.url().should('include', '/study-programme/KH50_001?tab=4')
 
         deleteTag(name)
       })
@@ -813,15 +815,17 @@ describe('Study programme overview', () => {
     })
 
     it('can access study tracks', () => {
-      cy.get('.attached').contains('Study tracks and class statistics').click()
+      cy.cs('study-tracks-and-class-statistics-tab').click()
 
       cy.get('[data-cy=Section-studyTrackOverview]')
       cy.get('[data-cy=Section-studyTrackProgress]')
       cy.get('[data-cy=Section-averageGraduationTimesStudyTracks]')
     })
 
     it("doesn't see other tabs", () => {
-      cy.get('div.ui.tabular.menu a').should('have.length', 2)
+      cy.cs('degree-courses-tab').should('not.exist')
+      cy.cs('tags-tab').should('not.exist')
+      cy.cs('update-statistics-tab').should('not.exist')
     })
   })
 })

services/frontend/src/components/LanguagePicker/useLanguage.tsx

@@ -54,3 +54,5 @@ export const useLanguage = () => {
     getTextIn,
   }
 }
+
+export type GetTextIn = ReturnType<typeof useLanguage>['getTextIn']

services/frontend/src/components/PopulationDetails/PopulationCourses/FilterDegreeCoursesModal.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Button, Icon, Modal, Container } from 'semantic-ui-react'
 
-import { DegreeCoursesTable } from '@/pages/StudyProgramme/DegreeCourses'
+import { DegreeCoursesTab } from '@/pages/StudyProgramme/DegreeCoursesTab'
 
 export const FilterDegreeCoursesModal = ({ studyProgramme, year }) => {
   const [open, setOpen] = useState(false)
@@ -25,7 +25,7 @@ export const FilterDegreeCoursesModal = ({ studyProgramme, year }) => {
       <Modal.Header>Hide degree courses</Modal.Header>
       <Modal.Content image>
         <Container>
-          <DegreeCoursesTable studyProgramme={studyProgramme} year={year} />
+          <DegreeCoursesTab studyProgramme={studyProgramme} year={year} />
           <Button icon labelPosition="left" onClick={() => setModalOpenState(false)} style={{ marginTop: '10px' }}>
             <Icon name="save" />
             Save & Close

services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx

@@ -479,8 +479,8 @@ export const ProgressTable = ({ curriculum, criteria, students, months, programm
     <>
       {!isStudyGuidanceGroupProgramme && (
         <h5>
-          Criteria can be changed <Link to={`/study-programme/${programme}?p_m_tab=0&p_tab=3`}>here.</Link> Please
-          refresh page after changes.
+          Criteria can be changed <Link to={`/study-programme/${programme}?tab=4`}>here.</Link> Please refresh page
+          after changes.
         </h5>
       )}
       <Message style={{ fontSize: '16px', maxWidth: '700px' }}>

services/frontend/src/components/PopulationStudents/StudentTable/TagsTab/index.jsx

@@ -21,7 +21,7 @@ export const TagsTab = ({ combinedProgramme, mainProgramme, programmeForTagsLink
           >
             <h3>
               No tags defined. You can define them{' '}
-              <Link onClick={() => {}} to={`/study-programme/${programmeForTagsLink}?p_m_tab=0&p_tab=4`}>
+              <Link onClick={() => {}} to={`/study-programme/${programmeForTagsLink}?tab=4`}>
                 here
               </Link>
               .

services/frontend/src/components/common/CreditsProduced.jsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { Radio } from 'semantic-ui-react'
 
-import { DataTable } from '@/pages/StudyProgramme/BasicOverview/DataTable'
-import { StackedBarChart } from '@/pages/StudyProgramme/BasicOverview/StackedBarChart'
+import { DataTable } from '@/pages/StudyProgramme/BasicInformationTab/DataTable'
+import { StackedBarChart } from '@/pages/StudyProgramme/BasicInformationTab/StackedBarChart'
 
 const getFormattedYear = (year, academicYear) => (academicYear ? `${year} - ${year + 1}` : `${year}`)
 

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

@@ -1,17 +1,32 @@
-import { Stack, Typography } from '@mui/material'
+import { Box, Skeleton, 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.
+ * @param {string} [title] - The main title of the page.
  */
-export const PageTitle = ({ subtitle, title }: { subtitle?: string; title: string }) => {
+export const PageTitle = ({ subtitle, title }: { subtitle?: string; title?: string | null }) => {
   return (
     <Stack sx={{ gap: 1, my: 3, textAlign: 'center' }}>
-      <Typography component="h1" variant="h4">
-        {title}
-      </Typography>
+      {title ? (
+        <Box height={40}>
+          <Typography component="h1" variant="h4">
+            {title}
+          </Typography>
+        </Box>
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            height: 40,
+            justifyContent: 'center',
+            width: '100%',
+          }}
+        >
+          <Skeleton height="100%" variant="text" width="60%" />
+        </Box>
+      )}
       {subtitle && (
         <Typography color="text.secondary" component="h2" variant="h6">
           {subtitle}

services/frontend/src/pages/Faculties/StudentsByStartingYearTab/exportProgressTable.ts

@@ -1,14 +1,15 @@
 import { utils, writeFile } from 'xlsx'
 
-import { Name, NameWithCode } from '@/shared/types'
+import { GetTextIn } from '@/components/LanguagePicker/useLanguage'
+import { NameWithCode } from '@/shared/types'
 import { sortProgrammeKeys } from '@/util/faculty'
 import { getTimestamp } from '@/util/timeAndDate'
 
 export const exportProgressTable = (
   progressStats,
   programmeNames: Record<string, NameWithCode> | undefined,
   faculty: string,
-  getTextIn: (text: Name | null | undefined, lang?: string) => string | null | undefined
+  getTextIn: GetTextIn
 ) => {
   if (!progressStats || !programmeNames) {
     return

services/frontend/src/pages/Faculties/StudentsByStartingYearTab/exportStudentTable.ts

@@ -1,6 +1,6 @@
 import { utils, writeFile } from 'xlsx'
 
-import { Name } from '@/shared/types'
+import { GetTextIn } from '@/components/LanguagePicker/useLanguage'
 import { DegreeProgramme, GetFacultyStudentStatsResponse } from '@/types/api/faculty'
 import { getTimestamp } from '@/util/timeAndDate'
 
@@ -9,7 +9,7 @@ export const exportStudentTable = (
   programmeNames: Record<string, DegreeProgramme> | undefined,
   faculty: string,
   sortedkeys: string[],
-  getTextIn: (text: Name | null | undefined, lang?: string) => string | null | undefined
+  getTextIn: GetTextIn
 ) => {
   if (!data || !programmeNames) {
     return

services/frontend/src/pages/Faculties/UpdateStatisticsTab/index.tsx

@@ -2,8 +2,8 @@ import { Stack, Typography } from '@mui/material'
 import { useState } from 'react'
 
 import { Section } from '@/components/material/Section'
+import { UpdateButton } from '@/components/material/UpdateButton'
 import { useUpdateFacultyBasicTabQuery, useUpdateFacultyProgressTabQuery } from '@/redux/facultyStats'
-import { UpdateButton } from './UpdateButton'
 
 export const UpdateStatisticsTab = ({ id }: { id: string }) => {
   const [skipBasic, setSkipBasic] = useState(true)

services/frontend/src/pages/Faculties/index.tsx

@@ -1,4 +1,4 @@
-import { Container, Tab, Tabs } from '@mui/material'
+import { Container, Stack, Tab, Tabs } from '@mui/material'
 import { useState } from 'react'
 import { useParams } from 'react-router'
 
@@ -39,40 +39,42 @@ export const Faculties = () => {
 
   return (
     <Container data-cy="FacultySegmentContainer" maxWidth="lg">
-      <PageTitle subtitle={facultyCode} title={facultyName ?? 'Faculties'} />
-      <Tabs data-cy="FacultyTabs" onChange={(_event, newTab) => setTab(newTab)} sx={{ marginBottom: 2 }} value={tab}>
-        <Tab data-cy="BasicInformationTab" label="Basic information" />
-        <Tab data-cy="StudentsByStartingYearTab" label="Students by starting year" />
-        <Tab data-cy="GraduationTimesTab" label="Graduation times" />
-        {isAdmin && <Tab data-cy="UpdateStatisticsTab" label="Update statistics" />}
-      </Tabs>
-      {tab === 0 && (
-        <BasicInformationTab
-          faculty={faculty}
-          setSpecialGroups={setSpecialGroups}
-          setStudyProgrammes={setStudyProgrammes}
-          specialGroups={specialGroups}
-          studyProgrammes={studyProgrammes}
-        />
-      )}
-      {tab === 1 && (
-        <StudentsByStartingYearTab
-          faculty={faculty}
-          graduatedGroup={graduatedGroup}
-          requiredRights={requiredRights}
-          setGraduatedGroup={setGraduatedGroup}
-          setSpecialGroups={setSpecialGroups}
-          specialGroups={specialGroups}
-        />
-      )}
-      {tab === 2 && (
-        <GraduationTimesTab
-          faculty={faculty}
-          setStudyProgrammes={setStudyProgrammes}
-          studyProgrammes={studyProgrammes}
-        />
-      )}
-      {tab === 3 && isAdmin && <UpdateStatisticsTab id={faculty?.id} />}
+      <PageTitle subtitle={facultyCode} title={facultyName} />
+      <Stack gap={2}>
+        <Tabs data-cy="FacultyTabs" onChange={(_event, newTab) => setTab(newTab)} value={tab}>
+          <Tab data-cy="BasicInformationTab" label="Basic information" />
+          <Tab data-cy="StudentsByStartingYearTab" label="Students by starting year" />
+          <Tab data-cy="GraduationTimesTab" label="Graduation times" />
+          {isAdmin && <Tab data-cy="UpdateStatisticsTab" label="Update statistics" />}
+        </Tabs>
+        {tab === 0 && (
+          <BasicInformationTab
+            faculty={faculty}
+            setSpecialGroups={setSpecialGroups}
+            setStudyProgrammes={setStudyProgrammes}
+            specialGroups={specialGroups}
+            studyProgrammes={studyProgrammes}
+          />
+        )}
+        {tab === 1 && (
+          <StudentsByStartingYearTab
+            faculty={faculty}
+            graduatedGroup={graduatedGroup}
+            requiredRights={requiredRights}
+            setGraduatedGroup={setGraduatedGroup}
+            setSpecialGroups={setSpecialGroups}
+            specialGroups={specialGroups}
+          />
+        )}
+        {tab === 2 && (
+          <GraduationTimesTab
+            faculty={faculty}
+            setStudyProgrammes={setStudyProgrammes}
+            studyProgrammes={studyProgrammes}
+          />
+        )}
+        {tab === 3 && isAdmin && <UpdateStatisticsTab id={faculty?.id} />}
+      </Stack>
     </Container>
   )
 }

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

@@ -36,7 +36,10 @@ export const TagsTable = ({ student }: { student: any }) => {
     }
   }
 
-  if (tagData.length === 0) return null
+  if (tagData.length === 0) {
+    return null
+  }
+
   return (
     <Section
       infoBoxContent="Personal tags have a purple background, while shared tags have a gray background. You can view or create tags by clicking the programme name."
@@ -54,7 +57,7 @@ export const TagsTable = ({ student }: { student: any }) => {
           {tagData.map(({ programme, tags }) => (
             <TableRow key={programme.code}>
               <TableCell>
-                <Link target="_blank" to={`/study-programme/${programme.code}?p_tab=4`}>
+                <Link target="_blank" to={`/study-programme/${programme.code}?tab=4`}>
                   {getTextIn(programme.name)}
                 </Link>
               </TableCell>

services/frontend/src/pages/StudyProgramme/BasicOverview/index.jsx → services/frontend/src/pages/StudyProgramme/BasicInformationTab/index.jsx

@@ -39,7 +39,7 @@ const getGraduatedText = code => {
   return 'Graduated and thesis writers of the programme'
 }
 
-export const BasicOverview = ({
+export const BasicInformationTab = ({
   academicYear,
   combinedProgramme,
   setAcademicYear,

services/frontend/src/pages/StudyProgramme/DegreeCourses/index.jsx → services/frontend/src/pages/StudyProgramme/DegreeCoursesTab/index.jsx

@@ -7,7 +7,7 @@ import { useGetProgressCriteriaQuery } from '@/redux/programmeProgressCriteria'
 import { CreditCriteriaForm } from './CreditCriteriaForm'
 import { DegreeCourseTableView } from './DegreeCourseTableView'
 
-export const DegreeCoursesTable = ({ studyProgramme, combinedProgramme, year }) => {
+export const DegreeCoursesTab = ({ studyProgramme, combinedProgramme, year }) => {
   const [defaultModules, setDefaultModules] = useState([])
   const [curriculum, setCurriculum] = useState(null)
   const [secondProgrammeModules, setSecondProgrammeModules] = useState([])