CI workflow (front-end)

.github/workflows/ci_workflow.yml

@@ -0,0 +1,52 @@
+name: CI
+
+on: [pull_request]
+
+jobs:
+  build:
+    env:
+      working-directory: .
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Build
+        run: |
+            docker build -t bot-flow .
+        working-directory: ${{env.working-directory}}
+  test:
+    env:
+      working-directory: ./app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Install dependencies
+        run: |
+          yarn install
+        working-directory: ${{env.working-directory}}
+      - name: Run tests
+        run: |
+          yarn test --ci --coverage --color
+        working-directory: ${{env.working-directory}}
+  lint:
+    env:
+      working-directory: ./app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      - name: Install dependencies
+        run: |
+          yarn install
+        working-directory: ${{env.working-directory}}
+      - name: Run eslint
+        run: |
+          yarn lint
+        working-directory: ${{env.working-directory}}

app/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

app/package.json

@@ -22,7 +22,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -42,7 +43,12 @@
   "devDependencies": {
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "react-test-renderer": "^16.9.0"
   }
 }

app/src/components/CustomSnackbar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 import clsx from 'clsx';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
@@ -19,7 +19,7 @@ const variantIcon = {
   info: InfoIcon,
 };
 
-const useStyles1 = makeStyles(theme => ({
+const useStyles1 = makeStyles((theme) => ({
   success: {
     backgroundColor: green[600],
   },
@@ -47,24 +47,26 @@ const useStyles1 = makeStyles(theme => ({
 
 export default function SnackbarContentCustom(props) {
   const classes = useStyles1();
-  const { className, message, onClose, variant, } = props;
+  const {
+    className, message, onClose, variant,
+  } = props;
   const Icon = variantIcon[variant];
 
   return (
     <SnackbarContent
       className={clsx(classes[variant], className)}
       aria-describedby="client-snackbar"
-      message={
+      message={(
         <span id="client-snackbar" className={classes.message}>
           <Icon className={clsx(classes.icon, classes.iconVariant)} />
           {message}
         </span>
-      }
+      )}
       action={[
         <IconButton key="close" aria-label="close" color="inherit" onClick={onClose}>
           <CloseIcon className={classes.icon} />
         </IconButton>,
       ]}
     />
   );
-}
+}

app/src/components/DeleteSnackbar.js

@@ -1,40 +1,40 @@
-
-import React, { Component } from "react";
-import {message} from '../utils/messages';
+import React, { Component } from 'react';
 import { Button } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';
+import { message } from '../utils/messages';
 
 class DeleteSnackbar extends Component {
-    handleUndoSnack() {
-        this.props.handleUndo();
-        this.props.handleSnackbarClick();
-    }
+  handleUndoSnack() {
+    this.props.handleUndo();
+    this.props.handleSnackbarClick();
+  }
 
-    render() {
-        return (
-            <Snackbar
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'center',
-                }}
-                open={this.props.undo}
-                autoHideDuration={2000}
-                onClose={() => this.props.handleSnackbarClick(false)}
-                ContentProps={{
-                    'aria-describedby': 'message-id',
-                }}
-                message={<span className="success" id="message-id">{message.deleted}</span>}
-                action={[
-                    <Button
-                        key="undo"
-                        color="secondary"
-                        size="small"
-                        onClick={() => this.handleUndoSnack()}>
-                        Desfazer
-                    </Button>
-                ]}
-            />
-        )
-    }
+  render() {
+    return (
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        open={this.props.undo}
+        autoHideDuration={2000}
+        onClose={() => this.props.handleSnackbarClick(false)}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span className="success" id="message-id">{message.deleted}</span>}
+        action={[
+          <Button
+            key="undo"
+            color="secondary"
+            size="small"
+            onClick={() => this.handleUndoSnack()}
+          >
+            Desfazer
+          </Button>,
+        ]}
+      />
+    );
+  }
 }
-export default DeleteSnackbar;
+export default DeleteSnackbar;

app/src/components/DeletionConfirmationDialog.js

@@ -1,37 +1,34 @@
-
-import React from "react";
-import { message } from '../utils/messages';
+import React from 'react';
 import { Button } from '@material-ui/core';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { message } from '../utils/messages';
 
-const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem }) => {
-    return (
-        <Dialog
-            open={dialog_status}
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-        >
-            <DialogTitle id="alert-dialog-title">{message.delete_confirmation}</DialogTitle>
-            <DialogActions>
-                <Button
-                    color="primary"
-                    onClick={() => handleClose(false)}
-                >
-                    Cancelar
-                    </Button>
-                <Button
-                    autoFocus
-                    color="primary"
-                    onClick={() => deleteItem()}
-                >
-                    Apagar
-                    </Button>
-            </DialogActions>
-        </Dialog>
+const DeletionConfirmationDialog = ({ dialog_status, handleClose, deleteItem }) => (
+  <Dialog
+    open={dialog_status}
+    aria-labelledby="alert-dialog-title"
+    aria-describedby="alert-dialog-description"
+  >
+    <DialogTitle id="alert-dialog-title">{message.delete_confirmation}</DialogTitle>
+    <DialogActions>
+      <Button
+        color="primary"
+        onClick={() => handleClose(false)}
+      >
+        Cancelar
+      </Button>
+      <Button
+        autoFocus
+        color="primary"
+        onClick={() => deleteItem()}
+      >
+        Apagar
+      </Button>
+    </DialogActions>
+  </Dialog>
 
-    )
-}
+);
 
-export default DeletionConfirmationDialog;
+export default DeletionConfirmationDialog;