USEFULL/drone
1
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-02 05:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: [code-126]: update the pr listing page (#324)

Browse Source
This commit is contained in:
Calvin Lee 2023-02-10 19:02:01 -07:00 committed by GitHub
parent 4c00e52107
commit 4ce49f2555
9 changed files with 154 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss Normal file
View File

@ -0,0 +1,52 @@
.executionStatus {
--fg: var(--green-500);
--bg: var(--green-50);
display: inline-flex !important;
align-items: center !important;
justify-content: center;
border-radius: 4px;
padding: 5px 10px !important;
font-weight: 600 !important;
font-size: 12px !important;
line-height: 12px !important;
color: var(--fg) !important;
background-color: var(--bg) !important;
> span {
padding-right: 5px !important;
}
&.iconOnly {
padding: 5px !important;
> span {
padding-right: 0 !important;
}
}
svg {
path {
fill: var(--fg) !important;
}
g {
stroke: var(--fg) !important;
}
}
&.success {
--fg: var(--green-700);
--bg: var(--green-50);
}
&.failure {
--fg: var(--red-600);
--bg: var(--red-100);
}
&.open {
--fg: var(--gre-600);
--bg: var(--grey-100);
}
}

10
web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
/* eslint-disable */
// this is an auto-generated file
declare const styles: {
readonly executionStatus: string
readonly iconOnly: string
readonly success: string
readonly failure: string
readonly open: string
}
export default styles

40
web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react'
import { Text, StringSubstitute, IconName } from '@harness/uicore'
import cx from 'classnames'
import { CodeIcon } from 'utils/GitUtils'
import { useStrings } from 'framework/strings'
import css from './ExecutionStatusLabel.module.scss'
export type EnumPullReqExecutionState = 'success' | 'failed' | 'unknown'
export const ExecutionStatusLabel: React.FC<{
data: { state?: EnumPullReqExecutionState }
iconSize?: number
iconOnly?: boolean
}> = ({ data, iconSize = 20, iconOnly = false }) => {
const { getString } = useStrings()
const maps = {
unknown: {
icon: CodeIcon.PullRequest,
css: css.open
},
success: {
icon: 'success-tick',
css: css.success
},
failed: {
icon: 'danger-icon',
css: css.failure
}
}
const map = maps[data.state || 'unknown']
return (
<Text
tag="span"
className={cx(css.executionStatus, map.css, { [css.iconOnly]: iconOnly })}
icon={map.icon as IconName}
iconProps={{ size: iconOnly ? iconSize : 14 }}>
{!iconOnly && <StringSubstitute str={getString('pr.executionState')} vars={{ state: data.state }} />}
</Text>
)
}

1
web/src/framework/strings/stringTypes.ts
View File

@ -171,6 +171,7 @@ export interface StringsMap {
'pr.diffStatus': string
'pr.diffView': string
'pr.enterDesc': string
'pr.executionState': string
'pr.failedToCreate': string
'pr.failedToDeleteComment': string
'pr.failedToSaveComment': string

1
web/src/i18n/strings.en.yaml
View File

@ -167,6 +167,7 @@ pr:
modalTitle: Open a pull request
createDraftPR: Create draft pull request
metaLine: '{user} wants to merge {commits} {commitsCount|1:commit,commits} into {target} from {source}'
executionState: '{state|success:Success,failed:Failed}'
state: '{state|closed:Closed,merged:Merged,rejected:Rejected,draft:Draft,Open}'
statusLine: '#{number} {state|merged:merged,closed:closed,rejected:rejected,opened} {time} by {user}'
diffStatus: '{status|deleted:Deleted,new:Added,renamed:Renamed,copied:Copied,Changed}'

16
web/src/pages/PullRequests/PullRequests.module.scss
View File

@ -10,12 +10,20 @@
.title {
font-weight: 600;
display: flex;
.convoIcon {
padding-top: 1px !important;
}
}
}
}
.titleRow {
padding-left: var(--spacing-small);
align-items: center;
}
.titleRow {
padding-left: var(--spacing-small);
align-items: center;
}
}
.state{
font-weight: 600;
}

2
web/src/pages/PullRequests/PullRequests.module.scss.d.ts vendored
View File

@ -5,6 +5,8 @@ declare const styles: {
readonly table: string
readonly row: string
readonly title: string
readonly convoIcon: string
readonly titleRow: string
readonly state: string
}
export default styles

44
web/src/pages/PullRequests/PullRequests.tsx
View File

@ -1,5 +1,16 @@
import React, { useMemo, useState } from 'react'
import { Container, PageBody, Text, Color, TableV2, Layout, StringSubstitute } from '@harness/uicore'
import {
Container,
PageBody,
Text,
Color,
TableV2,
Layout,
StringSubstitute,
Icon,
FontVariation,
FlexExpander
} from '@harness/uicore'
import { useHistory } from 'react-router-dom'
import { useGet } from 'restful-react'
import type { CellProps, Column } from 'react-table'
@ -20,6 +31,7 @@ import { PullRequestStateLabel } from 'components/PullRequestStateLabel/PullRequ
import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
import { PullRequestsContentHeader } from './PullRequestsContentHeader/PullRequestsContentHeader'
import css from './PullRequests.module.scss'
import { ExecutionStatusLabel } from 'components/ExecutionStatusLabel/ExecutionStatusLabel'
export default function PullRequests() {
const { getString } = useStrings()
@ -61,28 +73,42 @@ export default function PullRequests() {
<PullRequestStateLabel data={row.original} iconOnly />
<Container padding={{ left: 'small' }}>
<Layout.Vertical spacing="small">
<Text icon="success-tick" color={Color.GREY_800} className={css.title}>
<Text color={Color.GREY_800} className={css.title}>
{row.original.title}
<Icon
className={css.convoIcon}
padding={{ left: 'medium', right: 'xsmall' }}
name="code-chat"
size={15}
/>
<Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_500}>
{row.original.stats?.conversations}
</Text>
</Text>
<Text color={Color.GREY_500}>
<StringSubstitute
str={getString('pr.statusLine')}
vars={{
state: row.original.state,
state: <strong className={css.state}>{row.original.state}</strong>,
number: <Text inline>{row.original.number}</Text>,
time: (
<ReactTimeago
date={
(row.original.state == 'merged' ? row.original.merged : row.original.created) as number
}
/>
<strong>
<ReactTimeago
date={
(row.original.state == 'merged' ? row.original.merged : row.original.created) as number
}
/>
</strong>
),
user: row.original.author?.display_name
user: <strong>{row.original.author?.display_name}</strong>
}}
/>
</Text>
</Layout.Vertical>
</Container>
<FlexExpander />
{/* fix state when api is fully implemented */}
<ExecutionStatusLabel data={{ state: 'success' }} />
</Layout.Horizontal>
)
}

2
web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx
View File

@ -54,7 +54,6 @@ export function PullRequestsContentHeader({
}}
popoverClassName={css.branchDropdown}
/>
<FlexExpander />
<SearchInputWithSpinner
loading={loading}
query={searchTerm}
@ -63,6 +62,7 @@ export function PullRequestsContentHeader({
onSearchTermChanged(value)
}}
/>
<FlexExpander />
<Button
variation={ButtonVariation.PRIMARY}
text={getString('newPullRequest')}