Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(front): clicking entire collapsed build block now toggles collapsed state #373

Merged
merged 1 commit into from
Jul 12, 2020
Merged

fix(front): clicking entire collapsed build block now toggles collapsed state #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 96 additions & 42 deletions web/src/ui/components/Build/ArtifactRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import QRCode from 'qrcode.react'
import React, { useContext, useState } from 'react'
import {
ArrowDownCircle, Calendar, Clock, Link as LinkIcon,
ArrowDownCircle,
Calendar,
Clock,
Link as LinkIcon,
} from 'react-feather'
import { ARTIFACT_KIND_NAMES, ARTIFACT_KIND_TO_PLATFORM, ARTIFACT_KIND_VALUE } from '../../../constants'
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'
Expand Down Expand Up @@ -37,7 +44,12 @@ const QrCode = ({ artifactPlistSignedUrl, closeAction }) => (
)

export const SharableArtifactLink = ({ buildId, artifactKind, isBlock }) => (
<AnchorLink target={`?build_id=${buildId}&artifact_kinds=${ARTIFACT_KIND_VALUE[artifactKind.toString() || '1']}`} isBlock={isBlock}>
<AnchorLink
target={`?build_id=${buildId}&artifact_kinds=${
ARTIFACT_KIND_VALUE[artifactKind.toString() || '1']
}`}
isBlock={isBlock}
>
<LinkIcon size={16} />
</AnchorLink>
)
Expand All @@ -49,16 +61,23 @@ const ArtifactDownloadButton = ({
const { theme } = useContext(ThemeContext)
const fullPlistSignedUrl = artifactPlistSignedUrl
&& `itms-services://?action=download-manifest&url=${process.env.API_SERVER}${artifactPlistSignedUrl}`
const fullDlArtifactSignedUrl = artifactDlArtifactSignedUrl && `${process.env.API_SERVER}${artifactDlArtifactSignedUrl}`
const fullDlArtifactSignedUrl = artifactDlArtifactSignedUrl
&& `${process.env.API_SERVER}${artifactDlArtifactSignedUrl}`
const hasDlUrl = fullPlistSignedUrl || fullDlArtifactSignedUrl

return (hasDlUrl
&& (
return (
hasDlUrl && (
<a
href={hasDlUrl}
className="btn btn-large-icon"
style={{
...primaryButtonColors(theme), width: '2.6rem', height: '2.6rem', marginTop: '0.3rem', display: 'flex', alignItems: 'center', justifyContent: 'center',
...primaryButtonColors(theme),
width: '2.6rem',
height: '2.6rem',
marginTop: '0.3rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
title={hasDlUrl}
>
Expand All @@ -73,31 +92,50 @@ const ArtifactQrButton = ({ onClick, theme }) => (
onClick={onClick}
className="btn btn-large-icon"
style={{
...primaryButtonColors(theme), width: '2.6rem', height: '2.6rem', marginTop: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center',
...primaryButtonColors(theme),
width: '2.6rem',
height: '2.6rem',
marginTop: '1rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
title="Show QR code"
>
<FontAwesomeIcon icon={faQrcode} size="2x" color={theme.text.btnPrimary} style={{ marginTop: 0, marginBottom: 0, transform: 'scale(90%)' }} />
<FontAwesomeIcon
icon={faQrcode}
size="2x"
color={theme.text.btnPrimary}
style={{ marginTop: 0, marginBottom: 0, transform: 'scale(90%)' }}
/>
</div>
)

const ArtifactKindName = ({ artifactKind }) => <div style={{ marginRight: '0.4rem' }}>{ARTIFACT_KIND_TO_PLATFORM[ARTIFACT_KIND_VALUE[artifactKind]] || 'Unknown OS'}</div>
const ArtifactKindName = ({ artifactKind }) => (
<div style={{ marginRight: '0.4rem' }}>
{ARTIFACT_KIND_TO_PLATFORM[ARTIFACT_KIND_VALUE[artifactKind]]
|| 'Unknown OS'}
</div>
)

const BuildIdentifier = ({ buildShortId }) => <div>{`#${buildShortId}` || ''}</div>
const BuildIdentifier = ({ buildShortId }) => (
<div>{`#${buildShortId}` || ''}</div>
)

const TimeSinceBuildUpdated = ({ buildMergeUpdatedAt }) => {
const timeSinceBuildUpdated = getRelativeTime(buildMergeUpdatedAt)
return (timeSinceBuildUpdated && (
<Tag
title={buildMergeUpdatedAt && `updated: ${buildMergeUpdatedAt}`}
icon={<Calendar />}
text={timeSinceBuildUpdated}
plainDisplay
/>
))
return (
timeSinceBuildUpdated && (
<Tag
title={buildMergeUpdatedAt && `updated: ${buildMergeUpdatedAt}`}
icon={<Calendar />}
text={timeSinceBuildUpdated}
plainDisplay
/>
)
)
}


const BuildDuration = ({ buildStartedAt, buildFinishedAt }) => {
const buildDurationSeconds = getTimeDuration(buildStartedAt, buildFinishedAt)
const buildDurationShort = buildDurationSeconds
Expand All @@ -108,13 +146,15 @@ const BuildDuration = ({ buildStartedAt, buildFinishedAt }) => {
buildDurationSeconds % 60
}s`
: ''
return buildDurationShort && (
<Tag
title={buildDurationDetails || ''}
icon={<Clock />}
text={buildDurationShort}
plainDisplay
/>
return (
buildDurationShort && (
<Tag
title={buildDurationDetails || ''}
icon={<Clock />}
text={buildDurationShort}
plainDisplay
/>
)
)
}

Expand All @@ -129,19 +169,16 @@ const ArtifactFileSize = ({ artifactFileSize }) => artifactFileSize
)

const ArtifactLocalPathRow = ({ artifactLocalPath }) => artifactLocalPath && (
<div className={styles.blockSectionDetailRow}>
<small className={styles.artifactLocalPath}>{artifactLocalPath}</small>
</div>
<div className={styles.blockSectionDetailRow}>
<small className={styles.artifactLocalPath}>{artifactLocalPath}</small>
</div>
)

const ArtifactDriver = ({ artifactDriver, theme }) => artifactDriver && (
<Tag
title={`Artifact driver: ${artifactDriver}`}
plainDisplay
>
<FontAwesomeIcon icon={faHammer} color={theme.text.sectionText} />
<div>{artifactDriver}</div>
</Tag>
<Tag title={`Artifact driver: ${artifactDriver}`} plainDisplay>
<FontAwesomeIcon icon={faHammer} color={theme.text.sectionText} />
<div>{artifactDriver}</div>
</Tag>
)

// const SharableArtifactLink = ({ artifactId, implemented = false }) => implemented && (
Expand Down Expand Up @@ -170,27 +207,39 @@ const ArtifactRow = ({
driver: artifactDriver = '',
} = artifact

const containerBorderBottomStyle = isLastArtifactOfLatestBuild ? { borderBottom: 'none' } : {}
const containerBorderBottomStyle = isLastArtifactOfLatestBuild
? { borderBottom: 'none' }
: {}

return (
<>
{showingQrModal && artifactPlistSignedUrl && (
<QrCode artifactPlistSignedUrl={artifactPlistSignedUrl} closeAction={() => toggleShowQrModal(false)} />
<QrCode
artifactPlistSignedUrl={artifactPlistSignedUrl}
closeAction={() => toggleShowQrModal(false)}
/>
)}

<div
className={styles.blockSectionContainer}
style={{ color: theme.text.sectionText, ...containerBorderBottomStyle }}
onClick={(e) => e.stopPropagation()}
>
<div className={styles.blockSectionLeftColumn}>
<SharableArtifactLink {...{ artifactKind, buildId }} isBlock />
</div>
<div className={styles.blockSectionDetailContainer}>
<div className={styles.blockSectionDetailRow}>
<ArtifactRowKindIcon color={theme.bg.tagGreen} kind={artifactKind} />
<ArtifactRowKindIcon
color={theme.bg.tagGreen}
kind={artifactKind}
/>
<ArtifactKindName {...{ artifactKind }} />
<BuildIdentifier {...{ buildShortId }} />
<SharableArtifactLink {...{ artifactKind, buildId }} isBlock={false} />
<SharableArtifactLink
{...{ artifactKind, buildId }}
isBlock={false}
/>
</div>
<ArtifactLocalPathRow {...{ artifactLocalPath }} />
<div className={styles.blockSectionDetailRow}>
Expand All @@ -204,7 +253,12 @@ const ArtifactRow = ({
<ArtifactDownloadButton
{...{ artifactPlistSignedUrl, artifactDlArtifactSignedUrl }}
/>
{artifactPlistSignedUrl && <ArtifactQrButton theme={theme} onClick={() => toggleShowQrModal(true)} />}
{artifactPlistSignedUrl && (
<ArtifactQrButton
theme={theme}
onClick={() => toggleShowQrModal(true)}
/>
)}
</div>
</div>
</>
Expand Down
5 changes: 4 additions & 1 deletion web/src/ui/components/Build/BuildBlockHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,10 @@ const BuildBlockHeader = ({
<>
<div
className={blockHeaderContainerClassNames}
onClick={() => toggleCollapsed()}
onClick={(e) => {
e.stopPropagation()
toggleCollapsed()
}}
>
<BlockIcon {...{ theme, buildHasMr, mrState }} />
<BuildBlockTitle
Expand Down
5 changes: 5 additions & 0 deletions web/src/ui/components/Build/BuildContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@ const BuildContainer = React.memo(
...tablerOverrides.card,
}}
key={buildId}
onClick={() => {
if (collapsed) {
toggleCollapsed()
}
}}
>
<BuildBlockHeader
{...{
Expand Down