diff --git a/web/src/assets/svg/yolo-logo-square.svg b/web/src/assets/svg/yolo-logo-square.svg new file mode 100644 index 00000000..71952420 --- /dev/null +++ b/web/src/assets/svg/yolo-logo-square.svg @@ -0,0 +1,12 @@ + + + Yolo + + + + + + + \ No newline at end of file diff --git a/web/src/ui/components/Build/ArtifactRow.js b/web/src/ui/components/Build/ArtifactRow.js index 31d10b80..44ad18ea 100644 --- a/web/src/ui/components/Build/ArtifactRow.js +++ b/web/src/ui/components/Build/ArtifactRow.js @@ -28,7 +28,7 @@ const ArtifactRowKindIcon = ({ color, kind = '' }) => ( /> ) -const QrCode = ({ artifactPlistSignedUrl, closeAction }) => ( +export const QrCode = ({ artifactPlistSignedUrl, closeAction }) => ( (
{ - e.stopPropagation() + onClick={() => { toggleCollapsed(!collapsed) }} > diff --git a/web/src/ui/components/Build/BuildContainer.js b/web/src/ui/components/Build/BuildContainer.js index ff188b24..e7f6db66 100644 --- a/web/src/ui/components/Build/BuildContainer.js +++ b/web/src/ui/components/Build/BuildContainer.js @@ -1,6 +1,8 @@ +import { faQrcode } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { get } from 'lodash' import React, { useContext, useState } from 'react' +import { Download } from 'react-feather' import { ARTIFACT_KIND_NAMES, BRANCH, BUILD_STATE } from '../../../constants' import { GlobalContext } from '../../../store/GlobalStore' import { ThemeContext } from '../../../store/ThemeStore' @@ -10,9 +12,13 @@ import { getStrEquNormalized, } from '../../../util/getters' import { getArtifactKindIcon } from '../../styleTools/brandIcons' -import { tagColorStyles } from '../../styleTools/buttonStyler' +import { + primaryButtonColors, + tagColorStyles, +} from '../../styleTools/buttonStyler' import ShowingOlderBuildsTag from '../ShowingOlderBuildsTag' import Tag from '../Tag/Tag' +import { QrCode } from './ArtifactRow' import styles from './Build.module.scss' import BuildAndMrContainer from './BuildAndMrContainer' import BuildBlockHeader from './BuildBlockHeader' @@ -63,6 +69,106 @@ const AnyRunningBuildTags = ({ hasRunningBuilds, allBuildsForMr, theme }) => has ) +const LatestBuildQrButton = ({ onClick, theme, artifactPlistSignedUrl }) => artifactPlistSignedUrl && ( +
{ + onClick() + e.stopPropagation() + }} + className="btn btn-sm" + style={{ + ...primaryButtonColors(theme), + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }} + title="Show QR code" +> + +
+) + +const DlButtonSmall = ({ buildHasArtifacts, theme }) => buildHasArtifacts && ( +<> + {buildHasArtifacts.map((artifact, i) => { + const { + plist_signed_url: artifactPlistSignedUrl = '', + dl_artifact_signed_url: artifactDlArtifactSignedUrl = '', + kind: artifactKind = '', + } = artifact + + const fullPlistSignedUrl = artifactPlistSignedUrl + && `itms-services://?action=download-manifest&url=${process.env.API_SERVER}${artifactPlistSignedUrl}` + + const fullDlArtifactSignedUrl = artifactDlArtifactSignedUrl + && `${process.env.API_SERVER}${artifactDlArtifactSignedUrl}` + + const hasDlUrl = fullPlistSignedUrl || fullDlArtifactSignedUrl + return ( + + + {`.${ARTIFACT_KIND_NAMES[artifactKind]}`} + + ) + })} + +) + +const LatestBuildStateTags = ({ + collapsed, + theme, + buildState, + buildId, + buildHasArtifacts, + allBuildsForMr, + hasRunningBuilds, +}) => { + const [showingQrModal, toggleShowQrModal] = useState(false) + const firstArtifactPlistSignedUrl = buildHasArtifacts?.find((a) => a.kind === ARTIFACT_KIND_NAMES.IPA) + ?.plist_signed_url || null + return ( + collapsed && ( + <> + {showingQrModal && firstArtifactPlistSignedUrl && ( + toggleShowQrModal(false)} + /> + )} + + + + + toggleShowQrModal(true)} + theme={theme} + artifactPlistSignedUrl={firstArtifactPlistSignedUrl} + /> + + + ) + ) +} + const BuildContainer = React.memo( ({ build, toCollapse, hasRunningBuilds, isLatestMaster = false, @@ -70,6 +176,7 @@ const BuildContainer = React.memo( const { state } = useContext(GlobalContext) const [collapsed, setCollapsed] = useState(toCollapse) const [showingAllBuilds, toggleShowingAllBuilds] = useState(false) + const { theme } = useContext(ThemeContext) const toggleCollapsed = () => setCollapsed(!collapsed) @@ -105,75 +212,80 @@ const BuildContainer = React.memo( const isMasterBuildBranch = getStrEquNormalized(buildBranch, BRANCH.MASTER) - const LatestBuildStateTags = () => collapsed && ( - <> - - - - - - ) - return ( -
-
{ - if (collapsed) { - toggleCollapsed() - } - }} - > - }, + <> +
+
- {!collapsed - && allBuildsForMr - .filter((bIdx, i) => showingAllBuilds ? Number.isInteger(bIdx) : i === 0) - .map((buildidx, i) => ( - - ))} + key={buildId} + onClick={() => { + if (collapsed) { + toggleCollapsed() + } + }} + > + + ), + }, + }} + /> + {!collapsed + && allBuildsForMr + .filter((bIdx, i) => showingAllBuilds ? Number.isInteger(bIdx) : i === 0) + .map((buildidx, i) => ( + + ))} +
-
+ ) }, ) diff --git a/web/src/ui/components/MessageModal/MessageModal.js b/web/src/ui/components/MessageModal/MessageModal.js index cd133d96..5cb5fb93 100644 --- a/web/src/ui/components/MessageModal/MessageModal.js +++ b/web/src/ui/components/MessageModal/MessageModal.js @@ -1,15 +1,25 @@ import React from 'react' import './MessageModal.scss' -const MessageModal = ({ children }) => ( +const MessageModal = ({ children, onClose = () => {} }) => ( <> -
+
{ + e.stopPropagation() + onClose() + }} + />
-
+
{ + e.stopPropagation() + onClose() + }} + >
-
- {children} -
+
{children}
diff --git a/web/src/ui/components/QRCodeModal.js b/web/src/ui/components/QRCodeModal.js index 1583a09b..e3b709ec 100644 --- a/web/src/ui/components/QRCodeModal.js +++ b/web/src/ui/components/QRCodeModal.js @@ -2,7 +2,7 @@ import React from 'react' import MessageModal from './MessageModal/MessageModal' const QRCodeModal = ({ closeAction, children }) => ( - +
{children}