Merge pull request #132 from berty/fix/more-ui-syncros-with-api

berty · Apr 29, 2020 · b2bac27 · b2bac27
2 parents 3a09cec + f54530c
commit b2bac27
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 18 deletions.
diff --git a/web/src/ui/components/BuildCard/ArtifactCard.js b/web/src/ui/components/BuildCard/ArtifactCard.js
@@ -3,6 +3,8 @@ import {ThemeContext} from '../../../store/ThemeStore';
 import {Clock, Calendar, ArrowDownCircle, AlertTriangle} from 'react-feather';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faAndroid, faApple} from '@fortawesome/free-brands-svg-icons';
+
+import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -86,7 +88,13 @@ const ArtifactCard = ({
 
   const PlatformIcon = (
     <FontAwesomeIcon
-      icon={artifact.kind === 'APK' ? faAndroid : faApple}
+      icon={
+        artifactKind === 'APK'
+          ? faAndroid
+          : artifactKind === 'DMG' || artifactKind === 'IPA'
+          ? faApple
+          : faQuestionCircle
+      }
       size="lg"
       color={theme.text.sectionText}
     />

diff --git a/web/src/ui/components/BuildCard/BuildCard.js b/web/src/ui/components/BuildCard/BuildCard.js
@@ -14,30 +14,40 @@ import './BuildCard.scss';
 
 const BuildCard = ({item}) => {
   const [expanded, toggleExpanded] = useState(true);
+  const [messageExpanded, toggleMessageExpanded] = useState(false);
   const {theme} = useContext(ThemeContext);
   const missing = (key) => `[no '${key}' in build]`;
   const {
     short_id: buildShortId = '',
     id: buildId = missing('id'),
     branch: buildBranch = '',
     state: buildState = missing('state'),
-    commit: buildCommit = missing('commit'), // legacy
-    has_commit: {id: buildCommitId = ''} = {},
-    message: buildMessage = missing('message'),
+    has_commit_id: buildCommitId = '',
+    message: buildMessage = '',
     started_at: startedAt = '',
     finished_at: finishedAt = '',
     has_mergerequest: {
       commit_url: commitUrl = '',
       updated_at: buildMergeUpdatedAt = '',
       id: buildMergeIdUrl = '',
+      has_author: {
+        name: buildAuthorName = '',
+        id: buildAuthorId,
+        avatar_url: buildAuthorAvatarUrl = '',
+      } = {},
     } = {},
     has_project: {id: buildProjectUrl = ''} = {},
   } = item || {};
   const stateNormed = buildState.toUpperCase();
 
   const [buildMergeId] = buildMergeIdUrl.match(/\d+?$/) || [];
   const buildTagStyle = tagStyle({name: theme.name, stateNormed});
-  const COMMIT_LEN = !buildCommitId ? [0] : [0, 7];
+  const COMMIT_LEN = 7;
+  const MESSAGE_LEN = 280;
+
+  const colorInteractiveText = {
+    color: theme.text.blockTitle,
+  };
 
   const CardTitle = (
     <div className="card-title">
@@ -68,9 +78,41 @@ const BuildCard = ({item}) => {
     </div>
   );
 
-  const Author = (
-    <div style={{color: theme.text.author}} className="card-author">
-      [TODO: author]
+  const Author = buildAuthorName && (
+    <div className="card-author">
+      {buildAuthorName && buildAuthorId ? (
+        <a
+          href={buildAuthorId}
+          style={colorInteractiveText}
+          className="interactive-text"
+        >
+          {buildAuthorName}
+        </a>
+      ) : (
+        buildAuthorName
+      )}
+    </div>
+  );
+
+  const BuildMessage = !buildMessage ? (
+    ''
+  ) : buildMessage.length < MESSAGE_LEN ? (
+    buildMessage
+  ) : messageExpanded ? (
+    <div
+      className="interactive-text"
+      onClick={() => toggleMessageExpanded(false)}
+    >
+      {buildMessage + ' '}
+      <span style={colorInteractiveText}>[show less]</span>
+    </div>
+  ) : (
+    <div
+      className="interactive-text"
+      onClick={() => toggleMessageExpanded(true)}
+    >
+      {buildMessage.slice(0, MESSAGE_LEN)}...{' '}
+      <span style={colorInteractiveText}>[show more]</span>
     </div>
   );
 
@@ -86,11 +128,18 @@ const BuildCard = ({item}) => {
     </div>
   );
 
-  const AuthorImage = (
-    <div className="card-avatar">
-      <User color={theme.text.sectionText} />
-    </div>
-  );
+  const AuthorImage =
+    buildAuthorId && buildAuthorAvatarUrl ? (
+      <div className="card-avatar">
+        <a href={buildAuthorId}>
+          <img src={buildAuthorAvatarUrl} alt={buildAuthorId} />
+        </a>
+      </div>
+    ) : (
+      <div className="card-avatar" title="Unknown author">
+        <User color={theme.text.sectionText} />
+      </div>
+    );
 
   const BranchName = buildBranch && (
     <div
@@ -115,6 +164,7 @@ const BuildCard = ({item}) => {
         icon={faAlignLeft}
         color={theme.text.sectionText}
         size="2x"
+        title={buildId}
       />
     </a>
   );
@@ -125,11 +175,14 @@ const BuildCard = ({item}) => {
         icon={faGithub}
         color={theme.text.sectionText}
         size="2x"
+        title={buildProjectUrl}
       />
     </a>
   );
 
-  const BuildCommit = <div>{buildCommitId.slice(...COMMIT_LEN)}</div>;
+  const BuildCommit = buildCommitId && (
+    <div title={buildCommitId}>{buildCommitId.slice(0, COMMIT_LEN)}</div>
+  );
 
   return (
     <div className="BuildCard">
@@ -165,7 +218,7 @@ const BuildCard = ({item}) => {
                 {BuildState}
               </div>
               <div className="card-details-row">{BranchName}</div>
-              <div className="card-details-row">{buildMessage}</div>
+              <div className="card-details-row">{BuildMessage}</div>
             </div>
             <div className="card-build-actions">
               {BuildLogs}

diff --git a/web/src/ui/components/BuildCard/BuildCard.scss b/web/src/ui/components/BuildCard/BuildCard.scss
@@ -26,6 +26,10 @@
     a {
       cursor: pointer;
     }
+    .interactive-text {
+      cursor: pointer;
+      text-decoration: none;
+    }
   }
 
   .card div.card-row .card-left-icon {
@@ -50,14 +54,26 @@
   }
 
   .card div.card-row .card-author {
-    font-size: smaller;
-    margin-right: 8px;
+    font-size: small;
+    margin-right: 12px;
     flex-shrink: 0;
   }
 
   .card div.card-row .card-avatar {
     margin-right: 16px;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    a {
+      text-decoration: none;
+    }
+    img {
+      margin: 0px;
+      padding: 0px;
+      height: 1.25rem;
+      width: 1.25rem;
+      border-radius: 15%;
+    }
   }
 
   // Build body

diff --git a/web/src/ui/pages/Home/Home.js b/web/src/ui/pages/Home/Home.js
@@ -43,7 +43,7 @@ const Home = () => {
     if (!locationSearch) {
       history.push({
         pathname: '/',
-        search: queryString.stringify({'artifact-kinds': state.platformId}),
+        search: queryString.stringify({artifact_kinds: state.platformId}),
       });
     }
   }, []);