refactor(ui/code-editor): accept enum type [EE-7128]

fix [EE-7128]

app/portainer/components/code-editor/code-editor.controller.js

@@ -1,8 +1,27 @@
 /* @ngInject */
 export default function CodeEditorController($scope) {
+  this.type = '';
+
   this.handleChange = (value) => {
     $scope.$evalAsync(() => {
       this.onChange(value);
     });
   };
+
+  this.$onInit = () => {
+    this.type = getType({ yaml: this.yml, dockerFile: this.dockerFile, shell: this.shell });
+  };
+}
+
+function getType({ yaml, dockerFile, shell }) {
+  if (yaml) {
+    return 'yaml';
+  }
+  if (dockerFile) {
+    return 'dockerfile';
+  }
+  if (shell) {
+    return 'shell';
+  }
+  return undefined;
 }

app/portainer/components/code-editor/code-editor.html

@@ -1,9 +1,7 @@
 <react-code-editor
   id="$ctrl.identifier"
   placeholder="$ctrl.placeholder"
-  yaml="$ctrl.yml"
+  type="$ctrl.type"
-  docker-file="$ctrl.dockerFile"
-  shell="$ctrl.shell"
   readonly="$ctrl.readOnly"
   on-change="($ctrl.handleChange)"
   value="$ctrl.value"

app/portainer/react/components/index.ts

@@ -223,9 +223,7 @@ export const ngModule = angular
     r2a(CodeEditor, [
       'id',
       'placeholder',
-      'yaml',
+      'type',
-      'dockerFile',
-      'shell',
       'readonly',
       'onChange',
       'value',

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;
+  type?: Type;
-  dockerFile?: boolean;
-  shell?: boolean;
   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,
+  type,
-  dockerFile: isDockerFile,
-  shell: isShell,
   'data-cy': dataCy,
 }: Props) {
   const [isRollback, setIsRollback] = useState(false);
 
   const extensions = useMemo(() => {
     const extensions = [];
-    if (isYaml) {
+    if (type && docTypeExtensionMap[type]) {
-      extensions.push(yamlLanguage);
+      extensions.push(docTypeExtensionMap[type]);
-    }
-    if (isDockerFile) {
-      extensions.push(dockerFileLanguage);
-    }
-    if (isShell) {
-      extensions.push(shellLanguage);
     }
     return extensions;
-  }, [isYaml, isDockerFile, isShell]);
+  }, [type]);
 
   function handleVersionChange(version: number) {
     if (versions && versions.length > 1) {

app/react/components/WebEditorForm.tsx

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

app/react/edge/edge-jobs/CreateView/CreateEdgeJobForm.tsx

@@ -87,7 +87,7 @@ function InnerForm({ isLoading }: { isLoading: boolean }) {
           onChange={(value) => setFieldValue('fileContent', value)}
           value={values.fileContent}
           placeholder="Define or paste the content of your script file here"
-          shell
+          type="shell"
           error={errors.fileContent}
         />
       )}

app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/UpdateEdgeJobForm.tsx

@@ -83,7 +83,7 @@ function InnerForm({ isLoading }: { isLoading: boolean }) {
         onChange={(value) => setFieldValue('fileContent', value)}
         value={values.fileContent}
         placeholder="Define or paste the content of your script file here"
-        shell
+        type="shell"
         error={errors.fileContent}
       />
 

app/react/edge/edge-stacks/CreateView/DockerContentField.tsx

@@ -16,7 +16,7 @@ export function DockerContentField({
       id="stack-creation-editor"
       value={value}
       onChange={onChange}
-      yaml
+      type="yaml"
       placeholder="Define or paste the content of your docker compose file here"
       error={error}
       readonly={readonly}

app/react/edge/edge-stacks/CreateView/KubeManifestForm.tsx

@@ -72,7 +72,7 @@ export function KubeManifestForm({
           id="stack-creation-editor"
           value={values.fileContent}
           onChange={(value) => handleChange({ fileContent: value })}
-          yaml
+          type="yaml"
           placeholder="Define or paste the content of your manifest file here"
           error={errors?.fileContent}
           data-cy="stack-creation-editor"

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx

@@ -60,7 +60,7 @@ export function ComposeForm({
       <WebEditorForm
         data-cy="compose-editor"
         value={values.content}
-        yaml
+        type="yaml"
         id="compose-editor"
         placeholder="Define or paste the content of your docker compose file here"
         onChange={(value) => handleContentChange(DeploymentType.Compose, value)}

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx

@@ -35,7 +35,7 @@ export function KubernetesForm({
       <WebEditorForm
         data-cy="kube-manifest-editor"
         value={values.content}
-        yaml
+        type="yaml"
         id="kube-manifest-editor"
         placeholder="Define or paste the content of your manifest here"
         onChange={(value) =>

app/react/kubernetes/applications/components/EditYamlFormSection.tsx

@@ -36,7 +36,7 @@ export function EditYamlFormSection({
         onChange={(values) => onChange(values)}
         id={formId}
         placeholder="Define or paste the content of your manifest file here"
-        yaml
+        type="yaml"
       />
     </div>
   );

app/react/kubernetes/components/YAMLInspector.tsx

@@ -37,7 +37,7 @@ export function YAMLInspector({
         readonly
         hideTitle
         id={identifier}
-        yaml
+        type="yaml"
         height={expanded ? '800px' : '500px'}
         onChange={() => {}} // all kube yaml inspectors in CE are read only
       />

app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx

@@ -100,7 +100,7 @@ export function InnerForm({
           id="custom-template-creation-editor"
           value={values.FileContent}
           onChange={handleChangeFileContent}
-          yaml
+          type="yaml"
           placeholder={texts.editor.placeholder}
           error={errors.FileContent}
         >

app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx

@@ -92,7 +92,7 @@ export function InnerForm({
         id="edit-custom-template-editor"
         value={gitFileContent || values.FileContent}
         onChange={handleChangeFileContent}
-        yaml
+        type="yaml"
         placeholder={
           gitFileContent
             ? 'Preview of the file from git repository'

app/react/portainer/templates/custom-templates/ListView/StackFromCustomTemplateFormWidget/DeployForm.tsx

@@ -119,7 +119,7 @@ export function DeployForm({
                 }
                 setFieldValue('fileContent', value);
               }}
-              yaml
+              type="yaml"
               error={errors.fileContent}
               placeholder="Define or paste the content of your docker compose file here"
               readonly={isGit}