feat(front): add anchor links for artifacts (#342)

add inline artifact anchor link Signed-off-by: Elizabeth Kelen <erskelen@gmail.com>
berty · Jun 11, 2020 · 91193e6 · 91193e6
1 parent 011d36e
commit 91193e6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/web/src/ui/components/AnchorLink/AnchorLink.js b/web/src/ui/components/AnchorLink/AnchorLink.js
@@ -16,7 +16,7 @@ const AnchorLink = ({
     'badge-secondary',
     styles.badge,
   )
-  const iconClasses = classNames(styles['copy-link-icon'], { [styles.block]: isBlock })
+  const iconClasses = classNames(styles.copyLinkIcon, isBlock ? styles.block : styles.inline)
   const location = useLocation()
 
   return (

diff --git a/web/src/ui/components/AnchorLink/AnchorLink.module.scss b/web/src/ui/components/AnchorLink/AnchorLink.module.scss
@@ -4,17 +4,24 @@
     position: absolute;
 }
 
-.copy-link-icon {
+.copyLinkIcon.inline {
+    cursor: pointer;
+    display: flex;
+    svg {
+        height: $font-size-sm;
+    }
+    @include xs {
+        display: none;
+    }
+}
+
+.copyLinkIcon.block {
     display: none;
     @include xs {
+        display: flex;
         cursor: pointer;
-        display: block;
-        height: 1rem;
-        &.block {
-            display: flex;
-            width: 100%;
-            justify-content: center;
-            margin-top: 0.5rem;
-        }
+        width: 100%;
+        justify-content: center;
+        margin-top: 0.5rem;
     }
 }
diff --git a/web/src/ui/components/Build/ArtifactRow.js b/web/src/ui/components/Build/ArtifactRow.js
@@ -36,6 +36,12 @@ const QrCode = ({ artifactPlistSignedUrl, closeAction }) => (
   </QRCodeModal>
 )
 
+export const SharableArtifactLink = ({ buildId, artifactKind, isBlock }) => (
+  <AnchorLink target={`?build_id=${buildId}&artifact_kinds=${ARTIFACT_KIND_VALUE[artifactKind.toString() || '1']}`} isBlock={isBlock}>
+    <LinkIcon size={16} />
+  </AnchorLink>
+)
+
 const ArtifactDownloadButton = ({
   artifactPlistSignedUrl = '',
   artifactDlArtifactSignedUrl = '',
@@ -138,14 +144,15 @@ const ArtifactDriver = ({ artifactDriver, theme }) => artifactDriver && (
   </Tag>
 )
 
-const SharableArtifactLink = ({ artifactId, implemented = false }) => implemented && (
-  <AnchorLink target={`?artifact_id=${artifactId}`}>
-    <LinkIcon size={16} />
-  </AnchorLink>
-)
+// const SharableArtifactLink = ({ artifactId, implemented = false }) => implemented && (
+//   <AnchorLink target={`?artifact_id=${artifactId}`}>
+//     <LinkIcon size={16} />
+//   </AnchorLink>
+// )
 
 const ArtifactRow = ({
   artifact,
+  buildId,
   buildMergeUpdatedAt,
   buildStartedAt,
   buildFinishedAt,
@@ -155,7 +162,6 @@ const ArtifactRow = ({
   const { theme } = useContext(ThemeContext)
   const [showingQrModal, toggleShowQrModal] = useState(false)
   const {
-    id: artifactId = '',
     plist_signed_url: artifactPlistSignedUrl = '',
     dl_artifact_signed_url: artifactDlArtifactSignedUrl = '',
     kind: artifactKind = '',
@@ -177,13 +183,14 @@ const ArtifactRow = ({
         style={{ color: theme.text.sectionText, ...containerBorderBottomStyle }}
       >
         <div className={styles.blockSectionLeftColumn}>
-          <SharableArtifactLink {...{ artifactId }} implemented={false} />
+          <SharableArtifactLink {...{ artifactKind, buildId }} isBlock />
         </div>
         <div className={styles.blockSectionDetailContainer}>
           <div className={styles.blockSectionDetailRow}>
             <ArtifactRowKindIcon color={theme.bg.tagGreen} kind={artifactKind} />
             <ArtifactKindName {...{ artifactKind }} />
             <BuildIdentifier {...{ buildShortId }} />
+            <SharableArtifactLink {...{ artifactKind, buildId }} isBlock={false} />
           </div>
           <ArtifactLocalPathRow {...{ artifactLocalPath }} />
           <div className={styles.blockSectionDetailRow}>

diff --git a/web/src/ui/components/Build/BuildAndMrContainer.js b/web/src/ui/components/Build/BuildAndMrContainer.js
@@ -110,6 +110,7 @@ const BuildAndMrContainer = ({
         && buildHasArtifacts.map((artifact, i) => (
           <ArtifactRow
             artifact={artifact}
+            buildId={buildId}
             buildMergeUpdatedAt={buildMergeUpdatedAt}
             buildStartedAt={buildStartedAt}
             buildFinishedAt={buildFinishedAt}