From c21152b2e23bb0046287615087ccfedb0d28333c Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Wed, 23 Nov 2022 11:49:53 +0100
Subject: [PATCH] Add protocol ID to linked protocol dropdown [SCI-7204]

---
 .../my_modules/protocols/index.scss           | 24 +++++++++++++++++--
 .../protocols/_protocol_status_bar.html.erb   |  8 +++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 86117fea7..e013248fe 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -93,7 +93,7 @@
         .repositories-dropdown-menu {
           max-height: 250px;
           overflow: auto;
-          
+
           .repository {
             @include font-button;
             cursor: pointer;
@@ -430,9 +430,29 @@
     max-width: 100vw;
     width: 650px;
 
+    .dropdown-header,
+    .dropdown-body {
+      padding: 10px 32px;
+    }
+
+    .dropdown-header {
+      background: $color-white;
+      border-bottom: $border-tertiary;
+
+      .protocol-name {
+        color: $color-black;
+        margin-top: 0;
+      }
+
+      .protocol-header-info {
+        color: $color-black;
+        font-size: .875em;
+        font-weight: 400;
+      }
+    }
+
     .dropdown-body {
       border-bottom: $border-tertiary;
-      padding: 10px 32px;
 
       .info-line {
         align-items: center;
diff --git a/app/views/my_modules/protocols/_protocol_status_bar.html.erb b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
index 15f3cf04e..6515860b2 100644
--- a/app/views/my_modules/protocols/_protocol_status_bar.html.erb
+++ b/app/views/my_modules/protocols/_protocol_status_bar.html.erb
@@ -15,6 +15,14 @@
     <i class="fas fa-info-circle"></i>
   </a>
   <div class="dropdown-menu status-info-dropdown" aria-labelledby="my-module-protocol-info-button">
+    <div class="dropdown-header">
+      <h2 class="protocol-name">
+        <%= @protocol.parent&.name || @protocol.name %>
+      </h2>
+      <div class="protocol-header-info">
+        <span>ID: <%= @protocol.code %></span>
+      </div>
+    </div>
     <div class="dropdown-body">
       <div class="info-line">
         <div class="description"><%= t("my_modules.protocols.protocol_status_bar.protocol_created") %></div>