Revamp of (top) toolbar - Reports [SCI-8370]

app/assets/javascripts/reports/reports_datatable.js

@@ -353,6 +353,25 @@
     generateReportRequest('generate-pdf-path', reportId);
   });
 
+  // Search container logic
+  const $searchIcon = $('.search-icon');
+  const $searchInput = $('.report-search');
+
+  $searchIcon.click(function() {
+    $searchIcon.addClass('hidden');
+    $searchInput.removeClass('hidden').addClass('search-input-field');
+  });
+
+  $(document).click(function(event) {
+    const isClickInside = $searchInput.is(event.target) || $searchIcon.is(event.target);
+    if (!isClickInside) {
+      if ($searchInput.val().trim() === '') {
+        $searchIcon.removeClass('hidden');
+        $searchInput.addClass('hidden').removeClass('search-input-field');
+      }
+    }
+  });
+
   $('#show_report_preview').click();
 
   initDatatable();

app/assets/stylesheets/report_index.scss

@@ -19,12 +19,48 @@
     }
   }
 
+  .toolbar-row {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .search-report-container {
-    display: inline-block;
     float: right;
     margin-right: 2em;
     width: 200px;
   }
+
+  .sci-input-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 200px;
+  }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .search-icon {
+    cursor: pointer;
+  }
+
+  .report-search {
+    position: absolute;
+    top: 0;
+    left: auto;
+    right: 100%;
+    width: 100%;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .search-input-field {
+    position: relative;
+    left: 5px;
+  }
 }
 
 .reports-datatable {

app/views/reports/_index_toolbar.html.erb

@@ -46,8 +46,8 @@
       <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
     <% end %>
   </div>
-  <div class="sci-input-container left-icon search-report-container">
-    <input type="text" class="sci-input-field report-search" placeholder="<%= t("projects.reports.index.search_reports") %>"></input>
-    <i class="fas fa-search"></i>
+  <div class="sci-input-container search-report-container flex-row-reverse">
+    <i class="fas fa-search search-icon"></i>
+    <input type="text" class="sci-input-field report-search hidden" placeholder="<%= t("projects.reports.index.search_reports") %>">
   </div>
 <% end %>