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

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);
+  }
+}

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

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 (
+    <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>
+  )
+}

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

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}'

web/src/pages/PullRequests/PullRequests.module.scss

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

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

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() {
               <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
+                          <strong>
-                            date={
+                            <ReactTimeago
-                              (row.original.state == 'merged' ? row.original.merged : row.original.created) as number
+                              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>
           )
         }

web/src/pages/PullRequests/PullRequestsContentHeader/PullRequestsContentHeader.tsx

@@ -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')}