trigger screen

ui/src/features/trigger/presentation/trigger_presentation.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Button, Col, Row, Switch, Typography } from "antd";
+import { CodeTriggerForm } from "./components/code_trigger_form";
+import { observer } from "mobx-react-lite";
+import { triggerStore } from "./logic/trigger_store";
+import { FileTriggerForm } from "./components/file_trigger_form";
+import { ReactComponent as DeleteIcon } from "../../../assets/icons/delete.svg";
+
+const { Title } = Typography;
+
+const Header = observer(() => {
+  return (
+    <Row style={{ justifyItems: "center", alignItems: "center" }}>
+      <div style={{ height: "37px" }}>
+        <Switch
+          checked={triggerStore.getTriggerType()}
+          onChange={() => triggerStore.setTriggerType()}
+        />
+      </div>
+      <Title level={2}>
+        Trigger editor: {triggerStore.getTriggerDescription()}
+      </Title>
+      <div style={{ width: "10px" }}></div>
+      <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
+    </Row>
+  );
+});
+
+const Bottom = observer(() => {
+  return (
+    <Col>
+      {triggerStore.triggers.map((el) => {
+        return (
+          <Row
+            style={{
+              justifyContent: "center",
+            }}
+          >
+            {el.value}
+            <DeleteIcon onClick={() => triggerStore.deleteItem(el.id)} />
+          </Row>
+        );
+      })}
+    </Col>
+  );
+});
+
+export const TriggerScreen: React.FunctionComponent = observer(() => {
+  return (
+    <>
+      <main className="test">
+        <Header />,
+        {triggerStore.getTriggerType() ? (
+          <>
+            <FileTriggerForm />
+          </>
+        ) : (
+          <>
+            <CodeTriggerForm />
+          </>
+        )}
+        <Bottom />
+      </main>
+    </>
+  );
+});