Implement general protocol repository toolbar [SCI-7557] (#4698)

* Implement general protocol repository toolbar [SCI-7557]

* Move protocolsio page [SCI-7557]

app/assets/javascripts/protocols/index.js

@@ -119,7 +119,9 @@ function initProtocolsTable() {
       dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
 
       let actionToolBar = $($('#protocolActionToolbar').html());
+      let generalToolbar = $($('#protocolGeneralToolbar').html());
       $('.protocols-container .actions-toolbar').html(actionToolBar);
+      $('.protocols-container .toolbar').html(generalToolbar);
     },
     stateLoadCallback: function (settings) {
       // Load the table state for the current team

app/assets/stylesheets/protocol_management.scss

@@ -62,14 +62,14 @@
   }
 }
 
-.tab-pane.external_protocols {
+.tab-pane.protocolsio {
   padding-bottom: 0;
 }
 
-.external-protocols-tab {
+.protocolsio-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
   position: relative;
 
   .ps__rail-y {
@@ -366,7 +366,7 @@
 }
 
 @media (max-width: 900px) {
-  .external-protocols-tab {
+  .protocolsio-container {
     .header {
       .protocol-sort {
         padding-left: 0;

app/assets/stylesheets/protocols/index.scss

@@ -1,4 +1,6 @@
 // scss-lint:disable IdSelector
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
 
 .protocols-index {
   .protocols-datatable {
@@ -13,6 +15,27 @@
       width: 100%;
     }
 
+    .toolbar {
+      display: flex;
+
+      .left-general-toolbar {
+        align-items: center;
+        column-gap: .5em;
+        display: flex;
+      }
+
+      .right-general-toolbar {
+        align-items: center;
+        display: flex;
+        margin-left: auto;
+        margin-right: .5em;
+      }
+
+      .dropdown-menu {
+        min-width: 150px;
+      }
+    }
+
     .dataTables_scroll {
       display: flex;
       flex-direction: column;

app/controllers/protocols_controller.rb

@@ -23,9 +23,10 @@ class ProtocolsController < ApplicationController
     linked_children_datatable
     permissions
   )
-  before_action :switch_team_with_param, only: :index
+  before_action :switch_team_with_param, only: %i(index protocolsio_index)
   before_action :check_view_all_permissions, only: %i(
     index
+    protocolsio_index
     datatable
   )
   # For update_from_parent and update_from_parent_modal we don't need to check
@@ -595,6 +596,8 @@ class ProtocolsController < ApplicationController
     end
   end
 
+  def protocolsio_index; end
+
   def import
     protocol = nil
     respond_to do |format|

app/views/protocols/index.html.erb

@@ -18,77 +18,6 @@
       </div>
     </div>
     <div class="protocols-container">
-      <!-- Refactor with new toolbar
-      <div class="sci-btn-group" role="group">
-        <%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
-          <span class="fas fa-plus"></span>
-          <span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
-        <% end %>
-        <button class="btn btn-light disabled hidden" data-action="clone">
-          <span class="fas fa-copy"></span>
-          <span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
-        </button>
-        <% if @type == :public %>
-          <button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
-            <span class="fas fa-eye-slash"></span>
-            <span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
-          </button>
-        <% elsif @type == :private %>
-          <button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
-            <span class="fas fa-eye"></span>
-            <span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
-          </button>
-        <% end %>
-      </div>
-      <div id="import-export-protocols" class="sci-btn-group" role="group">
-        <button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false">
-          <span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span>
-        </button>
-        <% if can_create_protocols_in_repository?(@current_team) %>
-          <ul class="dropdown-menu">
-            <li>
-              <a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
-                <span class="fas fa-paperclip"></span>
-                <span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
-                <input type="file" value="" accept=".eln" data-role="import-file-input"
-                data-team-id="<%= @current_team.id %>"
-                data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
-                <%= 'disabled="disabled"' unless can_create_protocols_in_repository?(@current_team) %>>
-              </a>
-            </li>
-            <li>
-            <%= link_to "#modal-import-json-protocol", data: { toggle: 'modal' } do %>
-              <span class="fas fa-paperclip"></span>
-              <span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
-            <% end %>
-            </li>
-          </ul>
-        <% end %>
-        <button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
-          <span class="fas fa-upload"></span>
-          <span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
-        </button>
-      </div>
-
-      <div class="sci-btn-group" role="group">
-        <button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
-          <span class="fas fa-archive"></span>
-          <span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
-        </button>
-      </div>
-      <div class="protocols-description">
-        <%= t("protocols.index.archive.description") %>
-      </div>
-      <div class="sci-btn-group" role="group">
-        <button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
-          <span class="fas fa-sync-alt"></span>
-          <span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
-        </button>
-      </div>
-      -->
       <%= render partial: "protocols/index/protocols_datatable.html.erb" %>
     </div>
   </div>
@@ -96,6 +25,7 @@
 
 <div id="protocolsio-preview-modal-target"></div>
 <%= render partial: "protocols/import_export/import_json_protocol_modal.html.erb" %>
+<%= render partial: "protocols/index/general_toolbar.html.erb" %>
 <%= render partial: "protocols/index/action_toolbar.html.erb" %>
 <%= render partial: "protocols/index/make_private_results_modal.html.erb" %>
 <%= render partial: "protocols/index/publish_results_modal.html.erb" %>
@@ -104,7 +34,6 @@
 <%= render partial: "protocols/index/restore_results_modal.html.erb" %>
 <%= render partial: "protocols/index/import_results_modal.html.erb" %>
 <%= render partial: "protocols/index/linked_children_modal.html.erb" %>
-<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
 
 <%= render partial: "protocols/import_export/import_elements.html.erb" %>
 
@@ -116,6 +45,5 @@
 <%= stylesheet_link_tag 'datatables' %>
 <%= javascript_include_tag "assets/wopi/create_wopi_file" %>
 <%= javascript_include_tag "protocols/index" %>
-<%= javascript_include_tag "protocols/steps" %>
 <%= javascript_pack_tag 'pdfjs/pdf_js' %>
 <%= stylesheet_pack_tag 'pdfjs/pdf_js_styles' %>

app/views/protocols/index/_general_toolbar.html.erb

@@ -0,0 +1,42 @@
+<template id="protocolGeneralToolbar">
+  <div class="left-general-toolbar">
+    <%= button_to protocols_path(type: @type), disabled: !can_create_protocols_in_repository?(@current_team), class: 'btn btn-primary' do %>
+      <span class="fas fa-plus"></span>
+      <span class="hidden-xs"><%= t("protocols.index.create_new") %></span>
+    <% end %>
+
+    <div id="protocol-import-group" class="sci-btn-group" role="group">
+      <button class="btn btn-light btn-open-file <%= 'disabled' unless can_create_protocols_in_repository?(@current_team) %>"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false">
+        <span class="fas fa-download"></span><span class="hidden-xs"><%= t("protocols.index.import") %></span>
+      </button>
+      <% if can_create_protocols_in_repository?(@current_team) %>
+        <ul class="dropdown-menu">
+          <li>
+            <a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
+              <span><%= t("protocols.index.import_alt") %></span>
+              <input type="file" value="" accept=".eln" data-role="import-file-input"
+              data-team-id="<%= @current_team.id %>"
+              data-type="<%= @type %>" data-import-url="<%= import_protocols_path %>"
+              <%= 'disabled="disabled"' unless false %>>
+            </a>
+          </li>
+          <li>
+            <%= link_to t("protocols.index.import_protocols_io"), protocolsio_protocols_path() %>
+          </li>
+        </ul>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="right-general-toolbar">
+    <%= render layout: 'shared/filter_dropdown', locals: {
+      container_class: 'protocols-filters',
+      dropdown_title: t("filters_modal.title"),
+      search_field_history_key: 'protocol_filters_per_team'
+    } do %>
+    <% end %>
+  </div>
+</template>

app/views/protocols/protocolsio_index.html.erb

@@ -1,4 +1,4 @@
-<div class='external-protocols-tab'>
+<div class='protocolsio-container'>
   <%= form_tag team_list_external_protocol_path(@current_team.id),
     method: :get,
     class: 'protocols-search-bar',
@@ -9,16 +9,16 @@
           <%= image_tag 'external_protocols/protocolsio_logo.png',
             class: 'protocolsio-logo' %>
           <a class='protocolsio-title' href='<%= Constants::PROTOCOLS_IO_URL %>' target='_blank'>
-            <%= t('protocols.index.external_protocols.protocolsio_title') %></a>
+            <%= t('protocols.index.protocolsio.protocolsio_title') %></a>
           <%= hidden_field_tag 'protocol_source', 'protocolsio/v3' %>
           <%= hidden_field_tag 'page_id', 1, id: 'page-id' %>
         </div>
 
         <div class='input-group'>
           <input class='form-control'
-          type='text'
+                 type='text'
-          name='key'
+                 name='key'
-          placeholder="<%= t('protocols.index.external_protocols.search_bar_placeholder') %>" >
+                 placeholder="<%= t('protocols.index.protocolsio.search_bar_placeholder') %>" >
           </input>
 
           <span class='input-group-addon'><i class='fas fa-search '></i></span>
@@ -26,23 +26,23 @@
       </div>
 
       <div class='protocol-sort'>
-        <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
+        <span><%= t('protocols.index.protocolsio.sort_by.title') %></span>
         <div class='btn-group' data-toggle='buttons'>
           <label class='btn btn-link active'>
             <input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
-            <%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
+            <%= t('protocols.index.protocolsio.sort_by.alphabetically-asc') %>
           </label>
           <label class='btn btn-link'>
             <input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
-            <%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
+            <%= t('protocols.index.protocolsio.sort_by.alphabetically-desc') %>
           </label>
           <label class='btn btn-link'>
             <input type='radio' name='sort_by' id='newest' value='newest'>
-            <%= t('protocols.index.external_protocols.sort_by.newest') %>
+            <%= t('protocols.index.protocolsio.sort_by.newest') %>
           </label>
           <label class='btn btn-link'>
             <input type='radio' name='sort_by' id='oldest' value='oldest'>
-            <%= t('protocols.index.external_protocols.sort_by.oldest') %>
+            <%= t('protocols.index.protocolsio.sort_by.oldest') %>
           </label>
         </div>
       </div>
@@ -54,7 +54,7 @@
     <div class='protocol-list-side-panel'>
 
       <div class='row empty-text'>
-        <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
+        <%= t('protocols.index.protocolsio.list_panel.empty_text') %>
       </div>
 
       <div class='list-wrapper perfect-scrollbar'></div>
@@ -65,7 +65,7 @@
 
         <div class='row'>
           <div class='text-rows protocol-preview-text'>
-            <%= t('protocols.index.external_protocols.preview_panel.empty_title') %>
+            <%= t('protocols.index.protocolsio.preview_panel.empty_title') %>
           </div>
         </div>
 
@@ -75,7 +75,7 @@
 
         <div class='row'>
           <div class='text-rows protocol-preview-subtext'>
-            <%= t('protocols.index.external_protocols.preview_panel.empty_subtext') %>
+            <%= t('protocols.index.protocolsio.preview_panel.empty_subtext') %>
           </div>
         </div>
       </div>
@@ -84,7 +84,7 @@
         <div class='row preview-banner'>
           <div class='col-md-6 txt-holder'>
             <span>
-              <%= t('protocols.index.external_protocols.preview_panel.banner_text') %>
+              <%= t('protocols.index.protocolsio.preview_panel.banner_text') %>
             </span>
           </div>
           <div class='col-md-6 btn-holder'>
@@ -100,4 +100,7 @@
   <div class='footer'></div>
 </div>
 
-<%= javascript_include_tag "protocols/external_protocols_tab.js" %>
+<%= render partial: "protocols/index/protocol_preview_modal.html.erb" %>
+
+<%= javascript_include_tag "protocols/steps" %>
+<%= javascript_include_tag "protocols/protocolsio.js" %>

config/initializers/assets.rb

@@ -54,7 +54,7 @@ Rails.application.config.assets.precompile += %w(projects/canvas.js)
 Rails.application.config.assets.precompile += %w(experiments/dropdown_actions.js)
 Rails.application.config.assets.precompile += %w(reports/new.js)
 Rails.application.config.assets.precompile += %w(protocols/index.js)
-Rails.application.config.assets.precompile += %w(protocols/external_protocols_tab.js)
+Rails.application.config.assets.precompile += %w(protocols/protocolsio.js)
 Rails.application.config.assets.precompile += %w(protocols/header.js)
 Rails.application.config.assets.precompile += %w(protocols/steps.js)
 Rails.application.config.assets.precompile += %w(protocols/edit.js)

config/locales/en.yml

@@ -2557,7 +2557,7 @@ en:
       navigation:
         public: "Team protocols"
         private: "My protocols"
-        external_protocols: "External protocols"
+        protocolsio: "External protocols"
         archive: "Archive"
       action_toolbar:
         versions: "Versions"
@@ -2568,12 +2568,12 @@ en:
         restore: "Restore"
       public_description: "Team protocols are visible and can be used by everyone from the team."
       private_description: "My protocols are only visible to you."
-      create_new: "New"
+      create_new: "New protocol"
       edit: "Edit"
       clone_btn: "Copy"
       import: "Import"
-      import_alt: " from SciNote protocol file(.eln)"
+      import_alt: "From local file"
-      import_json: " from protocols.io file"
+      import_protocols_io: "From Protocols.io"
       modal_import_json_upload: "Upload"
       modal_import_json_title: "Import protocols.io file"
       modal_import_json_notice: "Upload your protocols.io protocol file"
@@ -2665,7 +2665,7 @@ en:
         row_failed: "Failed"
         row_in_repository_public: "%{protocol} - <i>into Team protocols</i>"
         row_in_repository_private: "%{protocol} - <i>into My protocols</i>"
-      external_protocols:
+      protocolsio:
         search_bar_placeholder: 'Search for protocols'
         protocolsio_title: 'Protocols.io'
         sort_by:

config/routes.rb

@@ -594,6 +594,7 @@ Rails.application.routes.draw do
              to: 'protocols#protocolsio_import_create'
         post 'protocolsio_import_save', to: 'protocols#protocolsio_import_save'
         get 'export', to: 'protocols#export'
+        get 'protocolsio', to: 'protocols#protocolsio_index'
       end
     end