[ui] Remove merge recommendations

Adds a button next to the merge recommendations in the
individual's table to remove them.

Signed-off-by: Eva Millán <evamillan@bitergia.com>

releases/unreleased/remove-merge-recommendations.yml

@@ -0,0 +1,9 @@
+---
+title: Remove merge recommendations
+category: added
+author: Eva Millán <evamillan@bitergia.com>
+issue: 883
+notes: >
+  Recommendations can now be deleted from the database
+  and not just dismissed. This is useful in case there
+  are too many recommendations to handle manually. 

ui/src/apollo/mutations.js

@@ -442,6 +442,14 @@ const ADD_LINKEDIN_PROFILE = gql`
   ${FULL_INDIVIDUAL}
 `;
 
+const DELETE_MERGE_RECOMMENDATIONS = gql`
+  mutation deleteMergeRecommendations {
+    deleteMergeRecommendations {
+      deleted
+    }
+  }
+`;
+
 const tokenAuth = (apollo, username, password) => {
   const response = apollo.mutate({
     mutation: TOKEN_AUTH,
@@ -854,6 +862,12 @@ const addLinkedinProfile = (apollo, uuid, username) => {
   });
 };
 
+const deleteMergeRecommendations = (apollo) => {
+  return apollo.mutate({
+    mutation: DELETE_MERGE_RECOMMENDATIONS,
+  });
+};
+
 export {
   tokenAuth,
   lockIndividual,
@@ -888,4 +902,5 @@ export {
   addAlias,
   deleteAlias,
   addLinkedinProfile,
+  deleteMergeRecommendations,
 };

ui/src/components/IndividualsTable.stories.js

@@ -412,6 +412,7 @@ export const Default = () => ({
       };
     },
     manageRecommendation: () => {},
+    deleteMergeRecommendations: () => {},
   }),
   data: () => ({
     query: query,
@@ -478,6 +479,7 @@ export const Expandable = () => ({
       };
     },
     manageRecommendation: () => {},
+    deleteMergeRecommendations: () => {},
   }),
   data: () => ({
     query: query,
@@ -535,6 +537,7 @@ export const Outlined = () => ({
       };
     },
     manageRecommendation: () => {},
+    deleteMergeRecommendations: () => {},
   }),
   data: () => ({
     query: query,
@@ -582,6 +585,7 @@ export const HiddenHeader = () => ({
     getRecommendations: () => {},
     getRecommendationsCount: () => {},
     manageRecommendation: () => {},
+    deleteMergeRecommendations: () => {},
   }),
   data: () => ({
     query: query,

ui/src/components/Recommendation.stories.js

@@ -188,6 +188,7 @@ export const Default = () => ({
       getRecommendationsCount: this.getRecommendations,
       getRecommendations: this.getRecommendations,
       manageRecommendation: this.manageRecommendation,
+      deleteMergeRecommendations: () => {},
     };
   },
 });
@@ -208,12 +209,16 @@ export const CustomModalActivator = () => ({
       this.index = +!this.index;
       return true;
     },
+    deleteRecommendations() {
+      return true;
+    },
   },
   provide() {
     return {
       getRecommendationsCount: this.getRecommendations,
       getRecommendations: this.getRecommendations,
       manageRecommendation: this.manageRecommendation,
+      deleteMergeRecommendations: () => {},
     };
   },
 });

ui/src/components/Recommendations.vue

@@ -1,17 +1,68 @@
 <template>
   <v-dialog v-model="isOpen" width="700" persistent>
-    <template v-slot:activator="{ props }">
-      <v-btn
+    <template v-slot:activator="{ props: dialog }">
+      <v-btn-group
         v-show="count !== 0"
-        v-bind="props"
         class="mr-4"
-        height="34"
+        density="comfortable"
         variant="outlined"
-        size="small"
+        divided
       >
-        <v-icon size="small" start>mdi-lightbulb-on-outline</v-icon>
-        {{ count }} recommendation{{ count > 1 ? "s" : "" }}
-      </v-btn>
+        <v-btn v-bind="dialog" height="34" variant="outlined" size="small">
+          <v-icon size="small" start>mdi-lightbulb-on-outline</v-icon>
+          Recommendations
+          <v-chip class="ml-1" size="x-small">{{ count }}</v-chip>
+        </v-btn>
+        <v-menu v-model="menu" location="bottom">
+          <template v-slot:activator="{ props: menu }">
+            <v-btn
+              size="small"
+              height="34"
+              icon="mdi-menu-down"
+              aria-label="Open menu"
+              v-bind="menu"
+            />
+          </template>
+          <v-list density="comfortable" nav>
+            <v-list-item v-bind="dialog">
+              <v-list-item-title>Review recommendations</v-list-item-title>
+            </v-list-item>
+            <v-dialog
+              activator="parent"
+              max-width="500"
+              aria-label="Delete recommendations confirmation"
+            >
+              <template v-slot:activator="{ props: activator }">
+                <v-list-item v-bind="activator">
+                  <v-list-item-title>
+                    Delete all recommendations
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+              <template v-slot:default="{ isActive }">
+                <v-card
+                  title="Delete all recommendations?"
+                  :text="errorMessage"
+                >
+                  <template v-slot:actions>
+                    <v-btn
+                      class="ml-auto"
+                      text="Cancel"
+                      @click="isActive.value = false"
+                    ></v-btn>
+                    <v-btn
+                      color="primary"
+                      text="Delete"
+                      variant="flat"
+                      @click="deleteRecommendations(isActive)"
+                    ></v-btn>
+                  </template>
+                </v-card>
+              </template>
+            </v-dialog>
+          </v-list>
+        </v-menu>
+      </v-btn-group>
     </template>
 
     <v-card v-if="currentItem" class="section">
@@ -98,13 +149,15 @@ export default {
     "getRecommendations",
     "getRecommendationsCount",
     "manageRecommendation",
+    "deleteMergeRecommendations",
   ],
   data() {
     return {
       count: 0,
       currentItem: null,
       isOpen: false,
       errorMessage: null,
+      menu: null,
     };
   },
   methods: {
@@ -163,6 +216,18 @@ export default {
       this.$emit("updateTable");
       this.$emit("updateWorkspace");
     },
+    async deleteRecommendations(isActive) {
+      try {
+        await this.deleteMergeRecommendations();
+        this.count = 0;
+        this.menu = false;
+        this.errorMessage = null;
+        isActive.value = false;
+      } catch (error) {
+        this.$logger.error(`Error removing recommendations: ${error}`);
+        this.errorMessage = this.$getErrorMessage(error);
+      }
+    },
   },
   watch: {
     isOpen(value) {
@@ -183,4 +248,8 @@ export default {
 .col {
   max-width: 290px;
 }
+
+.v-btn-group--density-comfortable.v-btn-group {
+  height: 34px;
+}
 </style>

ui/src/components/WorkSpace.stories.js

@@ -274,6 +274,7 @@ export const DragAndDrop = () => ({
       };
     },
     manageRecommendation: () => {},
+    deleteMergeRecommendations: () => {},
   }),
   data: () => ({
     individuals: [],

ui/src/views/Dashboard.vue

@@ -114,6 +114,7 @@ import {
   mergeOrganizations,
   addAlias,
   deleteAlias,
+  deleteMergeRecommendations,
 } from "../apollo/mutations";
 import IndividualsTable from "../components/IndividualsTable";
 import OrganizationsTable from "../components/OrganizationsTable";
@@ -369,6 +370,10 @@ export default {
       const response = await deleteAlias(this.$apollo, alias);
       return response;
     },
+    async deleteRecommendations() {
+      const response = await deleteMergeRecommendations(this.$apollo);
+      return response;
+    },
   },
   async mounted() {
     if (this.workspace && this.workspace.length > 0) {
@@ -386,6 +391,7 @@ export default {
       getRecommendations: this.getRecommendations,
       getRecommendationsCount: this.getRecommendationsCount,
       manageRecommendation: this.manageRecommendation,
+      deleteMergeRecommendations: this.deleteRecommendations,
     };
   },
 };