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 | 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x | /*
* 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 React from 'react'
import { debounce } from 'lodash-es'
import { Layout } from '@wings-software/uicore'
import cx from 'classnames'
import SplitPane from 'react-split-pane'
import { Container } from '@harness/uicore'
import { usePipelineContext } from '@pipeline/components/PipelineStudio/PipelineContext/PipelineContext'
import {
DefaultSplitPaneSize,
MaximumSplitPaneSize,
MinimumSplitPaneSize
} from '@pipeline/components/PipelineStudio/PipelineConstants'
import { TemplateBar } from '@pipeline/components/PipelineStudio/TemplateBar/TemplateBar'
import { usePipelineTemplateActions } from '@pipeline/utils/usePipelineTemplateActions'
import { TemplatePipelineCanvas } from '@pipeline/components/PipelineStudio/PipelineTemplateBuilder/TemplatePipelineCanvas/TemplatePipelineCanvas'
import { TemplatePipelineSpecifications } from '@pipeline/components/PipelineStudio/PipelineTemplateBuilder/TemplatePipelineSpecifications/TemplatePipelineSpecifications'
import css from './TemplatePipelineBuilder.module.scss'
export function TemplatePipelineBuilder(): React.ReactElement {
const {
state: { pipeline }
} = usePipelineContext()
const [splitPaneSize, setSplitPaneSize] = React.useState(DefaultSplitPaneSize)
const setSplitPaneSizeDeb = React.useRef(debounce(setSplitPaneSize, 200))
function handleStageResize(size: number): void {
setSplitPaneSizeDeb.current(size)
}
// eslint-disable-next-line
const resizerStyle = !!navigator.userAgent.match(/firefox/i)
? { display: 'flow-root list-item' }
: { display: 'inline-table' }
const { addOrUpdateTemplate, removeTemplate } = usePipelineTemplateActions()
return (
<Container className={css.mainContainer}>
<Layout.Vertical height={'100%'}>
{pipeline.template && (
<TemplateBar
templateLinkConfig={pipeline.template}
onRemoveTemplate={removeTemplate}
onOpenTemplateSelector={addOrUpdateTemplate}
className={css.templateBar}
/>
)}
<Container className={cx(css.canvasContainer)}>
<SplitPane
size={splitPaneSize}
split="horizontal"
minSize={MinimumSplitPaneSize}
maxSize={MaximumSplitPaneSize}
style={{ overflow: 'auto' }}
pane2Style={{ overflow: 'initial', zIndex: 2 }}
resizerStyle={resizerStyle}
onChange={handleStageResize}
allowResize={true}
>
<TemplatePipelineCanvas />
<TemplatePipelineSpecifications />
</SplitPane>
</Container>
</Layout.Vertical>
</Container>
)
}
|