mvp progress

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Row, Input, Button } from "antd";
+import { LoadPage } from "../../../core/ui/pages/load_page";
+import { createPipelineStore } from "./create_pipeline_store";
+import { observer } from "mobx-react-lite";
+import { List } from "../../../core/ui/list/list";
+
+export const CreatePipelineScreenPath = "/create_pipeline";
+
+export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
+  return (
+    <>
+      <LoadPage
+        largeText={"Create pipeline"}
+        isError={createPipelineStore.isError}
+        isLoading={createPipelineStore.isLoading}
+        children={
+          <>
+            <Row>
+              <List
+                headers={"process"}
+                values={createPipelineStore.processModels.map((el) => {
+                  return { text: el.description };
+                })}
+                onClick={(e) => createPipelineStore.addProcess(e)}
+              />
+              <div style={{ flexGrow: "1" }}>
+                <Input style={{ width: "300px" }} placeholder="description" />
+                <Button onClick={() => createPipelineStore.createPipeline()}>
+                  Save result
+                </Button>
+                <List
+                  headers="new pipeline"
+                  values={createPipelineStore.pipelineViewModel }
+                />
+              </div>
+
+              <List
+                headers="triggers"
+                values={createPipelineStore.triggersModels.map((el) => {
+                  return { text: el.description };
+                })}
+                onClick={(e) => createPipelineStore.addTrigger(e)}
+              />
+            </Row>
+          </>
+        }
+      />
+    </>
+  );
+});