process

ui/src/features/all_projects/presentation/all_projects_screen.tsx

@@ -4,13 +4,18 @@ import { ProjectRepository } from "../data/project_repository";
 import { LoadPage } from "../../../core/ui/pages/load_page";
 import { observer } from "mobx-react-lite";
 import { SelectProjectScreenPath } from "../../select_project/presentation/select_project";
+import { useNavigate } from "react-router-dom";
+import { Button } from "antd";
+import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
 
 export const AllProjectScreenPath = "/";
- 
 export const AllProjectScreen: React.FunctionComponent = observer(() => {
-  const [allProjectStore] = React.useState(
-    () => new AllProjectStore(new ProjectRepository())
-  );
+  const [allProjectStore] = React.useState(() => new AllProjectStore(new ProjectRepository()));
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    allProjectStore.init();
+  }, [allProjectStore]);
 
   return (
     <>
@@ -23,8 +28,33 @@ export const AllProjectScreen: React.FunctionComponent = observer(() => {
         isLoading={allProjectStore.isLoading}
         children={
           <div>
+            <h1>Projects</h1>
+            <h5 style={{ backgroundColor: "ButtonShadow" }}>
+              <Button
+                onClick={() => {
+                  navigate(PipelineInstanceScreenPath + allProjectStore.activePipeline?.projectUUID ?? "");
+                }}
+              >
+                Project main panel
+              </Button>
+              {allProjectStore.activePipeline?.projectUUID ?? "loading"}
+            </h5>
             {allProjectStore.projectsModels?.map((el) => {
-              return <div>{el.description}</div>;
+              return (
+                <div style={{ margin: "10px", backgroundColor: "Highlight" }}>
+                  <Button
+                    onClick={() => {
+                      allProjectStore.setPipelineActive(el._id ?? "").then(() => {
+                        allProjectStore.init();
+                        navigate(PipelineInstanceScreenPath + el._id ?? "");
+                      });
+                    }}
+                  >
+                    set active project
+                  </Button>
+                  <div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
+                </div>
+              );
             })}
           </div>
         }