From a9cec25eeedf3dda2688597dd0a9142d1aac01ec Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Mon, 11 Dec 2023 17:05:54 +0100
Subject: [PATCH] Add warning notification for inventory item relationships
 [SCI-9831] (#6786)

---
 app/assets/images/icon_small/info.svg         |  4 +++
 .../RepositoryItemRelationshipsModal.vue      | 29 +++++++++++++++++--
 .../RepositoryItemSidebar.vue                 | 10 ++++++-
 app/views/repository_rows/show.json.jbuilder  |  2 ++
 4 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/images/icon_small/info.svg

diff --git a/app/assets/images/icon_small/info.svg b/app/assets/images/icon_small/info.svg
new file mode 100644
index 000000000..420f2383a
--- /dev/null
+++ b/app/assets/images/icon_small/info.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16.5H13V11H12V16.5ZM12.5034 21C11.2588 21 10.0887 20.7638 8.9931 20.2915C7.89748 19.8192 6.94444 19.1782 6.13397 18.3685C5.32352 17.5588 4.68192 16.6066 4.20915 15.512C3.73638 14.4174 3.5 13.2479 3.5 12.0033C3.5 10.7588 3.73616 9.58872 4.20848 8.4931C4.68081 7.39748 5.32183 6.44444 6.13153 5.63398C6.94123 4.82352 7.89337 4.18192 8.98795 3.70915C10.0826 3.23638 11.2521 3 12.4966 3C13.7412 3 14.9113 3.23616 16.0069 3.70848C17.1025 4.18081 18.0556 4.82183 18.866 5.63153C19.6765 6.44123 20.3181 7.39337 20.7908 8.48795C21.2636 9.58255 21.5 10.7521 21.5 11.9967C21.5 13.2412 21.2638 14.4113 20.7915 15.5069C20.3192 16.6025 19.6782 17.5556 18.8685 18.366C18.0588 19.1765 17.1066 19.8181 16.012 20.2908C14.9174 20.7636 13.7479 21 12.5034 21ZM12.5 20C14.7333 20 16.625 19.225 18.175 17.675C19.725 16.125 20.5 14.2333 20.5 12C20.5 9.76667 19.725 7.875 18.175 6.325C16.625 4.775 14.7333 4 12.5 4C10.2667 4 8.375 4.775 6.825 6.325C5.275 7.875 4.5 9.76667 4.5 12C4.5 14.2333 5.275 16.125 6.825 17.675C8.375 19.225 10.2667 20 12.5 20Z" fill="#E9A845"/>
+<path d="M12.9385 9.05385C12.8205 9.1718 12.6744 9.23077 12.5 9.23077C12.3257 9.23077 12.1795 9.1718 12.0615 9.05385C11.9436 8.9359 11.8846 8.78974 11.8846 8.61537C11.8846 8.44102 11.9436 8.29487 12.0615 8.17692C12.1795 8.05897 12.3257 8 12.5 8C12.6744 8 12.8205 8.05897 12.9385 8.17692C13.0564 8.29487 13.1154 8.44102 13.1154 8.61537C13.1154 8.78974 13.0564 8.9359 12.9385 9.05385Z" fill="#E9A845"/>
+</svg>
diff --git a/app/javascript/vue/item_relationships/RepositoryItemRelationshipsModal.vue b/app/javascript/vue/item_relationships/RepositoryItemRelationshipsModal.vue
index 3cfc3337c..a67501dbf 100644
--- a/app/javascript/vue/item_relationships/RepositoryItemRelationshipsModal.vue
+++ b/app/javascript/vue/item_relationships/RepositoryItemRelationshipsModal.vue
@@ -2,7 +2,7 @@
   <div ref="repositoryItemRelationshipsModal" @keydown.esc="close" id="repositoryItemRelationshipsModal" tabindex="-1" role="dialog"
     class="modal ">
     <div class="modal-dialog modal-sm" role="document">
-      <div class="modal-content w-[400px] h-[498px] m-auto">
+      <div class="modal-content w-[400px] m-auto">
 
         <!-- header -->
         <div class="modal-header h-[76px] flex !flex-col gap-[6px]">
@@ -24,7 +24,7 @@
 
         </div>
 
-        <div class="modal-body flex flex-col gap-6">
+        <div class="modal-body flex flex-col gap-6" :class="{ '!pb-3': notification }">
           <!-- inventory -->
           <div class="flex flex-col gap-[7px]">
             <div class="h-5 whitespace-nowrap overflow-auto">
@@ -88,6 +88,18 @@
           </div>
         </div>
 
+        <!-- Notification -->
+        <template v-if="notification">
+          <hr class="bg-sn-light-grey mb-6 mt-3" />
+          <div class="w-full mb-6">
+            <div class="flex align-center gap-2.5">
+              <img class="w-6 h-6" :src="notificationIconPath" alt="warning" />
+              <span class="my-auto">{{ notification.message }}</span>
+            </div>
+            <div v-html="notification.support_html" class="pl-2.5"></div>
+          </div>
+        </template>
+
         <!-- footer -->
         <div class="modal-footer">
           <div class="flex justify-end gap-4">
@@ -137,6 +149,8 @@ export default {
       nextInventoriesPage: 1,
       nextItemsPage: 1,
       itemParams: [],
+      notification: null,
+      notificationIconPath: null,
     };
   },
   computed: {
@@ -178,12 +192,21 @@ export default {
       this.itemOptions = currentOptions.concat(result.data.map(({ id, name }) => ({ id, label: name })));
     },
     show(params = {}) {
-      const { relation, optionUrls, addRelationCallback } = params;
+      const {
+        relation,
+        optionUrls,
+        addRelationCallback,
+        notificationIconPath,
+        notification,
+      } = params;
       $(this.$refs.repositoryItemRelationshipsModal).modal('show');
       this.inventoriesUrl = optionUrls.inventories_url;
       this.inventoryItemsUrl = optionUrls.inventory_items_url;
       this.createConnectionUrl = optionUrls.create_url;
       this.addRelationCallback = addRelationCallback;
+      this.notificationIconPath = notificationIconPath;
+      this.notification = notification;
+
       if (['parent', 'child'].includes(relation)) {
         this.selectedRelationshipValue = relation;
       }
diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 5b1857eba..b3d5f22b7 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -374,6 +374,7 @@ export default {
       myModuleId: null,
       inRepository: false,
       icons: null,
+      notification: null,
       relationshipDetailsState: {},
       initialSectionId: null,
     };
@@ -427,7 +428,13 @@ export default {
         }
       };
       window.repositoryItemRelationshipsModal.show(
-        { relation, addRelationCallback, optionUrls: { ...this.actions.row_connections } },
+        {
+          relation,
+          addRelationCallback,
+          optionUrls: { ...this.actions.row_connections },
+          notificationIconPath: this.icons.notification_path,
+          notification: this.notification,
+        },
       );
     },
     handleOutsideClick(event) {
@@ -497,6 +504,7 @@ export default {
           this.actions = result.actions;
           this.dataLoading = false;
           this.icons = result.icons;
+          this.notification = result.notification;
           this.$nextTick(() => {
             this.generateBarCode(this.defaultColumns.code);
           });
diff --git a/app/views/repository_rows/show.json.jbuilder b/app/views/repository_rows/show.json.jbuilder
index 35e12e1ab..04660dd11 100644
--- a/app/views/repository_rows/show.json.jbuilder
+++ b/app/views/repository_rows/show.json.jbuilder
@@ -5,6 +5,7 @@ json.repository do
   json.id @repository.id
   json.name @repository.name
 end
+json.notification @notification
 
 json.update_path update_cell_repository_repository_row_path(@repository, @repository_row)
 
@@ -121,4 +122,5 @@ end
 json.icons do
   json.delimiter_path asset_path 'icon_small/navigate_next.svg'
   json.unlink_path asset_path 'icon_small/unlink.svg'
+  json.notification_path asset_path 'icon_small/info.svg'
 end