Merge pull request #5 from fluentci-io/feat/project-settings

feat: add project settings (edit name, description, tags ...)
fluentci-io · Jun 29, 2024 · 0ed77a1 · 0ed77a1
2 parents 0438269 + 0c836b8
commit 0ed77a1
Show file tree

Hide file tree

Showing 18 changed files with 655 additions and 97 deletions.
diff --git a/webui/graphql.schema.json b/webui/graphql.schema.json
@@ -958,6 +958,71 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "updateProject",
+            "description": null,
+            "args": [
+              {
+                "name": "description",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "id",
+                "description": null,
+                "type": {
+                  "kind": "NON_NULL",
+                  "name": null,
+                  "ofType": {
+                    "kind": "SCALAR",
+                    "name": "ID",
+                    "ofType": null
+                  }
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "name",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              },
+              {
+                "name": "tags",
+                "description": null,
+                "type": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                },
+                "defaultValue": null,
+                "isDeprecated": false,
+                "deprecationReason": null
+              }
+            ],
+            "type": {
+              "kind": "OBJECT",
+              "name": "Project",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,
@@ -1344,6 +1409,30 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "description",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
+          {
+            "name": "displayName",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "id",
             "description": null,
@@ -1459,6 +1548,26 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "tags",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "LIST",
+              "name": null,
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": {
+                  "kind": "SCALAR",
+                  "name": "String",
+                  "ofType": null
+                }
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

diff --git a/webui/src/Components/Header/Header.tsx b/webui/src/Components/Header/Header.tsx
@@ -1,10 +1,18 @@
 import { FC } from "react";
+import { Github } from "@styled-icons/bootstrap";
 import { EllipsisVertical } from "@styled-icons/fa-solid";
 import { StatefulPopover } from "baseui/popover";
 import { StatefulMenu } from "baseui/menu";
 import { Breadcrumbs } from "baseui/breadcrumbs";
-import styles, { Link, Container, RunButton, PopoverButton } from "./styles";
+import styles, {
+  Link,
+  Container,
+  RunButton,
+  PopoverButton,
+  GithubLink,
+} from "./styles";
 import { Spinner } from "baseui/spinner";
+import { Project, Repository } from "../../Hooks/GraphQL";
 
 export type HeaderProps = {
   id: string;
@@ -13,40 +21,82 @@ export type HeaderProps = {
   breadcrumbs?: { title: string; link?: string }[];
   showRunButton?: boolean;
   loading?: boolean;
+  linkedRepository?: Repository | null;
+  project?: Project | null;
 };
 
 const Header: FC<HeaderProps> = (props) => {
-  const { id, breadcrumbs, onRun, menu, showRunButton } = props;
+  const { id, breadcrumbs, onRun, menu, showRunButton, linkedRepository } =
+    props;
   return (
     <Container>
-      <Breadcrumbs
-        overrides={{
-          Root: {
-            style: {
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-              flex: 1,
-            },
-          },
-          ListItem: {
-            style: ({ $theme }) => ({
-              fontFamily: $theme.primaryFontFamily,
-            }),
-          },
+      <div
+        style={{
+          marginRight: 15,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <img
+          src={props.project?.picture}
+          style={{ maxHeight: 34, maxWidth: 34 }}
+        />
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
         }}
       >
-        {breadcrumbs?.map(({ title, link }, index) => {
-          if (link) {
-            return (
-              <Link key={index} to={link} style={{ color: "#ffffffb0" }}>
-                {title}
-              </Link>
-            );
-          }
-          return <span key={index}>{title}</span>;
-        })}
-      </Breadcrumbs>
+        <Breadcrumbs
+          overrides={{
+            Root: {
+              style: {
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                flex: 1,
+              },
+            },
+            ListItem: {
+              style: ({ $theme }) => ({
+                fontFamily: $theme.primaryFontFamily,
+              }),
+            },
+          }}
+        >
+          {breadcrumbs?.map(({ title, link }, index) => {
+            if (link) {
+              return (
+                <Link key={index} to={link} style={{ color: "#ffffffb0" }}>
+                  {title}
+                </Link>
+              );
+            }
+            return <span key={index}>{title}</span>;
+          })}
+        </Breadcrumbs>
+        <p
+          style={{
+            fontSize: 14,
+            margin: 0,
+            marginTop: 3,
+            color: "rgba(255, 255, 255, 0.75)",
+          }}
+        >
+          {props.project?.description}
+        </p>
+      </div>
+      {linkedRepository && (
+        <div style={{ display: "flex", alignItems: "center", marginRight: 20 }}>
+          <GithubLink href={linkedRepository.repoUrl} target="_blank">
+            <Github size={20} />
+          </GithubLink>
+        </div>
+      )}
       {!!menu?.length && (
         <StatefulPopover
           placement="bottomRight"

diff --git a/webui/src/Components/Header/HeaderWithData.tsx b/webui/src/Components/Header/HeaderWithData.tsx
@@ -12,9 +12,10 @@ import {
   useGetRunLazyQuery,
   useRunPipelineMutation,
 } from "../../Hooks/GraphQL";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { ComposerState } from "../../Containers/Project/MainContent/Composer/ComposerState";
 import { AuthState } from "../../Containers/Auth/AuthState";
+import { ProjectState } from "../../Containers/Project/ProjectState";
 
 export type HeaderWithDataProps = {
   breadcrumbs?: { title: string; link?: string }[];
@@ -26,7 +27,7 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { id } = useParams();
-  const [project, setProject] = useState<Project | null | undefined>(null);
+  const [{ project }, setProjectState] = useRecoilState(ProjectState);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [actions, setActions] = useState<any[]>([]);
   const [run, setRun] = useState<Run | null | undefined>(null);
@@ -45,7 +46,7 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
   const [getActions] = useGetActionsLazyQuery();
   const { data } = useGetActionsQuery({
     variables: {
-      projectId: project?.id || "",
+      projectId: id!,
     },
     fetchPolicy: "cache-and-network",
   });
@@ -55,6 +56,9 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
   const [getLinkedRepository] = useGetLinkedRepositoryLazyQuery();
   const [loading, setLoading] = useState(false);
 
+  const setProject = (value?: Project | null) =>
+    setProjectState({ project: value });
+
   useEffect(() => {
     if (pathname.startsWith("/run")) {
       getRun().then(({ data }) => {
@@ -86,16 +90,16 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
   }, [pathname]);
 
   useEffect(() => {
-    if (!me || !project) {
+    if (!me || !id) {
       return;
     }
     getLinkedRepository({
       variables: {
-        projectId: project.id,
+        projectId: pathname.startsWith("/run") ? project!.id : id,
       },
-      fetchPolicy: "cache-and-network",
+      fetchPolicy: "network-only",
     }).then((res) => setLinkedRepository(res.data?.linkedRepository));
-  }, [me, getLinkedRepository, project]);
+  }, [me, getLinkedRepository, id, project, pathname]);
 
   useEffect(() => {
     if (!data) {
@@ -124,7 +128,7 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
       link: "/",
     },
     {
-      title: project?.name || "",
+      title: project?.displayName || project?.name || "",
       link: run && project?.id ? `/project/${project.id}` : undefined,
     },
   ];
@@ -142,7 +146,7 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
     setTimeout(() => {
       getActions({
         variables: {
-          projectId: project.id,
+          projectId: pathname.startsWith("/run") ? project!.id : id!,
         },
         fetchPolicy: "cache-and-network",
       }).then(({ data }) => {
@@ -161,11 +165,14 @@ const HeaderWithData: FC<HeaderWithDataProps> = () => {
       showRunButton={
         !!project &&
         !pathname.startsWith("/link-project") &&
-        (!!actions?.filter((x) => x.enabled).length ||
+        ((project?.path !== "empty" &&
+          !!actions?.filter((x) => x.enabled).length) ||
           (project?.path !== "empty" && !linkedRepository) ||
           (!!linkedRepository && !!actions?.filter((x) => x.enabled).length))
       }
       loading={loading}
+      linkedRepository={linkedRepository}
+      project={project}
     />
   );
 };