Merge branch 'master' into renovate/lru-cache-11.x

.github/workflows/staging.yml

@@ -54,13 +54,13 @@ jobs:
           max_attempts: 2
           command: ./node_modules/.bin/cypress run --headless --browser chrome --spec "cypress/integration/${{ matrix.spec }}.spec.js"
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: Cypress videos
           path: /home/runner/work/lomake/lomake/cypress/videos
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: Cypress screenshots

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.16.0

build.js

@@ -1,3 +1,19 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-restricted-syntax */
+const fs = require('fs')
 const { prodConfig } = require('./esbuild_config')
 
-require('esbuild').build(prodConfig)
+require('esbuild')
+  .build(prodConfig)
+  .then(async result => {
+    // output bundle
+    /*
+for (const out of result.outputFiles) {
+  await fs.mkdirp(path.dirname(out.path))
+  await fs.writeFile(out.path, new TextDecoder().decode(out.contents), 'utf8')
+}
+*/ if (result.metafile) {
+      // use https://bundle-buddy.com/esbuild to analyses
+      await fs.writeFileSync('./build/metafile.json', JSON.stringify(result.metafile))
+    }
+  })

client/assets/custom.scss

@@ -123,6 +123,10 @@ label {
   }
 }
 
+.filter-row {
+  width: 100%;
+}
+
 // These css styles are applied, when user opens the print dialogue in browser.
 @media print {
   .hide-in-print-mode,

client/components/ComparisonPage/CompareByYear.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Accordion, Grid } from 'semantic-ui-react'
 import { useTranslation } from 'react-i18next'
-import * as _ from 'lodash'
+import sortBy from 'lodash/sortBy'
 
 import ProgrammeList from 'Components/Generic/ProgrammeList'
 import QuestionList from 'Components/Generic/QuestionList'
@@ -114,7 +114,7 @@ const getTotalWritten = ({ question, allAnswers, chosenKeys }) => {
     const filteredAnswers = answers ? answers.filter(a => chosenKeys.includes(a.key) && a.answer) : []
     return {
       year: data.year,
-      answers: _.sortBy(filteredAnswers, 'name'),
+      answers: sortBy(filteredAnswers, 'name'),
     }
   })
   return mapped

client/components/DegreeReformView/DegreeReformOverview/OverviewPage.scss

@@ -1,26 +0,0 @@
-@import '../../assets/colors.scss';
-
-.wide-header {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr 2fr 2fr 1fr;
-  align-items: center;
-  column-gap: 2rem;
-  margin: 2rem 1rem;
-  margin-bottom: 3rem;
-}
-
-.wideish-header {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
-  align-items: center;
-  column-gap: 2rem;
-  margin: 2rem 1rem;
-  margin-bottom: 3rem;
-}
-
-.view-title {
-  margin-right: 1em;
-  margin-top: 1em,
-}
-
-

client/components/DegreeReformView/DegreeReformOverview/index.js

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import ReactMarkdown from 'react-markdown'
 
-import { Radio, Dropdown, List, ListItem, ListIcon, ListContent } from 'semantic-ui-react'
-import { isAdmin } from '@root/config/common'
+import { Radio, Dropdown, List, ListItem, ListIcon, ListContent, Menu, MenuItem } from 'semantic-ui-react'
 import { useVisibleOverviewProgrammes } from 'Utilities/overview'
 import useDebounce from 'Utilities/useDebounce'
 import CustomModal from 'Components/Generic/CustomModal'
@@ -136,12 +135,6 @@ export default () => {
     })
   }, [usersProgrammes, lang, debouncedFilter])
 
-  const moreThanFiveProgrammes = useMemo(() => {
-    if (isAdmin(currentUser.data)) return true
-    if (currentUser.data.access && Object.keys(currentUser.data.access).length > 5) return true
-    return false
-  }, [currentUser])
-
   let facultyProgrammes = null
   let nameOf = null
 
@@ -200,49 +193,48 @@ export default () => {
 
       {usersProgrammes.length > 0 ? (
         <>
-          <div className={moreThanFiveProgrammes ? 'wide-header' : 'wideish-header'}>
-            <h2 className="view-title">{t('degree-reform').toUpperCase()}</h2>
-          </div>
-          {dropdownFilter.length > 0 && <h3>{t('generic:chosenFaculties')}</h3>}
-          <List>
-            {dropdownFilter.length > 0 &&
-              dropdownFilter.map(f => (
-                <ListItem>
-                  <ListIcon name="circle" color="blue" />
-                  <ListContent> {f.name}</ListContent>
-                </ListItem>
-              ))}
-          </List>
-          {faculty === 'UNI' && faculties.data.length > 0 && (
-            <div className="table-container-degree-reform-filter">
-              <Dropdown
-                text={t('overview:chooseFaculty')}
-                icon="filter"
-                button
-                labeled
-                className="icon"
-                defaultUpward={false}
-              >
-                <Dropdown.Menu upward="false">
-                  <Dropdown.Divider />
-                  {faculties.data.map(f => {
-                    const selected = dropdownFilter.filter(d => d.code === f.code).length > 0
-                    return (
-                      <Dropdown.Item
-                        key={f.code}
-                        onClick={e => handleDropDownFilter(e, f, selected)}
-                        text={f.name[lang]}
-                        multiple
-                        active={selected}
-                        label={selected && { color: 'blue', empty: true, circular: true }}
-                      />
-                    )
-                  })}
-                </Dropdown.Menu>
-              </Dropdown>
-            </div>
-          )}
-          <div style={{ marginTop: '1em' }}>
+          <Menu size="large" className="filter-row" secondary>
+            <MenuItem>
+              <h2>{t('degree-reform').toUpperCase()}</h2>
+            </MenuItem>
+            <MenuItem>{dropdownFilter.length > 0 && <h3>{t('generic:chosenFaculties')}</h3>}</MenuItem>
+            {faculty === 'UNI' && faculties.data.length > 0 && (
+              <>
+                <MenuItem>
+                  <List>
+                    {dropdownFilter.length > 0 &&
+                      dropdownFilter.map(f => (
+                        <ListItem>
+                          <ListIcon name="circle" color="blue" />
+                          <ListContent> {f.name}</ListContent>
+                        </ListItem>
+                      ))}
+                  </List>
+                </MenuItem>
+                <MenuItem>
+                  <Dropdown text={t('overview:chooseFaculty')} button labeled className="icon" defaultUpward={false}>
+                    <Dropdown.Menu upward="false">
+                      <Dropdown.Divider />
+                      {faculties.data.map(f => {
+                        const selected = dropdownFilter.filter(d => d.code === f.code).length > 0
+                        return (
+                          <Dropdown.Item
+                            key={f.code}
+                            onClick={e => handleDropDownFilter(e, f, selected)}
+                            text={f.name[lang]}
+                            multiple
+                            active={selected}
+                            label={selected && { color: 'blue', empty: true, circular: true }}
+                          />
+                        )
+                      })}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </MenuItem>
+              </>
+            )}
+          </Menu>
+          <div>
             <ColorTable
               filteredProgrammes={filteredProgrammes}
               facultyProgrammes={facultyProgrammes}

client/components/EvaluationView/CommitteeOverview/CommitteeColorTable.js

@@ -1,6 +1,6 @@
 import React, { useEffect, Fragment } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Loader, Header, Divider } from 'semantic-ui-react'
+import { Loader, Header } from 'semantic-ui-react'
 
 import { answersByYear, getYearToShow } from 'Utilities/common'
 import { getAllTempAnswersAction } from 'Utilities/redux/tempAnswersReducer'
@@ -96,7 +96,6 @@ const CommitteeColorTable = React.memo(({ setModalData, form, formType, setProgr
                   as="h2"
                 >
                   {indexTopLevel + 1}) {theme.title[lang]}
-                  <Divider />
                 </Header>
               )}
               <TableRow

client/components/EvaluationView/CommitteeOverview/OverviewPage.scss

@@ -10,7 +10,6 @@ $QUESTION_COUNT: 6;
   margin-bottom: 1em;
 }
 
-
 .wide-header {
   @include committee-wide-header-basics;
   &-committee {
@@ -19,11 +18,6 @@ $QUESTION_COUNT: 6;
   }
 }
 
-.view-title {
-  margin-right: 1em;
-  margin-top: 1em,
-}
-
 .csv-download {
   max-width: 200px;
 }
@@ -44,14 +38,20 @@ $QUESTION_COUNT: 6;
   @include committee-overview-basics;
   &-3 {
     @include committee-overview-basics;
-    grid-template-rows: 50px 50px 50px repeat(6, 20px) 40px minmax(50px,auto) repeat(6, 20px) 40px minmax(50px,auto) repeat(2, 50px);
-    grid-template-columns: minmax(0,4fr) repeat(1, minmax(0,6fr)) minmax(0,3em)  repeat(1, minmax(0,6fr)) ;
- }
- &-5 {
+    grid-template-rows: 50px 50px 50px repeat(6, 20px) 40px minmax(50px, auto) repeat(6, 20px) 40px minmax(50px, auto) repeat(
+        2,
+        50px
+      );
+    grid-template-columns: minmax(0, 4fr) repeat(1, minmax(0, 6fr)) minmax(0, 3em) repeat(1, minmax(0, 6fr));
+  }
+  &-5 {
     @include committee-overview-basics;
-    grid-template-rows: 50px 50px 50px repeat(6, 20px) 40px minmax(50px,auto) repeat(6, 20px) 40px minmax(50px,auto) repeat(2, 50px);
-    grid-template-columns: minmax(0,2fr) repeat(2, minmax(0,2fr)) minmax(0,3em)  repeat(2, minmax(0,2fr)) ;
- }
+    grid-template-rows: 50px 50px 50px repeat(6, 20px) 40px minmax(50px, auto) repeat(6, 20px) 40px minmax(50px, auto) repeat(
+        2,
+        50px
+      );
+    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 2fr)) minmax(0, 3em) repeat(2, minmax(0, 2fr));
+  }
 }
 
 @mixin square-basics {
@@ -99,7 +99,7 @@ $QUESTION_COUNT: 6;
   }
   &-gray {
     @include square-basics();
-    background-color: rgb(128,128,128);
+    background-color: rgb(128, 128, 128);
     &:hover {
       filter: brightness(0.8);
     }
@@ -117,26 +117,26 @@ $QUESTION_COUNT: 6;
 
 @mixin sticky-header-committee {
   @include sticky-header-basics();
-    word-wrap: break-word;
-    text-align: center;
-    font-weight: bold;
-    margin-left: -3px;
-    margin-right: -3px;
-    padding-left: 5px;
-    padding-right: 5px;
+  word-wrap: break-word;
+  text-align: center;
+  font-weight: bold;
+  margin-left: -3px;
+  margin-right: -3px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .sticky-header {
   @include sticky-header-basics();
 
   &-categories-5 {
     @include sticky-header-committee();
-     grid-column: span 1;
-   }
-   &-categories-3 {
+    grid-column: span 1;
+  }
+  &-categories-3 {
     @include sticky-header-committee();
-     grid-column: span 1;
-   }
+    grid-column: span 1;
+  }
 }
 
 .year-filter-label {
@@ -159,7 +159,7 @@ $QUESTION_COUNT: 6;
   }
   &-row-link-committee {
     @include container-basics;
-    overflow-wrap:anywhere;
+    overflow-wrap: anywhere;
   }
 }
 
@@ -195,11 +195,9 @@ $QUESTION_COUNT: 6;
 
 @mixin accordion-title-basics {
   margin-left: 0.5rem;
-
 }
 
 .accordion-title {
-
   &-green {
     border-radius: 10px 100px / 120px;
     h2 {
@@ -211,7 +209,7 @@ $QUESTION_COUNT: 6;
     border-radius: 10px 100px / 120px;
     h2 {
       @include accordion-title-basics;
-    } 
+    }
     background: $light-yellow;
   }
   &-red {
@@ -221,16 +219,16 @@ $QUESTION_COUNT: 6;
     }
     background: $light-red;
   }
-
 }
 
 .modal-accordion-container {
-
   div:not(:first-child) {
     margin-top: 1rem;
-}
+  }
 
-  h2, h4, p {
+  h2,
+  h4,
+  p {
     margin-left: 1rem;
   }
 }

client/components/EvaluationView/CommitteeOverview/index.js

@@ -102,7 +102,7 @@ export default () => {
       {usersProgrammes.length > 0 ? (
         <>
           <div className="wide-header-committee">
-            <h2 className="view-title">{t('evaluation').toUpperCase()}</h2>
+            <h2>{t('evaluation').toUpperCase()}</h2>
             <div style={{ display: 'flex', flexDirection: 'column', height: '8em', justifyContent: 'space-evenly' }}>
               <Radio toggle label={t(`overview:colorBlindMode`)} onClick={() => dispatch(setColorBlindMode())} />
             </div>

client/components/EvaluationView/EvaluationFormView/index.js

@@ -201,7 +201,7 @@ const EvaluationFormView = ({ room, formString }) => {
                 <Trans i18nKey="formView:evaluationInfo2" />
               </p>
             </div>
-            <p>{t('formView:info2')}</p>
+            <p style={{ marginBottom: '10px' }}>{t('formView:info2')}</p>
           </div>
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <div className="big-circle-green" />