All files / modules/35-connectors/components/CreateConnector/CEAzureConnector AzureBillingInfo.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/*
 * 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 { useParams } from 'react-router-dom'
import {
  Button,
  Formik,
  FormikForm,
  FormInput,
  Heading,
  Layout,
  ModalErrorHandler,
  ModalErrorHandlerBinding,
  StepProps
} from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
import {
  ConnectorInfoDTO,
  ConnectorConfigDTO,
  ConnectorRequestBody,
  useCreateConnector,
  useUpdateConnector
} from 'services/cd-ng'
import useRBACError from '@rbac/utils/useRBACError/useRBACError'
import css from './CreateCeAzureConnector.module.scss'
 
interface OverviewDetails {
  subscriptionId: string
  tenantId: string
  featuresEnabled: Array<'OPTIMIZATION' | 'BILLING'>
}
 
interface AzureBillingInfoProps {
  name?: string
  onSuccess?: (connector: ConnectorRequestBody) => void
  isEditMode: boolean
}
 
interface StepSecretManagerProps extends ConnectorInfoDTO {
  spec: any
}
 
const AzureBillingInfo: React.FC<StepProps<StepSecretManagerProps> & AzureBillingInfoProps> = props => {
  const { getRBACErrorMessage } = useRBACError()
  const { getString } = useStrings()
  const { accountId } = useParams<{
    accountId: string
    projectIdentifier: string
    orgIdentifier: string
  }>()
  const [isSaving, setIsSaving] = useState(false)
  const [modalErrorHandler, setModalErrorHandler] = useState<ModalErrorHandlerBinding | undefined>()
  const { mutate: createConnector } = useCreateConnector({ queryParams: { accountIdentifier: accountId } })
  const { mutate: updateConnector } = useUpdateConnector({
    queryParams: { accountIdentifier: accountId }
  })
 
  const handleSubmit = async (values: OverviewDetails): Promise<void> => {
    setIsSaving(true)
    try {
      modalErrorHandler?.hide()
      const spec: ConnectorConfigDTO = {
        subscriptionId: values.subscriptionId,
        tenantId: values.tenantId,
        featuresEnabled: ['OPTIMIZATION']
      }
      const connectorDetails: ConnectorInfoDTO = {
        ...(props.prevStepData as ConnectorInfoDTO),
        type: 'CEAzure',
        spec: spec
      }
      const connector = { connector: connectorDetails }
      if (!props.isEditMode) {
        const response = await createConnector(connector as ConnectorRequestBody)
        props.onSuccess?.(response.data as ConnectorRequestBody)
        props.nextStep?.({ ...connectorDetails })
      } else if (props.isEditMode === true) {
        const response = await updateConnector(connector)
        props.onSuccess?.(response.data as ConnectorRequestBody)
        props.nextStep?.({ ...connectorDetails })
      }
    } catch (e) {
      modalErrorHandler?.showDanger(getRBACErrorMessage(e))
    } finally {
      setIsSaving(false)
    }
  }
  return (
    <Layout.Vertical className={css.stepContainer}>
      <Heading level={2} className={css.header}>
        Azure Connection Details
      </Heading>
      <div style={{ flex: 1 }}>
        <Formik<OverviewDetails>
          initialValues={{
            tenantId: props.prevStepData?.spec?.tenantId || '',
            subscriptionId: props.prevStepData?.spec?.subscriptionId || '',
            featuresEnabled: ['OPTIMIZATION']
          }}
          formName="azureBillingInfoForm"
          onSubmit={values => {
            handleSubmit(values)
          }}
        >
          {() => (
            <FormikForm>
              <ModalErrorHandler bind={setModalErrorHandler} />
              <FormInput.Text
                name={'tenantId'}
                label={'Specify Tenant ID of the Azure account'}
                className={css.dataFields}
              />
              <FormInput.Text name={'subscriptionId'} label={'Subscription ID'} className={css.dataFields} />
              <Button
                type="submit"
                intent="primary"
                text={getString('continue')}
                rightIcon="chevron-right"
                loading={isSaving}
                disabled={isSaving}
                className={css.submitBtn}
              />
            </FormikForm>
          )}
        </Formik>
      </div>
    </Layout.Vertical>
  )
}
 
export default AzureBillingInfo