feat(front): add quick links to PRs in card titles (#194)

berty · May 8, 2020 · ed995d4 · ed995d4
1 parent 7a3c396
commit ed995d4
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 12 deletions.
diff --git a/web/src/ui/components/BuildCard/BuildCard.js b/web/src/ui/components/BuildCard/BuildCard.js
@@ -15,6 +15,7 @@ import {
   faAlignLeft,
   faHammer,
   faPencilAlt,
+  faFile,
 } from '@fortawesome/free-solid-svg-icons';
 
 import {ThemeContext} from '../../../store/ThemeStore';
@@ -62,15 +63,14 @@ const BuildCard = ({build, toCollapse}) => {
     has_project: {id: buildProjectUrl = ''} = {},
   } = build || {};
 
+  const COMMIT_LEN = 7;
+  const MESSAGE_LEN = 280;
   const isMaster = buildBranch && buildBranch.toUpperCase() === 'MASTER';
   const {has_mergerequest: buildHasMr = false} = build;
 
   const timeSinceUpdated = getRelativeTime(buildUpdatedAt);
   const timeSinceCreated = getRelativeTime(buildCreatedAt);
 
-  const COMMIT_LEN = 7;
-  const MESSAGE_LEN = 280;
-
   const colorInteractiveText = {
     color: theme.text.blockTitle,
   };
@@ -79,30 +79,81 @@ const BuildCard = ({build, toCollapse}) => {
     color: theme.text.sectionText,
   };
 
+  const mrDisplayShortId = mrShortId && <>{`#${mrShortId}`}</>;
+  const mrDisplayId = mrDisplayShortId || <>{mrId}</>;
+
+  const buildDisplayShortId = buildShortId && <>{`#${buildShortId}`}</>;
+  const buildDisplayId = buildDisplayShortId || <>{buildId}</>;
+
+  const CardTitleMasterNoMr = isMaster && <>Master - build {buildDisplayId}</>;
+  const CardTitleMasterWithMr = isMaster && buildHasMr && <>Master</>;
+  const CardTitlePullWithMr = !isMaster && mrShortId && (
+    <>
+      Pull{' '}
+      <u>
+        <a href={mrId}>{mrDisplayId}</a>
+      </u>
+    </>
+  );
+  const CardDefaultTitle = <>Build {buildDisplayId}</>;
+
+  const CardSubtitleMasterWithMr = isMaster && buildHasMr && (
+    <>
+      Merge{' '}
+      <u>
+        <a href={mrId}>{mrDisplayId}</a>
+      </u>
+    </>
+  );
+  const CardSubtitlePullWithMr = !isMaster && mrShortId && <>{mrTitle}</>;
+  const CardSubtitleDefault = '';
+
   const CardTitle = (
     <div className="card-title">
       <div className="short-card-title">
-        {mrShortId
-          ? 'Pull ' + mrShortId
-          : buildShortId
-          ? (isMaster ? 'Master ' : 'Build ') + buildShortId
-          : ''}
+        {CardTitleMasterWithMr ||
+          CardTitleMasterNoMr ||
+          CardTitlePullWithMr ||
+          CardDefaultTitle}
       </div>
       <div className="card-mr-subtitle" style={colorPlainText}>
-        {mrTitle ? mrTitle : ''}
+        {CardSubtitleMasterWithMr ||
+          CardSubtitlePullWithMr ||
+          CardSubtitleDefault}
       </div>
     </div>
   );
 
-  const CardIcon = isMaster ? (
+  const CardIconMasterWithMr = isMaster && buildHasMr && (
     <div className="card-left-icon rotate-merge">
       <GitCommit color={theme.icon.masterGreen} />
     </div>
-  ) : (
+  );
+  const CardIconMasterNoMr = isMaster && !buildHasMr && (
+    <div className="card-left-icon rotate-merge">
+      <GitCommit color={theme.text.sectionText} />
+    </div>
+  );
+  const CardIconPullHasMr = !isMaster && buildHasMr && (
     <div className="card-left-icon">
       <GitMerge color={theme.icon.branchPurple} />
     </div>
   );
+  const CardIconDefault = (
+    <div className="card-left-icon rotate-merge">
+      <GitCommit color={theme.text.sectionText} />
+      {/* <FontAwesomeIcon icon={faFile} color={theme.text.sectionText} /> */}
+    </div>
+  );
+
+  const CardIcon = (
+    <>
+      {CardIconMasterWithMr ||
+        CardIconPullHasMr ||
+        CardIconMasterNoMr ||
+        CardIconDefault}
+    </>
+  );
 
   const CommitIcon = mrCommitUrl ? (
     <a
@@ -138,6 +189,7 @@ const BuildCard = ({build, toCollapse}) => {
     </div>
   );
 
+  // TODO: Parse line breaks in message
   const BuildMessage = !buildMessage ? (
     ''
   ) : buildMessage.length < MESSAGE_LEN ? (

diff --git a/web/src/ui/components/Header/Header.js b/web/src/ui/components/Header/Header.js
@@ -12,7 +12,7 @@ import './Header.scss';
 
 const Header = () => {
   const {theme} = useContext(ThemeContext);
-  const {state, updateState} = useContext(ResultContext);
+  const {state} = useContext(ResultContext);
 
   return (
     <div className={'Header'} style={{backgroundColor: theme.bg.page}}>
@@ -24,6 +24,9 @@ const Header = () => {
           <Filters />
         </ActionWidgets>
       )}
+      {process.env.YOLO_UI_TEST && (
+        <pre style={{padding: 0, margin: 0}}>UI Test</pre>
+      )}
     </div>
   );
 };