All files / modules/75-ce/components/OverviewPage OverviewNoData.tsx

94.44% Statements 17/18
100% Branches 0/0
50% Functions 1/2
94.44% Lines 17/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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              2x 2x 2x 2x 2x 2x 2x 2x 2x 2x   2x 1x   1x 1x   1x     1x                                                                                           2x  
/*
 * 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 { useHistory, useParams } from 'react-router-dom'
import { Container, Layout, Text } from '@wings-software/uicore'
import routes from '@common/RouteDefinitions'
import { useStrings } from 'framework/strings'
import CCMDocsImage from './images/CCMDocs.svg'
import AutoStoppingImage from './images/AutoStopping.svg'
import ConnectorImage from './images/Connector.svg'
import NoDataImage from './images/NoData.svg'
import css from './OverviewPage.module.scss'
 
const NoData = ({ onConnectorCreateClick }: { onConnectorCreateClick: () => void }) => {
  const { accountId } = useParams<{ accountId: string }>()
 
  const history = useHistory()
  const { getString } = useStrings()
 
  const handleCreateAutoStoppingClick = () => {
    history.push(routes.toCECORules({ accountId }))
  }
  return (
    <div className={css.nodata}>
      <div className={css.noDataContent}>
        <Layout.Vertical spacing="xxxlarge">
          <Container>
            <Layout.Horizontal spacing="large" style={{ alignItems: 'center' }}>
              <img src={NoDataImage} height={150} />
              <Text color="grey800" font="normal" style={{ lineHeight: '25px' }}>
                {getString('ce.overview.noData.info')}
              </Text>
            </Layout.Horizontal>
          </Container>
          <Container>
            <Text color="grey800">{getString('ce.overview.noData.explore')}</Text>
            <Layout.Horizontal style={{ justifyContent: 'space-evenly', marginTop: 25 }}>
              <Layout.Vertical>
                <img src={AutoStoppingImage} height={75} />
                <Text
                  padding="medium"
                  color="primary7"
                  style={{ cursor: 'pointer' }}
                  onClick={handleCreateAutoStoppingClick}
                >
                  {getString('ce.overview.noData.autoStopping')}
                </Text>
              </Layout.Vertical>
              <Layout.Vertical>
                <img src={ConnectorImage} height={75} />
                <Text padding="medium" color="primary7" style={{ cursor: 'pointer' }} onClick={onConnectorCreateClick}>
                  {getString('ce.overview.noData.connector')}
                </Text>
              </Layout.Vertical>
              <Layout.Vertical>
                <img src={CCMDocsImage} height={75} />
                <a href="http://ngdocs.harness.io/" target="_blank" rel="noreferrer" className={css.ngDocs}>
                  {getString('ce.overview.noData.ngDocs')}
                </a>
              </Layout.Vertical>
            </Layout.Horizontal>
          </Container>
        </Layout.Vertical>
      </div>
    </div>
  )
}
 
export default NoData