Merge branch 'ple-merge-IFC-1181' of github.com:opsmill/infrahub into…

… ple-merge-IFC-1181

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.

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;
 };

frontend/app/src/entities/branches/ui/branches-provider.tsx

@@ -1,16 +1,20 @@
+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";
 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 }) =
         <Alert
           type={ALERT_TYPES.ERROR}
           message={
-            <div>
+            <>
               Branch <b>{branchInQueryString}</b> not found, you have been redirected to the main
               branch.
-            </div>
+            </>
           }
         />
       );
+      const mainBranch = findSelectedBranch(branches, DEFAULT_BRANCH_NAME);
+      setCurrentBranch(mainBranch);
       navigate("/");
     }
+
+    setCurrentBranch(selectedBranch);
   }, [branches, branchInQueryString]);
 
   if (isPending) {

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;

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 (
-    <div className="h-full overflow-hidden flex flex-col">
+    <div className="h-[calc(100vh-14rem)] overflow-hidden flex flex-col">
       <header className="flex items-center px-4 py-2 border-b gap-2">
         <ProposedChangeDiffFilter branch={branch} filters={filters} />
         <span className="text-xs inline-flex gap-1 ml-auto">
@@ -110,8 +109,6 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
           ) : (
             <DiffNoFound diffStatus={qspStatus as string} />
           )}
-
-          {isFetchingNextPage && <Spinner className="flex justify-center" />}
         </main>
       </div>
     </div>