frontend/components/workflow/Create.tsx

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import React, { FC, useRef, useState } from 'react';

import {
  Drawer,
  DrawerContent,
  DrawerOverlay,
  DrawerHeader,
  DrawerBody,
  DrawerFooter,
  DrawerCloseButton,
  Button,
  useToast,
  Spinner,
} from '@chakra-ui/react';
import axios from 'axios';

import Editor, { Monaco } from '@monaco-editor/react';

const ApiRoot = process.env.NEXT_PUBLIC_WORKFLOW_API_ROOT;

const Create: FC<{
  visible: boolean;
  onClose: () => void;
  onSucceed: () => void;
}> = ({ visible = false, onClose = () => {}, onSucceed = () => {} }) => {
  const toast = useToast();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const editorRef = useRef<Monaco | null>(null);
  const defaultEditorValue = '# Your code goes here';

  const onSubmit = () => {
    setIsSubmitting(true);

    try {
      const value = editorRef.current.getValue();
      if (value === defaultEditorValue) {
        toast({
          title: 'Invalid definition',
          description: 'Please input your workflow definition properly',
          status: 'warning',
          position: 'top-right',
        });
        setIsSubmitting(false);
        return;
      }
      axios
        .post(
          `${ApiRoot}/workflow`,
          { workflow: { definition: value } },
          {
            headers: {
              'Content-Type': 'application/json',
            },
          },
        )
        .then(() => {
          toast({
            title: 'Succeeded',
            status: 'success',
            position: 'top-right',
          });
          onSucceed();
          setIsSubmitting(false);
        })
        .catch((error) => {
          toast({
            title: 'Failed',
            description: error.response.data,
            status: 'error',
            position: 'top-right',
          });
          setIsSubmitting(false);
        });
    } catch (error) {
      setIsSubmitting(false);
    }
  };

  const handleEditorDidMount = (editor: Monaco) => {
    editorRef.current = editor;
  };

  return (
    <Drawer
      isOpen={visible}
      size="xl"
      placement="right"
      closeOnEsc={false}
      onClose={() => onClose()}
    >
      <DrawerOverlay />
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>Create New Workflow</DrawerHeader>
        <DrawerBody>
          <Editor
            height="1000px"
            defaultLanguage="yaml"
            defaultValue={defaultEditorValue}
            onMount={handleEditorDidMount}
            theme="vs-dark"
          />
        </DrawerBody>
        <DrawerFooter justifyContent="flex-start">
          <Button colorScheme="blue" mr={3} onClick={onSubmit}>
            {isSubmitting ? <Spinner colorScheme="white" size="sm" /> : 'Submit'}
          </Button>
          <Button variant="ghost" colorScheme="blue" onClick={onClose}>
            Cancel
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};

export default React.memo(Create);