Merge pull request #1 from FelixHenninger/master

Merge from upstream
ctrl-labs · Sep 30, 2020 · 4e6422c · 4e6422c
2 parents 82f9de8 + 2cd4c80
commit 4e6422c
Show file tree

Hide file tree

Showing 9 changed files with 831 additions and 216 deletions.
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/header.js
@@ -5,9 +5,10 @@ import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 import classnames from 'classnames'
 
 import { useArrayContext } from '../../../../../Form/array'
-import { ButtonCell } from '../../../../../Form/table'
+import { ButtonCell, DefaultHeader } from '../../../../../Form/table'
 import Icon from '../../../../../Icon'
 import { FastField, useField } from 'formik'
+import { range } from 'lodash'
 
 const CellTypeDropdown = ({ name, index, actions, disabled=false }) => {
   const [field, , helpers] = useField(name)
@@ -100,32 +101,34 @@ export const HeaderCell = ({ index, actions }) =>
     />
   </InputGroup>
 
-export default ({ name, columns }) => {
+export default ({ columns }) => {
   const { addColumn, fillColumn, clearColumn, deleteColumn } = useArrayContext()
 
   return (
-    <thead>
-      <tr>
-        <th></th>
-        { Array(columns).fill(null).map((_, i) =>
-          <th key={ `${ name }-header-${ i }` }>
-            <HeaderCell
-              index={ i }
-              actions={{
-                'Fill': fillColumn,
-                'Clear': clearColumn,
-                'Delete': deleteColumn,
-              }}
-            />
-          </th>
-        ) }
-        <ButtonCell
-          type="th" icon="plus"
-          style={{ height: '42px' }}
-          onClick={ () => addColumn('', { name: '', type: 'string' }) }
-          disabled={ columns >= 12 }
-        />
-      </tr>
-    </thead>
+    <DefaultHeader columns={ columns }>
+      <thead>
+        <tr>
+          <th></th>
+          { range(columns).map((_, i) =>
+            <th key={ `header-${ i }` }>
+              <HeaderCell
+                index={ i }
+                actions={{
+                  'Fill': fillColumn,
+                  'Clear': clearColumn,
+                  'Delete': deleteColumn,
+                }}
+              />
+            </th>
+          ) }
+          <ButtonCell
+            type="th" icon="plus"
+            style={{ height: '42px' }}
+            onClick={ () => addColumn('', { name: '', type: 'string' }) }
+            disabled={ columns >= 12 }
+          />
+        </tr>
+      </thead>
+    </DefaultHeader>
   )
 }
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
@@ -2,26 +2,26 @@ import React, { Fragment } from 'react'
 
 import { FastField, useFormikContext } from 'formik'
 import classnames from 'classnames'
+import { range } from 'lodash'
 
+import { Table, DefaultRow } from '../../../../../Form/table'
 import Header from './header'
 import Footer from './footer'
-import { Table, DefaultRow } from '../../../../../Form/table'
 
 import './style.css'
 
-const Row = ({ index: rowIndex, name, data, arrayHelpers }) =>
+const Row = ({ index: rowIndex, name, columns, arrayHelpers }) =>
   <DefaultRow
     index={ rowIndex } arrayHelpers={ arrayHelpers }
     wrapper={ Fragment }
   >
-    { data.map(
-      (_, columnIndex) =>
-        <td key={ `${ name }[${ columnIndex }]` }>
-          <FastField
-            name={ `${ name }[${ columnIndex }]` }
-            className="form-control text-monospace"
-          />
-        </td>
+    { range(columns).map(columnIndex =>
+      <td key={ `${ name }[${ columnIndex }]` }>
+        <FastField
+          name={ `${ name }[${ columnIndex }]` }
+          className="form-control text-monospace"
+        />
+      </td>
     ) }
   </DefaultRow>
 
@@ -32,8 +32,8 @@ export default () => {
 
   return <Table
     name="templateParameters.rows"
-    row={ Row }
     columns={ columns }
+    row={ Row }
     header={ Header }
     footer={ Footer }
     defaultItem={ Array(columns).fill('') }

diff --git a/packages/builder/src/components/Form/array.js b/packages/builder/src/components/Form/array.js
@@ -90,10 +90,11 @@ export const useArrayContext = () => useContext(ArrayContext)
 
 export const FormArray = ({
   name, item: Item,
-  header: Header, footer: Footer,
-  wrapper: Wrapper=Fragment,
-  wrapperProps,
+  header: Header,
+  footer: Footer,
+  wrapper: Wrapper=Fragment, wrapperProps,
   bodyWrapper: BodyWrapper=Fragment,
+  globalProps={},
   defaultItem={},
 }) => {
   const { values, setFieldValue, setValues }  = useFormikContext()
@@ -110,7 +111,7 @@ export const FormArray = ({
             setValues={ setValues }
             setFieldValue={ setFieldValue }
           >
-            { Header && <Header name={ name } /> }
+            { Header && <Header { ...globalProps } /> }
             <BodyWrapper>
               {
                 (rows || []).map(
@@ -122,11 +123,12 @@ export const FormArray = ({
                       isLastItem={ index === rows.length - 1 }
                       data={ data }
                       arrayHelpers={ arrayHelpers }
+                      { ...globalProps }
                     />
                 )
               }
             </BodyWrapper>
-            { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } /> }
+            { Footer && <Footer addItem={ (item) => arrayHelpers.push(item || defaultItem) } { ...globalProps } /> }
           </ArrayContextProvider>
         </Wrapper>
       }

diff --git a/packages/builder/src/components/Form/table.js b/packages/builder/src/components/Form/table.js
@@ -84,24 +84,26 @@ const DefaultFooter = ({ addItem, columns }) =>
     </tr>
   </tfoot>
 
+export const DefaultHeader = ({ columns, children }) =>
+  <>
+    <DefaultColgroup columns={ columns }/>
+    { children }
+  </>
+
 export const Table = ({
-  header: Header,
   row,
-  footer: Footer=DefaultFooter,
+  header=DefaultHeader,
+  footer=DefaultFooter,
   columns=1,
   className, ...props
 }) =>
   <FormArray
     wrapper="table"
     wrapperProps={{ className: `table grid ${ className }` }}
-    header={ ({ name }) =>
-      <>
-        <DefaultColgroup name={ props.name } columns={ columns }/>
-        { Header && <Header name={ name } columns={ columns } /> }
-      </>
-    }
     bodyWrapper="tbody"
     item={ row }
-    footer={ (props) => <Footer columns={ columns } { ...props } /> }
+    header={ header }
+    footer={ footer }
+    globalProps={{ columns }}
     { ...props }
   />
diff --git a/packages/builder/src/components/Modal/components/ExportNetlify/widget.js b/packages/builder/src/components/Modal/components/ExportNetlify/widget.js
@@ -15,8 +15,8 @@ import exportStaticNetlify from '../../../../logic/io/export/modifiers/netlify'
 const validateApiKey = value => {
   if (!value) {
     return 'We\'ll need a API key to upload the study'
-  } else if (value.length !== 64) {
-    return 'The keys are typically 64 characters long'
+  } else if (![64, 43].includes(value.length)) {
+    return 'The keys are typically 43 or 64 characters long'
   }
 }
 

diff --git a/packages/builder/src/logic/io/export/modifiers/jatos.js b/packages/builder/src/logic/io/export/modifiers/jatos.js
@@ -93,14 +93,14 @@ const addJatosIntegration = (state) => {
 
   // TODO: This is probably not the most elegant way to
   // achieve integration -- possibly a plugin would be nicer?
-  state.components.root.messageHandlers.push([{
+  state.components.root.messageHandlers.push({
     title: 'JATOS integration',
     message: 'epilogue',
     code: stripIndent`
       var resultJson = study.options.datastore.exportJson();
       jatos.submitResultData(resultJson, jatos.startNextComponent);
     `
-  }])
+  })
 
   return state
 }

diff --git a/packages/library/package.json b/packages/library/package.json
@@ -32,7 +32,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.0",
     "@babel/plugin-transform-regenerator": "^7.8.0",
     "@babel/plugin-transform-runtime": "^7.8.0",
-    "@babel/preset-env": "^7.8.0",
+    "@babel/preset-env": "^7.9.0",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-istanbul": "^5.1.0",
@@ -62,7 +62,7 @@
     "postcss-preset-env": "^6.7.0",
     "requirejs": "^2.3.3",
     "shelljs": "^0.8.2",
-    "shx": "^0.2.2",
+    "shx": "^0.3.2",
     "sinon": "^7.0.0",
     "webpack": "^4.8.0",
     "webpack-bundle-analyzer": "^3.0.0",

diff --git a/packages/website/content/resources/support.md b/packages/website/content/resources/support.md
@@ -36,10 +36,10 @@ menu = "header"
     </div>
     <div class="col-lg d-flex align-items-center justify-content-center">
       <iframe
-        src="https://slackin-nmbrcrnchrs.herokuapp.com/"
+        src="https://slackin-numbercrunchers.herokuapp.com/"
         scrolling="no"
         class="w-100 border border-light rounded"
-        style="min-height: 400px; overflow: hidden"
+        style="min-height: 500px; overflow: hidden"
       ></iframe>
     </div>
   </div>