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 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 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 10x 10x 10x 10x 10x 10x 10x 1x 10x 1x 1x 1x 1x 1x 5x | /*
* 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 { useParams } from 'react-router-dom'
import { Classes, Dialog, IDialogProps } from '@blueprintjs/core'
import { Container, Button, StepWizard } from '@wings-software/uicore'
import { useModalHook } from '@harness/use-modal'
import { Color } from '@harness/design-system'
import type { Budget } from 'services/ce'
import { useStrings } from 'framework/strings'
import SetBudgetAmount from './CreateBudgetSteps/SetBudgetAmount'
import ConfigureAlerts from './CreateBudgetSteps/ConfigureAlerts'
import SelectPerspective from './CreateBudgetSteps/SelectPerspective'
import css from './PerspectiveCreateBudget.module.scss'
interface OpenModalArgs {
isEdit?: boolean
selectedBudget: Budget
perspectiveName?: string
perspective?: string
}
interface BudgetModalProps {
onSuccess: () => void
onError?: () => void
}
const useBudgetModal = ({ onSuccess }: BudgetModalProps) => {
const { getString } = useStrings()
const [isEditMode, setIsEditMode] = useState(false)
const [perspectiveInfo, setPerspectiveInfo] = useState<any>()
const [budget, setBudget] = useState<Budget>()
const { perspectiveId, accountId } = useParams<{ perspectiveId: string; accountId: string }>()
const modalPropsLight: IDialogProps = {
isOpen: true,
autoFocus: true,
enforceFocus: false,
canOutsideClickClose: false,
className: cx(Classes.DIALOG, css.dialog),
style: {
minWidth: 1175,
minHeight: 640,
paddingBottom: 0
}
}
const [openModal, hideModal] = useModalHook(
() => (
<Dialog onClose={hideModal} {...modalPropsLight}>
<Container>
<StepWizard
icon={'vertical-bar-chart-asc'}
iconProps={{ size: 40, color: Color.WHITE }}
title={
isEditMode
? getString('ce.perspectives.budgets.wizardTitleEdit')
: getString('ce.perspectives.budgets.wizardTitle')
}
>
<SelectPerspective
perspective={perspectiveInfo?.id}
name={getString('ce.perspectives.budgets.defineTarget.title')}
isEditMode={isEditMode}
budget={budget}
/>
<SetBudgetAmount
name={getString('ce.perspectives.budgets.setBudgetAmount.title')}
budget={budget}
isEditMode={isEditMode}
/>
<ConfigureAlerts
isEditMode={isEditMode}
viewId={perspectiveId}
name={getString('ce.perspectives.budgets.configureAlerts.title')}
accountId={accountId}
budget={budget}
onSuccess={onSuccess}
/>
</StepWizard>
</Container>
<Button
minimal
icon="cross"
iconProps={{ size: 18 }}
onClick={() => {
hideModal()
}}
className={css.crossIcon}
/>
</Dialog>
),
[perspectiveInfo?.name, budget, isEditMode]
)
return {
hideModal,
openModal: (args?: OpenModalArgs) => {
const { isEdit, selectedBudget, perspectiveName, perspective } = args || {}
setIsEditMode(!!isEdit)
setBudget(selectedBudget)
setPerspectiveInfo({
name: perspectiveName,
id: perspective
})
openModal()
}
}
}
export default useBudgetModal
|