kicking off new build manually will push build to build list (#378)

Dan Wilson · web-flow · commit 9afe3e28bee8 · 2021-09-09T09:45:44.000+01:00
diff --git a/src/components/pages/repo/build-list/build-list.jsx b/src/components/pages/repo/build-list/build-list.jsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames/bind';
 import { formatDistanceStrict } from 'date-fns';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -11,59 +12,89 @@ import styles from './build-list.module.scss';
 
 const cx = classNames.bind(styles);
 
-const BuildList = (props) => {
-  const { url, data } = props;
-  return (
-    <ul className={cx('list')}>
-      {props.data.map((build) => (
-        <li key={build.id}>
-          <Link to={`${url}/${build.number}`}>
-            <div className={cx('list-item')}>
-              <div className={cx('status')}>
-                <Status status={build.status} />
-                <div className={cx('connector')} />
+const BuildListItem = ({ build, url }) => (
+  <li>
+    <Link to={`${url}/${build.number}`}>
+      <div className={cx('list-item')}>
+        <div className={cx('status')}>
+          <Status status={build.status} />
+          <div className={cx('connector')} />
+        </div>
+        <div className={cx('container')}>
+          <div className={cx('header')}>
+            <div className={cx('number')}>{build.number}</div>
+            <div className={cx('commit')}>{build.title || build.message?.trim()}</div>
+          </div>
+          <div className={cx('content')}>
+            <Activity
+              className={cx('activity')}
+              number={build.number}
+              event={build.event}
+              action={build.action}
+              actor={build.sender}
+              avatar={build.author_avatar}
+              commit={build.after}
+              branch={build.target}
+              target={build.deploy_to}
+              parent={build.parent}
+              cron={build.cron}
+              refs={build.ref}
+            />
+            <div className={cx('timing')}>
+              <div>
+                {formatDistanceStrict(new Date(build.created * 1000), new Date(), { addSuffix: true })}
               </div>
-              <div className={cx('container')}>
-                <div className={cx('header')}>
-                  <div className={cx('number')}>{build.number}</div>
-                  <div className={cx('commit')}>{build.title || build.message?.trim()}</div>
-                </div>
-                <div className={cx('content')}>
-                  <Activity
-                    className={cx('activity')}
-                    number={build.number}
-                    event={build.event}
-                    action={build.action}
-                    actor={build.sender}
-                    avatar={build.author_avatar}
-                    commit={build.after}
-                    branch={build.target}
-                    target={build.deploy_to}
-                    parent={build.parent}
-                    cron={build.cron}
-                    refs={build.ref}
-                  />
-                  <div className={cx('timing')}>
-                    <div>
-                      {formatDistanceStrict(new Date(build.created * 1000), new Date(), { addSuffix: true })}
-                    </div>
-                    <div className={cx('dot')}><span /></div>
-                    <div>
-                      <Elapsed
-                        started={build.started}
-                        finished={build.finished}
-                        className={cx('elapsed')}
-                      />
-                    </div>
-                  </div>
-                </div>
+              <div className={cx('dot')}><span /></div>
+              <div>
+                <Elapsed
+                  started={build.started}
+                  finished={build.finished}
+                  className={cx('elapsed')}
+                />
               </div>
             </div>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  );
+          </div>
+        </div>
+      </div>
+    </Link>
+  </li>
+);
+
+const BuildList = ({ data, url }) => (
+  <ul className={cx('list')}>
+    {data.map((build) => <BuildListItem key={build.number} build={build} url={url} />)}
+  </ul>
+);
+
+const buildPropTypes = PropTypes.shape({
+  id: PropTypes.number,
+  number: PropTypes.number,
+  status: PropTypes.string,
+  title: PropTypes.number,
+  message: PropTypes.string,
+  event: PropTypes.string,
+  action: PropTypes.string,
+  sender: PropTypes.string,
+  author_avatar: PropTypes.string,
+  after: PropTypes.string,
+  target: PropTypes.string,
+  deploy_to: PropTypes.string,
+  parent: PropTypes.string,
+  cron: PropTypes.bool,
+  ref: PropTypes.string,
+  created: PropTypes.number,
+  started: PropTypes.number,
+  finished: PropTypes.number,
+});
+
+BuildListItem.propTypes = {
+  build: buildPropTypes.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+BuildList.propTypes = {
+  data: PropTypes.arrayOf(buildPropTypes).isRequired,
+  url: PropTypes.string.isRequired,
 };
 
 export default BuildList;
diff --git a/src/components/pages/repo/new-build-form/new-build-form.jsx b/src/components/pages/repo/new-build-form/new-build-form.jsx
@@ -85,11 +85,13 @@ const NewBuildForm = ({ handleSubmit, handleCancel }) => {
         ) : null}
         <div className={cx('new-build-form-parameters-fields')}>
           <Field.Input
+            name="newKey"
             placeholder="key"
             value={parameterState.key}
             onChange={handleParameterChange('key')}
           />
           <Field.Input
+            name="newVal"
             placeholder="value"
             value={parameterState.value}
             onChange={handleParameterChange('value')}
diff --git a/src/components/shared/bar-chart/bar-chart.jsx b/src/components/shared/bar-chart/bar-chart.jsx
@@ -82,7 +82,7 @@ const BarChart = (props) => {
     if (data.length < barsShown) {
       const barPlaceholders = Array
         .from({ length: barsShown - data.length },
-          (_, i) => ({ number: data.length + i + 1 }));
+          (_, i) => ({ number: 0 - i }));
       return withHeight.concat(barPlaceholders);
     }
     return withHeight;
@@ -143,12 +143,14 @@ BarChart.propTypes = {
   height: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
   minBarWidth: PropTypes.number,
+  minGapWidth: PropTypes.number,
   barsShown: PropTypes.number,
 };
 
 BarChart.defaultProps = {
   className: '',
   minBarWidth: MIN_BAR_WIDTH,
+  minGapWidth: MIN_GAP_WIDTH,
   barsShown: BARS_SHOWN,
 };
 
diff --git a/src/hooks/swr/builds.js b/src/hooks/swr/builds.js
@@ -77,7 +77,7 @@ const updateLatestRepos = (repo) => (latest) => {
 };
 
 // activity feed updater
-const updateBuilds = async (slug, repo) => {
+const updateBuilds = async (slug, repo, newBuild = null) => {
   if (`/${repo.namespace}/${repo.name}` !== slug) {
     // no need to do anything actually since user
     // is on the activity feed of another repo
@@ -103,7 +103,7 @@ const updateBuilds = async (slug, repo) => {
   */
   const path = `arg@"many"@"/api/repos${slug}/builds?page=1&per_page=${MAX_PAGE_LENGTH}"`;
   mutateGlobal(path, async (builds) => {
-    const { build } = repo;
+    const build = newBuild ?? repo.build;
     /* if no cache or no data,
     / just return an array with received build
     */
@@ -187,5 +187,5 @@ const useStreamBuildEvents = () => {
 };
 
 export {
-  useBuilds, useBuild, useStreamBuildEvents,
+  useBuilds, useBuild, useStreamBuildEvents, updateBuilds,
 };
diff --git a/src/hooks/swr/index.js b/src/hooks/swr/index.js
@@ -1,5 +1,5 @@
 import {
-  useBuild, useBuilds, useStreamBuildEvents,
+  useBuild, useBuilds, useStreamBuildEvents, updateBuilds,
 } from './builds';
 import { useLogs, useStreamLogs } from './logs';
 import { useRepo, useLatestRepos } from './repo';
@@ -15,6 +15,7 @@ export {
   useSyncAccount,
   useBuild,
   useBuilds,
+  updateBuilds,
   useBranches,
   useDeployments,
   useRepo,
diff --git a/src/pages/repo/repo.jsx b/src/pages/repo/repo.jsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
 import React, {
   useCallback, useMemo, useContext,
 } from 'react';
@@ -13,7 +14,7 @@ import Button from 'components/shared/button';
 import Modal, { useModal } from 'components/shared/modal';
 import { AppContext } from 'context';
 import { useToast } from 'hooks';
-import { useRepo } from 'hooks/swr';
+import { useRepo, updateBuilds } from 'hooks/swr';
 import NotFound from 'pages/not-found';
 import { Routes } from 'routes/routes';
 import { ReactComponent as DemoIcon } from 'svg/demo.svg';
@@ -57,7 +58,7 @@ const getTabProps = ({
 const Repo = ({ user }) => {
   const { params } = useRouteMatch();
   const {
-    namespace, name, build, stage = 1, step = 1,
+    namespace, name,
   } = params;
   const [context] = useContext(AppContext);
   const { isRepoNavDisabled } = context;
@@ -106,16 +107,17 @@ const Repo = ({ user }) => {
       }
     }
     try {
-      await axiosWrapper(endpoint, {
+      const newBuild = await axiosWrapper(endpoint, {
         method: 'POST',
       });
       showSuccess('New build has started successfully');
+      updateBuilds(window.location.pathname, repo, newBuild);
     } catch (e) {
       showError(`Unable to start a new build: ${e.message}`);
       // eslint-disable-next-line no-console
       console.warn(e.message);
     }
-  }, [name, namespace, showError, showSuccess]);
+  }, [name, namespace, showError, showSuccess, repo]);
   if (isRepoDataLoading) {
     return null;
   }
@@ -214,4 +216,10 @@ const Repo = ({ user }) => {
   );
 };
 
+Repo.propTypes = {
+  user: PropTypes.shape({
+    admin: PropTypes.bool,
+  }).isRequired,
+};
+
 export default Repo;
