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

…y-programme-selector

Material UI: Study programme overview - Programme selector

.github/workflows/pull_request.yaml

@@ -41,8 +41,8 @@ jobs:
             spec: cypress/e2e/Students.js
           - name: 'Test completed courses'
             spec: cypress/e2e/Completed_courses.js
-          - name: 'Test studyprogramme overview'
-            spec: cypress/e2e/Studyprogramme_overview.js
+          - name: 'Test study programme overview'
+            spec: cypress/e2e/Study_programme_overview.js
           - name: 'Test teachers and users'
             spec: |
               cypress/e2e/Teachers.js

.github/workflows/test.yaml

@@ -199,8 +199,8 @@ jobs:
             spec: cypress/e2e/Students.js
           - name: 'Test completed courses'
             spec: cypress/e2e/Completed_courses.js
-          - name: 'Test studyprogramme overview'
-            spec: cypress/e2e/Studyprogramme_overview.js
+          - name: 'Test study_programme overview'
+            spec: cypress/e2e/Study_programme_overview.js
           - name: 'Test teachers and users'
             spec: |
               cypress/e2e/Teachers.js

cypress/e2e/Studyprogramme_overview.js → cypress/e2e/Study_programme_overview.js

@@ -10,7 +10,33 @@ const deleteTag = name => {
 }
 
 describe('Study programme overview', () => {
-  /* Basic information overview -tests */
+  describe('Study programme selector', () => {
+    beforeEach(() => {
+      cy.init('/study-programme', 'admin')
+    })
+
+    it('Correct categories', () => {
+      cy.contains('Bachelor programmes')
+      cy.contains('Master programmes')
+      cy.contains('Combined programmes')
+      cy.contains('Doctoral programmes')
+    })
+
+    it('Study programme search filter', () => {
+      cy.contains('Tietojenkäsittelytieteen kandiohjelma').should('exist')
+      cy.contains('Matemaattisten tieteiden kandiohjelma').should('exist')
+      cy.cs('study-programme-filter').type('Tietojenkäsittelytieteen')
+      cy.contains('Tietojenkäsittelytieteen kandiohjelma').should('exist')
+      cy.contains('Matemaattisten tieteiden kandiohjelma').should('not.exist')
+    })
+
+    it('Old and specialized programmes filter', () => {
+      cy.contains('Biotekniikka (ylempi)').should('not.exist')
+      cy.cs('filter-old-programmes-toggle').click()
+      cy.contains('Biotekniikka (ylempi)').should('exist')
+    })
+  })
+
   describe('Basic information view works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
@@ -235,7 +261,6 @@ describe('Study programme overview', () => {
     })
   })
 
-  /* Study track overview tests */
   describe('Study track overview works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
@@ -469,7 +494,6 @@ describe('Study programme overview', () => {
     })
   })
 
-  /* Programme courses -tests */
   describe('Programme courses works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')
@@ -678,7 +702,6 @@ describe('Study programme overview', () => {
     })
   })
 
-  /* Tag-tests */
   describe('Tags view works for basic user', () => {
     beforeEach(() => {
       cy.init('/study-programme')

services/frontend/src/common/index.js

@@ -27,16 +27,6 @@ export const getGraduationGraphTitle = (studyProgramme, doCombo = false) => {
   return 'Doctoral study right'
 }
 
-export const getUnifiedProgrammeName = (bachelor, masterLicentiate, language) => {
-  if (language === 'fi')
-    return `${bachelor} ja ${
-      masterLicentiate?.includes('lisensiaatin') ? 'lisensiaatin koulutusohjelma' : 'maisterin koulutusohjelma'
-    }`
-  if (language === 'en') return `${bachelor?.split(' ')[0]} and ${masterLicentiate}`
-  if (language === 'sv') return `${bachelor?.split('programmet')[0]}- och ${masterLicentiate}`
-  return bachelor
-}
-
 export const isFall = semester => semester % 2 === 1
 
 export const getStudentTotalCredits = (student, includeTransferredCredits = true) => {
@@ -295,33 +285,6 @@ export const getCurrentSemester = allSemesters => {
   )
 }
 
-/**
- * Returns a sorting function that can be used to sort strings so that Finnish alphabetical order is respected.
- *
- * @param {string} field - The field to sort by (optional: if not given, the function will sort by the strings themselves)
- */
-export const createLocaleComparator = (field = null) => {
-  if (!field) {
-    return (val1, val2) => val1.localeCompare(val2, 'fi', { sensitivity: 'accent' })
-  }
-  return (val1, val2) => val1[field]?.localeCompare(val2[field], 'fi', { sensitivity: 'accent' })
-}
-
-export const createPinnedFirstComparator = pinnedProgrammes => {
-  const localeComparator = createLocaleComparator('code')
-  return (programmeA, programmeB) => {
-    const pinnedA = pinnedProgrammes.includes(programmeA.code)
-    const pinnedB = pinnedProgrammes.includes(programmeB.code)
-    if (pinnedA && !pinnedB) {
-      return -1
-    }
-    if (!pinnedA && pinnedB) {
-      return 1
-    }
-    return localeComparator(programmeA, programmeB)
-  }
-}
-
 const interpolateColor = (color1, color2, factor) =>
   color1.map((component, index) => Math.round(component + factor * (color2[index] - component)))
 

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 '@/components/StudyProgramme/DegreeCourses'
+import { DegreeCoursesTable } from '@/pages/StudyProgramme/DegreeCourses'
 
 export const FilterDegreeCoursesModal = ({ studyProgramme, year }) => {
   const [open, setOpen] = useState(false)

services/frontend/src/components/PopulationSearch/PopulationSearchForm.jsx

@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate, useLocation } from 'react-router'
 import { Button, Form, Message, Radio } from 'semantic-ui-react'
 
-import { createPinnedFirstComparator, isNewStudyProgramme, textAndDescriptionSearch } from '@/common'
+import { isNewStudyProgramme, textAndDescriptionSearch } from '@/common'
 import { FilterOldProgrammesToggle } from '@/components/common/FilterOldProgrammesToggle'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { InfoBox } from '@/components/material/InfoBox'
@@ -22,6 +22,7 @@ import { clearSelected } from '@/redux/populationSelectedStudentCourses'
 import { useGetStudyTracksQuery } from '@/redux/studyProgramme'
 import { useGetStudyProgrammePinsQuery } from '@/redux/studyProgrammePins'
 import { formatQueryParamsToArrays } from '@/shared/util'
+import { createPinnedFirstComparator } from '@/util/comparator'
 import { momentFromFormat, reformatDate } from '@/util/timeAndDate'
 import { getMonths } from './common'
 import './populationSearch.css'

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

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
 import { Header, Message, Segment } from 'semantic-ui-react'
 
-import { getStudentTotalCredits, getUnifiedProgrammeName } from '@/common'
+import { getStudentTotalCredits } from '@/common'
 import { FilterView } from '@/components/FilterView'
 import {
   admissionTypeFilter,
@@ -36,6 +36,7 @@ import { useGetProgrammesQuery } from '@/redux/populations'
 import { useGetSemestersQuery } from '@/redux/semesters'
 import { makePopulationsToData } from '@/selectors/populationDetails'
 import { getFullStudyProgrammeRights } from '@/util/access'
+import { getCombinedProgrammeName } from '@/util/combinedProgramme'
 
 const getYearText = year => {
   if (year === 'All') return ''
@@ -147,7 +148,7 @@ export const PopulationStatistics = () => {
 
   const programmeText =
     query?.studyRights?.combinedProgramme !== '' && query?.studyRights?.combinedProgramme !== undefined
-      ? getUnifiedProgrammeName(getTextIn(programmeName), getTextIn(combinedProgrammeName), language)
+      ? getCombinedProgrammeName(getTextIn(programmeName), getTextIn(combinedProgrammeName), language)
       : getTextIn(programmeName)
   const title = location.search === '' ? 'Class statistics' : `${programmeText} ${getYearText(query?.year)}`
 

services/frontend/src/components/PopulationStudents/StudentTable/ModulesTab/index.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
-import { createLocaleComparator } from '@/common'
+
+import { createLocaleComparator } from '@/util/comparator'
 import { ModulesTab } from './ModulesTable'
 
 export type FormattedStudent = {

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

@@ -9,7 +9,6 @@ import { LanguageCenterView } from '@/components/LanguageCenterView'
 import { PopulationStatistics } from '@/components/PopulationStatistics'
 import { SegmentDimmer } from '@/components/SegmentDimmer'
 import { StudyGuidanceGroups } from '@/components/StudyGuidanceGroups'
-import { StudyProgramme } from '@/components/StudyProgramme'
 import { Teachers } from '@/components/Teachers'
 import { languageCenterViewEnabled } from '@/conf'
 import { Changelog } from '@/pages/Changelog'
@@ -22,6 +21,7 @@ import { FrontPage } from '@/pages/FrontPage'
 import { Students } from '@/pages/Students'
 import { StudentDetails } from '@/pages/Students/StudentDetails'
 import { StudentSearch } from '@/pages/Students/StudentSearch'
+import { StudyProgramme } from '@/pages/StudyProgramme'
 import { University } from '@/pages/University'
 import { Updater } from '@/pages/Updater'
 import { Users } from '@/pages/Users'

services/frontend/src/components/SortableTable/filters/defaultFilter.jsx

@@ -3,8 +3,8 @@ import { useMemo, useState } from 'react'
 import { Dropdown, Icon, Input } from 'semantic-ui-react'
 import { useContextSelector } from 'use-context-selector'
 
-import { createLocaleComparator } from '@/common'
 import { SortableTableContext, getColumnValue } from '@/components/SortableTable/common'
+import { createLocaleComparator } from '@/util/comparator'
 
 const ValueFilterType = {
   Include: 'include',