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

fix [EE-7128]
2024-05-21 13:13:36 +03:00 · 2024-05-21 13:13:36 +03:00 · 9cef185db9
parent b40d22dc74
commit 9cef185db9
16 changed files with 59 additions and 68 deletions
--- a/app/portainer/components/code-editor/code-editor.controller.js
+++ b/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;
 }
--- a/app/portainer/components/code-editor/code-editor.html
+++ b/app/portainer/components/code-editor/code-editor.html
@ -1,9 +1,7 @@
 <react-code-editor
  id="$ctrl.identifier"
  placeholder="$ctrl.placeholder"
-  yaml="$ctrl.yml"
-  docker-file="$ctrl.dockerFile"
-  shell="$ctrl.shell"
+  type="$ctrl.type"
  readonly="$ctrl.readOnly"
  on-change="($ctrl.handleChange)"
  value="$ctrl.value"
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@ -223,9 +223,7 @@ export const ngModule = angular
    r2a(CodeEditor, [
      'id',
      'placeholder',
-      'yaml',
-      'dockerFile',
-      'shell',
+      'type',
      'readonly',
      'onChange',
      'value',
--- a/app/react/components/CodeEditor.tsx
+++ b/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) {
--- a/app/react/components/WebEditorForm.tsx
+++ b/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 {
-  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>
--- a/app/react/edge/edge-jobs/CreateView/CreateEdgeJobForm.tsx
+++ b/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}
        />
      )}
--- a/app/react/edge/edge-jobs/ItemView/UpdateEdgeJobForm/UpdateEdgeJobForm.tsx
+++ b/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}
      />

--- a/app/react/edge/edge-stacks/CreateView/DockerContentField.tsx
+++ b/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}
--- a/app/react/edge/edge-stacks/CreateView/KubeManifestForm.tsx
+++ b/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"
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/ComposeForm.tsx
+++ b/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)}
--- a/app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/KubernetesForm.tsx
+++ b/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) =>
--- a/app/react/kubernetes/applications/components/EditYamlFormSection.tsx
+++ b/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>
  );
--- a/app/react/kubernetes/components/YAMLInspector.tsx
+++ b/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
      />
--- a/app/react/portainer/templates/custom-templates/CreateView/InnerForm.tsx
+++ b/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}
        >
--- a/app/react/portainer/templates/custom-templates/EditView/InnerForm.tsx
+++ b/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'
--- a/app/react/portainer/templates/custom-templates/ListView/StackFromCustomTemplateFormWidget/DeployForm.tsx
+++ b/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}