fix: Merge pull request #138 from UniversalDataTool/refactoring-aws-i…

…mport-export

S3 Refactoring Import / Export, React Warning Fixes

.github/workflows/test.yml

@@ -1,7 +1,7 @@
 name: Test
-on: ["push", "pull_request"]
+on: ["pull_request"]
 jobs:
-  test:
+  iscodeclean:
     if: "!contains(github.event.head_commit.message, 'skip ci')"
     name: Test
     runs-on: ubuntu-18.04
@@ -14,3 +14,27 @@ jobs:
           node-version: 12
       - name: Run Prettier Test
         run: npx prettier --check "src/**/*.js"
+      - name: Run Lint Test
+        run: |
+          rm package.json
+          rm package-lock.json
+          npm init -y
+          npm install react-scripts
+          echo '{"extends": "react-app"}' > .eslintrc
+          npx eslint src
+  cypress-run:
+    needs: iscodeclean
+    runs-on: ubuntu-16.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v1
+        with:
+          start: npm run start
+          wait-on: http://localhost:6001
+          record: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

README.md

@@ -96,6 +96,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

package.json

@@ -25,6 +25,7 @@
     "gh-pages": "npm run build:web && npm run build:vanilla && cp lib/vanilla.js build/vanilla.js && cp ./CNAME ./build/CNAME && gh-pages -d build",
     "prettier": "prettier --write \"src/**/*.js\"",
     "test:prettier": "prettier --check \"src/**/*.js\"",
+    "test:lint": "npx eslint src",
     "test:integration:dev": "./node_modules/cypress/bin/cypress open",
     "test:integration": "./node_modules/cypress/bin/cypress run"
   },

src/components/AddAuthFromTemplateDialog/index.js

@@ -2,13 +2,8 @@
 
 import React, { useState } from "react"
 import Button from "@material-ui/core/Button"
-import Dialog from "@material-ui/core/Dialog"
-import DialogTitle from "@material-ui/core/DialogTitle"
-import DialogContent from "@material-ui/core/DialogContent"
-import DialogActions from "@material-ui/core/DialogActions"
 import { makeStyles } from "@material-ui/core/styles"
 import authTemplates from "./authTemplates"
-import { grey } from "@material-ui/core/colors"
 import SimpleDialog from "../SimpleDialog"
 import isEmpty from "../../utils/isEmpty"
 import Survey from "material-survey/components/Survey"
@@ -135,7 +130,7 @@ export default ({ open, onClose, onSelect, onFinish, onAuthConfigured }) => {
         onFinish={onFinish}
       >
         {isEmpty(authProvider) &&
-          authTemplates.map((template) => (
+          authTemplates.map((template, i) => (
             <Button
               key={template.name}
               onClick={() => {

src/components/BrushButton/index.js

@@ -1,19 +1,11 @@
 // @flow
 
-import React, { useState, useMemo, useRef, useEffect } from "react"
-import { useLocalStorage } from "react-use"
-import { createPortal } from "react-dom"
+import React, { useState } from "react"
 import IconButton from "@material-ui/core/IconButton"
 import BrushIcon from "@material-ui/icons/Brush"
-import ArrowForwardIcon from "@material-ui/icons/ArrowForward"
 import { styled } from "@material-ui/core/styles"
 import * as colors from "@material-ui/core/colors"
 import Button from "@material-ui/core/Button"
-import TextField from "@material-ui/core/TextField"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import AddBoxTwoTone from "@material-ui/icons/AddBoxTwoTone"
-import ExitToAppIcon from "@material-ui/icons/ExitToApp"
-import CircularProgress from "@material-ui/core/CircularProgress"
 import HeaderPopupBox from "../HeaderPopupBox"
 import useEventCallback from "use-event-callback"
 import memoize from "lodash/memoize"
@@ -36,17 +28,17 @@ const OtherColorContainers = styled("div")({
   flexWrap: "wrap",
 })
 
-const StyledIconButton = styled(IconButton)(({ iconColor, selected }) => ({
+const StyledIconButton = styled(IconButton)(({ iconcolor, selected }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  backgroundColor: iconColor[700],
-  border: selected ? `4px solid ${iconColor["A200"]}` : "4px solid #fff",
+  backgroundColor: iconcolor[700],
+  border: selected ? `4px solid ${iconcolor["A200"]}` : "4px solid #fff",
   boxSizing: "content-box",
   margin: 4,
   transition: "transform 200ms linear",
   "&:hover": {
-    backgroundColor: iconColor[800],
+    backgroundColor: iconcolor[800],
     transform: "scale(1.2,1.2)",
   },
   "&:active": {
@@ -55,16 +47,16 @@ const StyledIconButton = styled(IconButton)(({ iconColor, selected }) => ({
   },
 }))
 
-const StyledButton = styled(Button)(({ selected, iconColor }) => ({
+const StyledButton = styled(Button)(({ selected, iconcolor }) => ({
   justifyContent: "flex-start",
   marginTop: 4,
   marginBottom: 4,
   paddingTop: 8,
   paddingBottom: 8,
-  backgroundColor: selected ? iconColor[50] : "#fff",
-  border: selected ? `2px solid ${iconColor[200]}` : "2px solid #fff",
+  backgroundColor: selected ? iconcolor[50] : "#fff",
+  border: selected ? `2px solid ${iconcolor[200]}` : "2px solid #fff",
   "&:hover": {
-    backgroundColor: selected ? iconColor[100] : "none",
+    backgroundColor: selected ? iconcolor[100] : "none",
   },
 }))
 
@@ -88,7 +80,7 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
         <h1>Sample Brushes</h1>
         <StyledButton
           selected={selectedBrush === "complete" || selectedBrush === "blue"}
-          iconColor={colors.blue}
+          iconcolor={colors.blue}
           fullWidth
           onClick={handleClick("complete")}
         >
@@ -99,7 +91,7 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
           selected={
             selectedBrush === "review" || selectedBrush === "deepOrange"
           }
-          iconColor={colors.deepOrange}
+          iconcolor={colors.deepOrange}
           fullWidth
           onClick={handleClick("review")}
         >
@@ -110,32 +102,32 @@ export default ({ selectedBrush, onChangeSelectedBrush }) => {
           <StyledIconButton
             onClick={handleClick("green")}
             selected={selectedBrush === "green"}
-            iconColor={colors.green}
+            iconcolor={colors.green}
           />
           <StyledIconButton
             onClick={handleClick("purple")}
             selected={selectedBrush === "purple"}
-            iconColor={colors.purple}
+            iconcolor={colors.purple}
           />
           <StyledIconButton
             onClick={handleClick("pink")}
             selected={selectedBrush === "pink"}
-            iconColor={colors.pink}
+            iconcolor={colors.pink}
           />
           <StyledIconButton
             onClick={handleClick("cyan")}
             selected={selectedBrush === "cyan"}
-            iconColor={colors.cyan}
+            iconcolor={colors.cyan}
           />
           <StyledIconButton
             onClick={handleClick("orange")}
             selected={selectedBrush === "orange"}
-            iconColor={colors.orange}
+            iconcolor={colors.orange}
           />
           <StyledIconButton
             onClick={handleClick("indigo")}
             selected={selectedBrush === "indigo"}
-            iconColor={colors.indigo}
+            iconcolor={colors.indigo}
           />
         </OtherColorContainers>
       </HeaderPopupBox>

src/components/CollaborateButton/index.js

@@ -1,8 +1,7 @@
 // @flow
 
-import React, { useState, useMemo, useRef, useEffect } from "react"
+import React, { useState, useEffect } from "react"
 import { useLocalStorage } from "react-use"
-import { createPortal } from "react-dom"
 import IconButton from "@material-ui/core/IconButton"
 import PeopleIcon from "@material-ui/icons/People"
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward"
@@ -159,13 +158,12 @@ export default ({
             {error && <ErrorText>{error}</ErrorText>}
             <CreateNewButton
               fullWidth
-              disabled={error}
+              disabled={!fileOpen || loadingSession || error}
               onClick={() => {
                 posthog.capture("create_collaborative_session")
                 onCreateSession()
                 changeLoadingSession(true)
               }}
-              disabled={!fileOpen || loadingSession}
             >
               {loadingSession ? (
                 <CircularProgress className="icon" size={24} />

src/components/Composite/index.js

@@ -9,7 +9,6 @@ import InterfaceIcon from "../InterfaceIcon"
 import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight"
 import Checkbox from "@material-ui/core/Checkbox"
 import Box from "@material-ui/core/Box"
-import NextIcon from "@material-ui/icons/KeyboardArrowRight"
 
 const Title = styled("div")({
   fontSize: 18,

src/components/ConfigureComposite/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 import ConfigureInterface from "../ConfigureInterface"
 import { styled } from "@material-ui/core/styles"
 import ExpansionPanel from "@material-ui/core/ExpansionPanel"

src/components/ConfigureImageClassification/index.js

@@ -1,7 +1,6 @@
 // @flow
 import React, { useMemo } from "react"
 import Survey from "material-survey/components/Survey"
-import { styled } from "@material-ui/core/styles"
 import { setIn } from "seamless-immutable"
 
 const form = {
@@ -37,7 +36,7 @@ export default ({ iface, onChange }) => {
           typeof a === "string" ? { id: a, description: a } : a
         ) || [],
     }),
-    []
+    [iface.labels]
   )
   return (
     <Survey

src/components/ConfigureImageSegmentation/index.js

@@ -1,7 +1,6 @@
 // @flow
 import React, { useMemo } from "react"
 import Survey from "material-survey/components/Survey"
-import { styled } from "@material-ui/core/styles"
 import { setIn } from "seamless-immutable"
 
 const form = {
@@ -54,7 +53,7 @@ export default ({ iface, onChange }) => {
           typeof a === "string" ? { id: a, description: a } : a
         ) || [],
     }),
-    []
+    [iface]
   )
   return (
     <Survey

src/components/ConfigureInterface/index.js

@@ -9,19 +9,16 @@ import * as colors from "@material-ui/core/colors"
 import ConfigureImageSegmentation from "../ConfigureImageSegmentation"
 import ConfigureImageClassification from "../ConfigureImageClassification"
 import ConfigureTextClassification from "../ConfigureTextClassification"
-import PaperContainer from "../PaperContainer"
 import ConfigureAudioTranscription from "../ConfigureAudioTranscription"
 import ConfigureNLP from "../ConfigureNLP"
 import ConfigureDataEntry from "../ConfigureDataEntry"
 import ConfigureComposite from "../ConfigureComposite"
 import Configure3D from "../Configure3D"
 import ConfigureVideoSegmentation from "../ConfigureVideoSegmentation"
 import UniversalDataViewer from "../UniversalDataViewer"
-import { setIn } from "seamless-immutable"
 import Grid from "@material-ui/core/Grid"
 import LabelErrorBoundary from "../LabelErrorBoundary"
 import useEventCallback from "use-event-callback"
-import CircularProgress from "@material-ui/core/CircularProgress"
 
 const noop = () => {}
 
@@ -101,7 +98,6 @@ export const ConfigureInterface = ({
 }) => {
   const [previewChangedTime, changePreviewChangedTime] = useState(0)
   const [previewLoading, changePreviewLoading] = useState(false)
-  const [previewVersion, changePreviewVersion] = useState(0)
   const onChange = useEventCallback((...args) => {
     changePreviewChangedTime(Date.now())
     onChangeProp(...args)
@@ -111,7 +107,6 @@ export const ConfigureInterface = ({
     changePreviewLoading(true)
     let timeout = setTimeout(() => {
       changePreviewLoading(false)
-      changePreviewVersion(previewVersion + 1)
     }, 1000)
     return () => {
       clearTimeout(timeout)
@@ -128,17 +123,16 @@ export const ConfigureInterface = ({
               .map((t) => t.oha.interface)
               .find((t) => t.type === type) || {}
           )
-          // onChange(setIn(iface, ["type"], type))
         }}
       />
       <Grid container>
         <Grid item hidden={isNested} xs={12} lg={6}>
           <Heading>Preview</Heading>
           <PreviewContainer>
             <PreviewContent style={{ opacity: previewLoading ? 0.5 : 1 }}>
-              <LabelErrorBoundary key={previewVersion}>
+              <LabelErrorBoundary key={previewChangedTime}>
                 <UniversalDataViewer
-                  key={previewVersion}
+                  key={previewChangedTime}
                   height={600}
                   onExit={noop}
                   onSaveTaskOutputItem={noop}