binding config service api to server

Author: selfcontained

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

@@ -0,0 +1,50 @@
+/**
+ * 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 { useQuery } from "@tanstack/react-query";
+import { useCurrentOrg } from "../organizations/orgs-query";
+import { configurationClient } from "../../service/public-api";
+
+const BASE_KEY = "configurations";
+
+type ListConfigurationsQueryArgs = {
+    searchTerm?: string;
+    page: number;
+    pageSize: number;
+};
+
+export const useListConfigurationsQuery = ({ searchTerm = "", page, pageSize }: ListConfigurationsQueryArgs) => {
+    const { data: org } = useCurrentOrg();
+
+    return useQuery(
+        getListConfigurationsQueryKey(org?.id || "", { searchTerm, page, pageSize }),
+        async () => {
+            if (!org) {
+                throw new Error("No org currently selected");
+            }
+
+            const response = await configurationClient.listConfigurations({
+                organizationId: org.id,
+                searchTerm,
+                pagination: { page, pageSize },
+            });
+
+            return response;
+        },
+        {
+            enabled: !!org,
+        },
+    );
+};
+
+export const getListConfigurationsQueryKey = (orgId: string, args?: ListConfigurationsQueryArgs) => {
+    const key: any[] = [BASE_KEY, "list", { orgId }];
+    if (args) {
+        key.push(args);
+    }
+
+    return key;
+};

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

@@ -10,23 +10,23 @@ import { TextMuted } from "@podkit/typography/TextMuted";
 import { Text } from "@podkit/typography/Text";
 import { Link } from "react-router-dom";
 import { Button } from "../../components/Button";
-import { Project } from "@gitpod/public-api/lib/gitpod/experimental/v1/projects_pb";
+import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 
 type Props = {
-    project: Project;
+    configuration: Configuration;
 };
-export const RepositoryListItem: FC<Props> = ({ project }) => {
-    const url = usePrettyRepoURL(project.cloneUrl);
+export const RepositoryListItem: FC<Props> = ({ configuration }) => {
+    const url = usePrettyRepoURL(configuration.cloneUrl);
 
     return (
-        <li key={project.id} className="flex flex-row w-full space-between items-center">
+        <li key={configuration.id} className="flex flex-row w-full space-between items-center">
             <div className="flex flex-col flex-grow gap-1">
-                <Text className="font-semibold">{project.name}</Text>
+                <Text className="font-semibold">{configuration.name}</Text>
                 <TextMuted className="text-sm">{url}</TextMuted>
             </div>
 
             <div>
-                <Link to={`/repositories/${project.id}`}>
+                <Link to={`/repositories/${configuration.id}`}>
                     <Button type="secondary">View</Button>
                 </Link>
             </div>

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

@@ -6,17 +6,20 @@
 
 import { FC, useCallback, useState } from "react";
 import Header from "../../components/Header";
-import { useListProjectsQuery } from "../../data/projects/project-queries";
 import { Loader2 } from "lucide-react";
 import { useHistory } from "react-router-dom";
 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 { useStateWithDebounce } from "../../hooks/use-state-with-debounce";
+import { TextInput } from "../../components/forms/TextInputField";
 
 const RepositoryListPage: FC = () => {
     const history = useHistory();
-    const { data, isLoading } = useListProjectsQuery({ page: 1, pageSize: 10 });
+    const [searchTerm, setSearchTerm, debouncedSearchTerm] = useStateWithDebounce("");
+    const { data, isLoading } = useListConfigurationsQuery({ searchTerm: debouncedSearchTerm, page: 1, pageSize: 10 });
     const [showCreateProjectModal, setShowCreateProjectModal] = useState(false);
 
     const handleProjectCreated = useCallback(
@@ -35,11 +38,17 @@ const RepositoryListPage: FC = () => {
                     <Button onClick={() => setShowCreateProjectModal(true)}>Configure Repository</Button>
                 </div>
 
+                <div>
+                    <TextInput value={searchTerm} onChange={setSearchTerm} placeholder="Search repositories" />
+                </div>
+
                 {isLoading && <Loader2 className="animate-spin" />}
 
                 <ul className="space-y-2 mt-8">
                     {!isLoading &&
-                        data?.projects.map((project) => <RepositoryListItem key={project.id} project={project} />)}
+                        data?.configurations.map((configuration) => (
+                            <RepositoryListItem key={configuration.id} configuration={configuration} />
+                        ))}
                 </ul>
             </div>
 

components/dashboard/src/service/public-api.ts

@@ -18,6 +18,7 @@ import { TokensService } from "@gitpod/public-api/lib/gitpod/experimental/v1/tok
 import { WorkspacesService as WorkspaceV1Service } from "@gitpod/public-api/lib/gitpod/experimental/v1/workspaces_connect";
 import { OrganizationService } from "@gitpod/public-api/lib/gitpod/v1/organization_connect";
 import { WorkspaceService } from "@gitpod/public-api/lib/gitpod/v1/workspace_connect";
+import { ConfigurationService } from "@gitpod/public-api/lib/gitpod/v1/configuration_connect";
 import { getMetricsInterceptor } from "@gitpod/public-api/lib/metrics";
 import { getExperimentsClient } from "../experiments/client";
 import { JsonRpcOrganizationClient } from "./json-rpc-organization-client";
@@ -45,6 +46,8 @@ export const organizationClient = createServiceClient(
     new JsonRpcOrganizationClient(),
     "organization",
 );
+// No jsonrcp client for the configuration service as it's only used in new UI of the dashboard
+export const configurationClient = createServiceClient(ConfigurationService);
 
 export async function listAllProjects(opts: { orgId: string }): Promise<ProtocolProject[]> {
     let pagination = {

components/server/src/api/server.ts

@@ -303,6 +303,7 @@ export class API {
         bind(TeamsServiceAPI).toSelf().inSingletonScope();
         bind(WorkspaceServiceAPI).toSelf().inSingletonScope();
         bind(OrganizationServiceAPI).toSelf().inSingletonScope();
+        bind(ConfigurationServiceAPI).toSelf().inSingletonScope();
         bind(StatsServiceAPI).toSelf().inSingletonScope();
         bind(API).toSelf().inSingletonScope();
     }