Split node diff into multiple components

frontend/app/src/entities/branches/api/rebase-branch-from-api.ts

@@ -0,0 +1,44 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { gql } from "@apollo/client";
+
+export const BRANCH_REBASE = gql`
+  mutation BRANCH_REBASE($name: String, $waitForCompletion: Boolean!) {
+    BranchRebase (
+      wait_until_completion: $waitForCompletion
+      data: {
+        name: $name
+      }
+    ) {
+      ok
+      object {
+        id
+        name
+        description
+        origin_branch
+        branched_from
+        created_at
+        sync_with_git
+        is_default
+        has_schema_changes
+      }
+      task {
+        id
+      }
+    }
+  }
+`;
+
+export type RebaseBranchFromApiParams = {
+  branchName: string;
+  waitForCompletion: boolean;
+};
+
+export const rebaseBranchFromApi = ({
+  branchName,
+  waitForCompletion,
+}: RebaseBranchFromApiParams) => {
+  return graphqlClient.mutate({
+    mutation: BRANCH_REBASE,
+    variables: { name: branchName, waitForCompletion },
+  });
+};

frontend/app/src/entities/branches/domain/rebase-branch.ts

@@ -0,0 +1,31 @@
+import { rebaseBranchFromApi } from "@/entities/branches/api/rebase-branch-from-api";
+import { Branch } from "@/shared/api/graphql/generated/graphql";
+import { useMutation } from "@tanstack/react-query";
+
+export type RebaseBranchParams = {
+  branchName: string;
+  waitForCompletion?: boolean;
+};
+
+export type RebaseBranch = (params: RebaseBranchParams) => Promise<{
+  branch: Branch;
+  relatedTaskId: string | null;
+}>;
+
+export const rebaseBranch: RebaseBranch = async ({
+  branchName,
+  waitForCompletion = true,
+}: RebaseBranchParams) => {
+  const { data } = await rebaseBranchFromApi({ branchName, waitForCompletion });
+
+  return {
+    branch: data.BranchRebase.object,
+    relatedTaskId: data.BranchRebase.task?.id ?? null,
+  };
+};
+
+export const useRebaseBranch = () => {
+  return useMutation({
+    mutationFn: rebaseBranch,
+  });
+};

frontend/app/src/entities/branches/ui/branch-rebase-button.tsx

@@ -1,15 +1,12 @@
 import { TASK_OBJECT } from "@/config/constants";
 import { useAuth } from "@/entities/authentication/ui/useAuth";
-import { BRANCH_REBASE } from "@/entities/branches/api/rebaseBranch";
+import { useRebaseBranch } from "@/entities/branches/domain/rebase-branch";
 import { BRANCH_REBASE_WORKFLOW, TASK_ONGOING_STATES } from "@/entities/tasks/constants";
 import { Branch } from "@/shared/api/graphql/generated/graphql";
-import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import { ALERT_TYPES, Alert } from "@/shared/components/ui/alert";
-import { datetimeAtom } from "@/shared/stores/time.atom";
 import { useQuery } from "@apollo/client";
 import { Icon } from "@iconify-icon/react";
-import { useAtomValue } from "jotai";
 import { toast } from "react-toastify";
 import { GET_BRANCH_ACTION_STATE } from "../api/getBranchActionState";
 
@@ -19,9 +16,9 @@ type BranchRebaseButtonProps = {
 
 export const BranchRebaseButton = ({ branch }: BranchRebaseButtonProps) => {
   const { isAuthenticated } = useAuth();
-  const date = useAtomValue(datetimeAtom);
+  const rebaseBranchMutation = useRebaseBranch();
 
-  const { loading, data } = useQuery(GET_BRANCH_ACTION_STATE, {
+  const { loading, data, refetch } = useQuery(GET_BRANCH_ACTION_STATE, {
     variables: {
       branch: branch.name,
       workflow: [BRANCH_REBASE_WORKFLOW],
@@ -32,34 +29,36 @@ export const BranchRebaseButton = ({ branch }: BranchRebaseButtonProps) => {
 
   const taskData = data?.[TASK_OBJECT];
 
-  const handleSubmit = async () => {
-    try {
-      await graphqlClient.mutate({
-        mutation: BRANCH_REBASE,
-        variables: {
-          name: branch.name,
+  const handleRebase = () => {
+    rebaseBranchMutation.mutate(
+      {
+        branchName: branch.name,
+        waitForCompletion: false,
+      },
+      {
+        onSuccess: async () => {
+          toast(<Alert type={ALERT_TYPES.SUCCESS} message="Branch rebase requested!" />, {
+            toastId: "alert-success",
+          });
+          await refetch();
         },
-        context: {
-          branch: branch.name,
-          date,
+        onError: (error) => {
+          console.error("Error while rebasing branch: ", error);
+          toast(
+            <Alert
+              type={ALERT_TYPES.ERROR}
+              message={"An error occurred while merging the branch"}
+            />
+          );
         },
-      });
-
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message={"Branch merge requested!"} />, {
-        toastId: "alert-success",
-      });
-    } catch (error) {
-      console.error(error);
-      toast(
-        <Alert type={ALERT_TYPES.ERROR} message={"An error occurred while merging the branch"} />
-      );
-    }
+      }
+    );
   };
 
   return (
     <Button
       disabled={!isAuthenticated || loading || branch.is_default || taskData?.count > 0}
-      onClick={handleSubmit}
+      onClick={handleRebase}
       variant={"outline"}
       className="flex items-center gap-2"
     >

frontend/app/src/entities/diff/api/update-diff-from-api.ts

@@ -0,0 +1,25 @@
+import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
+import { gql } from "@apollo/client";
+
+export const DIFF_UPDATE = gql`
+  mutation DIFF_UPDATE($branchName: String!, $waitForCompletion: Boolean) {
+    DiffUpdate(data: { branch: $branchName, wait_for_completion: $waitForCompletion }) {
+      ok
+    }
+  }
+`;
+
+export type UpdateDiffFromApiParams = {
+  branchName: string;
+  waitForCompletion: boolean;
+};
+
+export const updateDiffFromApi = ({ branchName, waitForCompletion }: UpdateDiffFromApiParams) => {
+  return graphqlClient.mutate({
+    mutation: DIFF_UPDATE,
+    variables: {
+      branchName,
+      waitForCompletion,
+    },
+  });
+};

frontend/app/src/entities/diff/checks/conflict.tsx

@@ -1,7 +1,7 @@
 import { DATA_CHECK_OBJECT } from "@/config/constants";
 import { QSP } from "@/config/qsp";
 import { currentBranchAtom } from "@/entities/branches/stores";
-import { diffContent, getBadgeType } from "@/entities/diff/diff";
+import { diffContent, getBadgeType } from "@/entities/diff/utils";
 import { updateObjectWithId } from "@/entities/nodes/api/updateObjectWithId";
 import { getObjectDetailsUrl } from "@/entities/nodes/utils";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";

frontend/app/src/entities/diff/domain/update-diff.mutation.ts

@@ -0,0 +1,11 @@
+import { updateDiff } from "@/entities/diff/domain/update-diff";
+import { useMutation } from "@tanstack/react-query";
+
+export const UPDATE_DIFF_KEY = "update-diff";
+
+export function useUpdateDiffMutation() {
+  return useMutation({
+    mutationKey: [UPDATE_DIFF_KEY],
+    mutationFn: (branchName: string) => updateDiff(branchName),
+  });
+}

frontend/app/src/entities/diff/domain/update-diff.ts

@@ -0,0 +1,7 @@
+import { updateDiffFromApi } from "@/entities/diff/api/update-diff-from-api";
+
+export type UpdateDiff = (branchName: string) => Promise<void>;
+
+export const updateDiff: UpdateDiff = async (branchName) => {
+  await updateDiffFromApi({ branchName, waitForCompletion: true });
+};

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

@@ -4,7 +4,7 @@ import {
 } from "@/config/constants";
 import { useAuth } from "@/entities/authentication/ui/useAuth";
 import { currentBranchAtom } from "@/entities/branches/stores";
-import { getThreadLabel } from "@/entities/diff/diff";
+import { getThreadLabel } from "@/entities/diff/utils";
 import { createObject } from "@/entities/nodes/api/createObject";
 import { deleteObject } from "@/entities/nodes/api/deleteObject";
 import { getProposedChangesObjectThreadComments } from "@/entities/proposed-changes/api/getProposedChangesObjectThreadComments";