webstudio/ui/src/features/create_pipeline/presentation/create_pipeline_screen.tsx

import * as React from "react";
import { Row, Button } from "antd";
import { LoadPage } from "../../../core/ui/pages/load_page";

import { observer } from "mobx-react-lite";
import { Icon, List } from "../../../core/ui/list/list";
import { CreateTriggerScreenPath } from "../../create_trigger/presentation/create_trigger_screen";
import { CreateProcessScreenPath } from "../../create_process/presentation/create_process_screen";
import { CreatePipelineStore } from "./create_pipeline_store";
import { CreatePipelineRepository } from "../data/create_pipeline_repository";

export const CreatePipelineScreenPath = "/create_pipeline";

export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
  const [createPipelineStore] = React.useState(() => new CreatePipelineStore(new CreatePipelineRepository()));

  React.useEffect(() => {}, [createPipelineStore]);
  return (
    <>
      <LoadPage
        largeText={"Create pipeline"}
        isError={createPipelineStore.isError}
        isLoading={createPipelineStore.isLoading}
        children={
          <>
            <Row>
              <List
                headers={"process"}
                link={{ path: CreateProcessScreenPath, text: "create process" }}
                values={createPipelineStore.processModels.map((el) => {
                  return { text: el.description, id: el._id };
                })}
                onClick={(e) => createPipelineStore.addProcess(e.text, e.id!)}
                icon={Icon.add}
              />
              <div style={{ flexGrow: "1" }}>
                <Button onClick={() => createPipelineStore.createPipeline()}>Save result</Button>
                <List
                  headers="new pipeline"
                  values={createPipelineStore.pipelineViewModels}
                  icon={Icon.delete}
                  onClick={(_e, index) => {
                    createPipelineStore.filterPipelineViewModel(index);
                  }}
                />
              </div>

              <List
                headers="triggers"
                link={{ path: CreateTriggerScreenPath, text: "create trigger" }}
                values={createPipelineStore.triggersModels.map((el) => {
                  return { text: el.description, id: el._id };
                })}
                onClick={(e) => createPipelineStore.addTrigger(e.text, e.id!)}
                icon={Icon.add}
              />
            </Row>
          </>
        }
      />
    </>
  );
});