From 4ce49f2555bc81d6c98febd9530d6dd36857cc0f Mon Sep 17 00:00:00 2001 From: Calvin Lee Date: Fri, 10 Feb 2023 19:02:01 -0700 Subject: [PATCH] feat: [code-126]: update the pr listing page (#324) --- .../ExecutionStatusLabel.module.scss | 52 +++++++++++++++++++ .../ExecutionStatusLabel.module.scss.d.ts | 10 ++++ .../ExecutionStatusLabel.tsx | 40 ++++++++++++++ web/src/framework/strings/stringTypes.ts | 1 + web/src/i18n/strings.en.yaml | 1 + .../PullRequests/PullRequests.module.scss | 16 ++++-- .../PullRequests.module.scss.d.ts | 2 + web/src/pages/PullRequests/PullRequests.tsx | 44 ++++++++++++---- .../PullRequestsContentHeader.tsx | 2 +- 9 files changed, 154 insertions(+), 14 deletions(-) create mode 100644 web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss create mode 100644 web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.module.scss.d.ts create mode 100644 web/src/components/ExecutionStatusLabel/ExecutionStatusLabel.tsx 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} /> - +