Diff summary on proposed changes views (#3988)

* add variant * update tabs button with new primitive * update avatar ui * add classname props for date display * remove empty space * add qsp for proposed changes state tabs buttons * update query to use variables * move proposeed changes items and add more components * update avatar variants * 🔧 * update avatrs for reviewwers * udpate proposed changes query * udpate info for comments * start add query in proposed change data * rename files * rename files * add counters for proposed changes * fix revert constant * update margin * enable search * update main list ui * remove date and summary * prevent event propagation * add more variants * update ui * 🔧 * fix details query * ad variant * update badge * update messages count * ui updates * add variant * handle actions * update to use primitive * fix peer diff ui * remove conflict info * rename modal component * add pc deletion * fix test and testids components * udate locators * update locators * fix reviewers form * remove integration test * add test id * add data diff e2e check * fix locators for delete proposed change on multiple items * update ui, testid and assertions * update title * update border * update margin * update variant * add verification after approval * referch after update and fix approver icon testid * ensure we delete the first proposed change found * fix query regression for details * update pc name edit to fix deletion * remove logs * update locators for strict mode * update delete locator * add diff summary query and logic * remove time from parameter * remove parameter * update buttons * typo * type * update colors to match badges * update branch names * 🔧 * removes conflict info * update diff summary query * skip tests having issues with api responses * udpate fixme tests
opsmill · Aug 3, 2024 · 016c45c · 016c45c
1 parent 7cbf20c
commit 016c45c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/frontend/app/src/graphql/queries/proposed-changes/getProposedChangesDiffSummary.ts b/frontend/app/src/graphql/queries/proposed-changes/getProposedChangesDiffSummary.ts
@@ -1,7 +1,10 @@
 export const getProposedChangesDiffSummary = `
-query GET_PROPOSED_CHANGES_DIFF_SUMMARY($branch: String) {
-  DiffSummary(diff_from: $branch){
-    display_label
+query GET_PROPOSED_CHANGES_DIFF_SUMMARY {
+  DiffTree {
+    num_added
+    num_updated
+    num_removed
+    num_conflicts
   }
 }
 `;
diff --git a/frontend/app/src/hooks/useQuery.ts b/frontend/app/src/hooks/useQuery.ts
@@ -12,7 +12,11 @@ import {
 import { useAtomValue } from "jotai";
 import usePagination from "./usePagination";
 
-const useQuery: typeof useApolloQuery = (QUERY, options?: OperationVariables) => {
+interface Options extends OperationVariables {
+  branch?: string;
+}
+
+const useQuery: typeof useApolloQuery = (QUERY, options?: Options) => {
   const branch = useAtomValue(currentBranchAtom);
   const date = useAtomValue(datetimeAtom);
   const [{ offset, limit }] = usePagination();
@@ -25,7 +29,7 @@ const useQuery: typeof useApolloQuery = (QUERY, options?: OperationVariables) =>
       limit,
     },
     context: {
-      uri: CONFIG.GRAPHQL_URL(branch?.name, date),
+      uri: CONFIG.GRAPHQL_URL(options?.branch || branch?.name, date),
     },
   });
 };

diff --git a/frontend/app/src/screens/diff/data-diff.tsx b/frontend/app/src/screens/diff/data-diff.tsx
@@ -22,7 +22,7 @@ import { useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import { StringParam, useQueryParam } from "use-query-params";
 import { DataDiffNode, tDataDiffNode } from "./data-diff-node";
-import { ProposedChangesData } from "../proposed-changes/diff-summary";
+import { ProposedChangesDiffSummary } from "../proposed-changes/diff-summary";
 import { Button } from "@/components/buttons/button-primitive";
 import { useAuth } from "@/hooks/useAuth";
 import { updateObjectWithId } from "@/graphql/mutations/objects/updateObjectWithId";
@@ -150,8 +150,6 @@ export const DataDiff = forwardRef((props, ref) => {
 
       setDiff(diffDetails.diffs ?? []);
     } catch (err) {
-      console.error("Error when fethcing branches: ", err);
-
       toast(<Alert type={ALERT_TYPES.ERROR} message="Error while loading branch diff" />);
     }
 
@@ -195,7 +193,12 @@ export const DataDiff = forwardRef((props, ref) => {
 
       await graphqlClient.refetchQueries({ include: ["GET_PROPOSED_CHANGES"] });
     } catch (e) {
-      console.error("Something went wrong while updating the object:", e);
+      toast(
+        <Alert
+          type={ALERT_TYPES.SUCCESS}
+          message={"An error occurred while approving the proposed changes"}
+        />
+      );
     }
 
     setIsLoadingApprove(false);
@@ -234,8 +237,6 @@ export const DataDiff = forwardRef((props, ref) => {
 
       await graphqlClient.refetchQueries({ include: ["GET_PROPOSED_CHANGES"] });
     } catch (error: any) {
-      console.log("error: ", error);
-
       toast(
         <Alert
           type={ALERT_TYPES.SUCCESS}
@@ -285,7 +286,12 @@ export const DataDiff = forwardRef((props, ref) => {
 
       await graphqlClient.refetchQueries({ include: ["GET_PROPOSED_CHANGES"] });
     } catch (e) {
-      console.error("Something went wrong while updating the object:", e);
+      toast(
+        <Alert
+          type={ALERT_TYPES.SUCCESS}
+          message={"An error occurred while closing the proposed changes"}
+        />
+      );
     }
 
     setIsLoadingClose(false);
@@ -324,7 +330,7 @@ export const DataDiff = forwardRef((props, ref) => {
       <div className="flex items-center justify-between p-2 bg-custom-white">
         <div className="flex gap-2">
           <div className="mr-4">
-            <ProposedChangesData branch={branch} />
+            <ProposedChangesDiffSummary branch={branch} />
           </div>
 
           <Badge variant={"green"}>

diff --git a/frontend/app/src/screens/proposed-changes/diff-summary.tsx b/frontend/app/src/screens/proposed-changes/diff-summary.tsx
@@ -6,22 +6,21 @@ import { Icon } from "@iconify-icon/react";
 import ErrorScreen from "../errors/error-screen";
 import LoadingScreen from "../loading-screen/loading-screen";
 
-type tProposedChangesData = {
+type tProposedChangesDiffSummary = {
   branch: string;
 };
 
-export const ProposedChangesData = ({ branch }: tProposedChangesData) => {
+export const ProposedChangesDiffSummary = ({ branch }: tProposedChangesDiffSummary) => {
   const query = gql`
     ${getProposedChangesDiffSummary}
   `;
 
   const {
     loading,
     error,
-    // data = {},
+    data = {},
   } = useQuery(query, {
-    variables: { branch },
-    skip: true,
+    branch,
   });
 
   if (error) {
@@ -32,22 +31,22 @@ export const ProposedChangesData = ({ branch }: tProposedChangesData) => {
     <div className="flex gap-2">
       <Badge className="rounded-full" variant="green">
         <Icon icon="mdi:plus-circle-outline" className="text-xs mr-1" />
-        {loading ? <LoadingScreen size={8} hideText /> : "1"}
+        {loading ? <LoadingScreen size={8} hideText /> : data.DiffTree.num_added}
       </Badge>
 
       <Badge className="rounded-full" variant="red">
         <Icon icon="mdi:minus-circle-outline" className="text-xs mr-1" />
-        {loading ? <LoadingScreen size={8} hideText /> : "1"}
+        {loading ? <LoadingScreen size={8} hideText /> : data.DiffTree.num_removed}
       </Badge>
 
       <Badge className="rounded-full" variant="blue">
         <Icon icon="mdi:circle-arrows" className="text-xs mr-1" />
-        {loading ? <LoadingScreen size={8} hideText /> : "1"}
+        {loading ? <LoadingScreen size={8} hideText /> : data.DiffTree.num_updated}
       </Badge>
 
       <Badge className="rounded-full" variant="yellow">
         <Icon icon="mdi:warning-outline" className="text-xs mr-1" />
-        {loading ? <LoadingScreen size={8} hideText /> : "1"}
+        {loading ? <LoadingScreen size={8} hideText /> : data.DiffTree.num_conflicts}
       </Badge>
     </div>
   );

diff --git a/frontend/app/src/screens/proposed-changes/items.tsx b/frontend/app/src/screens/proposed-changes/items.tsx
@@ -15,7 +15,7 @@ import { TabsButtons } from "@/components/buttons/tabs-buttons";
 import { useNavigate } from "react-router-dom";
 import { constructPath } from "@/utils/fetch";
 import { QSP } from "@/config/qsp";
-import { StringParam, useQueryParam } from "use-query-params";
+import { ProposedChangesDiffSummary } from "./diff-summary";
 import { useState } from "react";
 import ModalDelete from "@/components/modals/modal-delete";
 import { toast } from "react-toastify";
@@ -24,13 +24,13 @@ import { DELETE_PROPOSED_CHANGE } from "@/graphql/mutations/proposed-changes/del
 import { GET_PROPOSED_CHANGES } from "@/graphql/queries/proposed-changes/getProposedChanges";
 import { ARTIFACT_OBJECT, PROPOSED_CHANGES_OBJECT, TASK_OBJECT } from "@/config/constants";
 import { ProposedChangesInfo } from "@/screens/proposed-changes/item-info";
-import { ProposedChangesData } from "@/screens/proposed-changes/diff-summary";
 import { ProposedChangesCounter } from "@/screens/proposed-changes/counter";
 import { getProposedChangesTasks } from "@/graphql/queries/proposed-changes/getProposedChangesTasks";
 import { getProposedChangesArtifacts } from "@/graphql/queries/proposed-changes/getProposedChangesArtifacts";
 import { ProposedChangesReviewers } from "@/screens/proposed-changes/reviewers";
 import { NetworkStatus } from "@apollo/client";
 import LoadingScreen from "@/screens/loading-screen/loading-screen";
+import { StringParam, useQueryParam } from "use-query-params";
 
 export const ProposedChangesPage = () => {
   const permission = usePermission();
@@ -143,7 +143,7 @@ export const ProposedChangesPage = () => {
             comments={node.comments.count}
           />
         ),
-        data: <ProposedChangesData branch={node.source_branch.value} />,
+        data: <ProposedChangesDiffSummary branch={node.source_branch.value} />,
         checks: <Badge className="rounded-full">{node.validations.count}</Badge>,
         tasks: (
           <ProposedChangesCounter id={node.id} query={getProposedChangesTasks} kind={TASK_OBJECT} />