From f22643ccc6bbc41bee1e36e8dab76a2e6833870b Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Wed, 7 May 2025 11:35:47 -0400
Subject: [PATCH 1/2] ACM-20347-difficult-to-edit-yaml

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 src/Wizard.tsx                      | 26 +++++++++++++++++++++++---
 src/contexts/StringContext.tsx      |  4 ++++
 src/contexts/ValidationProvider.tsx | 25 ++++++++++++++++++++++---
 src/inputs/WizKeyValue.tsx          |  8 +++++++-
 src/inputs/WizStringsInput.tsx      |  1 +
 src/inputs/WizTextInput.tsx         |  1 +
 6 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/Wizard.tsx b/src/Wizard.tsx
index 0dd84da..ca559bc 100644
--- a/src/Wizard.tsx
+++ b/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"
                     >
diff --git a/src/contexts/StringContext.tsx b/src/contexts/StringContext.tsx
index 3a9844c..9dfa865 100644
--- a/src/contexts/StringContext.tsx
+++ b/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',
diff --git a/src/contexts/ValidationProvider.tsx b/src/contexts/ValidationProvider.tsx
index 8296ebc..b58ca33 100644
--- a/src/contexts/ValidationProvider.tsx
+++ b/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
+})
+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>
     )
 }
diff --git a/src/inputs/WizKeyValue.tsx b/src/inputs/WizKeyValue.tsx
index ec6b480..ba254e8 100644
--- a/src/inputs/WizKeyValue.tsx
+++ b/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)}>
diff --git a/src/inputs/WizStringsInput.tsx b/src/inputs/WizStringsInput.tsx
index 4b0bb19..e2f662c 100644
--- a/src/inputs/WizStringsInput.tsx
+++ b/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
                                     />
diff --git a/src/inputs/WizTextInput.tsx b/src/inputs/WizTextInput.tsx
index a093ab7..6cca080 100644
--- a/src/inputs/WizTextInput.tsx
+++ b/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>

From f7df26437c68a17995d6d7adae7fe1252dec5539 Mon Sep 17 00:00:00 2001
From: John Swanke <jswanke@redhat.com>
Date: Thu, 8 May 2025 11:22:43 -0400
Subject: [PATCH 2/2] fix initial editor size bug

Signed-off-by: John Swanke <jswanke@redhat.com>
---
 src/Wizard.tsx                      | 2 +-
 src/contexts/ValidationProvider.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Wizard.tsx b/src/Wizard.tsx
index ca559bc..f2577c1 100644
--- a/src/Wizard.tsx
+++ b/src/Wizard.tsx
@@ -344,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>
     )
diff --git a/src/contexts/ValidationProvider.tsx b/src/contexts/ValidationProvider.tsx
index b58ca33..9dd4517 100644
--- a/src/contexts/ValidationProvider.tsx
+++ b/src/contexts/ValidationProvider.tsx
@@ -11,7 +11,7 @@ export const EditorValidationStatusContext = createContext<{
     setEditorValidationStatus: (status: EditorValidationStatus) => void
 }>({
     editorValidationStatus: EditorValidationStatus.success,
-    setEditorValidationStatus: () => void
+    setEditorValidationStatus: () => void 0
 })
 export const useEditorValidationStatus = () => useContext(EditorValidationStatusContext)