Revert changes in CodeField

openshift-assisted · Jun 30, 2023 · fdb465e · fdb465e
1 parent c0617f8
commit fdb465e
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 36 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/libs/ui-lib/lib/common/components/ui/formik/CodeField.tsx b/libs/ui-lib/lib/common/components/ui/formik/CodeField.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { useField } from 'formik';
-import { FormGroup, HelperTextItem, Stack, StackItem, debounce } from '@patternfly/react-core';
+import { FormGroup, HelperTextItem, Stack, StackItem } from '@patternfly/react-core';
 import { CodeFieldProps } from './types';
 import { getFieldId } from './utils';
 import HelperText from './HelperText';
 import { CodeEditor } from '@patternfly/react-code-editor';
 import useFieldErrorMsg from '../../../hooks/useFieldErrorMsg';
 import { monaco } from 'react-monaco-editor';
-import { FILE_TYPE_MESSAGE, validateFileName } from '../../../utils';
 
 const CodeField = ({
   label,
@@ -21,32 +20,13 @@ const CodeField = ({
   description,
   isDisabled,
   downloadFileName,
-  debounceTime,
   dataTestid,
 }: CodeFieldProps) => {
   const [field, , { setValue, setTouched }] = useField({ name, validate });
   const fieldId = getFieldId(name, 'input', idPostfix);
   const [monacoSubscription, setMonacoSubscription] = React.useState<monaco.IDisposable>();
   const [monacoEditor, setMonacoEditor] = React.useState<monaco.editor.IStandaloneCodeEditor>();
   const errorMessage = useFieldErrorMsg({ name, validate });
-  const codeEditorRef = React.useRef(null);
-  const [isValidValue, setIsValidValue] = React.useState<boolean>(true);
-
-  const onCodeChange = debounce((value: string) => {
-    let isValidVal = true;
-    if (codeEditorRef && codeEditorRef.current) {
-      const codeEditor = codeEditorRef.current as CodeEditor;
-      if (codeEditor.state.filename) {
-        isValidVal = validateFileName(codeEditor.state.filename || '');
-        if (!isValidVal) {
-          setValue('', true);
-        } else {
-          setValue(value, true);
-        }
-      }
-      setIsValidValue(isValidVal);
-    }
-  }, debounceTime || 100);
 
   React.useEffect(() => {
     //Work around for Patternfly CodeEditor not calling onChange after upload or drag/drop files
@@ -59,9 +39,9 @@ const CodeField = ({
       monacoSubscription.dispose();
     }
     setMonacoSubscription(
-      monacoEditor.getModel()?.onDidChangeContent(() => {
+      monacoEditor.onDidChangeModelContent(() => {
         setTouched(true);
-        isValidValue ? setValue(monacoEditor.getModel()?.getValue(), true) : setValue('', true);
+        setValue(monacoEditor.getModel()?.getValue(), true);
       }),
     );
     return () => {
@@ -72,8 +52,9 @@ const CodeField = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monacoEditor]);
 
-  const isValid = !errorMessage && isValidValue;
+  const isValid = !errorMessage;
   const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
+
   return (
     <Stack>
       <StackItem>
@@ -93,7 +74,6 @@ const CodeField = ({
             </HelperText>
           )}
           <CodeEditor
-            ref={codeEditorRef}
             code={field.value as string}
             isUploadEnabled={!isDisabled}
             isDownloadEnabled={isValid}
@@ -103,14 +83,13 @@ const CodeField = ({
             language={language}
             onEditorDidMount={(editor) => setMonacoEditor(editor)}
             downloadFileName={downloadFileName}
-            onCodeChange={onCodeChange}
           />
         </FormGroup>
       </StackItem>
       <StackItem>
-        {!isValid && (
+        {errorMessage && (
           <HelperText fieldId={fieldId} isError>
-            {!isValidValue ? FILE_TYPE_MESSAGE : errorMessage}
+            {errorMessage}
           </HelperText>
         )}
       </StackItem>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/types.ts b/libs/ui-lib/lib/common/components/ui/formik/types.ts
@@ -132,7 +132,6 @@ export interface CodeFieldProps extends FieldProps {
   language: CodeEditorProps['language'];
   description?: React.ReactNode;
   downloadFileName?: string;
-  debounceTime?: number;
   dataTestid?: string;
 }
 

diff --git a/...cm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx b/...cm/components/clusterConfiguration/manifestsConfiguration/components/ExpandedManifest.tsx
@@ -6,7 +6,6 @@ import { OcmInputField, OcmCodeField } from '../../../ui/OcmFormFields';
 import { CustomManifestValues } from '../data/dataTypes';
 import { FolderDropdown } from './FolderDropdown';
 import { CustomManifestComponentProps } from './propTypes';
-import { DEBOUNCE_TIME_CODEFIELD } from '../../../../config';
 
 const getDownloadFileName = (manifestIdx: number, value: CustomManifestValues) => {
   return value.folder && value.filename
@@ -50,7 +49,6 @@ const ExpandedManifest = ({ fieldName, manifestIdx }: CustomManifestComponentPro
             label="Content"
             isRequired
             downloadFileName={getDownloadFileName(manifestIdx, value)}
-            debounceTime={DEBOUNCE_TIME_CODEFIELD}
           />
         </GridItem>
       </Grid>

diff --git a/...b/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx b/...b/lib/ocm/components/clusterConfiguration/staticIp/components/YamlView/YamlViewFields.tsx
@@ -14,7 +14,6 @@ import HostSummary from '../CollapsedHost';
 import { MacIpMapping } from './MacIpMapping';
 import { getEmptyYamlHost } from '../../data/emptyData';
 import { OcmCodeField } from '../../../../ui/OcmFormFields';
-import { DEBOUNCE_TIME_CODEFIELD } from '../../../../../config';
 
 const CollapsedHost: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) => {
   const mapFieldName = `${fieldName}.macInterfaceMap`;
@@ -57,7 +56,6 @@ const ExpandedHost: React.FC<HostComponentProps> = ({ fieldName, hostIdx }) => {
           language={Language.yaml}
           name={`${fieldName}.networkYaml`}
           data-testid={`yaml-${hostIdx}`}
-          debounceTime={DEBOUNCE_TIME_CODEFIELD}
         />
       </FormGroup>
       <FormGroup

diff --git a/libs/ui-lib/lib/ocm/config/constants.ts b/libs/ui-lib/lib/ocm/config/constants.ts
@@ -41,5 +41,3 @@ export const ocmPermissionsToAIPermissions = (
 };
 
 export const OCM_CLUSTER_LIST_LINK = '/openshift'; // TODO(mlibra): Tweak it!!!
-
-export const DEBOUNCE_TIME_CODEFIELD = 100;