diff --git a/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss
new file mode 100644
index 000000000..5b032828b
--- /dev/null
+++ b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss
@@ -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);
+ }
+}
diff --git a/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss.d.ts b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss.d.ts
new file mode 100644
index 000000000..c0b566ccf
--- /dev/null
+++ b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss.d.ts
@@ -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
diff --git a/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.tsx b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.tsx
new file mode 100644
index 000000000..327d3f317
--- /dev/null
+++ b/web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.tsx
@@ -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 (
+
+ {!iconOnly && }
+
+ )
+}
diff --git a/web/src/framework/strings/stringTypes.ts b/web/src/framework/strings/stringTypes.ts
index 541956779..a60a268a9 100644
--- a/web/src/framework/strings/stringTypes.ts
+++ b/web/src/framework/strings/stringTypes.ts
@@ -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
diff --git a/web/src/i18n/strings.en.yaml b/web/src/i18n/strings.en.yaml
index c41b49629..60f748d69 100644
--- a/web/src/i18n/strings.en.yaml
+++ b/web/src/i18n/strings.en.yaml
@@ -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}'
diff --git a/web/src/pages/PullRequests/PullRequests.module.scss b/web/src/pages/PullRequests/PullRequests.module.scss
index ec5a60559..279ec43a3 100644
--- a/web/src/pages/PullRequests/PullRequests.module.scss
+++ b/web/src/pages/PullRequests/PullRequests.module.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/web/src/pages/PullRequests/PullRequests.module.scss.d.ts b/web/src/pages/PullRequests/PullRequests.module.scss.d.ts
index 93760f347..344c7d347 100644
--- a/web/src/pages/PullRequests/PullRequests.module.scss.d.ts
+++ b/web/src/pages/PullRequests/PullRequests.module.scss.d.ts
@@ -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
diff --git a/web/src/pages/PullRequests/PullRequests.tsx b/web/src/pages/PullRequests/PullRequests.tsx
index 10beb55aa..9e2ee7e7e 100644
--- a/web/src/pages/PullRequests/PullRequests.tsx
+++ b/web/src/pages/PullRequests/PullRequests.tsx
@@ -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() {
-
+
{row.original.title}
+
+
+ {row.original.stats?.conversations}
+
{row.original.state},
number: {row.original.number},
time: (
-
+
+
+
),
- user: row.original.author?.display_name
+ user: {row.original.author?.display_name}
}}
/>
+
+ {/* fix state when api is fully implemented */}
+
)
}
diff --git a/web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx b/web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx
index afee785bb..62a3b8a18 100644
--- a/web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx
+++ b/web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx
@@ -54,7 +54,6 @@ export function PullRequestsContentHeader({
}}
popoverClassName={css.branchDropdown}
/>
-
+