add diff conflict at the attribute level for value conflicts

backend/infrahub/graphql/queries/diff/tree.py

@@ -8,6 +8,7 @@
 
 from infrahub.core import registry
 from infrahub.core.constants import DiffAction, RelationshipCardinality
+from infrahub.core.constants.database import DatabaseEdgeType
 from infrahub.core.diff.model.path import NameTrackingId
 from infrahub.core.diff.repository.repository import DiffRepository
 from infrahub.core.query.diff import DiffCountChanges
@@ -75,6 +76,7 @@ class DiffAttribute(DiffSummaryCounts):
     path_identifier = String(required=True)
     properties = List(DiffProperty)
     contains_conflict = Boolean(required=True)
+    conflict = Field(ConflictDetails, required=False)
 
 
 class DiffSingleRelationship(DiffSummaryCounts):
@@ -207,13 +209,19 @@ def to_diff_attribute(
         diff_properties = [
             self.to_diff_property(enriched_property=e_prop, context=context) for e_prop in enriched_attribute.properties
         ]
+        conflict = None
+        for diff_prop in diff_properties:
+            if diff_prop.property_type == DatabaseEdgeType.HAS_VALUE.value and diff_prop.conflict:
+                conflict = diff_prop.conflict
+                diff_prop.conflict = None
         return DiffAttribute(
             name=enriched_attribute.name,
             last_changed_at=enriched_attribute.changed_at.obj,
             status=enriched_attribute.action,
             path_identifier=enriched_attribute.path_identifier,
             properties=diff_properties,
             contains_conflict=enriched_attribute.contains_conflict,
+            conflict=conflict,
             num_added=enriched_attribute.num_added,
             num_updated=enriched_attribute.num_updated,
             num_removed=enriched_attribute.num_removed,

backend/tests/unit/graphql/test_diff_tree_query.py

@@ -69,6 +69,18 @@
                 num_updated
                 num_conflicts
                 contains_conflict
+                conflict {
+                    uuid
+                    base_branch_action
+                    base_branch_value
+                    base_branch_changed_at
+                    base_branch_label
+                    diff_branch_action
+                    diff_branch_value
+                    diff_branch_changed_at
+                    diff_branch_label
+                    selected_branch
+                }
                 properties {
                     property_type
                     last_changed_at
@@ -353,6 +365,18 @@ async def test_diff_tree_one_attr_change(
                         "num_conflicts": 1,
                         "status": UPDATED_ACTION,
                         "contains_conflict": True,
+                        "conflict": {
+                            "uuid": enriched_conflict.uuid,
+                            "base_branch_action": UPDATED_ACTION,
+                            "base_branch_value": "#fedcba",
+                            "base_branch_changed_at": enriched_conflict.base_branch_changed_at.to_string(with_z=False),
+                            "base_branch_label": None,
+                            "diff_branch_action": UPDATED_ACTION,
+                            "diff_branch_value": "#abcdef",
+                            "diff_branch_changed_at": enriched_conflict.diff_branch_changed_at.to_string(with_z=False),
+                            "diff_branch_label": None,
+                            "selected_branch": GraphQLConfictSelection.DIFF_BRANCH.name,
+                        },
                         "properties": [
                             {
                                 "property_type": "HAS_VALUE",
@@ -362,22 +386,7 @@ async def test_diff_tree_one_attr_change(
                                 "previous_label": None,
                                 "new_label": None,
                                 "status": UPDATED_ACTION,
-                                "conflict": {
-                                    "uuid": enriched_conflict.uuid,
-                                    "base_branch_action": UPDATED_ACTION,
-                                    "base_branch_value": "#fedcba",
-                                    "base_branch_changed_at": enriched_conflict.base_branch_changed_at.to_string(
-                                        with_z=False
-                                    ),
-                                    "base_branch_label": None,
-                                    "diff_branch_action": UPDATED_ACTION,
-                                    "diff_branch_value": "#abcdef",
-                                    "diff_branch_changed_at": enriched_conflict.diff_branch_changed_at.to_string(
-                                        with_z=False
-                                    ),
-                                    "diff_branch_label": None,
-                                    "selected_branch": GraphQLConfictSelection.DIFF_BRANCH.name,
-                                },
+                                "conflict": None,
                             }
                         ],
                     }

frontend/app/src/components/buttons/toggle-buttons.tsx

@@ -20,7 +20,8 @@ export const ToggleButtons = ({ tabs, ...props }: TabsProps) => {
           <Button
             key={tab.label}
             onClick={tab.onClick}
-            variant={tab.isActive ? "active" : "outline"}
+            size={"sm"}
+            variant={tab.isActive ? "active" : "ghost"}
             className={"cursor-pointer border-0 px-4 py-2 rounded-none"}
             {...props}>
             {tab.label}

frontend/app/src/graphql/queries/proposed-changes/getProposedChangesDiffTree.ts

@@ -70,6 +70,18 @@ export const getProposedChangesDiffTree = gql`
           contains_conflict
           last_changed_at
           name
+          conflict {
+            base_branch_label
+            base_branch_action
+            base_branch_changed_at
+            base_branch_value
+            diff_branch_label
+            diff_branch_action
+            diff_branch_changed_at
+            diff_branch_value
+            selected_branch
+            uuid
+          }
           properties {
             conflict {
               base_branch_label

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

@@ -1,11 +1,15 @@
-import { ToggleButtons } from "@/components/buttons/toggle-buttons";
+import { Checkbox } from "@/components/inputs/checkbox";
 import { ALERT_TYPES, Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import graphqlClient from "@/graphql/graphqlClientApollo";
 import { resolveConflict } from "@/graphql/mutations/diff/resolveConflict";
 import { usePermission } from "@/hooks/usePermission";
+import LoadingScreen from "@/screens/loading-screen/loading-screen";
 import { currentBranchAtom } from "@/state/atoms/branches.atom";
+import { proposedChangedState } from "@/state/atoms/proposedChanges.atom";
 import { datetimeAtom } from "@/state/atoms/time.atom";
 import { gql } from "@apollo/client";
+import { Icon } from "@iconify-icon/react";
 import { useAtomValue } from "jotai/index";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -15,6 +19,7 @@ export const Conflict = ({ conflict }: any) => {
   const date = useAtomValue(datetimeAtom);
   const permission = usePermission();
   const [isLoading, setIsLoading] = useState(false);
+  const proposedChangesDetails = useAtomValue(proposedChangedState);
 
   const handleAccept = async (conflictValue: string) => {
     try {
@@ -40,7 +45,9 @@ export const Conflict = ({ conflict }: any) => {
 
       await graphqlClient.refetchQueries({ include: ["GET_PROPOSED_CHANGES_DIFF_TREE"] });
 
-      toast(<Alert type={ALERT_TYPES.SUCCESS} message="Conflict marked as resovled" />);
+      const message = newValue ? "Conflict marked as resovled" : "Conflict marked as not resovled";
+
+      toast(<Alert type={ALERT_TYPES.SUCCESS} message={message} />);
 
       setIsLoading(false);
     } catch (error) {
@@ -49,23 +56,51 @@ export const Conflict = ({ conflict }: any) => {
     }
   };
 
-  const tabs = [
-    {
-      label: "Base",
-      isActive: conflict.selected_branch === "BASE_BRANCH",
-      onClick: () => handleAccept("BASE_BRANCH"),
-    },
-    {
-      label: "Branch",
-      isActive: conflict.selected_branch === "DIFF_BRANCH",
-      onClick: () => handleAccept("DIFF_BRANCH"),
-    },
-  ];
-
   return (
-    <div className="flex items-center justify-end p-2">
-      <span className="mr-1">Accept:</span>
-      <ToggleButtons tabs={tabs} isLoading={isLoading} disabled={!permission.write.allow} />
+    <div className="flex items-center justify-end gap-2 p-2">
+      {isLoading && <LoadingScreen hideText size={16} />}
+
+      <span className="text-xs">Choose the branch to resolve the conflict:</span>
+
+      <div className="flex gap-2">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id={"base"}
+            disabled={isLoading || !permission.write.allow}
+            checked={conflict.selected_branch === "BASE_BRANCH"}
+            onChange={() => handleAccept("BASE_BRANCH")}
+          />
+          <label
+            htmlFor={"base"}
+            className={
+              conflict.selected_branch === "BASE_BRANCH" ? "cursor-default" : "cursor-pointer"
+            }>
+            <Badge variant="green">
+              <Icon icon="mdi:layers-triple" className="mr-1" />
+              {proposedChangesDetails.destination_branch?.value}
+            </Badge>
+          </label>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id={"diff"}
+            disabled={isLoading || !permission.write.allow}
+            checked={conflict.selected_branch === "DIFF_BRANCH"}
+            onChange={() => handleAccept("DIFF_BRANCH")}
+          />
+          <label
+            htmlFor={"diff"}
+            className={
+              conflict.selected_branch === "DIFF_BRANCH" ? "cursor-default" : "cursor-pointer"
+            }>
+            <Badge variant="blue">
+              <Icon icon="mdi:layers-triple" className="mr-1" />
+              {proposedChangesDetails.source_branch?.value}
+            </Badge>
+          </label>
+        </div>
+      </div>
     </div>
   );
 };

frontend/app/src/screens/diff/node-diff/node-attribute.tsx

@@ -3,6 +3,8 @@ import { DiffRow } from "@/screens/diff/node-diff/utils";
 import { DiffAttribute, DiffStatus } from "@/screens/diff/node-diff/types";
 import { DiffThread } from "@/screens/diff/node-diff/thread";
 import { DiffNodeProperty } from "@/screens/diff/node-diff/node-property";
+import { Conflict } from "./conflict";
+import { BadgeConflict } from "../diff-badge";
 
 type DiffNodeAttributeProps = {
   attribute: DiffAttribute;
@@ -25,7 +27,10 @@ export const DiffNodeAttribute = ({
       hasConflicts={attribute.contains_conflict}
       title={
         <div className="flex justify-between items-center pr-2">
-          <div className="py-3 font-semibold">{attribute.name}</div>
+          <div className="flex items-center py-3 gap-2 font-semibold">
+            {attribute.name}
+            {attribute.conflict && <BadgeConflict>Conflict</BadgeConflict>}
+          </div>
 
           {!branchName && attribute.path_identifier && (
             <DiffThread path={attribute.path_identifier} />
@@ -35,6 +40,8 @@ export const DiffNodeAttribute = ({
       left={previousValue}
       right={newValue}>
       <div className="divide-y border-t">
+        {attribute.conflict && <Conflict conflict={attribute.conflict} />}
+
         {attribute.properties.map((property, index: number) => (
           <DiffNodeProperty key={index} property={property} status={status} />
         ))}

frontend/app/src/screens/diff/node-diff/node-property.tsx

@@ -14,7 +14,7 @@ type DiffNodePropertyProps = {
   status: DiffStatus;
 };
 
-const getPreviousValue = (property: DiffProperty) => {
+export const getPreviousValue = (property: DiffProperty) => {
   const previousValue = formatValue(property.previous_value);
   if (previousValue === null) return null;
 
@@ -36,7 +36,7 @@ const getPreviousValue = (property: DiffProperty) => {
   );
 };
 
-const getNewValue = (property: DiffProperty) => {
+export const getNewValue = (property: DiffProperty) => {
   const newValue = formatValue(property.new_value);
   if (newValue === null) return null;
 

frontend/app/src/screens/diff/node-diff/node.tsx

@@ -5,13 +5,14 @@ import { DiffNodeRelationship } from "./node-relationship";
 import { DiffNodeAttribute } from "./node-attribute";
 import { DiffThread } from "./thread";
 import { useLocation, useParams } from "react-router-dom";
-import { DiffBadge, formatValue } from "@/screens/diff/node-diff/utils";
+import { DiffBadge } from "@/screens/diff/node-diff/utils";
 import { useAtomValue } from "jotai";
 import { schemaKindNameState } from "@/state/atoms/schemaKindName.atom";
-import type { DiffNode as DiffNodeType } from "@/screens/diff/node-diff/types";
+import type { DiffNode as DiffNodeType, PropertyType } from "@/screens/diff/node-diff/types";
 import { classNames } from "@/utils/common";
 import { useEffect, useRef } from "react";
 import { Icon } from "@iconify-icon/react";
+import { getNewValue, getPreviousValue } from "./node-property";
 
 type DiffNodeProps = {
   node: DiffNodeType;
@@ -72,10 +73,14 @@ export const DiffNode = ({ sourceBranch, destinationBranch, node }: DiffNodeProp
                   key={index}
                   attribute={attribute}
                   status={node.status}
-                  previousValue={
-                    valueProperty?.previous_value && formatValue(valueProperty?.previous_value)
-                  }
-                  newValue={status !== "REMOVED" && formatValue(valueProperty?.new_value)}
+                  previousValue={getPreviousValue({
+                    ...valueProperty,
+                    conflict: attribute.conflict,
+                  })}
+                  newValue={getNewValue({
+                    ...valueProperty,
+                    conflict: attribute.conflict,
+                  })}
                 />
               );
             })}
@@ -87,25 +92,35 @@ export const DiffNode = ({ sourceBranch, destinationBranch, node }: DiffNodeProp
                 const attribute = {
                   name: relationship.name,
                   contains_conflict: relationship.contains_conflict,
-                  properties: [
-                    {
-                      conflict: element.conflict,
-                      new_value: element.peer_label,
-                      path_identifier: element.path_identifier,
-                      previous_value: element.conflict?.base_branch_label,
-                      property_type: "HAS_VALUE",
-                    },
-                    ...element.properties,
-                  ],
+                  properties: element.properties,
+                  conflict: element.conflict,
+                  path_identifier: element.path_identifier,
+                  uuid: element.uuid,
+                };
+
+                const valueProperty = {
+                  conflict: element.conflict,
+                  new_value: element.peer_label,
+                  path_identifier: element.path_identifier,
+                  previous_value: element.conflict?.base_branch_label,
+                  property_type: "HAS_VALUE" as PropertyType,
+                  last_changed_at: element.last_changed_at,
+                  status: element.status,
                 };
 
                 return (
                   <DiffNodeAttribute
                     key={index}
                     attribute={attribute}
                     status={node.status}
-                    previousValue={element.conflict?.base_branch_label}
-                    newValue={element.peer_label}
+                    previousValue={getPreviousValue({
+                      ...valueProperty,
+                      conflict: attribute.conflict,
+                    })}
+                    newValue={getNewValue({
+                      ...valueProperty,
+                      conflict: attribute.conflict,
+                    })}
                   />
                 );
               }

frontend/app/src/screens/diff/node-diff/types.ts

@@ -8,6 +8,14 @@ export const DIFF_STATUS = {
 
 export type DiffStatus = (typeof DIFF_STATUS)[keyof typeof DIFF_STATUS];
 
+export type PropertyType =
+  | "HAS_VALUE"
+  | "HAS_OWNER"
+  | "HAS_SOURCE"
+  | "IS_VISIBLE"
+  | "IS_PROTECTED"
+  | "IS_RELATED";
+
 export type DiffConflict = {
   base_branch_action: DiffStatus;
   base_branch_changed_at: string;
@@ -23,13 +31,7 @@ export type DiffProperty = {
   conflict: DiffConflict | null;
   new_value: any;
   previous_value: any;
-  property_type:
-    | "HAS_VALUE"
-    | "HAS_OWNER"
-    | "HAS_SOURCE"
-    | "IS_VISIBLE"
-    | "IS_PROTECTED"
-    | "IS_RELATED";
+  property_type: PropertyType;
   path_identifier: string | null;
   status: DiffStatus;
 };