feat: add build checks

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+lib/
+dist/

.eslintrc.json

@@ -1,4 +1,4 @@
 {
   "root": true,
-  "extends": ["smooth", "smooth/project"]
+  "extends": ["smooth", "smooth/react"]
 }

apps/client/.eslintrc.json

@@ -1,4 +1,3 @@
 {
-  "root": true,
   "extends": ["smooth/project", "smooth/react", "smooth/browser"]
 }

apps/client/package.json

@@ -4,32 +4,32 @@
   "private": true,
   "dependencies": {
     "@apollo/react-hooks": "^3.1.1",
-    "@bundle-analyzer/webpack-plugin": "^0.3.1",
+    "@bundle-analyzer/webpack-plugin": "^0.4.0",
     "@sentry/browser": "^5.6.3",
-    "@smooth-ui/core-sc": "^11.0.2",
-    "@xstyled/styled-components": "^1.11.0",
+    "@smooth-ui/core-sc": "^11.1.1",
+    "@xstyled/styled-components": "^1.13.1",
     "@xstyled/system": "^1.11.0",
     "apollo-boost": "^0.4.4",
     "axios": "^0.19.0",
     "core-js": "^3.2.1",
-    "filesize": "^4.2.0",
-    "graphql": "^14.5.6",
+    "filesize": "^4.2.1",
+    "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "history": "^4.10.1",
     "moment": "^2.24.0",
     "polished": "^3.4.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.8.3",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.10.1",
+    "react-dom": "^16.10.1",
     "react-helmet": "^5.2.1",
     "react-icons": "^3.7.0",
     "react-markdown": "^4.2.2",
-    "react-router-dom": "^5.0.1",
-    "reakit": "^1.0.0-beta.6",
+    "react-router-dom": "^5.1.1",
+    "reakit": "^1.0.0-beta.8",
     "regenerator-runtime": "^0.13.3",
     "store": "^2.0.12",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.4.0"
   },
   "scripts": {
     "dev": "webpack-dev-server",

apps/client/src/containers/StatusIcon.js

@@ -12,6 +12,8 @@ export function StatusIcon({ status, ...props }) {
       return <Box forwardedAs={FaCheck} color={buildColor} {...props} />
     case 'pending':
       return <Box forwardedAs={FaDotCircle} color={buildColor} {...props} />
+    case 'neutral':
+      return <Box forwardedAs={FaDotCircle} color={buildColor} {...props} />
     default:
       return null
   }

apps/client/src/modules/build.js

@@ -1,6 +1,6 @@
 export function getBuildStatus(build) {
   if (build.jobStatus === 'complete') {
-    return build.conclusion === 'success' ? 'success' : 'failure'
+    return build.conclusion
   }
   return 'pending'
 }
@@ -11,6 +11,8 @@ export function getStatusColor(status) {
       return 'success'
     case 'failure':
       return 'danger'
+    case 'neutral':
+      return 'gray600'
     case 'pending':
     default:
       return 'warning'

apps/client/src/pages/Repository/BuildDetail.js

@@ -199,40 +199,55 @@ export function Build({ build }) {
                 <CardTitle>Size checks</CardTitle>
               </CardHeader>
               <CardBody>
-                <Box style={{ overflowX: 'auto' }}>
-                  <Table>
-                    <thead>
-                      <tr>
-                        <th>Asset</th>
-                        <th style={{ width: 150 }}>Compression</th>
-                        <th style={{ width: 120 }}>Size</th>
-                        <th style={{ width: 120 }}>Max size</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {build.sizeReport.checks.map((check, index) => (
-                        <tr key={index}>
-                          <Box
-                            forwardedAs="td"
-                            color={getStatusColor(check.conclusion)}
-                          >
-                            <Box display="flex" alignItems="center">
-                              <StatusIcon status={check.conclusion} mr={2} />
-                              {check.name}
-                            </Box>
-                          </Box>
-                          <td>{check.compareCompression}</td>
-                          <td>
-                            <FileSize>{check.compareSize}</FileSize>
-                          </td>
-                          <td>
-                            <FileSize>{check.compareMaxSize}</FileSize>
-                          </td>
+                {build.sizeReport.checks.length === 0 ? (
+                  <Box>
+                    No size check configured on the project.{' '}
+                    <FadeLink
+                      target="_blank"
+                      rel="noopener noreferer"
+                      href="https://docs.bundle-analyzer.com"
+                      color="white"
+                    >
+                      See documentation to learn how to configure size checks
+                    </FadeLink>
+                    .
+                  </Box>
+                ) : (
+                  <Box style={{ overflowX: 'auto' }}>
+                    <Table>
+                      <thead>
+                        <tr>
+                          <th>Asset</th>
+                          <th style={{ width: 150 }}>Compression</th>
+                          <th style={{ width: 120 }}>Size</th>
+                          <th style={{ width: 120 }}>Max size</th>
                         </tr>
-                      ))}
-                    </tbody>
-                  </Table>
-                </Box>
+                      </thead>
+                      <tbody>
+                        {build.sizeReport.checks.map((check, index) => (
+                          <tr key={index}>
+                            <Box
+                              forwardedAs="td"
+                              color={getStatusColor(check.conclusion)}
+                            >
+                              <Box display="flex" alignItems="center">
+                                <StatusIcon status={check.conclusion} mr={2} />
+                                {check.name}
+                              </Box>
+                            </Box>
+                            <td>{check.compareCompression}</td>
+                            <td>
+                              <FileSize>{check.compareSize}</FileSize>
+                            </td>
+                            <td>
+                              <FileSize>{check.compareMaxSize}</FileSize>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </Table>
+                  </Box>
+                )}
               </CardBody>
             </Card>
           </Box>

apps/server/.babelrc.js

@@ -0,0 +1,11 @@
+const path = require('path')
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { loose: true, targets: { node: 'current' } }],
+  ],
+  plugins: [
+    ['module-resolver', { root: [path.resolve(__dirname, './src')] }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+  ],
+}

apps/server/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["smooth/project"]
+}