use getConfiguration in dashboard

Author: selfcontained

components/dashboard/src/data/configurations/configuration-queries.ts

@@ -7,16 +7,17 @@
 import { useQuery } from "@tanstack/react-query";
 import { useCurrentOrg } from "../organizations/orgs-query";
 import { configurationClient } from "../../service/public-api";
+import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 
 const BASE_KEY = "configurations";
 
-type ListConfigurationsQueryArgs = {
+type ListConfigurationsArgs = {
     searchTerm?: string;
     page: number;
     pageSize: number;
 };
 
-export const useListConfigurationsQuery = ({ searchTerm = "", page, pageSize }: ListConfigurationsQueryArgs) => {
+export const useListConfigurations = ({ searchTerm = "", page, pageSize }: ListConfigurationsArgs) => {
     const { data: org } = useCurrentOrg();
 
     return useQuery(
@@ -26,25 +27,41 @@ export const useListConfigurationsQuery = ({ searchTerm = "", page, pageSize }:
                 throw new Error("No org currently selected");
             }
 
-            const response = await configurationClient.listConfigurations({
+            const { configurations, pagination } = await configurationClient.listConfigurations({
                 organizationId: org.id,
                 searchTerm,
                 pagination: { page, pageSize },
             });
 
-            return response;
+            return { configurations, pagination };
         },
         {
             enabled: !!org,
         },
     );
 };
 
-export const getListConfigurationsQueryKey = (orgId: string, args?: ListConfigurationsQueryArgs) => {
+export const getListConfigurationsQueryKey = (orgId: string, args?: ListConfigurationsArgs) => {
     const key: any[] = [BASE_KEY, "list", { orgId }];
     if (args) {
         key.push(args);
     }
 
     return key;
 };
+
+export const useConfiguration = (configurationId: string) => {
+    return useQuery<Configuration | undefined, Error>(getConfigurationQueryKey(configurationId), async () => {
+        const { configuration } = await configurationClient.getConfiguration({
+            configurationId,
+        });
+
+        return configuration;
+    });
+};
+
+export const getConfigurationQueryKey = (configurationId: string) => {
+    const key: any[] = [BASE_KEY, { configurationId }];
+
+    return key;
+};

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

@@ -7,18 +7,18 @@
 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";
+import { useConfiguration } from "../../data/configurations/configuration-queries";
 
 type PageRouteParams = {
     id: string;
 };
 const RepositoryDetailPage: FC = () => {
     const { id } = useParams<PageRouteParams>();
-    const { data, error, isLoading, refetch } = useProject({ id });
+    const { data, error, isLoading, refetch } = useConfiguration(id);
 
     return (
         <>
@@ -42,7 +42,7 @@ const RepositoryDetailPage: FC = () => {
                         // 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} />
+                        <RepositoryNameForm configuration={data} />
                     ))}
             </div>
         </>

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

@@ -4,25 +4,24 @@
  * 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";
+import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 
 const MAX_LENGTH = 100;
 
 type Props = {
-    project: Project;
+    configuration: Configuration;
 };
 
-export const RepositoryNameForm: FC<Props> = ({ project }) => {
+export const RepositoryNameForm: FC<Props> = ({ configuration }) => {
     const { toast } = useToast();
     const updateProject = useUpdateProject();
-    const [projectName, setProjectName] = useState(project.name);
+    const [projectName, setProjectName] = useState(configuration.name);
 
     const nameError = useOnBlurError("Sorry, this name is too long.", projectName.length <= MAX_LENGTH);
 
@@ -37,7 +36,7 @@ export const RepositoryNameForm: FC<Props> = ({ project }) => {
 
             updateProject.mutate(
                 {
-                    id: project.id,
+                    id: configuration.id,
                     name: projectName,
                 },
                 {
@@ -47,7 +46,7 @@ export const RepositoryNameForm: FC<Props> = ({ project }) => {
                 },
             );
         },
-        [nameError.isValid, updateProject, project.id, projectName, toast],
+        [nameError.isValid, updateProject, configuration.id, projectName, toast],
     );
 
     return (
@@ -63,7 +62,7 @@ export const RepositoryNameForm: FC<Props> = ({ project }) => {
             <Button
                 className="mt-4"
                 htmlType="submit"
-                disabled={project.name === projectName}
+                disabled={configuration.name === projectName}
                 loading={updateProject.isLoading}
             >
                 Update Name

components/dashboard/src/repositories/list/RepositoryList.tsx

@@ -12,14 +12,14 @@ import { Project } from "@gitpod/gitpod-protocol";
 import { CreateProjectModal } from "../../projects/create-project-modal/CreateProjectModal";
 import { Button } from "../../components/Button";
 import { RepositoryListItem } from "./RepoListItem";
-import { useListConfigurationsQuery } from "../../data/configurations/configuration-queries";
+import { useListConfigurations } from "../../data/configurations/configuration-queries";
 import { useStateWithDebounce } from "../../hooks/use-state-with-debounce";
 import { TextInput } from "../../components/forms/TextInputField";
 
 const RepositoryListPage: FC = () => {
     const history = useHistory();
     const [searchTerm, setSearchTerm, debouncedSearchTerm] = useStateWithDebounce("");
-    const { data, isLoading } = useListConfigurationsQuery({ searchTerm: debouncedSearchTerm, page: 1, pageSize: 10 });
+    const { data, isLoading } = useListConfigurations({ searchTerm: debouncedSearchTerm, page: 1, pageSize: 10 });
     const [showCreateProjectModal, setShowCreateProjectModal] = useState(false);
 
     const handleProjectCreated = useCallback(