Merge branch 'CI-WIP' of _OKE5H2PQKOUfzFFDuD4FA/default/CODE/gitness (#398)

web/src/components/ExecutionPageHeader/ExecutionPageHeader.module.scss

@@ -0,0 +1,42 @@
+.pageHeader {
+  height: auto !important;
+  flex-direction: column !important;
+  align-items: flex-start !important;
+  gap: var(--spacing-small) !important;
+}
+
+.header {
+  width: 100% !important;
+  gap: var(--spacing-small) !important;
+
+  a {
+    font-size: var(--font-size-small);
+    color: var(--primary-7);
+  }
+}
+
+.breadcrumb {
+  align-items: center;
+
+  a {
+    font-size: var(--font-size-small);
+    color: var(--primary-7);
+  }
+}
+
+.hash {
+  color: var(--primary-7) !important;
+  font-family: Roboto Mono !important;
+  font-size: var(--font-size-small) !important;
+  font-weight: 500 !important;
+}
+
+.timer {
+  margin: 0 0 0 auto !important;
+}
+
+.executionInfo {
+  width: 100% !important;
+  align-items: center !important;
+  margin-left: 0 !important;
+}

web/src/components/ExecutionPageHeader/ExecutionPageHeader.module.scss.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+// this is an auto-generated file
+declare const styles: {
+  readonly pageHeader: string
+  readonly header: string
+  readonly breadcrumb: string
+  readonly hash: string
+  readonly timer: string
+  readonly executionInfo: string
+}
+export default styles

web/src/components/ExecutionPageHeader/ExecutionPageHeader.tsx

@@ -0,0 +1,121 @@
+import React, { Fragment } from 'react'
+import { Layout, Text, PageHeader, Utils, Avatar, FlexExpander } from '@harnessio/uicore'
+import { Icon } from '@harnessio/icons'
+import { Color } from '@harnessio/design-system'
+import { Link, useParams } from 'react-router-dom'
+import { Calendar, GitFork, Timer } from 'iconoir-react'
+import { useStrings } from 'framework/strings'
+import { useAppContext } from 'AppContext'
+import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
+import type { CODEProps } from 'RouteDefinitions'
+import type { GitInfoProps } from 'utils/GitUtils'
+import { ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus'
+import { getStatus } from 'utils/PipelineUtils'
+import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import { timeDistance } from 'utils/Utils'
+import css from './ExecutionPageHeader.module.scss'
+
+interface BreadcrumbLink {
+  label: string
+  url: string
+}
+
+interface ExecutionInfo {
+  message: string
+  authorName: string
+  authorEmail: string
+  source: string
+  hash: string
+  status: string
+  started: number
+  finished: number
+}
+
+interface ExecutionPageHeaderProps extends Optional<Pick<GitInfoProps, 'repoMetadata'>, 'repoMetadata'> {
+  title: string | JSX.Element
+  dataTooltipId: string
+  extraBreadcrumbLinks?: BreadcrumbLink[]
+  executionInfo?: ExecutionInfo
+}
+
+export function ExecutionPageHeader({
+  repoMetadata,
+  title,
+  extraBreadcrumbLinks = [],
+  executionInfo
+}: ExecutionPageHeaderProps) {
+  const { gitRef } = useParams<CODEProps>()
+  const { getString } = useStrings()
+  const space = useGetSpaceParam()
+  const { routes } = useAppContext()
+
+  if (!repoMetadata) {
+    return null
+  }
+
+  return (
+    <PageHeader
+      className={css.pageHeader}
+      title={title}
+      breadcrumbs={
+        <Layout.Horizontal
+          spacing="small"
+          className={css.breadcrumb}
+          padding={{ bottom: 0 }}
+          margin={{ bottom: 'small' }}>
+          <Link to={routes.toCODERepositories({ space })}>{getString('repositories')}</Link>
+          <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
+          <Link to={routes.toCODERepository({ repoPath: repoMetadata.path as string, gitRef })}>
+            {repoMetadata.uid}
+          </Link>
+          {extraBreadcrumbLinks.map(link => (
+            <Fragment key={link.url}>
+              <Icon name="main-chevron-right" size={8} color={Color.GREY_500} />
+              <Link to={link.url}>{link.label}</Link>
+            </Fragment>
+          ))}
+        </Layout.Horizontal>
+      }
+      content={
+        executionInfo && (
+          // TODO - margin left not playing ball... why?
+          <Layout.Horizontal className={css.executionInfo} spacing="small" style={{ marginLeft: 0 }}>
+            <ExecutionStatus status={getStatus(executionInfo.status)} iconOnly noBackground iconSize={18} />
+            <Text inline color={Color.GREY_800} font={{ size: 'small' }}>
+              {executionInfo.message}
+            </Text>
+            <PipeSeparator height={7} />
+            <Avatar email={executionInfo.authorEmail} name={executionInfo.authorName} size="small" hoverCard={false} />
+            <Text inline color={Color.GREY_500} font={{ size: 'small' }}>
+              {executionInfo.authorName}
+            </Text>
+            <PipeSeparator height={7} />
+            <GitFork height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
+            <Text inline color={Color.GREY_500} font={{ size: 'small' }}>
+              {executionInfo.source}
+            </Text>
+            <PipeSeparator height={7} />
+            <Link
+              to={routes.toCODECommit({ repoPath: repoMetadata.path as string, commitRef: executionInfo.hash })}
+              className={css.hash}>
+              {executionInfo.hash?.slice(0, 6)}
+            </Link>
+            <FlexExpander />
+            <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center' }} className={css.timer}>
+              <Timer height={16} width={16} color={Utils.getRealCSSColor(Color.GREY_500)} />
+              <Text inline color={Color.GREY_500} font={{ size: 'small' }}>
+                {timeDistance(executionInfo.started, executionInfo.finished)}
+              </Text>
+            </Layout.Horizontal>
+            <Layout.Horizontal spacing={'small'} style={{ alignItems: 'center' }}>
+              <Calendar height={16} width={16} color={Utils.getRealCSSColor(Color.GREY_500)} />
+              <Text inline color={Color.GREY_500} font={{ size: 'small' }}>
+                {timeDistance(executionInfo.finished, Date.now())} ago
+              </Text>
+            </Layout.Horizontal>
+          </Layout.Horizontal>
+        )
+      }
+    />
+  )
+}

web/src/components/ExecutionStageList/ExecutionStageList.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react'
-import { Container, Layout, Text } from '@harnessio/uicore'
+import { Container, FlexExpander, Layout, Text } from '@harnessio/uicore'
 import cx from 'classnames'
 import type { TypesStage } from 'services/code'
 import { ExecutionState, ExecutionStatus } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
+import { timeDistance } from 'utils/Utils'
 import css from './ExecutionStageList.module.scss'
 
 interface ExecutionStageListProps {
@@ -37,6 +38,8 @@ const ExecutionStage: FC<ExecutionStageProps> = ({ stage, isSelected = false, se
         <Text className={css.uid} lineClamp={1}>
           {stage.name}
         </Text>
+        <FlexExpander />
+        <Text style={{ fontSize: '12px' }}>{timeDistance(stage.started, stage.stopped)}</Text>
       </Layout.Horizontal>
     </Container>
   )

web/src/pages/Execution/Execution.tsx

@@ -12,7 +12,7 @@ import { getErrorMessage, voidFn } from 'utils/Utils'
 import { useStrings } from 'framework/strings'
 import { LoadingSpinner } from 'components/LoadingSpinner/LoadingSpinner'
 import { useGetRepositoryMetadata } from 'hooks/useGetRepositoryMetadata'
-import { RepositoryPageHeader } from 'components/RepositoryPageHeader/RepositoryPageHeader'
+import { ExecutionPageHeader } from 'components/ExecutionPageHeader/ExecutionPageHeader'
 import noExecutionImage from '../RepositoriesListing/no-repo.svg'
 import css from './Execution.module.scss'
 
@@ -35,7 +35,7 @@ const Execution = () => {
 
   return (
     <Container className={css.main}>
-      <RepositoryPageHeader
+      <ExecutionPageHeader
         repoMetadata={repoMetadata}
         title={execution?.title as string}
         dataTooltipId="repositoryExecution"
@@ -51,6 +51,16 @@ const Execution = () => {
             }
           ]
         }
+        executionInfo={{
+          message: execution?.message as string,
+          authorName: execution?.author_name as string,
+          authorEmail: execution?.author_email as string,
+          source: execution?.source as string,
+          hash: execution?.after as string,
+          status: execution?.status as string,
+          started: execution?.started as number,
+          finished: execution?.finished as number
+        }}
       />
       <PageBody
         className={cx({ [css.withError]: !!error })}

web/src/pages/ExecutionList/ExecutionList.tsx

@@ -14,7 +14,7 @@ import {
 import { Color } from '@harnessio/design-system'
 import cx from 'classnames'
 import type { CellProps, Column } from 'react-table'
-import { useHistory, useParams } from 'react-router-dom'
+import { Link, useHistory, useParams } from 'react-router-dom'
 import { useGet } from 'restful-react'
 import { Timer, Calendar } from 'iconoir-react'
 import { useStrings } from 'framework/strings'
@@ -89,10 +89,17 @@ const ExecutionList = () => {
                 {/* TODO need logic here for different trigger types */}
                 <Text className={css.author}>{`${record.author_name} triggered manually`}</Text>
                 <PipeSeparator height={7} />
-                {/* TODO Will need to replace this with commit component - wont match Yifan designs */}
-                <a rel="noreferrer noopener" className={css.hash}>
-                  {record.after}
-                </a>
+                <Link
+                  to={routes.toCODECommit({
+                    repoPath: repoMetadata?.path as string,
+                    commitRef: record.after as string
+                  })}
+                  className={css.hash}
+                  onClick={e => {
+                    e.stopPropagation()
+                  }}>
+                  {record.after?.slice(0, 6)}
+                </Link>
               </Layout.Horizontal>
             </Layout.Vertical>
           )

web/src/pages/PipelineList/PipelineList.tsx

@@ -15,7 +15,7 @@ import { Color } from '@harnessio/design-system'
 import cx from 'classnames'
 import type { CellProps, Column } from 'react-table'
 import Keywords from 'react-keywords'
-import { useHistory } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 import { useGet } from 'restful-react'
 import { Calendar, Timer, GitFork } from 'iconoir-react'
 import { useStrings } from 'framework/strings'
@@ -33,11 +33,13 @@ import { RepositoryPageHeader } from 'components/RepositoryPageHeader/Repository
 import { ExecutionStatus, ExecutionState } from 'components/ExecutionStatus/ExecutionStatus'
 import { getStatus } from 'utils/PipelineUtils'
 import { PipeSeparator } from 'components/PipeSeparator/PipeSeparator'
+import { useGetSpaceParam } from 'hooks/useGetSpaceParam'
 import noPipelineImage from '../RepositoriesListing/no-repo.svg'
 import css from './PipelineList.module.scss'
 
 const PipelineList = () => {
   const { routes } = useAppContext()
+  const space = useGetSpaceParam()
   const history = useHistory()
   const { getString } = useStrings()
   const [searchTerm, setSearchTerm] = useState<string | undefined>()
@@ -119,11 +121,18 @@ const PipelineList = () => {
                 <GitFork height={12} width={12} color={Utils.getRealCSSColor(Color.GREY_500)} />
                 <Text className={css.author}>{record.source}</Text>
                 <PipeSeparator height={7} />
-                {/* TODO Will need to replace this with commit component - wont match Yifan designs */}
-                <a rel="noreferrer noopener" className={css.hash}>
-                  {/* {record.after} */}
-                  hardcoded
-                </a>
+                <Link
+                  to={routes.toCODECommit({
+                    repoPath: repoMetadata?.path as string,
+                    commitRef: record.after as string
+                  })}
+                  className={css.hash}
+                  onClick={e => {
+                    e.stopPropagation()
+                  }}>
+                  {/* {record.after?.slice(0, 6)} */}
+                  {'hardcoded'.slice(0, 6)}
+                </Link>
               </Layout.Horizontal>
             </Layout.Vertical>
           ) : (