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 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 14x 14x 14x 14x 14x 14x 3x 1x 2x 1x 1x 14x 4x 4x 4x 3x 3x 1x 14x 4x | /*
* Copyright 2022 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 { Text, Layout, Icon, Container } from '@harness/uicore'
import { FontVariation, Color } from '@harness/design-system'
import React, { ReactElement, useMemo, useState } from 'react'
import { MonacoDiffEditor } from 'react-monaco-editor'
import { useStrings } from 'framework/strings'
import { useGetYamlDiff } from 'services/audit'
import { ContainerSpinner } from '@common/components/ContainerSpinner/ContainerSpinner'
import css from './EventSummary.module.scss'
interface YamlDiffButtonProps {
auditId: string
accountIdentifier: string
}
const DIFF_VIEWER_OPTIONS = {
ignoreTrimWhitespace: true,
minimap: { enabled: false },
codeLens: false,
readOnly: true,
renderSideBySide: false,
lineNumbers: 'off' as const,
inDiffEditor: true,
scrollBeyondLastLine: false,
smartSelect: false
}
const YamlDiffButton: React.FC<YamlDiffButtonProps> = ({ auditId, accountIdentifier }) => {
const [showDiff, setShowDiff] = useState<boolean>(false)
const [buttonClientY, setButtonClientY] = useState(0)
const editorHeight = useMemo(() => `calc(100vh - ${buttonClientY + 60}px)`, [buttonClientY])
const { getString } = useStrings()
const {
data,
loading,
error,
refetch: fetchYamlDiff
} = useGetYamlDiff({
queryParams: {
accountIdentifier,
auditId
},
lazy: true
})
const renderEditor = (): ReactElement => {
if (loading) {
return <ContainerSpinner />
}
if (error) {
return (
<Text margin={{ top: 'small' }} color={Color.GREY_600} font={{ variation: FontVariation.SMALL }}>
{getString('auditTrail.noYamlDifference')}
</Text>
)
}
return (
<Container margin={{ top: 'small' }}>
<MonacoDiffEditor
width="100%"
height={editorHeight}
language="yaml"
original={data?.data?.oldYaml}
value={data?.data?.newYaml}
options={DIFF_VIEWER_OPTIONS}
/>
</Container>
)
}
const handleButtonClick = (e: React.MouseEvent<Element, MouseEvent>): void => {
e.persist()
setButtonClientY(e.clientY)
if (showDiff === false) {
fetchYamlDiff()
setShowDiff(true)
} else {
setShowDiff(false)
}
}
return (
<>
<Layout.Horizontal
className={css.yamlButton}
flex={{ alignItems: 'center', justifyContent: 'flex-start' }}
color={Color.GREY_800}
padding={{ top: 'small', bottom: 'small' }}
onClick={handleButtonClick}
>
<Text margin={{ right: 'xsmall' }} font={{ variation: FontVariation.SMALL_SEMI }}>
{getString('auditTrail.yamlDifference')}
</Text>
<Icon color={Color.PRIMARY_7} name={showDiff ? 'chevron-up' : 'chevron-down'} />
</Layout.Horizontal>
{showDiff && renderEditor()}
</>
)
}
export default YamlDiffButton
|