Feature/branch details (#1876)

Enrich branch overview with more details like last committer and ahead/behind commits. Since calculating this information is pretty intense, we request it in chunks to prevent very long loading times. Also we cache the results in frontend and backend.

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-api/src/branches.ts

@@ -21,19 +21,33 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { Branch, BranchCollection, BranchCreation, Link, Repository } from "@scm-manager/ui-types";
+import {
+  Branch,
+  BranchCollection,
+  BranchCreation,
+  BranchDetailsCollection,
+  Link,
+  Repository
+} from "@scm-manager/ui-types";
 import { requiredLink } from "./links";
-import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "react-query";
 import { ApiResult, ApiResultWithFetching } from "./base";
 import { branchQueryKey, repoQueryKey } from "./keys";
 import { apiClient } from "./apiclient";
 import { concat } from "./urls";
+import { useEffect } from "react";
 
 export const useBranches = (repository: Repository): ApiResult<BranchCollection> => {
+  const queryClient = useQueryClient();
   const link = requiredLink(repository, "branches");
   return useQuery<BranchCollection, Error>(
     repoQueryKey(repository, "branches"),
-    () => apiClient.get(link).then((response) => response.json())
+    () => apiClient.get(link).then(response => response.json()),
+    {
+      onSuccess: () => {
+        return queryClient.invalidateQueries(branchQueryKey(repository, "details"));
+      }
+    }
     // we do not populate the cache for a single branch,
     // because we have no pagination for branches and if we have a lot of them
     // the population slows us down
@@ -43,22 +57,80 @@ export const useBranches = (repository: Repository): ApiResult<BranchCollection>
 export const useBranch = (repository: Repository, name: string): ApiResultWithFetching<Branch> => {
   const link = requiredLink(repository, "branches");
   return useQuery<Branch, Error>(branchQueryKey(repository, name), () =>
-    apiClient.get(concat(link, encodeURIComponent(name))).then((response) => response.json())
+    apiClient.get(concat(link, encodeURIComponent(name))).then(response => response.json())
   );
 };
 
+export const useBranchDetails = (repository: Repository, branch: string) => {
+  const link = requiredLink(repository, "branchDetails");
+  return useQuery<Branch, Error>(branchQueryKey(repository, branch, "details"), () =>
+    apiClient.get(concat(link, encodeURIComponent(branch))).then(response => response.json())
+  );
+};
+
+function chunkBranches(branches: Branch[]) {
+  const chunks: Branch[][] = [];
+  const chunkSize = 5;
+  let chunkIndex = 0;
+  for (const branch of branches) {
+    if (!chunks[chunkIndex]) {
+      chunks[chunkIndex] = [];
+    }
+    chunks[chunkIndex].push(branch);
+    if (chunks[chunkIndex].length >= chunkSize) {
+      chunkIndex = chunkIndex + 1;
+    }
+  }
+  return chunks;
+}
+
+export const useBranchDetailsCollection = (repository: Repository, branches: Branch[]) => {
+  const link = requiredLink(repository, "branchDetailsCollection");
+  const chunks = chunkBranches(branches);
+
+  const { data, isLoading, error, fetchNextPage } = useInfiniteQuery<
+    BranchDetailsCollection,
+    Error,
+    BranchDetailsCollection
+  >(
+    branchQueryKey(repository, "details"),
+    ({ pageParam = 0 }) => {
+      const encodedBranches = chunks[pageParam].map(b => encodeURIComponent(b.name)).join("&branches=");
+      return apiClient.get(concat(link, `?branches=${encodedBranches}`)).then(response => response.json());
+    },
+    {
+      getNextPageParam: (lastPage, allPages) => {
+        if (allPages.length >= chunks.length) {
+          return undefined;
+        }
+        return allPages.length;
+      }
+    }
+  );
+
+  useEffect(() => {
+    fetchNextPage();
+  }, [data, fetchNextPage]);
+
+  return {
+    data: data?.pages.map(d => d._embedded?.branchDetails).flat(1),
+    isLoading,
+    error
+  };
+};
+
 const createBranch = (link: string) => {
   return (branch: BranchCreation) => {
     return apiClient
       .post(link, branch, "application/vnd.scmm-branchRequest+json;v=2")
-      .then((response) => {
+      .then(response => {
         const location = response.headers.get("Location");
         if (!location) {
           throw new Error("Server does not return required Location header");
         }
         return apiClient.get(location);
       })
-      .then((response) => response.json());
+      .then(response => response.json());
   };
 };
 
@@ -66,23 +138,23 @@ export const useCreateBranch = (repository: Repository) => {
   const queryClient = useQueryClient();
   const link = requiredLink(repository, "branches");
   const { mutate, isLoading, error, data } = useMutation<Branch, Error, BranchCreation>(createBranch(link), {
-    onSuccess: async (branch) => {
+    onSuccess: async branch => {
       queryClient.setQueryData(branchQueryKey(repository, branch), branch);
       await queryClient.invalidateQueries(repoQueryKey(repository, "branches"));
-    },
+    }
   });
   return {
     create: (branch: BranchCreation) => mutate(branch),
     isLoading,
     error,
-    branch: data,
+    branch: data
   };
 };
 
 export const useDeleteBranch = (repository: Repository) => {
   const queryClient = useQueryClient();
   const { mutate, isLoading, error, data } = useMutation<unknown, Error, Branch>(
-    (branch) => {
+    branch => {
       const deleteUrl = (branch._links.delete as Link).href;
       return apiClient.delete(deleteUrl);
     },
@@ -90,14 +162,14 @@ export const useDeleteBranch = (repository: Repository) => {
       onSuccess: async (_, branch) => {
         queryClient.removeQueries(branchQueryKey(repository, branch));
         await queryClient.invalidateQueries(repoQueryKey(repository, "branches"));
-      },
+      }
     }
   );
   return {
     remove: (branch: Branch) => mutate(branch),
     isLoading,
     error,
-    isDeleted: !!data,
+    isDeleted: !!data
   };
 };
 
@@ -106,6 +178,6 @@ type DefaultBranch = { defaultBranch: string };
 export const useDefaultBranch = (repository: Repository): ApiResult<DefaultBranch> => {
   const link = requiredLink(repository, "defaultBranch");
   return useQuery<DefaultBranch, Error>(branchQueryKey(repository, "__default-branch"), () =>
-    apiClient.get(link).then((response) => response.json())
+    apiClient.get(link).then(response => response.json())
   );
 };