All files / modules/70-pipeline/pages/execution/ExecutionTestView TestsCoverage.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React, { useState } from 'react'
import cx from 'classnames'
import { Container, Heading, Button, Text, Switch } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { useStrings } from 'framework/strings'
import { TestsCoverageItem } from './TestsCoverageItem'
import css from './BuildTests.module.scss'
 
const mockItems = [
  {
    name: 'FilesUtils.java',
    coverage: 'passed',
    commitId: '438b6c2'
  },
  {
    name: 'User.toml',
    coverage: 'passed',
    commitId: '438b6c2'
  },
  {
    name: 'Migration.java',
    coverage: 'passed',
    commitId: '438b6c2'
  },
  {
    name: 'EncryptKeys.java',
    coverage: 'failed',
    commitId: '438b6c2'
  },
  {
    name: 'Keys.java',
    coverage: 'passed',
    commitId: '438b6c2'
  },
  {
    name: 'Mod.java',
    coverage: 'failed',
    commitId: '438b6c2'
  },
  {
    name: 'WorkerManager.java',
    coverage: 'failed',
    commitId: '438b6c2'
  }
]
 
export function TestsCoverage(): React.ReactElement {
  const { getString } = useStrings()
 
  const [showOnlyUncoveredMethods, setShowOnlyUncoveredMethods] = useState(false)
 
  return (
    <div className={cx(css.widgetWrapper, css.coverage)}>
      <Container flex={{ justifyContent: 'flex-start' }} margin={{ bottom: 'xsmall' }}>
        <Heading level={2} font={{ weight: 'semi-bold' }} color={Color.GREY_600}>
          {getString('pipeline.testsReports.coverage')}
        </Heading>
        <Button
          icon="question"
          minimal
          tooltip={getString('pipeline.testsReports.coverageInfo')}
          iconProps={{ size: 14 }}
          margin={{ left: 'xsmall' }}
        />
      </Container>
      <Container className={css.widget} padding="medium">
        <Switch
          label={getString('pipeline.testsReports.onlyUncoveredFiles')}
          checked={showOnlyUncoveredMethods}
          onChange={e => setShowOnlyUncoveredMethods(e.currentTarget.checked)}
          margin={{ bottom: 'large' }}
        />
        <Container flex padding={{ left: 'medium', right: 'xxlarge' }} margin={{ bottom: 'medium' }}>
          <Text font={{ weight: 'semi-bold' }} color={Color.GREY_600}>
            {getString('pipeline.testsReports.filename')}
          </Text>
          <Text font={{ weight: 'semi-bold' }} color={Color.GREY_600}>
            {getString('pipeline.testsReports.commitId')}
          </Text>
        </Container>
        <div>
          {mockItems.map(item => (
            <TestsCoverageItem data={item as any} key={item.name} />
          ))}
        </div>
      </Container>
    </div>
  )
}