ACM-20347-difficult-to-edit-yaml

src/Wizard.tsx

@@ -24,7 +24,7 @@ import { ShowValidationProvider, useSetShowValidation, useShowValidation } from
 import { StepHasInputsProvider } from './contexts/StepHasInputsProvider'
 import { StepShowValidationProvider, useSetStepShowValidation, useStepShowValidation } from './contexts/StepShowValidationProvider'
 import { StepValidationProvider, useStepHasValidationError } from './contexts/StepValidationProvider'
-import { useHasValidationError, ValidationProvider } from './contexts/ValidationProvider'
+import { useHasValidationError, useEditorValidationStatus, ValidationProvider, EditorValidationStatus } from './contexts/ValidationProvider'
 import { Step } from './Step'
 
 export interface WizardProps {
@@ -229,6 +229,7 @@ function MyFooter(props: {
     const setShowValidation = useSetShowValidation()
     const showWizardValidation = useShowValidation()
     const wizardHasValidationError = useHasValidationError()
+    const { editorValidationStatus } = useEditorValidationStatus()
 
     const firstStep = props.steps[0]
     const lastStep = props.steps[props.steps.length - 1]
@@ -255,17 +256,36 @@ function MyFooter(props: {
         }
     }, [lastStep.name, setShowValidation, wizardContext.activeStep.name])
 
-    const { fixValidationErrorsMsg, submitText, submittingText, cancelButtonText, backButtonText, nextButtonText } = useStringContext()
+    const {
+        fixValidationErrorsMsg,
+        fixEditorValidationErrorsMsg,
+        waitforEditorValidationErrorsMsg,
+        submitText,
+        submittingText,
+        cancelButtonText,
+        backButtonText,
+        nextButtonText,
+    } = useStringContext()
 
     if (wizardContext.activeStep.name === lastStep.name) {
         return (
             <div className="pf-v5-u-box-shadow-sm-top">
+                {editorValidationStatus === EditorValidationStatus.failure && showWizardValidation && (
+                    <Alert title={fixEditorValidationErrorsMsg} isInline variant="danger" />
+                )}
                 {wizardHasValidationError && showWizardValidation && <Alert title={fixValidationErrorsMsg} isInline variant="danger" />}
+                {editorValidationStatus === EditorValidationStatus.pending && showWizardValidation && (
+                    <Alert title={waitforEditorValidationErrorsMsg} isInline variant="warning" />
+                )}
                 {submitError && <Alert title={submitError} isInline variant="danger" />}
                 <WizardFooter>
                     <Button
                         onClick={onSubmitClick}
-                        isDisabled={(wizardHasValidationError && showWizardValidation) || submitting}
+                        isDisabled={
+                            ((wizardHasValidationError || editorValidationStatus !== EditorValidationStatus.success) &&
+                                showWizardValidation) ||
+                            submitting
+                        }
                         isLoading={submitting}
                         type="submit"
                     >
@@ -324,7 +344,7 @@ function RenderHiddenSteps(props: { stepComponents: ReactElement[] }) {
 function WizardDrawer(props: { yamlEditor?: () => ReactNode }) {
     const [yamlEditor] = useState(props.yamlEditor ?? undefined)
     return (
-        <DrawerPanelContent isResizable={true} defaultSize="800px" style={{ backgroundColor: 'rgb(21, 21, 21)' }}>
+        <DrawerPanelContent isResizable={true} defaultSize="600px">
             {yamlEditor}
         </DrawerPanelContent>
     )

src/contexts/StringContext.tsx

@@ -19,6 +19,8 @@ export interface WizardStrings {
     cancelButtonText: string
     nextButtonText: string
     fixValidationErrorsMsg: string
+    fixEditorValidationErrorsMsg: string
+    waitforEditorValidationErrorsMsg: string
     submitText: string
     submittingText: string
     moreInfo: string
@@ -53,6 +55,8 @@ export const defaultStrings: WizardStrings = {
     cancelButtonText: 'Cancel',
     nextButtonText: 'Next',
     fixValidationErrorsMsg: 'Please fix validation errors',
+    fixEditorValidationErrorsMsg: 'Please fix editor syntax errors',
+    waitforEditorValidationErrorsMsg: 'Please wait for editor syntax check',
     submitText: 'Submit',
     submittingText: 'Submitting',
     moreInfo: 'More info',

src/contexts/ValidationProvider.tsx

@@ -1,5 +1,20 @@
 import { createContext, ReactNode, useCallback, useContext, useLayoutEffect, useState } from 'react'
 
+export enum EditorValidationStatus {
+    success = 'success',
+    pending = 'pending',
+    failure = 'failure',
+}
+
+export const EditorValidationStatusContext = createContext<{
+    editorValidationStatus: EditorValidationStatus
+    setEditorValidationStatus: (status: EditorValidationStatus) => void
+}>({
+    editorValidationStatus: EditorValidationStatus.success,
+    setEditorValidationStatus: () => void 0,
+})
+export const useEditorValidationStatus = () => useContext(EditorValidationStatusContext)
+
 const SetHasValidationErrorContext = createContext<() => void>(() => null)
 SetHasValidationErrorContext.displayName = 'SetHasValidationErrorContext'
 export const useSetHasValidationError = () => useContext(SetHasValidationErrorContext)
@@ -13,6 +28,8 @@ ValidateContext.displayName = 'ValidateContext'
 export const useValidate = () => useContext(ValidateContext)
 
 export function ValidationProvider(props: { children: ReactNode }) {
+    const [editorValidationStatus, setEditorValidationStatus] = useState<EditorValidationStatus>(EditorValidationStatus.success)
+
     const [hasValidationError, setHasValidationErrorState] = useState(false)
     const [previousHasValidationError, setPreviousHasValidationError] = useState(false)
     const setHasValidationError = useCallback(() => {
@@ -47,9 +64,11 @@ export function ValidationProvider(props: { children: ReactNode }) {
 
     return (
         <ValidateContext.Provider value={validate}>
-            <SetHasValidationErrorContext.Provider value={setHasValidationError}>
-                <HasValidationErrorContext.Provider value={hasValidationError}>{props.children}</HasValidationErrorContext.Provider>
-            </SetHasValidationErrorContext.Provider>
+            <EditorValidationStatusContext.Provider value={{ editorValidationStatus, setEditorValidationStatus }}>
+                <SetHasValidationErrorContext.Provider value={setHasValidationError}>
+                    <HasValidationErrorContext.Provider value={hasValidationError}>{props.children}</HasValidationErrorContext.Provider>
+                </SetHasValidationErrorContext.Provider>
+            </EditorValidationStatusContext.Provider>
         </ValidateContext.Provider>
     )
 }

src/inputs/WizKeyValue.tsx

@@ -96,11 +96,17 @@ export function WizKeyValue(props: KeyValueProps) {
                 {pairs.map((pair, index) => {
                     return (
                         <Fragment key={index}>
-                            <TextInput id={`key-${index + 1}`} value={pair.key} onChange={(_event, value) => onKeyChange(index, value)} />
+                            <TextInput
+                                id={`key-${index + 1}`}
+                                value={pair.key}
+                                spellCheck="false"
+                                onChange={(_event, value) => onKeyChange(index, value)}
+                            />
                             <span>=</span>
                             <TextInput
                                 id={`value-${index + 1}`}
                                 value={pair.value}
+                                spellCheck="false"
                                 onChange={(_event, value) => onValueChange(index, value)}
                             />
                             <Button variant="plain" aria-label={removeItemAriaLabel} onClick={() => onDeleteKey(index)}>

src/inputs/WizStringsInput.tsx

@@ -173,6 +173,7 @@ export function StringsMapInput(props: StringsMapInputProps) {
                                     <PFTextInput
                                         id={`${id}-${index + 1}`}
                                         value={pair}
+                                        spellCheck="false"
                                         onChange={(_event, value) => onKeyChange(index, value)}
                                         required
                                     />

src/inputs/WizTextInput.tsx

@@ -41,6 +41,7 @@ export function WizTextInput(props: WizTextInputProps) {
                     onChange={onChange}
                     type={!props.secret || showSecrets ? 'text' : 'password'}
                     isDisabled={disabled}
+                    spellCheck="false"
                     readOnlyVariant={props.readonly ? 'default' : undefined}
                 />
             </InputGroupItem>