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 | 5x 5x 5x 5x 5x 5x 5x 134x 134x 116x 116x 8x 8x 8x 8x 8x 8x 8x 18x | /*
* 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, { SetStateAction, Dispatch } from 'react'
import { Heading, VisualYamlSelectedView as SelectedView, VisualYamlToggle } from '@wings-software/uicore'
import cx from 'classnames'
import { parse } from 'yaml'
import type { YamlBuilderHandlerBinding } from '@common/interfaces/YAMLBuilderProps'
import { useStrings } from 'framework/strings'
import css from './Wizard.module.scss'
interface WizardHeaderProps {
yamlHandler?: YamlBuilderHandlerBinding
showError: (str: string) => void
leftNav?: ({ selectedView }: { selectedView: SelectedView }) => JSX.Element
selectedView: SelectedView
rightNav?: JSX.Element
showVisualYaml: boolean
handleModeSwitch?: (mode: SelectedView, yamlHandler?: YamlBuilderHandlerBinding) => void
setSelectedView: Dispatch<SetStateAction<SelectedView>>
positionInHeader?: boolean
wizardLabel?: string
}
export const WizardHeader = ({
yamlHandler,
showError,
leftNav,
selectedView,
rightNav,
showVisualYaml,
handleModeSwitch,
setSelectedView,
positionInHeader,
wizardLabel
}: WizardHeaderProps): JSX.Element => {
const { getString } = useStrings()
if (leftNav || showVisualYaml || rightNav) {
const title = leftNav ? (
<div className={css.sideItems}>{leftNav({ selectedView })}</div>
) : (
<Heading className={css.sideItems} padding="small" level={2}>
{wizardLabel}
</Heading>
)
return (
<section className={css.extendedNav}>
{title}
{showVisualYaml ? (
<VisualYamlToggle
className={cx(positionInHeader && css.positionInHeader)}
selectedView={selectedView}
onChange={mode => {
try {
const latestYaml = yamlHandler?.getLatestYaml() || /* istanbul ignore next */ ''
parse(latestYaml)
const errorsYaml =
(yamlHandler?.getYAMLValidationErrorMap() as unknown as Map<number, string>) ||
/* istanbul ignore next */ ''
Iif (errorsYaml?.size > 0) {
return
}
handleModeSwitch?.(mode, yamlHandler)
setSelectedView(mode)
} catch (e) {
/* istanbul ignore next */
showError(getString('common.validation.invalidYamlText'))
return
}
}}
/>
) : null}
<div className={css.sideItems}>{rightNav ? rightNav : null}</div>
</section>
)
} else {
return (
<Heading
style={{ position: 'fixed', top: '35px', paddingLeft: 'var(--spacing-large)', zIndex: 2 }}
padding="small"
level={2}
>
{wizardLabel}
</Heading>
)
}
}
|