Merge commit '545d1ab99c78e4eed8bd0f6a9b0edcd26a79dfb9'

UniversityOfHelsinkiCS · Jan 20, 2025 · ecb02b3 · ecb02b3
2 parents 90202d7 + 545d1ab
commit ecb02b3
Show file tree

Hide file tree

Showing 26 changed files with 198 additions and 77 deletions.
diff --git a/.github/actions/run_test/action.yml b/.github/actions/run_test/action.yml
@@ -5,6 +5,9 @@ inputs:
   spec:
     required: true
     description: 'Path to Cypress file'
+  context:
+    required: true
+    description: 'Artifact identifier'
 
 runs:
   using: composite
@@ -30,16 +33,16 @@ runs:
       #   CYPRESS_baseUrl: http://localhost:8000
 
     - name: 'Upload screenshots if tests fail'
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: failure()
       with:
-        name: cypress-screenshots
+        name: cypress-screenshots-${{inputs.context}}
         path: /home/runner/work/mobvita/mobvita/cypress/screenshots/
 
     # Test run video was always captured, so this action uses "always()" condition
     - name: 'Upload Cypress videos'
-      uses: actions/upload-artifact@v3 
+      uses: actions/upload-artifact@v4 
       if: always()
       with:
-        name: cypress-videos
+        name: cypress-videos-${{inputs.context}}
         path: /home/runner/work/mobvita/mobvita/cypress/videos/
diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
@@ -15,6 +15,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/competition_spec.js
+          context: competition
 
   test_dictionary:
     name: "Test dictionary"
@@ -25,6 +26,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/dictionary_spec.js
+          context: dictionary
 
   test_flashcards:
     name: "Test flashcards"
@@ -35,6 +37,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/flashcards_spec.js
+          context: flashcards
 
   test_follow_and_block:
     name: "Test follow and block"
@@ -45,6 +48,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/follow_and_block_spec.js
+          context: follow_and_block
 
   test_groups:
     name: "Test groups"
@@ -55,6 +59,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/groups_spec.js
+          context: groups
 
   test_mobvita:
     name: "Test mobvita"
@@ -65,6 +70,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/mobvita_spec.js
+          context: mobvita
 
   test_practice:
     name: "Test practice"
@@ -75,6 +81,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/practice_spec.js
+          context: practice
 
   test_tests:
     name: "Test tests"
@@ -85,6 +92,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/tests_spec.js
+          context: tests
 
   test_wordnest:
     name: "Test wordnest"
@@ -95,6 +103,7 @@ jobs:
         uses: ./.github/actions/run_test
         with:
           spec: cypress/e2e/wordnest_spec.js
+          context: wordnest
 
   build:
     name: 'Publish to dockerhub'

diff --git a/client/assets/images/flags/flag_russian-tricolor.png b/client/assets/images/flags/flag_russian-tricolor.png
diff --git a/client/assets/images/flags/flag_russian.png b/client/assets/images/flags/flag_russian.png
diff --git a/client/assets/images/heartbeat.png b/client/assets/images/heartbeat.png
diff --git a/client/components/AnnotationBox/AnnotationsHiddenView.js b/client/components/AnnotationBox/AnnotationsHiddenView.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { Icon, Popup } from 'semantic-ui-react'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 import { setAnnotationsVisibility } from 'Utilities/redux/annotationsReducer'
 
 const AnnotationsHiddenView = () => {
@@ -16,13 +16,13 @@ const AnnotationsHiddenView = () => {
       tabIndex={0}
       data-cy="annotations-visibility-button"
     >
-      <div className="header-3">
+      <div className="header-3" style={{ fontWeight: '500' }}>
         <Popup
           position="top center"
-          content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
+          content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
           trigger={<Icon name="info circle" size="small" color="grey" />}
         />{' '}
-        <FormattedMessage id="notes" />
+        <FormattedMessage id="notes-header" />
       </div>
       <Icon name="angle down" size="large" />
     </div>

diff --git a/client/components/AnnotationBox/ListView.js b/client/components/AnnotationBox/ListView.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Icon, Popup } from 'semantic-ui-react'
 import { Button } from 'react-bootstrap'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 import { setFocusedSpan, setHighlightRange } from 'Utilities/redux/annotationsReducer'
 
 const ListView = ({ handleAnnotationBoxCollapse }) => {
@@ -25,13 +25,13 @@ const ListView = ({ handleAnnotationBoxCollapse }) => {
         tabIndex={0}
       >
         <div>
-          <div className="header-3">
+          <div className="header-3" style={{ fontWeight: '500' }}>
             <Popup
               position="top center"
-              content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
+              content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
               trigger={<Icon name="info circle" size="small" color="grey" />}
             />{' '}
-            <FormattedMessage id="notes" />
+            <FormattedMessage id="notes-header" />
           </div>
         </div>
         <Icon name="angle up" size="large" />

diff --git a/client/components/AnnotationBox/NoAnnotationsView.js b/client/components/AnnotationBox/NoAnnotationsView.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 import { useHistory } from 'react-router-dom'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage, useIntl } from 'react-intl'
 
 const NoAnnotationsView = ({ handleAnnotationBoxCollapse }) => {
   const intl = useIntl()
@@ -19,13 +19,13 @@ const NoAnnotationsView = ({ handleAnnotationBoxCollapse }) => {
         tabIndex={0}
       >
         <div>
-          <div className="header-3">
+          <div className="header-3" style={{ fontWeight: '500' }}>
             <Popup
-              position="top center"
-              content={intl.formatMessage({ id: 'annotations-popup-info-text' })}
-              trigger={<Icon name="info circle" size="small" color="grey" />}
+                position="top center"
+                content={<FormattedHTMLMessage id={'annotations-popup-info-text'} />}
+                trigger={<Icon name="info circle" size="small" color="grey" />}
             />{' '}
-            <FormattedMessage id="notes" />
+            <FormattedMessage id="notes-header" />
           </div>
         </div>
         <Icon name="angle up" size="large" />

diff --git a/client/components/CommonStoryTextComponents/PreviousSnippets/Word/PreviousExerciseWord.js b/client/components/CommonStoryTextComponents/PreviousSnippets/Word/PreviousExerciseWord.js
@@ -215,7 +215,7 @@ const PreviousExerciseWord = ({ word, answer, tiedAnswer, focusedConcept, snippe
 
       {isPreviewMode && word.concepts?.length > 0 && (
         <div style={{ textAlign: 'left' }}>
-          <FormattedMessage id="topics" />:
+          <FormattedMessage id="topics-header" />:
           <ul className="mb-0">
             {word.concepts.map(concept => (
               <li key={concept.concept}>{concept.concept}</li>

diff --git a/client/components/ControlledStoryEditView/ControlledStoryWord.js b/client/components/ControlledStoryEditView/ControlledStoryWord.js
@@ -276,7 +276,7 @@ const ControlledStoryWord = ({ word, snippet, focusedConcept }) => {
 
       {word.concepts?.length > 0 && (
         <div style={{ textAlign: 'left' }}>
-          <FormattedMessage id="topics" />:
+          <FormattedMessage id="topics-header" />:
           <ul className="mb-0">
             {word.concepts.map(concept => (
               <li>{concept.concept}</li>

diff --git a/client/components/DictionaryHelp/index.js b/client/components/DictionaryHelp/index.js
@@ -304,7 +304,15 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
           <div className="flex space-between">
             <div style={{ marginBottom: '.5em' }}>
               <div className="header-3" style={{ fontWeight: '500' }}>
-                <FormattedMessage id="story-top-dict" />
+                  <Popup
+                      content={<FormattedHTMLMessage id={'click-on-words-near-the-exercises-to-explore-their-meaning'} />}
+                      trigger={<Icon style={{ paddingRight: '0.5em' }}
+                                     name="info circle"
+                                     size="small"
+                                     color="grey"
+                               />}
+                  />{' '}
+                  <FormattedMessage id="dictionary-header" />
               </div>
             </div>
             <div
@@ -386,11 +394,11 @@ const DictionaryHelp = ({ minimized, inWordNestModal }) => {
           ) : (
             <div style={{ width: '100%' }}>
               <div className="header-3" style={{ fontWeight: '500' }}>
-                <FormattedMessage id="notes" />
+                <FormattedMessage id="notes-header" />
               </div>
               <FocusedView focusedSpan={focusedSpan} />
             </div>
-          )}
+          ) /* ??? WHAT IS THIS? why NOTES ??? */}
 
           {smallWindow && !inWordNestModal ? (
             <div className="flex align-self-end">

diff --git a/client/components/Footer.js b/client/components/Footer.js
@@ -27,7 +27,7 @@ const Footer = () => {
             </div>
           </>
         )}
-        <div className="footer-item">© University of Helsinki 2020–2024</div>
+        <div className="footer-item">© University of Helsinki 2020–2025</div>
 
         {showResonsiveVoiceMention && (
           <div className="footer-item">

diff --git a/client/components/GridHexagon/App.css b/client/components/GridHexagon/App.css
@@ -22,7 +22,8 @@ svg g.hexagon {
 }
 
 svg g.hexagon-general g.hexagon {
-  fill: #add8e6;
+    /* fill: #add8e6; */
+    fill: cyan;
 }
 
 svg g.hexagon-root g.hexagon {
@@ -158,4 +159,4 @@ g.score96 g { fill: #98ef96 }
 g.score97 g { fill: #96ef94 }
 g.score98 g { fill: #94ef93 }
 g.score99 g { fill: #92ef91 }
-g.score100 g { fill: #90ef90 }
+g.score100 g { fill: #90ef90 }
diff --git a/client/components/GridHexagon/index.js b/client/components/GridHexagon/index.js
@@ -43,8 +43,9 @@ const ConstructionHexagon = ({ name, position, statistics, overallTotal, general
       <div>{name}</div>
       {stat_total > 0 && (
         <div>
-          {stat_correct}/{stat_total} {intl.formatMessage({ id: 'correct' })}:{' '}
-          {percentageCorrect}%
+            <br/>{intl.formatMessage({ id: 'correct-performance' })}:{' '}
+            {percentageCorrect}%
+            <br/>{stat_correct}/{stat_total}
         </div>
       )}
     </span>

diff --git a/client/components/LandingPage/index.js b/client/components/LandingPage/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { Icon, Dropdown } from 'semantic-ui-react'
+import { Icon, Dropdown, Popup } from 'semantic-ui-react'
 import { images, localeOptions, localeCodeToName } from 'Utilities/common'
 import useWindowDimensions from 'Utilities/windowDimensions'
 import { sidebarSetOpen } from 'Utilities/redux/sidebarReducer'
@@ -97,7 +97,7 @@ const LandingPage = () => {
               scrolling={false}
               direction="left"
               floating
-              style={{ marginRight: '3em', alignSelf: 'center' }}
+              style={{ alignSelf: 'center' }}
               icon={
                 <img
                   src={images.infoIcon}
@@ -138,6 +138,27 @@ const LandingPage = () => {
                 />
               </Dropdown.Menu>
             </Dropdown>
+            <Popup
+              trigger={
+                <a
+                  href="https://revitaai.github.io/SERVER-STATUS.html"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ marginRight: '3em', alignSelf: 'center' }}
+                >
+                  <img
+                      src={images.heartbeat}
+                      alt="heartbeat icon"
+                      style={{ width: '24px', height: '24px', filter: 'grayscale(1) invert(1)' }}
+                    />
+                </a>
+              }
+              content={
+                <FormattedMessage id="server-status" />
+              }
+              on="hover"
+              position="bottom right"
+            />
           </div>
         )}
       </div>

diff --git a/client/components/Lessons/LessonLibrary/LessonListItem.js b/client/components/Lessons/LessonLibrary/LessonListItem.js
@@ -65,8 +65,8 @@ const LessonTitle = ({ lesson, selected, disabled, toggleTopic, includeLesson, e
       >
         <div className="lesson-performance" 
           style={{
-            minWidth: '90px',
-            maxWidth: '95px',
+            minWidth: '100px',
+            maxWidth: '100px',
           }}
         >
           <span
@@ -87,9 +87,10 @@ const LessonTitle = ({ lesson, selected, disabled, toggleTopic, includeLesson, e
             />
           </span>
           <span
-            display="inline"
             float="left"
             style={{
+              display: 'inline-grid',
+              justifyContent: 'end',
               width: '6%',
               textAlign: 'right',
               marginRight: '5px',
@@ -127,7 +128,7 @@ const LessonTitle = ({ lesson, selected, disabled, toggleTopic, includeLesson, e
               verticalAlign: 'top',
             }}
           >
-            <Icon name="info circle" />
+            <Icon name="info circle" style={{ marginRight: '0px' }}/>
           </span>
         </div>
         <div 

diff --git a/client/components/Lessons/LessonPracticeView/LessonPracticeTopicsHelp.js b/client/components/Lessons/LessonPracticeView/LessonPracticeTopicsHelp.js
@@ -115,7 +115,7 @@ const LessonPracticeTopicsHelp = ({selectedTopics, always_show=false, }) => {
                             alignItems: 'center',
                         }}
                     >
-                        <FormattedMessage id={'topics'} />
+                        <FormattedMessage id={'topics-header'} />
                         <Icon
                             name={collapsed ? 'chevron down' : 'chevron up'}
                             onClick={toggleCollapse}