Add warning notification for inventory item relationships [SCI-9831] (#6786)

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>

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;
       }

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);
           });

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