Merge branch 'master' of github.com:UniversityOfHelsinkiCS/lomake

UniversityOfHelsinkiCS · May 11, 2020 · 2e1ebeb · 2e1ebeb
2 parents 8d6e756 + 9a064f8
commit 2e1ebeb
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 35 deletions.
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -0,0 +1,47 @@
+name: Test and build production-image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-test-deploy:
+    runs-on: ubuntu-16.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: npm ci
+        run: npm ci
+
+      - name: docker-compose up -d
+        run: docker-compose up -d
+
+      - name: set env-variable TESTING=true
+        run: echo "TESTING=TRUE" > .env
+
+      - name: Run cypress tests
+        run: ./node_modules/.bin/cypress run --headless *.spec.js
+
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: /home/runner/work/lomake/lomake/cypress/screenshots
+      # Test run video was always captured, so this action uses "always()" condition
+      - uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: /home/runner/work/lomake/lomake/cypress/videos
+
+      - uses: actions/checkout@master
+      - name: Publish to DockerHub
+        uses: elgohr/[email protected]
+        with:
+          name: toska/lomake
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          buildargs: BASE_PATH=/lomake/
+          tags: 'production'
+          cache: true
diff --git a/.github/workflows/main.yml → .github/workflows/staging.yml b/.github/workflows/main.yml → .github/workflows/staging.yml
@@ -1,4 +1,4 @@
-name: CI
+name: Test and build staging-image
 
 on:
   push:
@@ -43,5 +43,5 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           buildargs: BASE_PATH=/lomake/
-          tags: 'production'
+          tags: 'staging'
           cache: true
diff --git a/client/components/Generic/CustomModal.js b/client/components/Generic/CustomModal.js
@@ -3,14 +3,19 @@ import './CustomModal.scss'
 import { Icon } from 'semantic-ui-react'
 import useOnClickOutside from '../../util/useOnClickOutside'
 
-const CustomModal = ({ children, title, closeModal }) => {
+const CustomModal = ({ children, title, closeModal, borderColor }) => {
   const ref = useRef()
   useOnClickOutside(ref, closeModal)
+  console.log('borderColor', borderColor)
   return (
     <div className="outer">
-      <div className="inner" ref={ref}>
+      <div
+        className="inner"
+        style={borderColor ? { border: '3px solid', borderColor } : {}}
+        ref={ref}
+      >
         <div className="title-and-close">
-          {title}
+          <span style={{ maxWidth: '75%' }}>{title}</span>
           <Icon name="close" onClick={closeModal} style={{ cursor: 'pointer' }} />
         </div>
         {children}

diff --git a/client/components/Generic/CustomModal.scss b/client/components/Generic/CustomModal.scss
@@ -24,7 +24,8 @@
 .title-and-close {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  line-height: 1.2em;
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 0.5em;

diff --git a/client/components/OverviewPage/SmileyTable.js b/client/components/OverviewPage/SmileyTable.js
@@ -184,11 +184,11 @@ const SmileyTable = ({ setModalData, filteredProgrammes, year, setProgramControl
             {tableIds.map((idObject, qi) => (
               <SmileyTableCell
                 key={`${p.key}-${idObject.id}`}
+                programmesName={p.name[languageCode] ? p.name[languageCode] : p.name['en']}
                 programmesKey={p.key}
                 programmesAnswers={programme && programme.data ? programme.data : {}}
                 questionId={idObject.id}
                 questionType={idObject.type}
-                questionIndex={qi}
                 setModalData={setModalData}
               />
             ))}

diff --git a/client/components/OverviewPage/SmileyTableCell.js b/client/components/OverviewPage/SmileyTableCell.js
@@ -16,11 +16,11 @@ const backgroundColorMap = {
 }
 
 const SmileyTableCell = ({
+  programmesName,
   programmesKey,
   programmesAnswers,
   questionId,
   questionType,
-  questionIndex,
   setModalData,
 }) => {
   const languageCode = useSelector((state) => state.language)
@@ -76,7 +76,7 @@ const SmileyTableCell = ({
 
                 return acc
               }, ''),
-              programme: programmesKey,
+              programme: programmesName,
               content: textAnswer,
               color: lightAnswer,
             })
@@ -116,7 +116,7 @@ const SmileyTableCell = ({
 
                 return acc
               }, ''),
-              programme: programmesKey,
+              programme: programmesName,
               content: textAnswer,
               color: lightAnswer,
             })

diff --git a/client/components/OverviewPage/index.js b/client/components/OverviewPage/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Modal, Header, Input, Select, Radio } from 'semantic-ui-react'
+import { Header, Input, Select, Radio } from 'semantic-ui-react'
 import SmileyTable from './SmileyTable'
 import { useSelector } from 'react-redux'
 import ReactMarkdown from 'react-markdown'
@@ -26,12 +26,6 @@ export default () => {
     setYear(value)
   }
 
-  const backgroundColorMap = {
-    green: '#9dff9d',
-    yellow: '#ffffb1',
-    red: '#ff7f7f',
-  }
-
   const translations = {
     noPermissions: {
       fi:
@@ -70,24 +64,20 @@ export default () => {
 
   return (
     <>
-      <Modal open={!!modalData} onClose={() => setModalData(null)} basic size="small" closeIcon>
-        {/* Right now header is showing the question id but in the final version the full question is shown */}
-        <Header icon="question" content={modalData ? modalData.header : ''} />
-        <Modal.Content>
-          <Modal.Description>
-            <span style={{ fontSize: '1.2em', fontWeight: 'bold' }}>
-              {modalData ? modalData.programme : ''}
-            </span>
-          </Modal.Description>
-          <span
-            style={{
-              color: backgroundColorMap[modalData ? modalData.color : 'green'],
-            }}
-          >
-            <ReactMarkdown source={modalData ? modalData.content : ''} />
-          </span>
-        </Modal.Content>
-      </Modal>
+      {modalData && (
+        <CustomModal
+          title={modalData.header}
+          closeModal={() => setModalData(null)}
+          borderColor={modalData.color}
+        >
+          <>
+            <div style={{ paddingBottom: '1em' }}>{modalData.programme}</div>
+            <div style={{ fontSize: '1.2em' }}>
+              <ReactMarkdown source={modalData.content} />
+            </div>
+          </>
+        </CustomModal>
+      )}
 
       {programControlsToShow && (
         <CustomModal