feat: highligh mutual connection negative rates from trusted connections

Author: DeMonkeyCoder

components/profile/MutualConnections.vue

@@ -91,6 +91,7 @@ export default {
       isInbound: true,
       isLoading: true,
       filterKey,
+      defaultFilter: 'AllMutual',
       filters: [
         {
           name: 'Name',
@@ -161,15 +162,18 @@ export default {
         const outgoingRatingToMutualConnection = profileOutboundRatings.find(
           en => en.toBrightId === mutualConnectionId
         )
+        const rating = ratingData ? +ratingData.rating : undefined
+        const incomingRatingToConnection = incomingRatingDataToConnection ? +incomingRatingDataToConnection.rating : undefined
+        const alertDifference = (rating > 0 && incomingRatingToConnection < 0)
         return a.concat({
           incomingConnectionLevel: c.level,
           outboundConnectionLevel: profileOutboundConnections.find(cn => mutualConnectionId === cn.id)?.level || '-',
           ratingData,
-          rating: ratingData ? +ratingData.rating : undefined,
-
-          incomingRatingToConnection: incomingRatingDataToConnection ? +incomingRatingDataToConnection.rating : undefined,
+          rating,
+          incomingRatingToConnection,
           outgoingRatingToMutualConnection: outgoingRatingToMutualConnection ? +outgoingRatingToMutualConnection.rating : undefined,
-          ...mutualConnectionFromOurConnectionsList
+          ...mutualConnectionFromOurConnectionsList,
+          alertDifference
         })
       }, [])
       this.setInitialFilter()

components/users/MutualConnection.vue

@@ -5,9 +5,11 @@
                     show-aura-verification></user-item-info>
     <template v-if="isInbound">
       <div class="user-v2__numbers">
-        <p :data-testid="`mutual-connection--${id}-incoming-level`" class="user-v2__num user-v2__num-outbound">
+        <p :data-testid="`mutual-connection--${id}-incoming-level`" class="user-v2__num user-v2__num-outbound"
+           :class="{'user-v2__num-alert-rating-difference': user.alertDifference}">
           {{ user.incomingConnectionLevel }}</p>
         <p :data-testid="`mutual-connection--${id}-incoming-rating`" class="user-v2__num user-v2__num-outbound"
+           :class="{'user-v2__num-alert-rating-difference': user.alertDifference}"
            style="margin: 0px 10px;">
           ({{ user.incomingRatingToConnection !== undefined ? user.incomingRatingToConnection : '-' }})</p>
       </div>

cypress/utils/mutual-connections.ts

@@ -32,8 +32,8 @@ const toIncomingConnectionFormat = (
 })
 
 export const connectionIncomingConnections: BrightIdConnection[] = [
-  toIncomingConnectionFormat(ratedConnection, 'suspicious'),
   toIncomingConnectionFormat(ratedConnection2, 'already known'),
+  toIncomingConnectionFormat(ratedConnection, 'suspicious'),
   toIncomingConnectionFormat(ratedConnection3, 'just met'),
   toIncomingConnectionFormat(ratedConnectionNegative, 'suspicious'),
   toIncomingConnectionFormat(ratedConnectionWithoutEnergy, 'recovery'),

mixins/filters.js

@@ -222,6 +222,13 @@ export default {
       }
       this.users = onSearch(value, usersBase)
     },
+    getAllMutual() {
+      this.filteredUsers = [...this.startUsers].sort((a, _b) =>
+        a.alertDifference ? -1 : 1
+      )
+
+      return this.filteredUsers
+    },
     getAll() {
       this.filteredUsers = this.startUsers
 

styles/components/user-v2.scss

@@ -24,6 +24,12 @@
   font-size: 14px;
   line-height: 100%;
   letter-spacing: -0.03em;
+
+  &-alert-rating-difference {
+    color: var(--red) !important;
+    font-size: 16px;
+    font-weight: bold;
+  }
 }
 
 .user-v2__num-inbound {