Adding repo config name form

Author: selfcontained

components/dashboard/src/data/projects/project-query.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { Project } from "@gitpod/gitpod-protocol/lib/teams-projects-protocol";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { listAllProjects } from "../../service/public-api";
+import { PartialProject } from "@gitpod/gitpod-protocol";
+import { getGitpodService } from "../../service/service";
+
+type UseProjectArgs = {
+    id: string;
+};
+export const useProject = ({ id }: UseProjectArgs) => {
+    const { data: org } = useCurrentOrg();
+
+    return useQuery<Project | null, Error>(
+        getProjectQueryKey(org?.id || "", id),
+        async () => {
+            if (!org) {
+                throw new Error("No current org");
+            }
+
+            // TODO: This is temporary until we create a project by id endpoint
+            // Waiting to tackle that once we have the new grpc setup for server
+            const projects = await listAllProjects({ orgId: org.id });
+            const project = projects.find((p) => p.id === id);
+
+            return project || null;
+        },
+        {
+            enabled: !!org,
+        },
+    );
+};
+
+const getProjectQueryKey = (orgId: string, id: string) => {
+    return ["project", { orgId, id }];
+};
+
+export const useUpdateProject = () => {
+    const { data: org } = useCurrentOrg();
+    const client = useQueryClient();
+
+    return useMutation<void, Error, PartialProject>(async ({ id, name }) => {
+        await getGitpodService().server.updateProjectPartial({ id, name });
+
+        // Invalidate project
+        await client.invalidateQueries(getProjectQueryKey(org?.id || "", id));
+
+        // TODO: Invalidate new list projects query
+    });
+};

components/dashboard/src/repositories/detail/RepositoryDetail.tsx

@@ -7,18 +7,43 @@
 import { FC } from "react";
 import Header from "../../components/Header";
 import { useParams } from "react-router";
+import { useProject } from "../../data/projects/project-query";
+import { Button } from "../../components/Button";
+import { RepositoryNameForm } from "./RepositoryName";
+import { Loader2 } from "lucide-react";
+import Alert from "../../components/Alert";
 
 type PageRouteParams = {
     id: string;
 };
 const RepositoryDetailPage: FC = () => {
     const { id } = useParams<PageRouteParams>();
+    const { data, error, isLoading, refetch } = useProject({ id });
 
     return (
         <>
             <Header title="Repository Detail" subtitle="" />
             <div className="app-container">
-                <span>id: {id}</span>
+                {isLoading && <Loader2 className="animate-spin" />}
+                {error && (
+                    <div className="gap-4">
+                        <Alert type="error">
+                            <span>Failed to load repository configuration</span>
+                            <pre>{error.message}</pre>
+                        </Alert>
+
+                        <Button type="danger" onClick={refetch}>
+                            Retry
+                        </Button>
+                    </div>
+                )}
+                {!isLoading &&
+                    (!data ? (
+                        // TODO: add a better not-found UI w/ link back to repositories
+                        <div>Sorry, we couldn't find that repository configuration.</div>
+                    ) : (
+                        <RepositoryNameForm project={data} />
+                    ))}
             </div>
         </>
     );

components/dashboard/src/repositories/detail/RepositoryName.tsx

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+// TODO: fix mismatched project types when we build repo configuration apis
+import { Project } from "@gitpod/gitpod-protocol/lib/teams-projects-protocol";
+import { Button } from "../../components/Button";
+import { TextInputField } from "../../components/forms/TextInputField";
+import { FC, useCallback, useState } from "react";
+import { useUpdateProject } from "../../data/projects/project-query";
+import { useToast } from "../../components/toasts/Toasts";
+import { useOnBlurError } from "../../hooks/use-onblur-error";
+
+type Props = {
+    project: Project;
+};
+
+export const RepositoryNameForm: FC<Props> = ({ project }) => {
+    const { toast } = useToast();
+    const updateProject = useUpdateProject();
+    const [projectName, setProjectName] = useState(project.name);
+
+    const nameError = useOnBlurError("Sorry, this name is too long.", projectName.length > 32);
+
+    const updateName = useCallback(
+        async (e: React.FormEvent) => {
+            e.preventDefault();
+
+            updateProject.mutate(
+                {
+                    id: project.id,
+                    name: projectName,
+                },
+                {
+                    onSuccess: () => {
+                        toast(`Configuration name set to "${projectName}".`);
+                    },
+                },
+            );
+        },
+        [updateProject, project.id, projectName, toast],
+    );
+
+    return (
+        <form onSubmit={updateName}>
+            <TextInputField
+                hint="The name can be up to 32 characters long."
+                value={projectName}
+                error={nameError.message}
+                onChange={setProjectName}
+                onBlur={nameError.onBlur}
+            />
+
+            {/* Don't disable button, just handle error and message */}
+            <Button className="mt-4" htmlType="submit" disabled={project.name === projectName || !nameError.isValid}>
+                Update Name
+            </Button>
+        </form>
+    );
+};