[ui] Improve merge recommendations

releases/unreleased/improved-ui-for-merge-recommendations.yml

@@ -0,0 +1,10 @@
+---
+title: Improved UI for merge recommendations
+category: added
+author: Eva Millán <[email protected]>
+issue: null
+notes: >
+  The user interface now shows more than one merge
+  recommendation at a time, and recommendations for
+  an individual are now grouped so they can be managed
+  in batches.

sortinghat/core/schema.py

@@ -2129,7 +2129,17 @@ def resolve_recommended_merge(self, info, filters=None, page=1,
         else:
             query = MergeRecommendation.objects.filter(applied=None)
 
-        query = query.order_by('created_at')
+        query = query.annotate(individual_matches_count=Count(
+            'individual1__match_recommendation_individual_1',
+            filter=Q(individual1__match_recommendation_individual_1__applied=None),
+            distinct=True
+        ) + Count(
+            'individual1__match_recommendation_individual_2',
+            filter=Q(individual1__match_recommendation_individual_2__applied=None),
+            distinct=True
+        ))
+
+        query = query.order_by('-individual_matches_count', 'individual1__mk', 'created_at')
 
         return RecommendedMergePaginatedType.create_paginated_result(query,
                                                                      page,

ui/src/apollo/queries.js

@@ -205,10 +205,53 @@ const GET_PAGINATED_RECOMMENDED_MERGE = gql`
       entities {
         id
         individual1 {
-          ...individual
-        }
-        individual2 {
-          ...individual
+          mk
+          isLocked
+          profile {
+            name
+            email
+            isBot
+          }
+          identities {
+            name
+            source
+            email
+            uuid
+            username
+          }
+          enrollments {
+            start
+            end
+            group {
+              name
+            }
+          }
+          matchRecommendationSet {
+            id
+            individual {
+              mk
+              isLocked
+              profile {
+                name
+                email
+                isBot
+              }
+              identities {
+                name
+                source
+                email
+                uuid
+                username
+              }
+              enrollments {
+                start
+                end
+                group {
+                  name
+                }
+              }
+            }
+          }
         }
       }
       pageInfo {
@@ -220,7 +263,6 @@ const GET_PAGINATED_RECOMMENDED_MERGE = gql`
       }
     }
   }
-  ${FULL_INDIVIDUAL}
 `;
 
 const GET_IMPORTERS = gql`

ui/src/components/IndividualCard.stories.js

@@ -21,6 +21,7 @@ const individualCardTemplate = `
     :usernames="usernames"
     :emails="emails"
     :detailed="detailed"
+    :recommendation="recommendation"
     />`;
 
 export const Default = () => ({
@@ -805,3 +806,55 @@ export const Detailed = () => ({
     },
   },
 });
+
+export const Recommendation = () => ({
+  components: { IndividualCard },
+  template: individualCardTemplate,
+  props: {
+    name: {
+      default: "Tom Marvolo Riddle",
+    },
+    sources: {
+      default: () => [],
+    },
+    isLocked: {
+      default: false,
+    },
+    uuid: {
+      default: "10f546",
+    },
+    email: {
+      default: "[email protected]",
+    },
+    identities: {
+      default: () => [],
+    },
+    enrollments: {
+      default: () => [],
+    },
+    isHighlighted: {
+      default: false,
+    },
+    closable: {
+      default: false,
+    },
+    selectable: {
+      default: false,
+    },
+    isSelected: {
+      default: false,
+    },
+    usernames: {
+      default: () => ['{"mdi-gitlab":"triddle"}', '{"mdi-github":"voldemort"}'],
+    },
+    emails: {
+      default: () => ["[email protected]", "[email protected]"],
+    },
+    detailed: {
+      default: true,
+    },
+    recommendation: {
+      default: true,
+    },
+  },
+});

ui/src/components/IndividualCard.vue

@@ -4,9 +4,11 @@
     :class="{
       locked: isLocked,
       dropzone: isDragging,
-      selected: isSelected,
+      selected: isSelected && !recommendation,
       highlighted: isHighlighted,
       disabled: !selectable,
+      'selected--merge': state.merge,
+      'selected--dismiss': state.dismiss,
     }"
     :ripple="selectable"
     v-bind="$attrs"
@@ -103,6 +105,29 @@
         @mousedown.stop
       />
     </template>
+    <template v-if="recommendation" v-slot:actions>
+      <v-spacer />
+      <v-btn
+        :color="state.dismiss ? 'red-darken-2' : 'default'"
+        class="v-chip v-chip--label text-caption"
+        variant="tonal"
+        size="small"
+        @click="handleDismiss"
+      >
+        <v-icon start>mdi-close</v-icon>
+        Keep separate
+      </v-btn>
+      <v-btn
+        :color="state.merge ? 'light-green-darken-2' : 'default'"
+        class="v-chip v-chip--label text-caption"
+        variant="tonal"
+        size="small"
+        @click="handleMerge"
+      >
+        <v-icon start>mdi-call-merge</v-icon>
+        Merge
+      </v-btn>
+    </template>
     <slot />
   </v-card>
 </template>
@@ -157,7 +182,8 @@ export default {
     },
     isLocked: {
       type: Boolean,
-      required: true,
+      required: false,
+      default: false,
     },
     closable: {
       type: Boolean,
@@ -180,10 +206,19 @@ export default {
       required: false,
       default: false,
     },
+    recommendation: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       isDragging: false,
+      state: {
+        merge: false,
+        dismiss: false,
+      },
     };
   },
   computed: {
@@ -252,6 +287,30 @@ export default {
         this.isDragging = false;
       }
     },
+    handleMerge() {
+      if (this.state.merge) {
+        this.state.merge = false;
+        this.$emit("apply", null);
+      } else {
+        this.state.merge = true;
+        this.$emit("apply", true);
+        if (this.state.dismiss) {
+          this.state.dismiss = false;
+        }
+      }
+    },
+    handleDismiss() {
+      if (this.state.dismiss) {
+        this.state.dismiss = false;
+        this.$emit("apply", null);
+      } else {
+        this.state.dismiss = true;
+        this.$emit("apply", false);
+        if (this.state.merge) {
+          this.state.merge = false;
+        }
+      }
+    },
   },
 };
 </script>
@@ -300,4 +359,16 @@ export default {
     opacity: 0.7;
   }
 }
+
+.v-card.selected--merge {
+  background-color: #f1f8e9;
+}
+
+.v-card.selected--dismiss {
+  background-color: #ffebee;
+}
+
+.v-card-actions {
+  padding-top: 0;
+}
 </style>

ui/src/components/IndividualsTable.stories.js

@@ -6,6 +6,7 @@ export default {
 };
 
 const IndividualsTableTemplate = `
+<v-layout>
   <individuals-table
     :fetch-page="queryIndividuals.bind(this)"
     :delete-item="deleteIndividual"
@@ -26,6 +27,7 @@ const IndividualsTableTemplate = `
     :is-expandable="isExpandable"
     :recommend-matches="recommendMatches"
   />
+</v-layout>
 `;
 
 const query = [