ensure api query reacts to branch and date changes (#5771)

Author: bilalabbad

frontend/app/src/config/constants.tsx

@@ -10,8 +10,6 @@ export const PROFILE_KIND = "CoreProfile";
 
 export const TASK_TARGET = "CoreTaskTarget";
 
-export const DATA_CHECK_OBJECT = "CoreDataCheck";
-
 export const ACCOUNT_GENERIC_OBJECT = "CoreGenericAccount";
 export const ACCOUNT_OBJECT = "CoreAccount";
 

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

@@ -3,52 +3,70 @@ 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 { Branch } from "@/shared/api/graphql/generated/graphql";
 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 { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "react-toastify";
 import { StringParam, useQueryParam } from "use-query-params";
 
+type BranchContext = {
+  currentBranch: Branch;
+  setCurrentBranch: (branch: Branch) => void;
+};
+
+export const BranchContext = React.createContext<BranchContext | null>(null);
+
+export function useCurrentBranch() {
+  const context = React.use(BranchContext);
+  if (!context) {
+    throw new Error("useCurrentBranch must be used within a BranchesProvider.");
+  }
+
+  return context;
+}
+
 export const BranchesProvider = ({ children }: { children?: React.ReactNode }) => {
   const { data: branches, isPending, error } = useGetBranches();
-  const setCurrentBranch = useSetAtom(currentBranchAtom);
+  const [currentBranch, setCurrentBranch] = useAtom(currentBranchAtom);
   const [branchInQueryString] = useQueryParam(QSP.BRANCH, StringParam);
   const navigate = useNavigate();
 
   useEffect(() => {
     if (isPending || error) return;
 
     const selectedBranch = findSelectedBranch(branches, branchInQueryString);
-    if (branchInQueryString && !selectedBranch) {
-      toast(
-        <Alert
-          type={ALERT_TYPES.ERROR}
-          message={
-            <>
-              Branch <b>{branchInQueryString}</b> not found, you have been redirected to the main
-              branch.
-            </>
-          }
-        />
-      );
-      const mainBranch = findSelectedBranch(branches, DEFAULT_BRANCH_NAME);
-      setCurrentBranch(mainBranch);
-      navigate("/");
+    if (selectedBranch) {
+      setCurrentBranch(selectedBranch);
+      return;
     }
 
-    setCurrentBranch(selectedBranch);
+    toast(
+      <Alert
+        type={ALERT_TYPES.ERROR}
+        message={
+          <>
+            Branch <b>{branchInQueryString}</b> not found, you have been redirected to the main
+            branch.
+          </>
+        }
+      />
+    );
+    const mainBranch = findSelectedBranch(branches, DEFAULT_BRANCH_NAME);
+    setCurrentBranch(mainBranch);
+    navigate("/");
   }, [branches, branchInQueryString]);
 
-  if (isPending) {
+  if (isPending || !currentBranch) {
     return <InfrahubLoading>loading branches...</InfrahubLoading>;
   }
 
   if (error) {
     return <ErrorScreen message={error.message} />;
   }
 
-  return children;
+  return <BranchContext value={{ currentBranch, setCurrentBranch }}>{children}</BranchContext>;
 };

frontend/app/src/entities/branches/ui/hooks/use-current-branch.ts

@@ -1,5 +1,6 @@
 import { DiffTreeQueryFilters } from "@/shared/api/graphql/generated/graphql";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { PaginationParams } from "@/shared/api/types";
 import { gql } from "@apollo/client";
 
 export const DIFF_TREE_QUERY = gql`
@@ -127,11 +128,9 @@ export const DIFF_TREE_QUERY = gql`
   }
 `;
 
-export type GetDiffTreeFromApiParams = {
+export type GetDiffTreeFromApiParams = PaginationParams & {
   branchName: string;
   filters?: DiffTreeQueryFilters;
-  limit?: number;
-  offset?: number;
 };
 
 export const getDiffTreeFromApi = async ({

frontend/app/src/entities/diff/api/get-diff-tree-from-api.ts

@@ -1,14 +1,13 @@
 import { getDiffTreeFromApi } from "@/entities/diff/api/get-diff-tree-from-api";
 import { DiffTree, DiffTreeQueryFilters } from "@/shared/api/graphql/generated/graphql";
+import { PaginationParams } from "@/shared/api/types";
 import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
 
 export const DIFF_TREE_PER_PAGE = 300;
 
-export type GetDiffTreeParams = {
+export type GetDiffTreeParams = PaginationParams & {
   branchName: string;
   filters?: DiffTreeQueryFilters;
-  limit?: number;
-  offset: number;
 };
 
 export type GetDiffTree = (params: GetDiffTreeParams) => Promise<DiffTree>;

frontend/app/src/entities/diff/domain/get-diff-tree.ts

@@ -1,5 +1,5 @@
 import { useAuth } from "@/entities/authentication/ui/useAuth";
-import { currentBranchAtom } from "@/entities/branches/stores";
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
 import { resolveConflict } from "@/entities/diff/api/resolveConflict";
 import { proposedChangedState } from "@/entities/proposed-changes/stores/proposedChanges.atom";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
@@ -16,7 +16,7 @@ import { useState } from "react";
 import { toast } from "react-toastify";
 
 export const Conflict = ({ conflict }: any) => {
-  const currentBranch = useAtomValue(currentBranchAtom);
+  const { currentBranch } = useCurrentBranch();
   const date = useAtomValue(datetimeAtom);
   const [isLoading, setIsLoading] = useState(false);
   const proposedChangesDetails = useAtomValue(proposedChangedState);

frontend/app/src/entities/diff/node-diff/conflict.tsx

@@ -1,4 +1,3 @@
-import { currentBranchAtom } from "@/entities/branches/stores";
 import { GET_IP_NAMESPACES } from "@/entities/ipam/api/ip-namespaces";
 import { IpamNamespace } from "@/shared/api/graphql/generated/graphql";
 import useQuery from "@/shared/api/graphql/useQuery";
@@ -11,7 +10,7 @@ import {
   ComboboxTrigger,
 } from "@/shared/components/ui/combobox";
 import { Icon } from "@iconify-icon/react";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import { useEffect, useId } from "react";
 import { useNavigate, useParams } from "react-router";
 import { StringParam, useQueryParam } from "use-query-params";
@@ -20,8 +19,7 @@ import { constructPathForIpam } from "./common/utils";
 import { IPAM_QSP, IPAM_ROUTE, IPAM_TABS, NAMESPACE_GENERIC } from "./constants";
 
 export default function IpNamespaceSelector() {
-  const currentBranchName = useAtomValue(currentBranchAtom);
-  const { loading, data, error } = useQuery(GET_IP_NAMESPACES, { skip: !currentBranchName });
+  const { loading, data, error } = useQuery(GET_IP_NAMESPACES);
 
   if (loading) {
     return <Skeleton className="h-10 w-80" />;

frontend/app/src/entities/ipam/ip-namespace-selector.tsx

@@ -1,3 +1,4 @@
+import { PaginationParams } from "@/shared/api/types";
 import { jsonToGraphQLQuery } from "json-to-graphql-query";
 
 export const generateRelationshipListQuery = ({
@@ -7,11 +8,9 @@ export const generateRelationshipListQuery = ({
   offset = 0,
   search = "",
   peerField,
-}: {
+}: PaginationParams & {
   peer: string;
   parent?: { name?: string; value?: string };
-  limit?: number;
-  offset?: number;
   search?: string;
   peerField?: string;
 }): string => {

frontend/app/src/entities/nodes/api/generateRelationshipListQuery.ts

@@ -1,4 +1,4 @@
-import { currentBranchAtom } from "@/entities/branches/stores";
+import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
 import { TREE_ROOT_ID } from "@/entities/ipam/constants";
 import { EMPTY_TREE, PrefixNode, updateTreeData } from "@/entities/ipam/ipam-tree/utils";
 import {
@@ -30,7 +30,7 @@ export type HierarchicalTreeProps = {
 
 export const HierarchicalTree = ({ schema, currentNodeId, className }: HierarchicalTreeProps) => {
   const navigate = useNavigate();
-  const currentBranch = useAtomValue(currentBranchAtom);
+  const { currentBranch } = useCurrentBranch();
   const currentDate = useAtomValue(datetimeAtom);
   const [filters] = useFilters();
   const hasAutoGeneratedFiltered = filters.some(

frontend/app/src/entities/nodes/hierarchical-tree.tsx

@@ -1,4 +1,5 @@
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { ContextParams } from "@/shared/api/types";
 import { gql } from "@apollo/client";
 import { jsonToGraphQLQuery } from "json-to-graphql-query";
 
@@ -22,7 +23,7 @@ export function deleteObjectFromApi({
   objectId,
   branchName,
   atDate,
-}: { objectKind: string; objectId: string; branchName: string; atDate: Date | null }) {
+}: ContextParams & { objectKind: string; objectId: string }) {
   return graphqlClient.mutate({
     mutation: gql(getDeleteObjectQuery(objectKind, objectId)),
     context: {