Update protocol top toolbar [SCI-8386]

app/assets/javascripts/repositories/index.js

@@ -110,11 +110,6 @@
           DataTableHelpers.initSearchField(dataTableWrapper, I18n.t('repositories.index.filter_inventory'));
           $('.content-body .toolbar').html($('#repositoriesListButtons').html());
           dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
-          var childHtml = $('.repo-view-switch').detach().html();
-          $('.main-actions').append(childHtml);
-          var removedDivs = $('.main-actions .filter-container').detach();
-          $('.main-actions').append(removedDivs);
-          initRepositoryViewSwitcher();
 
           $('#createRepoBtn').initSubmitModal('#create-repo-modal', 'repository');
           $('#deleteRepoBtn').initSubmitModal('#delete-repo-modal', 'repository');
@@ -148,40 +143,6 @@
     });
   }
 
-  function initRepositoryViewSwitcher() {
-    if ($('.repositories-index').hasClass('active')) {
-      $('.view-switch-btn-name').text(I18n.t('toolbar.active_state'));
-      $('.view-switch-active').addClass('form-dropdown-state-item');
-    } else {
-      $('.view-switch-btn-name').text(I18n.t('toolbar.archived_state'));
-      $('.view-switch-archived').addClass('form-dropdown-state-item');
-    }
-
-    var viewSwitch = $('.view-switch');
-    viewSwitch.on('click', '.view-switch-archived', function() {
-      $('.repositories-index').removeClass('active').addClass('archived');
-
-      $('.view-switch-btn-name').text($('.view-switch-archived').text());
-
-      $('.view-switch-active').removeClass('form-dropdown-state-item');
-      $('.view-switch-archived').addClass('form-dropdown-state-item');
-
-      initRepositoriesDataTable('#repositoriesList', true);
-      reloadSidebar();
-    });
-    viewSwitch.on('click', '.view-switch-active', function() {
-      $('.repositories-index').removeClass('archived').addClass('active');
-
-      $('.view-switch-btn-name').text($('.view-switch-active').text());
-
-      $('.view-switch-active').addClass('form-dropdown-state-item');
-      $('.view-switch-archived').removeClass('form-dropdown-state-item');
-
-      initRepositoriesDataTable('#repositoriesList');
-      reloadSidebar();
-    });
-  }
-
   $('.repositories-index')
     .on('click', '#archiveRepoBtn', function() {
       $.post($('#archiveRepoBtn').data('archive-repositories'), {
@@ -227,5 +188,4 @@
   if (notTurbolinksPreview()) {
     initRepositoriesDataTable('#repositoriesList', $('.repositories-index').hasClass('archived'));
   }
-  initRepositoryViewSwitcher();
 }());

app/assets/javascripts/repositories/repository_datatable.js

@@ -365,33 +365,6 @@ var RepositoryDatatable = (function(global) {
     });
   }
 
-  function initRepositoryViewSwitcher() {
-    $('.view-switch-active').addClass('form-dropdown-state-item');
-
-    var viewSwitch = $('.view-switch');
-    viewSwitch.on('click', '.view-switch-archived', function() {
-      $('.repository-show').removeClass('active').addClass('archived');
-
-      $('.view-switch-btn-name').text($('.view-switch-archived').text());
-
-      $('.view-switch-active').removeClass('form-dropdown-state-item');
-      $('.view-switch-archived').addClass('form-dropdown-state-item');
-
-      $('#manage-repository-column').removeClass('active').addClass('archived');
-      RepositoryDatatable.reload();
-    });
-    viewSwitch.on('click', '.view-switch-active', function() {
-      $('.repository-show').removeClass('archived').addClass('active');
-
-      $('.view-switch-btn-name').text($('.view-switch-active').text());
-
-      $('.view-switch-active').addClass('form-dropdown-state-item');
-      $('.view-switch-archived').removeClass('form-dropdown-state-item');
-      $('#manage-repository-column').removeClass('archived').addClass('active');
-      RepositoryDatatable.reload();
-    });
-  }
-
   function initExportActions() {
     $('#exportRepositoriesButton').on('click', function() {
       $('#exportRepositoryModal').modal('show');
@@ -668,7 +641,6 @@ var RepositoryDatatable = (function(global) {
         initSaveButton();
         initCancelButton();
         initBSTooltips();
-        initRepositoryViewSwitcher();
         DataTableHelpers.initLengthAppearance($(TABLE_ID).closest('.dataTables_wrapper'));
 
         $('<img class="barcode-scanner" src="/images/icon_small/barcode.png"></img>').appendTo($('.search-container'));

app/assets/stylesheets/navigation/general.scss

@@ -2,7 +2,7 @@
   --breadcrumbs-navigation-height: 56px;
   --left-navigation-width: 204px;
   --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
-  --navigator-navigation-width: 288px;
+  --navigator-navigation-width: 216px;
   --top-navigation-height: 52px;
   display: grid;
   grid-template-areas: "top top top"

app/assets/stylesheets/protocols/index.scss

@@ -53,6 +53,7 @@
     }
 
     .toolbar {
+      align-items: center;
       display: flex;
 
       .left-general-toolbar {
@@ -61,6 +62,10 @@
         display: flex;
       }
 
+      .view-switch {
+        margin: 0 auto;
+      }
+
       .right-general-toolbar {
         align-items: center;
         display: flex;

app/assets/stylesheets/repository/index.scss

@@ -1,5 +1,9 @@
 .repositories-index {
 
+  .view-switch {
+    margin: 0 auto;
+  }
+
   .toolbar-wrapper {
     display: flex;
     justify-content: space-between;
@@ -47,14 +51,6 @@
   }
 }
 
-.dataTables_wrapper {
-  .main-actions {
-    .toolbar {
-      flex-grow: 0 !important;
-    }
-  }
-}
-
 .main-actions {
   align-items: center;
   display: flex;

app/assets/stylesheets/shared/datatable.scss

@@ -10,6 +10,8 @@
     padding: 1em 0;
 
     .toolbar {
+      align-items: center;
+      display: flex;
       flex-grow: 1;
     }
   }

app/javascript/vue/navigation/navigator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-72 h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
+  <div class="w-[216px] h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
     <div class="p-3 flex items-center">
       <i class="fas fa-bars cursor-pointer"></i>
       <div class="font-bold text-base p-2">

app/javascript/vue/navigation/navigator_item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-sn-blue pl-7 w-64 flex justify-center flex-col" :navigator-item-id="item.id">
+  <div class="text-sn-blue pl-7 w-[196px]  flex justify-center flex-col" :navigator-item-id="item.id">
     <div class="p-2 flex items-center whitespace-nowrap" :title="this.itemToolTip" :class="{ 'bg-sn-light-grey': activeItem }">
       <div class="w-5 mr-2 flex justify-start shrink-0">
         <i v-if="hasChildren"

app/views/experiments/_show_header.html.erb

@@ -84,20 +84,13 @@
           <% end %>
         <% end %>
 
-        <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
-          <% unless @experiment.archived_branch? %>
-            <li>
-              <%= link_to my_modules_experiment_path(@experiment), class: "#{'form-dropdown-state-item' unless (action_name == 'module_archive' || params[:view_mode] == 'archived')}" do %>
-                <%= t('toolbar.active_state') %>
-              <% end %>
-            </li>
-            <li>
-              <%= link_to my_modules_experiment_path(@experiment, view_mode: :archived), class: "#{'form-dropdown-state-item' if (action_name == 'module_archive' || params[:view_mode] == 'archived')}"  do %>
-                <%= t('toolbar.archived_state') %>
-              <% end %>
-            </li>
-          <% end %>
-        <% end %>
+        <%= render partial: 'shared/state_view_switch', locals: {
+          disabled: false,
+          switchable: !@experiment.archived_branch?,
+          archived: action_name == 'module_archive' || params[:view_mode] == 'archived',
+          active_url: my_modules_experiment_path(@experiment),
+          archived_url: my_modules_experiment_path(@experiment, view_mode: :archived),
+        } %>
 
       <% if action_name == 'table' %>
         <%= render partial: 'table_filters.html.erb' %>

app/views/projects/index/_toolbar.html.erb

@@ -46,22 +46,13 @@
             <% end %>
           </li>
         <% end %>
-        <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
-          <li class="view-switch-list cards-switch form-dropdown-item">
-            <%= button_tag class: "btn btn-#{params[:view_mode] == 'active' ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path } do %>
-              <span class="<%= params[:view_mode] == 'active' ? 'text-light' : 'text-dark' %>">
-                <%= t('toolbar.active_state') %>
-              </span>
-            <% end %>
-          </li>
-          <li class="view-switch-list cards-switch form-dropdown-item">
-            <%= button_tag class: "btn btn-#{params[:view_mode] =='archived' ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: projects_path(view_mode: 'archived') } do %>
-              <span class="<%= params[:view_mode] =='archived'  ? 'text-light' : 'text-dark' %>">
-                <%= t('toolbar.archived_state') %>
-              </span>
-            <% end %>
-          </li>
-        <% end %>
+        <%= render partial: 'shared/state_view_switch', locals: {
+          disabled: false,
+          switchable: true,
+          archived: params[:view_mode] =='archived',
+          active_url: projects_path(view_mode: :active),
+          archived_url: projects_path(view_mode: :archived),
+        } %>
       </span>
 
       <span class="right">

app/views/projects/show/_toolbar.html.erb

@@ -39,22 +39,13 @@
       </li>
     <% end %>
 
-    <%= render layout: 'shared/state_view_switch', locals: { disabled: false } do %>
-      <li class="view-switch-list cards-switch form-dropdown-item">
-        <%= button_tag class: "btn btn-#{params[:view_mode] ? 'light' : 'primary'} state-view-switch archive-switch", data: { url: project_path(@project) } do %>
-          <span class="<%= params[:view_mode] ? 'text-dark' : 'text-light' %>">
-            <%= t('toolbar.active_state') %>
-          </span>
-        <% end %>
-      </li>
-      <li class="view-switch-list cards-switch form-dropdown-item">
-        <%= button_tag class: "btn btn-#{params[:view_mode] ? 'primary' : 'light'} state-view-switch archive-switch", data: { url: project_path(@project, view_mode: 'archived') } do %>
-          <span class="<%= params[:view_mode] ? 'text-light' : 'text-dark' %>">
-            <%= t('toolbar.archived_state') %>
-          </span>
-        <% end %>
-      </li>
-    <% end %>
+    <%= render partial: 'shared/state_view_switch', locals: {
+          disabled: false,
+          switchable: true,
+          archived: params[:view_mode] =='archived',
+          active_url: project_path(@project, view_mode: :active),
+          archived_url: project_path(@project, view_mode: :archived),
+        } %>
   </span>
 
   <span class="right">

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

@@ -32,4 +32,11 @@
       </div>
     <% end %>
   </div>
+  <%= render partial: 'shared/state_view_switch', locals: {
+        disabled: false,
+        switchable: true,
+        archived: templates_view_mode_archived?(type: @type),
+        active_url: protocols_path(type: :active),
+        archived_url: protocols_path(type: :archived),
+      } %>
 </template>

app/views/repositories/_toolbar_buttons.html.erb

@@ -53,14 +53,13 @@
 
   <div class="toolbar-middle-block">
     <% unless @repository.is_a?(BmtRepository) %>
-      <%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
-        <li class="view-switch-active">
-          <%= t('toolbar.active_state') %>
-        </li>
-        <li class="view-switch-archived">
-          <%= t('toolbar.archived_state') %>
-        </li>
-      <% end %>
+      <%= render partial: 'shared/state_view_switch', locals: {
+          disabled: @repository.archived?,
+          switchable: true,
+          archived: params[:archived],
+          active_url: repository_path(@repository),
+          archived_url: repository_path(@repository, archived: true),
+        } %>
     <% end %>
   </div>
 

app/views/repositories/index.html.erb

@@ -47,17 +47,13 @@
   </a>
 <% end %>
 
-<div class="content-header repo-view-switch">
-  <%= render layout: "shared/view_switch", locals: { disabled: false, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
-    <li class="view-switch-active">
-      <%= t('toolbar.active_state') %>
-    </li>
-    <li class="view-switch-archived">
-      <%= t('toolbar.archived_state') %>
-    </li>
-  <% end %>
-</div>
-
+<%= render partial: 'shared/state_view_switch', locals: {
+        disabled: false,
+        switchable: true,
+        archived: params[:archived],
+        active_url: repositories_path,
+        archived_url: repositories_path(archived: true),
+      } %>
   <!--
   <a id="renameRepoBtn" class="btn btn-light disabled hidden" data-view-mode="active" href="#" data-action-mode="single" data-remote="true">
     <span class="fas fa-pencil-alt"></span>

app/views/repositories/show.html.erb

@@ -7,12 +7,9 @@
 <% provide(:container_class, "no-second-nav-container") %>
 <% provide(:sidebar_url, sidebar_repositories_path) %>
 <% provide(:sidebar_title, t('sidebar.repositories.sidebar_title')) %>
-<%= content_for :sidebar do %>
-  <%= render partial: "sidebar", locals: { repositories: @repositories, archived: @repository.archived? } %>
-<% end %>
 <div id="alert-container"></div>
 
-<div class="content-pane repository-show <%=  @repository.active? ? "active" : "archived" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
+<div class="content-pane repository-show <%=  @repository.archived? || params[:archived] ? "archived" : "active" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
   <div id="repository-toolbar" class="content-header">
     <div class="title-row">
       <% if @repository.active? %>

app/views/shared/_state_view_switch.html.erb

@@ -1,9 +1,20 @@
 <div class="dropdown view-switch" >
-  <a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="state-view-switch-btn-name""><%= params[:view_mode] == 'archived' ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
+  <a href="#" class="btn btn-light view-switch-button prevent-shrink <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="state-view-switch-btn-name"><%= archived ? t('toolbar.archived_state') : t('toolbar.active_state') %></span>
     <span class="caret pull-right"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
-    <%= yield %>
+    <% if switchable %>
+      <li>
+        <%= link_to active_url, class: "#{ 'form-dropdown-state-item' unless archived }" do %>
+          <%= t('toolbar.active_state') %>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to archived_url, class: "#{ 'form-dropdown-state-item' if archived }"  do %>
+          <%= t('toolbar.archived_state') %>
+        <% end %>
+      </li>
+    <% end %>
   </ul>
 </div>

app/views/shared/_view_switch.html.erb

@@ -1,6 +1,6 @@
 <div class="dropdown view-switch" >
-  <a href="#" class="btn btn-light view-switch-button <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-    <span class="view-switch-btn-name""><%= name %></span>
+  <a href="#" class="btn btn-light view-switch-button prevent-shrink <%= "disabled" if disabled %>" id="viewSwitchButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="view-switch-btn-name"><%= name %></span>
     <span class="caret pull-right"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">

config/locales/en.yml

@@ -2769,7 +2769,7 @@ en:
         empty_placeholder: "There is no action available"
       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 protocol"
+      create_new: "New protocol template"
       edit: "Edit"
       clone_btn: "Copy"
       import: "Import"