From 04ad7030c4cefac222f37c57b422cabee201d680 Mon Sep 17 00:00:00 2001 From: Elizabeth Kelen Date: Tue, 3 Nov 2020 17:12:24 -0500 Subject: [PATCH] wip: condense files --- web/src/ui/components/Build/ArtifactRow.js | 322 +------------- web/src/ui/components/Build/BuildMessage.js | 4 +- web/src/ui/components/Build/FeedItemBody.js | 399 +++++++++++++++--- .../components/Build/FeedItemBody.module.css | 14 + 4 files changed, 374 insertions(+), 365 deletions(-) diff --git a/web/src/ui/components/Build/ArtifactRow.js b/web/src/ui/components/Build/ArtifactRow.js index 489845fe..3e4a1881 100644 --- a/web/src/ui/components/Build/ArtifactRow.js +++ b/web/src/ui/components/Build/ArtifactRow.js @@ -1,302 +1,20 @@ -import { faFile, faHammer, faQrcode } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import QRCode from "qrcode.react"; -import React, { useContext, useState } from "react"; -import { Calendar, Clock, Download, Link as LinkIcon } from "react-feather"; -import { - ARTIFACT_KIND_NAMES, - ARTIFACT_KIND_TO_PLATFORM, - ARTIFACT_KIND_VALUE, -} from "../../../constants"; -import { ThemeContext } from "../../../store/ThemeStore"; -import { getRelativeTime, getTimeDuration } from "../../../util/date"; -import { getArtifactKindIcon } from "../../styleTools/brandIcons"; -import { primaryButtonColors } from "../../styleTools/buttonStyler"; -import AnchorLink from "../AnchorLink/AnchorLink"; -import QRCodeModal from "../QRCodeModal"; -import Tag from "../Tag/Tag"; -import styles from "./Build.module.scss"; - -const ArtifactRowKindIcon = ({ color, kind = "" }) => ( - -); - -export const QrCode = ({ artifactPlistSignedUrl, closeAction }) => ( - - - -); - -export const SharableArtifactLink = ({ buildId, artifactKind, isBlock }) => ( - - - -); - -const ArtifactDownloadButton = ({ - artifactPlistSignedUrl = "", - artifactDlArtifactSignedUrl = "", -}) => { - const { theme } = useContext(ThemeContext); - const fullPlistSignedUrl = - artifactPlistSignedUrl && - `itms-services://?action=download-manifest&url=${process.env.REACT_APP_API_SERVER}${artifactPlistSignedUrl}`; - const fullDlArtifactSignedUrl = - artifactDlArtifactSignedUrl && - `${process.env.REACT_APP_API_SERVER}${artifactDlArtifactSignedUrl}`; - const hasDlUrl = fullPlistSignedUrl || fullDlArtifactSignedUrl; - - return ( - hasDlUrl && ( - - - Download - - ) - ); -}; - -const ArtifactQrButton = ({ onClick, theme }) => ( -
- -
-); - -const ArtifactKindName = ({ artifactKind }) => ( -
- {ARTIFACT_KIND_TO_PLATFORM[ARTIFACT_KIND_VALUE[artifactKind]] || - "Unknown OS"} -
-); - -const BuildIdentifier = ({ buildShortId }) => ( -
{`#${buildShortId}` || ""}
-); - -const TimeSinceBuildUpdated = ({ buildMergeUpdatedAt }) => { - const timeSinceBuildUpdated = getRelativeTime(buildMergeUpdatedAt); - return ( - timeSinceBuildUpdated && ( - } - text={timeSinceBuildUpdated} - plainDisplay - /> - ) - ); -}; - -const BuildDuration = ({ buildStartedAt, buildFinishedAt }) => { - const buildDurationSeconds = getTimeDuration(buildStartedAt, buildFinishedAt); - const buildDurationShort = buildDurationSeconds - ? `${parseInt(buildDurationSeconds / 60, 10)} minutes` - : ""; - const buildDurationDetails = - buildDurationSeconds > 0 - ? `duration: ${parseInt(buildDurationSeconds / 60, 10)}m${ - buildDurationSeconds % 60 - }s` - : ""; - return ( - buildDurationShort && ( - } - text={buildDurationShort} - plainDisplay - /> - ) - ); -}; - -const ArtifactFileSize = ({ artifactFileSize }) => - artifactFileSize && - !Number.isNaN(parseInt(artifactFileSize, 10)) && ( - - - {Math.round(artifactFileSize / 1000)} kB - - ); - -const ArtifactLocalPathRow = ({ artifactLocalPath }) => - artifactLocalPath && ( //
- // - <>{artifactLocalPath} - ); -// -//
- -const ArtifactDriver = ({ artifactDriver, theme }) => - artifactDriver && ( - - -
{artifactDriver}
- - ); - -const ArtifactRow = ({ - artifact, - buildId, - buildMergeUpdatedAt, - buildStartedAt, - buildFinishedAt, - buildShortId, - isLastArtifactOfLatestBuild, -}) => { - const { theme } = useContext(ThemeContext); - const [showingQrModal, toggleShowQrModal] = useState(false); - const { - plist_signed_url: artifactPlistSignedUrl = "", - dl_artifact_signed_url: artifactDlArtifactSignedUrl = "", - kind: artifactKind = "", - local_path: artifactLocalPath = "", - file_size: artifactFileSize = "", - driver: artifactDriver = "", - } = artifact; - - const containerBorderBottomStyle = isLastArtifactOfLatestBuild - ? { borderBottom: "none" } - : {}; - - return ( - <> - {showingQrModal && artifactPlistSignedUrl && ( - toggleShowQrModal(false)} - /> - )} - -
e.stopPropagation()} - > -
- -
-
-
- - - - -
- -
- - - - -
-
-
- - {artifactPlistSignedUrl && ( - toggleShowQrModal(true)} - /> - )} -
-
- - ); -}; - -export default ArtifactRow; +// import { faFile, faHammer, faQrcode } from "@fortawesome/free-solid-svg-icons"; +// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +// import QRCode from "qrcode.react"; +// import React, { useContext, useState } from "react"; +// import { Calendar, Clock, Download, Link as LinkIcon } from "react-feather"; +// import { +// ARTIFACT_KIND_NAMES, +// ARTIFACT_KIND_TO_PLATFORM, +// ARTIFACT_KIND_VALUE, +// } from "../../../constants"; +// import { ThemeContext } from "../../../store/ThemeStore"; +// import { getRelativeTime, getTimeDuration } from "../../../util/date"; +// import { getArtifactKindIcon } from "../../styleTools/brandIcons"; +// import { primaryButtonColors } from "../../styleTools/buttonStyler"; +// import AnchorLink from "../AnchorLink/AnchorLink"; +// import QRCodeModal from "../QRCodeModal"; +// import Tag from "../Tag/Tag"; +// import styles from "./Build.module.scss"; + +// export default ArtifactRow; diff --git a/web/src/ui/components/Build/BuildMessage.js b/web/src/ui/components/Build/BuildMessage.js index 615b4992..d9a35974 100644 --- a/web/src/ui/components/Build/BuildMessage.js +++ b/web/src/ui/components/Build/BuildMessage.js @@ -1,6 +1,4 @@ -import React, { useEffect } from "react"; -import ConditionallyWrappedComponent from "../ConditionallyWrappedComponent"; -import styles from "./Build.module.scss"; +import React from "react"; import cstyles from "./BuildMessage.module.css"; const BuildMessage = ({ diff --git a/web/src/ui/components/Build/FeedItemBody.js b/web/src/ui/components/Build/FeedItemBody.js index 1bfc58a7..7fdbd29b 100644 --- a/web/src/ui/components/Build/FeedItemBody.js +++ b/web/src/ui/components/Build/FeedItemBody.js @@ -2,7 +2,6 @@ import React, { useContext, useState } from "react"; import { ThemeContext } from "../../../store/ThemeStore"; import { getIsArray } from "../../../util/getters"; import ShowingOlderBuildsTag from "../ShowingOlderBuildsTag"; -import ArtifactRow from "./ArtifactRow"; import styles from "./Build.module.scss"; import { BranchName, @@ -18,7 +17,322 @@ import { SharableBuildLink, } from "./BuildAndMrContainerWidgets"; import BuildMessage from "./BuildMessage"; -import { BuildStateTag } from "./BuildWidgetsShared"; +import cstyles from "./FeedItemBody.module.css"; +import { getRelativeTime, getTimeDuration } from "../../../util/date"; +import { getArtifactKindIcon } from "../../styleTools/brandIcons"; +import { primaryButtonColors } from "../../styleTools/buttonStyler"; +import { + ARTIFACT_KIND_NAMES, + ARTIFACT_KIND_TO_PLATFORM, + ARTIFACT_KIND_VALUE, +} from "../../../constants"; +import QRCode from "qrcode.react"; +import { faFile, faHammer, faQrcode } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import QRCodeModal from "../QRCodeModal"; +import Tag from "../Tag/Tag"; +import AnchorLink from "../AnchorLink/AnchorLink"; +import { Calendar, Clock, Download, Link as LinkIcon } from "react-feather"; + +import { BUILD_STATE } from "../../../constants"; +import { tagColorStyles } from "../../styleTools/buttonStyler"; + +const ArtifactRowKindIcon = ({ color, kind = "" }) => ( + +); + +export const QrCode = ({ artifactPlistSignedUrl, closeAction }) => ( + + + +); + +export const SharableArtifactLink = ({ buildId, artifactKind, isBlock }) => ( + + + +); + +const ArtifactDownloadButton = ({ + artifactPlistSignedUrl = "", + artifactDlArtifactSignedUrl = "", +}) => { + const { theme } = useContext(ThemeContext); + const fullPlistSignedUrl = + artifactPlistSignedUrl && + `itms-services://?action=download-manifest&url=${process.env.REACT_APP_API_SERVER}${artifactPlistSignedUrl}`; + const fullDlArtifactSignedUrl = + artifactDlArtifactSignedUrl && + `${process.env.REACT_APP_API_SERVER}${artifactDlArtifactSignedUrl}`; + const hasDlUrl = fullPlistSignedUrl || fullDlArtifactSignedUrl; + + return ( + hasDlUrl && ( + + + Download + + ) + ); +}; + +const ArtifactQrButton = ({ onClick, theme }) => ( +
+ +
+); + +export const BuildStateTag = ({ buildState, theme, buildId }) => { + const buildStateIsPassed = buildState === BUILD_STATE.Passed; + return ( + buildState && ( + + {buildState} + + ) + ); +}; + +const ArtifactKindName = ({ artifactKind }) => ( +
+ {ARTIFACT_KIND_TO_PLATFORM[ARTIFACT_KIND_VALUE[artifactKind]] || + "Unknown OS"} +
+); + +const BuildIdentifier = ({ buildShortId }) => ( +
{`#${buildShortId}` || ""}
+); + +const TimeSinceBuildUpdated = ({ buildMergeUpdatedAt }) => { + const timeSinceBuildUpdated = getRelativeTime(buildMergeUpdatedAt); + return ( + timeSinceBuildUpdated && ( + } + text={timeSinceBuildUpdated} + plainDisplay + /> + ) + ); +}; + +const BuildDuration = ({ buildStartedAt, buildFinishedAt }) => { + const buildDurationSeconds = getTimeDuration(buildStartedAt, buildFinishedAt); + const buildDurationShort = buildDurationSeconds + ? `${parseInt(buildDurationSeconds / 60, 10)} minutes` + : ""; + const buildDurationDetails = + buildDurationSeconds > 0 + ? `duration: ${parseInt(buildDurationSeconds / 60, 10)}m${ + buildDurationSeconds % 60 + }s` + : ""; + return ( + buildDurationShort && ( + } + text={buildDurationShort} + plainDisplay + /> + ) + ); +}; + +const ArtifactFileSize = ({ artifactFileSize }) => + artifactFileSize && + !Number.isNaN(parseInt(artifactFileSize, 10)) && ( + + + {Math.round(artifactFileSize / 1000)} kB + + ); + +const ArtifactLocalPathRow = ({ artifactLocalPath }) => + artifactLocalPath && ( //
+ // + <>{artifactLocalPath} + ); +// +//
+ +const ArtifactDriver = ({ artifactDriver, theme }) => + artifactDriver && ( + + +
{artifactDriver}
+ + ); + +const ArtifactRow = ({ + artifact, + buildId, + buildMergeUpdatedAt, + buildStartedAt, + buildFinishedAt, + buildShortId, + isLastArtifactOfLatestBuild, +}) => { + const { theme } = useContext(ThemeContext); + const [showingQrModal, toggleShowQrModal] = useState(false); + const { + plist_signed_url: artifactPlistSignedUrl = "", + dl_artifact_signed_url: artifactDlArtifactSignedUrl = "", + kind: artifactKind = "", + local_path: artifactLocalPath = "", + file_size: artifactFileSize = "", + driver: artifactDriver = "", + } = artifact; + + const containerBorderBottomStyle = isLastArtifactOfLatestBuild + ? { borderBottom: "none" } + : {}; + + return ( + <> + {showingQrModal && artifactPlistSignedUrl && ( + toggleShowQrModal(false)} + /> + )} + +
e.stopPropagation()} + > +
+ +
+
+
+ + + + +
+ +
+ + + + +
+
+
+ + {artifactPlistSignedUrl && ( + toggleShowQrModal(true)} + /> + )} +
+
+ + ); +}; const BuildAndMrContainer = ({ build, @@ -47,6 +361,7 @@ const BuildAndMrContainer = ({ branch: buildBranch = "", state: buildState = "", has_commit_id: buildCommitId = "", + commit_url: buildCommitUrl = "", message: buildMessage = "", started_at: buildStartedAt = "", finished_at: buildFinishedAt = "", @@ -66,21 +381,12 @@ const BuildAndMrContainer = ({ const paddingTop = isLatestBuild ? {} : { paddingTop: "1.25rem" }; + const COMMIT_HASH_LEN = 7; + return ( <> -
-
+
+
{isLatestBuild && }
-
+
{isLatestBuild && (buildCommitId || mrState || mrDriver) && ( -
- + <> +

{ + e.preventDefault(); + window.location.href = buildCommitUrl; + }} + style={{ cursor: buildCommitUrl ? "pointer" : "default" }} + role="link" + > + {buildCommitId && buildCommitId.slice(0, COMMIT_HASH_LEN)} +

-
+ )} {isLatestBuild && buildBranch && ( -
+
)} {isLatestBuild && buildMessage && ( -
+
)} -
+
{!isLatestBuild && ( )} @@ -155,12 +444,7 @@ const BuildAndMrContainer = ({
{isLatestBuild && ( -
+
@@ -183,12 +467,7 @@ const BuildAndMrContainer = ({ /> ))} {isLatestBuild && nOlderBuilds > 0 && ( -
+