refactor(ui/code-editor): accept enum type (#22)

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portainer.io>

app/react/components/CodeEditor.tsx

@@ -15,12 +15,11 @@ import styles from './CodeEditor.module.css';
 import { TextTip } from './Tip/TextTip';
 import { StackVersionSelector } from './StackVersionSelector';
 
+type Type = 'yaml' | 'shell' | 'dockerfile';
 interface Props extends AutomationTestingProps {
   id: string;
   placeholder?: string;
-  yaml?: boolean;
-  dockerFile?: boolean;
-  shell?: boolean;
+  type?: Type;
   readonly?: boolean;
   onChange: (value: string) => void;
   value: string;
@@ -62,6 +61,12 @@ const dockerFileLanguage = new LanguageSupport(
 );
 const shellLanguage = new LanguageSupport(StreamLanguage.define(shell));
 
+const docTypeExtensionMap: Record<Type, LanguageSupport> = {
+  yaml: yamlLanguage,
+  dockerfile: dockerFileLanguage,
+  shell: shellLanguage,
+};
+
 export function CodeEditor({
   id,
   onChange,
@@ -71,26 +76,18 @@ export function CodeEditor({
   versions,
   onVersionChange,
   height = '500px',
-  yaml: isYaml,
-  dockerFile: isDockerFile,
-  shell: isShell,
+  type,
   'data-cy': dataCy,
 }: Props) {
   const [isRollback, setIsRollback] = useState(false);
 
   const extensions = useMemo(() => {
     const extensions = [];
-    if (isYaml) {
-      extensions.push(yamlLanguage);
-    }
-    if (isDockerFile) {
-      extensions.push(dockerFileLanguage);
-    }
-    if (isShell) {
-      extensions.push(shellLanguage);
+    if (type && docTypeExtensionMap[type]) {
+      extensions.push(docTypeExtensionMap[type]);
     }
     return extensions;
-  }, [isYaml, isDockerFile, isShell]);
+  }, [type]);
 
   function handleVersionChange(version: number) {
     if (versions && versions.length > 1) {

app/react/components/WebEditorForm.tsx

@@ -1,8 +1,13 @@
-import { PropsWithChildren, useEffect, useMemo } from 'react';
+import {
+  ComponentProps,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useMemo,
+} from 'react';
 import { useTransitionHook } from '@uirouter/react';
 
 import { BROWSER_OS_PLATFORM } from '@/react/constants';
-import { AutomationTestingProps } from '@/types';
 
 import { CodeEditor } from '@@/CodeEditor';
 import { Tooltip } from '@@/Tip/Tooltip';
@@ -52,39 +57,21 @@ export const editorConfig = {
   win: otherEditorConfig,
 } as const;
 
-interface Props extends AutomationTestingProps {
-  value: string;
-  onChange: (value: string) => void;
+type CodeEditorProps = ComponentProps<typeof CodeEditor>;
 
-  id: string;
-  placeholder?: string;
-  yaml?: boolean;
-  shell?: boolean;
-  readonly?: boolean;
-  titleContent?: React.ReactNode;
+interface Props extends CodeEditorProps {
+  titleContent?: ReactNode;
   hideTitle?: boolean;
   error?: string;
-  versions?: number[];
-  onVersionChange?: (version: number) => void;
-  height?: string;
 }
 
 export function WebEditorForm({
   id,
-  onChange,
-  placeholder,
-  value,
   titleContent = '',
   hideTitle,
-  readonly,
-  yaml,
-  shell,
   children,
   error,
-  versions,
-  onVersionChange,
-  height,
-  'data-cy': dataCy,
+  ...props
 }: PropsWithChildren<Props>) {
   return (
     <div>
@@ -107,16 +94,8 @@ export function WebEditorForm({
           <div className="col-sm-12 col-lg-12">
             <CodeEditor
               id={id}
-              placeholder={placeholder}
-              readonly={readonly}
-              yaml={yaml}
-              shell={shell}
-              value={value}
-              onChange={onChange}
-              versions={versions}
-              onVersionChange={(v) => onVersionChange && onVersionChange(v)}
-              height={height}
-              data-cy={dataCy}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              {...props}
             />
           </div>
         </div>