Adding name form to repository config detail page (#18943)

* Adding repo config name form

* fixing validation logic

* use a toast vs. disabling button when there's an error

* update comment with more context

* cleanup

* remove protocol

* bumping up name limit to 100 to account for recent changes

---------

Co-authored-by: Filip Troníček <[email protected]>

Author: selfcontained

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

@@ -0,0 +1,94 @@
+/**
+ * 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, projectsService } from "../../service/public-api";
+import { PartialProject } from "@gitpod/gitpod-protocol";
+import { getGitpodService } from "../../service/service";
+
+const BASE_KEY = "projects";
+
+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 [BASE_KEY, { orgId, id }];
+};
+
+type ListProjectsQueryArgs = {
+    page: number;
+    pageSize: number;
+};
+
+export const useListProjectsQuery = ({ page, pageSize }: ListProjectsQueryArgs) => {
+    const { data: org } = useCurrentOrg();
+
+    return useQuery(
+        getListProjectsQueryKey(org?.id || "", { page, pageSize }),
+        async () => {
+            if (!org) {
+                throw new Error("No org currently selected");
+            }
+
+            return projectsService.listProjects({ teamId: org.id, pagination: { page, pageSize } });
+        },
+        {
+            enabled: !!org,
+        },
+    );
+};
+
+export const getListProjectsQueryKey = (orgId: string, args?: ListProjectsQueryArgs) => {
+    const key: any[] = [BASE_KEY, "list", { orgId }];
+    if (args) {
+        key.push(args);
+    }
+
+    return key;
+};
+
+export const useUpdateProject = () => {
+    const { data: org } = useCurrentOrg();
+    const client = useQueryClient();
+
+    return useMutation<void, Error, PartialProject>(async ({ id, name }) => {
+        if (!org) {
+            throw new Error("No org currently selected");
+        }
+
+        await getGitpodService().server.updateProjectPartial({ id, name });
+
+        // Invalidate project
+        client.invalidateQueries(getProjectQueryKey(org.id, id));
+        // Invalidate project list queries
+        client.invalidateQueries(getListProjectsQueryKey(org.id));
+    });
+};

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

@@ -4,6 +4,19 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { useMemo } from "react";
+
+// Given a URL string:
+// * Strips protocol
+// * Removes a trailing .git if present
 export const usePrettyRepoURL = (url: string) => {
-    return url.endsWith(".git") ? url.slice(0, -4) : url;
+    return useMemo(() => {
+        let urlString = url;
+        try {
+            const parsedURL = new URL(url);
+            urlString = `${parsedURL.host}${parsedURL.pathname}`;
+        } catch (e) {}
+
+        return urlString.endsWith(".git") ? urlString.slice(0, -4) : urlString;
+    }, [url]);
 };

components/dashboard/src/hooks/use-pretty-repo-url.ts

@@ -7,18 +7,43 @@
 import { FC } from "react";
 import Header from "../../components/Header";
 import { useParams } from "react-router";
+import { useProject } from "../../data/projects/project-queries";
+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/RepositoryDetail.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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-queries";
+import { useToast } from "../../components/toasts/Toasts";
+import { useOnBlurError } from "../../hooks/use-onblur-error";
+
+const MAX_LENGTH = 100;
+
+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 <= MAX_LENGTH);
+
+    const updateName = useCallback(
+        async (e: React.FormEvent) => {
+            e.preventDefault();
+
+            if (!nameError.isValid) {
+                toast("Please correct the errors with the name.");
+                return;
+            }
+
+            updateProject.mutate(
+                {
+                    id: project.id,
+                    name: projectName,
+                },
+                {
+                    onSuccess: () => {
+                        toast(`Configuration name set to "${projectName}".`);
+                    },
+                },
+            );
+        },
+        [nameError.isValid, updateProject, project.id, projectName, toast],
+    );
+
+    return (
+        <form onSubmit={updateName}>
+            <TextInputField
+                hint={`The name can be up to ${MAX_LENGTH} characters long.`}
+                value={projectName}
+                error={nameError.message}
+                onChange={setProjectName}
+                onBlur={nameError.onBlur}
+            />
+
+            <Button
+                className="mt-4"
+                htmlType="submit"
+                disabled={project.name === projectName}
+                loading={updateProject.isLoading}
+            >
+                Update Name
+            </Button>
+        </form>
+    );
+};

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

@@ -6,7 +6,7 @@
 
 import { FC, useCallback, useState } from "react";
 import Header from "../../components/Header";
-import { useListProjectsQuery } from "../../data/projects/list-projects-query";
+import { useListProjectsQuery } from "../../data/projects/project-queries";
 import { Loader2 } from "lucide-react";
 import { useHistory } from "react-router-dom";
 import { Project } from "@gitpod/gitpod-protocol";