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 120 | 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 4x 4x 4x 1x 11x 58x 58x 2x 58x 2x 2x 1x 1x 1x 1x 2x 58x | /*
* 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 { Button, ButtonVariation, Container, FormikForm, FormInput, Layout, Text } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { useModalHook } from '@harness/use-modal'
import { Formik } from 'formik'
import { Dialog } from '@blueprintjs/core'
import { useStrings } from 'framework/strings'
import { WarningInfo } from '@common/components/FeatureWarning/featureWarningUtil'
import css from './useCommentModal.module.scss'
export interface CommentModalProps {
title?: string
infoText?: string
onResolve?: (comment: string) => void
onReject?: () => void
}
export const CommentModal = (props: CommentModalProps) => {
const { title, infoText, onResolve, onReject } = props
const { getString } = useStrings()
return (
<Container padding={'xxxlarge'} className={css.main}>
<Formik<{ comments: string }>
onSubmit={values => {
onResolve?.(values.comments)
}}
initialValues={{ comments: '' }}
>
<FormikForm>
<Container>
<Layout.Vertical spacing={'xxlarge'}>
{title && (
<Text color={Color.GREY_800} font={{ weight: 'bold', size: 'medium' }}>
{title}
</Text>
)}
<Container>
<Layout.Vertical spacing={'small'}>
<Text font={{ size: 'small', weight: 'semi-bold' }} color={Color.GREY_600}>
{getString('common.commentModal.commentLabel')}
</Text>
<FormInput.TextArea
data-name="comments"
name="comments"
placeholder={getString('common.commentModal.addCommentPlaceholder')}
/>
</Layout.Vertical>
</Container>
<Container>
<Layout.Vertical spacing="xxlarge">
{infoText && <WarningInfo message={infoText} />}
<Container>
<Layout.Horizontal spacing="small" flex={{ alignItems: 'flex-end', justifyContent: 'flex-start' }}>
<Button text={getString('save')} type="submit" variation={ButtonVariation.PRIMARY} />
<Button text={getString('cancel')} variation={ButtonVariation.TERTIARY} onClick={onReject} />
</Layout.Horizontal>
</Container>
</Layout.Vertical>
</Container>
</Layout.Vertical>
</Container>
</FormikForm>
</Formik>
</Container>
)
}
export default function useCommentModal(): {
getComments: (dialogTitle?: string, dialogInfo?: string) => Promise<string>
} {
const [modalProps, setModalProps] = React.useState<{
title?: string
infoText?: string
resolve: (comment: string) => void
reject: () => void
}>()
const [showModal, hideModal] = useModalHook(() => {
return (
<Dialog enforceFocus={false} isOpen={true} className={css.commentsDialog}>
<CommentModal
title={modalProps?.title}
infoText={modalProps?.infoText}
onResolve={modalProps?.resolve}
onReject={modalProps?.reject}
/>
</Dialog>
)
}, [modalProps])
const getComments: (dialogTitle?: string, dialogInfo?: string) => Promise<string> = (
dialogTitle?: string,
dialogInfo?: string
) => {
return new Promise((resolve, reject) => {
setModalProps({
title: dialogTitle,
infoText: dialogInfo,
resolve: (comment: string) => {
hideModal()
resolve(comment)
},
reject: () => {
hideModal()
reject()
}
})
showModal()
})
}
return { getComments }
}
|