request to DiffTreeSummary uses tanstack query

changelog/+diff-summary.fixed.md

@@ -0,0 +1 @@
+Fixed incorrect data diff counter when viewing a branch or proposed changes

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

@@ -0,0 +1,30 @@
+import { gql } from "@apollo/client";
+
+import type {
+  Get_Diff_Tree_SummaryQuery,
+  Get_Diff_Tree_SummaryQueryVariables,
+} from "@/shared/api/graphql/generated/graphql";
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+
+export const GET_PROPOSED_CHANGES_DIFF_SUMMARY = gql`
+  query GET_DIFF_TREE_SUMMARY($branch: String, $filters: DiffTreeQueryFilters) {
+    DiffTreeSummary(branch: $branch, filters: $filters) {
+      num_added
+      num_updated
+      num_removed
+      num_conflicts
+    }
+  }
+`;
+
+export interface GetDiffTreeSummaryFromApiParams extends Get_Diff_Tree_SummaryQueryVariables {}
+
+export function getDiffTreeSummaryFromApi(variables: Get_Diff_Tree_SummaryQueryVariables) {
+  return graphqlClient.query<Get_Diff_Tree_SummaryQuery, Get_Diff_Tree_SummaryQueryVariables>({
+    query: GET_PROPOSED_CHANGES_DIFF_SUMMARY,
+    variables,
+    context: {
+      processErrorMessage: () => {},
+    },
+  });
+}

frontend/app/src/entities/diff/domain/get-diff-summary.query.ts

@@ -0,0 +1,18 @@
+import { queryOptions, useQuery } from "@tanstack/react-query";
+
+import type { QueryConfig } from "@/shared/api/types";
+
+import { type GetDiffSummaryParams, getDiffSummary } from "@/entities/diff/domain/get-diff-summary";
+
+export function getDiffSummaryQueryOptions({ branch, filters }: GetDiffSummaryParams) {
+  return queryOptions({
+    queryKey: ["diff-summary", branch, filters],
+    queryFn: () => getDiffSummary({ branch, filters }),
+  });
+}
+
+export type UseGetDiffSummaryConfig = QueryConfig<typeof getDiffSummaryQueryOptions>;
+
+export function useGetDiffSummary(params: GetDiffSummaryParams, config?: UseGetDiffSummaryConfig) {
+  return useQuery({ ...getDiffSummaryQueryOptions(params), ...config });
+}

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

@@ -0,0 +1,27 @@
+import {
+  type GetDiffTreeSummaryFromApiParams,
+  getDiffTreeSummaryFromApi,
+} from "@/entities/diff/api/get-diff-tree-summary-from-api";
+
+export type GetDiffSummaryParams = GetDiffTreeSummaryFromApiParams;
+
+export type GetDiffSummaryResponse = {
+  num_added: number;
+  num_updated: number;
+  num_removed: number;
+  num_conflicts: number;
+};
+
+export type GetDiffSummary = (
+  params: GetDiffSummaryParams
+) => Promise<GetDiffSummaryResponse | null>;
+
+export const getDiffSummary: GetDiffSummary = async (params) => {
+  const { data, errors } = await getDiffTreeSummaryFromApi(params);
+
+  if (errors) {
+    throw new Error(errors.map((e) => e.message).join("; "));
+  }
+
+  return (data.DiffTreeSummary as GetDiffSummaryResponse) ?? null;
+};

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

@@ -9,7 +9,9 @@ import { DateDisplay } from "@/shared/components/display/date-display";
 import ErrorScreen from "@/shared/components/errors/error-screen";
 import { LoadingIndicator } from "@/shared/components/loading/loading-indicator";
 
+import type { GetDiffSummaryParams } from "@/entities/diff/domain/get-diff-summary";
 import { useDiffTreeInfiniteQuery } from "@/entities/diff/domain/get-diff-tree";
+import { DiffNode } from "@/entities/diff/node-diff/node";
 import { DIFF_STATUS, type DiffNode as DiffNodeType } from "@/entities/diff/node-diff/types";
 import { buildFilters } from "@/entities/diff/node-diff/utils";
 import { DiffComputing } from "@/entities/diff/ui/diff-computing";
@@ -19,29 +21,24 @@ import { DiffRebaseButton } from "@/entities/diff/ui/diff-rebase-button";
 import { DiffRefreshButton } from "@/entities/diff/ui/diff-refresh-button";
 import DiffTree from "@/entities/diff/ui/diff-tree";
 import { proposedChangedState } from "@/entities/proposed-changes/stores/proposedChanges.atom";
-
-import { type DiffFilter, ProposedChangeDiffFilter } from "../../proposed-changes/ui/diff-filter";
-import { DiffNode } from "./node";
+import { DiffFilter } from "@/entities/proposed-changes/ui/diff-filter";
 
 export const DiffContext = createContext({});
 
-type NodeDiffProps = {
-  filters: DiffFilter;
-  branchName: string;
-};
+type NodeDiffProps = GetDiffSummaryParams;
 
-export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
+export const NodeDiff = ({ branch, filters }: NodeDiffProps) => {
   const [qspStatus] = useQueryState(QSP.STATUS);
   const proposedChangesDetails = useAtomValue(proposedChangedState);
 
-  const branch = proposedChangesDetails?.source_branch?.value || branchName; // Used in proposed changes view and branch view
+  const branchName: string = proposedChangesDetails?.source_branch?.value || branch; // Used in proposed changes view and branch view
 
   // Get filters merged with status filter
   const finalFilters = buildFilters(filters, qspStatus);
 
   const { data, isPending, error, hasNextPage, fetchNextPage, isFetchingNextPage } =
     useDiffTreeInfiniteQuery({
-      branchName: branch,
+      branchName,
       filters: finalFilters,
     });
 
@@ -66,14 +63,14 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
   if (!firstPageNodes) {
     return (
       <DiffComputing
-        sourceBranch={branch}
+        sourceBranch={branchName}
         destinationBranch={proposedChangesDetails.destination_branch?.value ?? DEFAULT_BRANCH_NAME}
       />
     );
   }
 
   if (!qspStatus && firstPageNodes.nodes?.length === 0) {
-    return <DiffEmpty branchName={branch} lastRefreshedAt={firstPageNodes.to_time} />;
+    return <DiffEmpty branchName={branchName} lastRefreshedAt={firstPageNodes.to_time} />;
   }
 
   const nodes =
@@ -89,12 +86,12 @@ export const NodeDiff = ({ branchName, filters }: NodeDiffProps) => {
   return (
     <div className="flex h-[calc(100vh-14rem)] flex-col overflow-hidden">
       <header className="flex items-center gap-2 border-gray-200 border-b px-4 py-2">
-        <ProposedChangeDiffFilter branch={branch} filters={filters} />
+        <DiffFilter branch={branchName} filters={filters} />
         <span className="ml-auto inline-flex gap-1 text-xs">
           Updated <DateDisplay date={firstPageNodes?.to_time} />
         </span>
-        <DiffRefreshButton size="sm" variant="primary" branchName={branch} />
-        <DiffRebaseButton branchName={branch} />
+        <DiffRefreshButton size="sm" variant="primary" branchName={branchName} />
+        <DiffRebaseButton branchName={branchName} />
       </header>
 
       <div className="grid grow grid-cols-4 overflow-hidden">

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

@@ -6,8 +6,6 @@ import { classNames, warnUnexpectedType } from "@/shared/utils/common";
 import { capitalizeFirstLetter } from "@/shared/utils/string";
 
 import { DIFF_STATUS, type DiffProperty, type DiffStatus } from "@/entities/diff/node-diff/types";
-import type { DiffFilter } from "@/entities/proposed-changes/ui/diff-filter";
-
 import {
   BadgeAdded,
   BadgeConflict,
@@ -16,7 +14,8 @@ import {
   BadgeUnchanged,
   BadgeUpdated,
   type DiffBadgeProps,
-} from "../ui/diff-badge";
+} from "@/entities/diff/ui/diff-badge";
+import type { DiffFilter } from "@/entities/proposed-changes/ui/diff-filter";
 
 export const diffBadges: { [key: string]: BadgeType } = {
   ADDED: BadgeAdded,

frontend/app/src/entities/diff/ui/diff-badge.tsx

@@ -8,10 +8,6 @@ export interface DiffBadgeProps extends BadgeProps {
   icon?: string;
 }
 
-type CloseBadgeProps = {
-  className?: string;
-};
-
 export type BadgeType =
   | typeof BadgeAdded
   | typeof BadgeRemoved
@@ -53,10 +49,6 @@ export const BadgeAdded = ({ className, ...props }: DiffBadgeProps) => {
   );
 };
 
-export const CloseBadgeAdded = () => {
-  return <CloseBadge className="bg-green-200 text-green-800" />;
-};
-
 export const BadgeRemoved = ({ className, ...props }: DiffBadgeProps) => {
   return (
     <BadgeUnchanged
@@ -67,10 +59,6 @@ export const BadgeRemoved = ({ className, ...props }: DiffBadgeProps) => {
   );
 };
 
-export const CloseBadgeRemoved = () => {
-  return <CloseBadge className="bg-red-200 text-red-800" />;
-};
-
 export const BadgeConflict = ({ className, ...props }: DiffBadgeProps) => {
   return (
     <BadgeUnchanged
@@ -81,10 +69,6 @@ export const BadgeConflict = ({ className, ...props }: DiffBadgeProps) => {
   );
 };
 
-export const CloseBadgeConflict = () => {
-  return <CloseBadge className="bg-yellow-200 text-yellow-800" />;
-};
-
 export const BadgeUpdated = ({ className, ...props }: DiffBadgeProps) => {
   return (
     <BadgeUnchanged
@@ -94,20 +78,3 @@ export const BadgeUpdated = ({ className, ...props }: DiffBadgeProps) => {
     />
   );
 };
-
-export const CloseBadgeUpdated = () => {
-  return <CloseBadge className="bg-blue-200 text-blue-800" />;
-};
-
-const CloseBadge = ({ className }: CloseBadgeProps) => {
-  return (
-    <div
-      className={classNames(
-        "-top-2 -right-2 absolute flex items-center justify-center rounded-full border-2 border-white",
-        className
-      )}
-    >
-      <Icon icon="mdi:close" size={1} />
-    </div>
-  );
-};