Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 06:25:45 +01:00
Code Issues Packages Projects Releases Activity

Feature/branch details (#1876)

Browse Source 
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>
This commit is contained in:
Eduard Heimbuch
2021-12-01 14:19:18 +01:00
committed by GitHub
parent ce2eae1843
commit 9cc134f5a8
59 changed files with 1933 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
scm-ui/ui-api/src/branches.test.ts
View File

@@ -36,36 +36,38 @@ describe("Test branches hooks", () => {
type: "hg",
_links: {
branches: {
href: "/hog/branches",
},
},
href: "/hog/branches"
}
}
};
const develop: Branch = {
name: "develop",
revision: "42",
lastCommitter: { name: "trillian" },
_links: {
delete: {
href: "/hog/branches/develop",
},
},
href: "/hog/branches/develop"
}
}
};
const feature: Branch = {
name: "feature/something-special",
revision: "42",
lastCommitter: { name: "trillian" },
_links: {
delete: {
href: "/hog/branches/feature%2Fsomething-special",
},
},
href: "/hog/branches/feature%2Fsomething-special"
}
}
};
const branches: BranchCollection = {
_embedded: {
branches: [develop],
branches: [develop]
},
_links: {},
_links: {}
};
const queryClient = createInfiniteCachingClient();
@@ -83,7 +85,7 @@ describe("Test branches hooks", () => {
fetchMock.getOnce("/api/v2/hog/branches", branches);
const { result, waitFor } = renderHook(() => useBranches(repository), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {
return !!result.current.data;
@@ -104,7 +106,7 @@ describe("Test branches hooks", () => {
"repository",
"hitchhiker",
"heart-of-gold",
"branches",
"branches"
]);
expect(data).toEqual(branches);
});
@@ -115,7 +117,7 @@ describe("Test branches hooks", () => {
fetchMock.getOnce("/api/v2/hog/branches/" + encodeURIComponent(name), branch);
const { result, waitFor } = renderHook(() => useBranch(repository, name), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
expect(result.error).toBeUndefined();
@@ -143,14 +145,14 @@ describe("Test branches hooks", () => {
fetchMock.postOnce("/api/v2/hog/branches", {
status: 201,
headers: {
Location: "/hog/branches/develop",
},
Location: "/hog/branches/develop"
}
});
fetchMock.getOnce("/api/v2/hog/branches/develop", develop);
const { result, waitForNextUpdate } = renderHook(() => useCreateBranch(repository), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await act(() => {
@@ -175,7 +177,7 @@ describe("Test branches hooks", () => {
"hitchhiker",
"heart-of-gold",
"branch",
"develop",
"develop"
]);
expect(branch).toEqual(develop);
});
@@ -192,11 +194,11 @@ describe("Test branches hooks", () => {
describe("useDeleteBranch tests", () => {
const deleteBranch = async () => {
fetchMock.deleteOnce("/api/v2/hog/branches/develop", {
status: 204,
status: 204
});
const { result, waitForNextUpdate } = renderHook(() => useDeleteBranch(repository), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await act(() => {

98
scm-ui/ui-api/src/branches.ts
View File

@@ -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())
);
};

37
scm-ui/ui-api/src/changesets.test.ts
View File

@@ -35,19 +35,20 @@ describe("Test changeset hooks", () => {
type: "hg",
_links: {
changesets: {
href: "/r/c",
},
},
href: "/r/c"
}
}
};
const develop: Branch = {
name: "develop",
revision: "42",
lastCommitter: { name: "trillian" },
_links: {
history: {
href: "/r/b/c",
},
},
href: "/r/b/c"
}
}
};
const changeset: Changeset = {
@@ -55,19 +56,19 @@ describe("Test changeset hooks", () => {
description: "Awesome change",
date: new Date(),
author: {
name: "Arthur Dent",
name: "Arthur Dent"
},
_embedded: {},
_links: {},
_links: {}
};
const changesets: ChangesetCollection = {
page: 1,
pageTotal: 1,
_embedded: {
changesets: [changeset],
changesets: [changeset]
},
_links: {},
_links: {}
};
const expectChangesetCollection = (result?: ChangesetCollection) => {
@@ -85,7 +86,7 @@ describe("Test changeset hooks", () => {
const queryClient = createInfiniteCachingClient();
const { result, waitFor } = renderHook(() => useChangesets(repository), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {
@@ -98,14 +99,14 @@ describe("Test changeset hooks", () => {
it("should return changesets for page", async () => {
fetchMock.getOnce("/api/v2/r/c", changesets, {
query: {
page: 42,
},
page: 42
}
});
const queryClient = createInfiniteCachingClient();
const { result, waitFor } = renderHook(() => useChangesets(repository, { page: 42 }), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {
@@ -121,7 +122,7 @@ describe("Test changeset hooks", () => {
const queryClient = createInfiniteCachingClient();
const { result, waitFor } = renderHook(() => useChangesets(repository, { branch: develop }), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {
@@ -137,7 +138,7 @@ describe("Test changeset hooks", () => {
const queryClient = createInfiniteCachingClient();
const { result, waitFor } = renderHook(() => useChangesets(repository), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {
@@ -149,7 +150,7 @@ describe("Test changeset hooks", () => {
"hitchhiker",
"heart-of-gold",
"changeset",
"42",
"42"
]);
expect(changeset?.id).toBe("42");
@@ -163,7 +164,7 @@ describe("Test changeset hooks", () => {
const queryClient = createInfiniteCachingClient();
const { result, waitFor } = renderHook(() => useChangeset(repository, "42"), {
wrapper: createWrapper(undefined, queryClient),
wrapper: createWrapper(undefined, queryClient)
});
await waitFor(() => {