All files / modules/85-cv/components/CVSetupSourcesView/SelectMonitoringSourceProduct SelectMonitoringSourceProduct.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*
 * 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 from 'react'
import { FormInput, Layout, Container, Text, Card, CardBody } from '@wings-software/uicore'
import type { IconProps } from '@wings-software/uicore/dist/icons/Icon'
import { Color } from '@harness/design-system'
import { useStrings } from 'framework/strings'
import { StepLabelProps, StepLabel } from '../StepLabel/StepLabel'
import { SetupSourceEmptyCardHeader } from '../SetupSourceCardHeader/SetupSourceCardHeader'
import css from './SelectMonitoringSourceProduct.module.scss'
 
export interface SelectMonitoringSourceProductProps {
  products: Array<{ productName: string; icon: IconProps; productLabel: string }>
  stepLabelProps: StepLabelProps
  monitoringSourceName: string
  monitoringSourceEntityName: string
}
 
export function SelectMonitoringSourceProduct(props: SelectMonitoringSourceProductProps): JSX.Element {
  const { products, stepLabelProps, monitoringSourceEntityName, monitoringSourceName } = props
  const { getString } = useStrings()
  return (
    <Container className={css.main}>
      <SetupSourceEmptyCardHeader>
        <StepLabel {...stepLabelProps} />
        <Text className={css.selectProductText}>
          {getString('cv.onboarding.monitoringSources.selectProduct', {
            type: monitoringSourceName,
            entity: monitoringSourceEntityName
          })}
        </Text>
      </SetupSourceEmptyCardHeader>
      <FormInput.CustomRender
        name="product"
        className={css.productSelection}
        render={formikProps => {
          return (
            <Layout.Horizontal spacing="medium">
              {products?.map((item, index) => {
                return (
                  <Card
                    selected={item.productName === formikProps.values.productName}
                    className={css.sourceIcon}
                    key={index}
                  >
                    <CardBody.Icon icon={item.icon.name} iconSize={item.icon.size} />
                    <Text color={Color.BLACK}>{item.productLabel}</Text>
                  </Card>
                )
              })}
            </Layout.Horizontal>
          )
        }}
      />
    </Container>
  )
}