split Settings into small components

webui/src/Containers/Home/MainContent/MainContent.tsx

@@ -43,7 +43,7 @@ const MainContent: FC<MainContentProps> = (props) => {
               <Avatar src={profile.picture!} />
               <div style={{ marginLeft: 16 }}>
                 <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 3 }}>
-                  {profile.name}
+                  {profile.name || profile.github}
                 </div>
                 <a
                   href={`https://github.com/${profile.github}`}

webui/src/Containers/Project/MainContent/Settings/DangerZone/DangerZone.tsx

@@ -0,0 +1,70 @@
+import { FC } from "react";
+import { Title, Text, Label, Section, Row, DeleteButton } from "../styles";
+
+export type DangerZoneProps = {
+  displayRepositorySection: boolean;
+  isPublic: boolean;
+  onChangeVisibility: () => void;
+  onArchive: () => void;
+  onDelete: () => void;
+};
+
+const DangerZone: FC<DangerZoneProps> = (props) => {
+  const { displayRepositorySection, isPublic } = props;
+  return (
+    <>
+      <Section style={{ marginTop: 42 }}>
+        <Title>Danger Zone</Title>
+        <div
+          style={{
+            marginTop: 20,
+          }}
+        >
+          {displayRepositorySection && (
+            <Section>
+              <Row>
+                <div style={{ flex: 1 }}>
+                  <Label style={{ marginBottom: 4 }}>
+                    Change project visibility
+                  </Label>
+                  <Text>
+                    This project is currently {isPublic ? "public" : "private"}
+                  </Text>
+                </div>
+                <DeleteButton>
+                  {isPublic ? "Make Pipeline Private" : "Make Pipeline Public"}
+                </DeleteButton>
+              </Row>
+            </Section>
+          )}
+          <Section>
+            <Row>
+              <div style={{ flex: 1 }}>
+                <Label style={{ marginBottom: 4 }}>Archive this project</Label>
+                <Text>
+                  Mark this project as archived and read-only. Runs, run logs,
+                  and artifacts are preserved.
+                </Text>
+              </div>
+              <DeleteButton>Archive Pipeline</DeleteButton>
+            </Row>
+          </Section>
+          <Section>
+            <Row>
+              <div style={{ flex: 1 }}>
+                <Label style={{ marginBottom: 4 }}>Delete this project</Label>
+                <Text>
+                  Deleting this pipeline will also delete all associated runs,
+                  run logs, artifacts, and history.
+                </Text>
+              </div>
+              <DeleteButton>Delete Pipeline</DeleteButton>
+            </Row>
+          </Section>
+        </div>
+      </Section>
+    </>
+  );
+};
+
+export default DangerZone;

webui/src/Containers/Project/MainContent/Settings/DangerZone/DangerZoneWithData.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import DangerZone from "./DangerZone";
+import { useRecoilState } from "recoil";
+import { ProjectState } from "../../../ProjectState";
+
+const DangerZoneWithData: FC = () => {
+  const [{ project }] = useRecoilState(ProjectState);
+  const onChangeVisibility = () => {};
+
+  const onArchive = () => {};
+
+  const onDelete = () => {};
+
+  return (
+    <DangerZone
+      displayRepositorySection={import.meta.env.VITE_APP_API_URL?.includes(
+        "api.fluentci.io"
+      )}
+      isPublic={project?.isPrivate !== true}
+      onChangeVisibility={onChangeVisibility}
+      onArchive={onArchive}
+      onDelete={onDelete}
+    />
+  );
+};
+
+export default DangerZoneWithData;

webui/src/Containers/Project/MainContent/Settings/DangerZone/index.tsx

@@ -0,0 +1,3 @@
+import DangerZone from "./DangerZoneWithData";
+
+export default DangerZone;

webui/src/Containers/Project/MainContent/Settings/General/General.tsx

@@ -0,0 +1,97 @@
+import { BaseSyntheticEvent, FC } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import styles, {
+  Cluster,
+  ClusterStart,
+  Label,
+  SaveButton,
+  Section,
+  Text,
+  Title,
+} from "../styles";
+import { Spinner } from "baseui/spinner";
+import { Input } from "baseui/input";
+import { Account } from "../../../../../Hooks/GraphQL";
+
+export type GeneralProps = {
+  loading: boolean;
+  me?: Account | null;
+  handleSubmit: (e: BaseSyntheticEvent) => void;
+};
+
+const General: FC<GeneralProps> = (props) => {
+  const { handleSubmit, me, loading } = props;
+  const { control, watch } = useFormContext();
+  const name = watch("name");
+  return (
+    <>
+      <Section>
+        <Title>General</Title>
+        <Text>
+          Here you can change the name and description of your project
+          (pipeline), or even decide to share it with the rest of the world.
+        </Text>
+      </Section>
+      {!!me && (
+        <Section>
+          <Label>Cluster size</Label>
+          <Cluster>
+            <ClusterStart>FL-10</ClusterStart>
+            <div style={{ padding: 6, textAlign: "center" }}>
+              6 vCPU &middot; 16GB memory
+            </div>
+          </Cluster>
+        </Section>
+      )}
+      <Section>
+        <Label>
+          Name{" "}
+          <span style={{ color: "#ffffff71", fontWeight: 500 }}>
+            {" "}
+            - Required
+          </span>
+        </Label>
+        <Controller
+          name="name"
+          control={control}
+          render={({ field }) => (
+            <Input
+              {...field}
+              placeholder="Example: Deploy to production"
+              overrides={styles.Input}
+              error={!name?.trim().length}
+            />
+          )}
+        />
+      </Section>
+      <Section>
+        <Label>Description</Label>
+        <Controller
+          name="description"
+          control={control}
+          render={({ field }) => <Input {...field} overrides={styles.Input} />}
+        />
+      </Section>
+      <Section>
+        <Label>Tags</Label>
+        <Controller
+          name="tags"
+          control={control}
+          render={({ field }) => <Input {...field} overrides={styles.Input} />}
+        />
+        <Text style={{ marginTop: 5 }}>
+          Short words to categorize this pipeline. Separate multiple tags with a
+          comma
+        </Text>
+      </Section>
+      {!loading && <SaveButton onClick={handleSubmit}>Save</SaveButton>}
+      {loading && (
+        <SaveButton>
+          <Spinner $size={"15px"} $borderWidth={"3px"} style={styles.Spinner} />
+        </SaveButton>
+      )}
+    </>
+  );
+};
+
+export default General;

webui/src/Containers/Project/MainContent/Settings/General/GeneralWithData.tsx

@@ -0,0 +1,56 @@
+import { FC, useState } from "react";
+import General from "./General";
+import _ from "lodash";
+import { useUpdateProjectMutation } from "../../../../../Hooks/GraphQL";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { AuthState } from "../../../../Auth/AuthState";
+import { ProjectState } from "../../../ProjectState";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { schema } from "../schema";
+
+const GeneralWithData: FC = () => {
+  const [updateProject] = useUpdateProjectMutation();
+  const [loading, setLoading] = useState<boolean>(false);
+  const me = useRecoilValue(AuthState);
+  const [{ project }, setProject] = useRecoilState(ProjectState);
+  const methods = useForm({
+    mode: "onChange",
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: project?.displayName || project?.name,
+      description: project?.description,
+      tags: _.get(project, "tags", [])?.join(", "),
+    },
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onSubmit: any = (data: any) => {
+    setLoading(true);
+    updateProject({
+      variables: {
+        id: project!.id,
+        name: data.name,
+        description: data.description,
+        tags: data.tags,
+      },
+    })
+      .then(({ data }) => {
+        setProject({ project: data?.updateProject });
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <General
+        handleSubmit={methods.handleSubmit(onSubmit)}
+        me={me}
+        loading={loading}
+      />
+    </FormProvider>
+  );
+};
+
+export default GeneralWithData;

webui/src/Containers/Project/MainContent/Settings/General/index.tsx

@@ -0,0 +1,3 @@
+import General from "./GeneralWithData";
+
+export default General;

webui/src/Containers/Project/MainContent/Settings/Repository/Repository.tsx

@@ -0,0 +1,124 @@
+import { FC } from "react";
+import styles, {
+  Label,
+  Row,
+  Section,
+  UnlinkButton,
+  Text,
+  LinkGithubRepo,
+} from "../styles";
+import { Github } from "@styled-icons/bootstrap";
+import { Spinner } from "baseui/spinner";
+import {
+  Organization,
+  Repository as RepositoryType,
+} from "../../../../../Hooks/GraphQL";
+import { Link } from "react-router-dom";
+
+export type RepositoryProps = {
+  linkedRepository?: RepositoryType | null;
+  onUnlinkRepository: (id: string) => Promise<void>;
+  loadingLinkedRepository: boolean;
+  projectId?: string;
+  orgs: Organization[];
+  displayRepositorySection: boolean;
+  loadingUnlink: boolean;
+};
+
+const Repository: FC<RepositoryProps> = (props) => {
+  const {
+    linkedRepository,
+    loadingLinkedRepository,
+    projectId,
+    orgs,
+    onUnlinkRepository,
+    loadingUnlink,
+  } = props;
+  return (
+    <>
+      <Section style={{ marginTop: 42 }}>
+        <Label>Repository</Label>
+        {!loadingLinkedRepository && linkedRepository && (
+          <>
+            <Row style={{ padding: 10 }}>
+              <Github size={20} color="#fff" />
+              <a
+                href={linkedRepository.repoUrl}
+                style={{ color: "#fff", marginLeft: 10, flex: 1 }}
+                target="_blank"
+              >
+                {linkedRepository.repoUrl}
+              </a>
+              <UnlinkButton
+                onClick={() => onUnlinkRepository(linkedRepository.name)}
+              >
+                {!loadingUnlink && <div>Unlink repository</div>}
+                {loadingUnlink && (
+                  <Spinner
+                    $size={"15px"}
+                    $borderWidth={"3px"}
+                    style={styles.Spinner}
+                  />
+                )}
+              </UnlinkButton>
+            </Row>
+          </>
+        )}
+        {!loadingLinkedRepository && !linkedRepository && (
+          <>
+            <Text style={{ marginTop: 10 }}>
+              Link your GitHub repository to start running pipelines on every
+              push to your repository.
+            </Text>
+            {orgs.length > 0 && (
+              <Link
+                to={`/link-project/${projectId}`}
+                style={{
+                  color: "#fff",
+                }}
+              >
+                <LinkGithubRepo style={{ marginTop: 25 }}>
+                  <div style={{ marginTop: 10 }}>
+                    <Github size={22} color={"#fff"} />
+                  </div>
+                  <div
+                    style={{
+                      marginLeft: 15,
+                      marginTop: 13,
+                      fontSize: 15,
+                    }}
+                  >
+                    Link your GitHub Repository
+                  </div>
+                </LinkGithubRepo>
+              </Link>
+            )}
+            {orgs.length === 0 && (
+              <a
+                href="https://github.com/apps/fluentci-io/installations/new"
+                style={{ color: "#fff" }}
+              >
+                <LinkGithubRepo style={{ marginTop: 25 }}>
+                  <div style={{ marginTop: 10 }}>
+                    <Github size={22} color={"#fff"} />
+                  </div>
+                  <div
+                    style={{
+                      marginLeft: 15,
+                      marginTop: 13,
+                      fontSize: 15,
+                    }}
+                  >
+                    Link your GitHub Repository
+                  </div>
+                </LinkGithubRepo>
+              </a>
+            )}
+          </>
+        )}
+      </Section>
+    </>
+  );
+};
+
+export default Repository;