From 977fecd1442c78fb7128f742dc49509f6759b465 Mon Sep 17 00:00:00 2001 From: Bilal ABBAD Date: Thu, 6 Feb 2025 15:02:07 +0100 Subject: [PATCH 1/2] Improvement and fixes on data diff view (#5682) * increase the number of diff per page to 300 * fixed blinking scroll bar when window is narrow and diff is loading * diff tree and diff list are scrollable independently --- changelog/+data-diff.added.md | 2 ++ frontend/app/src/entities/diff/domain/get-diff-tree.ts | 2 +- frontend/app/src/entities/diff/node-diff/index.tsx | 5 +---- 3 files changed, 4 insertions(+), 5 deletions(-) create mode 100644 changelog/+data-diff.added.md diff --git a/changelog/+data-diff.added.md b/changelog/+data-diff.added.md new file mode 100644 index 0000000000..6bc753f118 --- /dev/null +++ b/changelog/+data-diff.added.md @@ -0,0 +1,2 @@ +- Data diffs are loaded in sequential batches for faster performance with large changes. +- The diff tree and diff list can now be scrolled independently. diff --git a/frontend/app/src/entities/diff/domain/get-diff-tree.ts b/frontend/app/src/entities/diff/domain/get-diff-tree.ts index 2f10f4250e..3ba253b856 100644 --- a/frontend/app/src/entities/diff/domain/get-diff-tree.ts +++ b/frontend/app/src/entities/diff/domain/get-diff-tree.ts @@ -2,7 +2,7 @@ import { getDiffTreeFromApi } from "@/entities/diff/api/get-diff-tree-from-api"; import { DiffTree, DiffTreeQueryFilters } from "@/shared/api/graphql/generated/graphql"; import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query"; -export const DIFF_TREE_PER_PAGE = 30; +export const DIFF_TREE_PER_PAGE = 300; export type GetDiffTreeParams = { branchName: string; diff --git a/frontend/app/src/entities/diff/node-diff/index.tsx b/frontend/app/src/entities/diff/node-diff/index.tsx index 43cde561bf..e3c68cc2d6 100644 --- a/frontend/app/src/entities/diff/node-diff/index.tsx +++ b/frontend/app/src/entities/diff/node-diff/index.tsx @@ -13,7 +13,6 @@ import { proposedChangedState } from "@/entities/proposed-changes/stores/propose import { DateDisplay } from "@/shared/components/display/date-display"; import ErrorScreen from "@/shared/components/errors/error-screen"; import LoadingScreen from "@/shared/components/loading-screen"; -import { Spinner } from "@/shared/components/ui/spinner"; import { useAtomValue } from "jotai"; import { createContext, useEffect } from "react"; import { StringParam, useQueryParam } from "use-query-params"; @@ -82,7 +81,7 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => { }) ?? []; return ( -
+
@@ -110,8 +109,6 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => { ) : ( )} - - {isFetchingNextPage && }
From 9958b13c342854ea300ff42a95d41f461cda1cb6 Mon Sep 17 00:00:00 2001 From: Bilal ABBAD Date: Thu, 6 Feb 2025 18:32:16 +0100 Subject: [PATCH 2/2] FIX: set main as current branch, when a branch is not found (#5685) --- .../app/src/entities/branches/domain/get-branches.ts | 7 +------ .../src/entities/branches/ui/branches-provider.tsx | 12 ++++++++++-- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/app/src/entities/branches/domain/get-branches.ts b/frontend/app/src/entities/branches/domain/get-branches.ts index d9ca5e165d..920b525f9b 100644 --- a/frontend/app/src/entities/branches/domain/get-branches.ts +++ b/frontend/app/src/entities/branches/domain/get-branches.ts @@ -1,6 +1,5 @@ import { getBranchesFromApi } from "@/entities/branches/api/get-branches-from-api"; -import { branchesState, currentBranchAtom } from "@/entities/branches/stores"; -import { findSelectedBranch } from "@/entities/branches/utils"; +import { branchesState } from "@/entities/branches/stores"; import { Branch } from "@/shared/api/graphql/generated/graphql"; import { store } from "@/shared/stores"; @@ -12,11 +11,7 @@ export const getBranches: GetBranches = async () => { if (error) throw error; const branches = data?.Branch ?? []; - - const params = new URLSearchParams(window.location.search); - const currentBranch = findSelectedBranch(branches, params.get("branch")); store.set(branchesState, branches); - store.set(currentBranchAtom, currentBranch); return branches; }; diff --git a/frontend/app/src/entities/branches/ui/branches-provider.tsx b/frontend/app/src/entities/branches/ui/branches-provider.tsx index 7544b192ca..b474d864aa 100644 --- a/frontend/app/src/entities/branches/ui/branches-provider.tsx +++ b/frontend/app/src/entities/branches/ui/branches-provider.tsx @@ -1,9 +1,12 @@ +import { DEFAULT_BRANCH_NAME } from "@/config/constants"; import { QSP } from "@/config/qsp"; import { useGetBranches } from "@/entities/branches/domain/get-branches.query"; +import { currentBranchAtom } from "@/entities/branches/stores"; import { findSelectedBranch } from "@/entities/branches/utils"; import ErrorScreen from "@/shared/components/errors/error-screen"; import { InfrahubLoading } from "@/shared/components/loading/infrahub-loading"; import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert"; +import { useSetAtom } from "jotai"; import React, { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; @@ -11,6 +14,7 @@ import { StringParam, useQueryParam } from "use-query-params"; export const BranchesProvider = ({ children }: { children?: React.ReactNode }) => { const { data: branches, isPending, error } = useGetBranches(); + const setCurrentBranch = useSetAtom(currentBranchAtom); const [branchInQueryString] = useQueryParam(QSP.BRANCH, StringParam); const navigate = useNavigate(); @@ -23,15 +27,19 @@ export const BranchesProvider = ({ children }: { children?: React.ReactNode }) = + <> Branch {branchInQueryString} not found, you have been redirected to the main branch. - + } /> ); + const mainBranch = findSelectedBranch(branches, DEFAULT_BRANCH_NAME); + setCurrentBranch(mainBranch); navigate("/"); } + + setCurrentBranch(selectedBranch); }, [branches, branchInQueryString]); if (isPending) {