Fix sidebar update for inline editing [SCI-4000]

app/assets/javascripts/shared/inline_editing.js

@@ -2,6 +2,8 @@
 /* global SmartAnnotation */
 
 var inlineEditing = (function() {
+  const SIDEBAR_ITEM_TYPES = ['project', 'experiment', 'my_module', 'repository'];
+
   var editBlocks = '.inline-init-handler';
 
   function appendAfterLabel(container) {
@@ -29,9 +31,17 @@ var inlineEditing = (function() {
     });
   }
 
+  function updateSideBarNav(itemType, itemId, newData) {
+    let sidebar = $('#slide-panel');
+    let link = sidebar.find(`a[data-type="${itemType}"][data-id="${itemId}"]`);
+    link.prop('title', newData);
+    link.text(newData);
+  }
+
   function updateField(container) {
     var params;
     var paramsGroup = container.data('params-group');
+    var itemId = container.data('item-id');
     var fieldToUpdate = container.data('field-to-update');
 
     if (inputField(container).val() === container.attr('data-original-name')) {
@@ -83,6 +93,10 @@ var inlineEditing = (function() {
           .addClass('hidden')
           .attr('value', inputField(container).val());
         appendAfterLabel(container);
+
+        if (SIDEBAR_ITEM_TYPES.includes(paramsGroup)) {
+          updateSideBarNav(paramsGroup, itemId, viewData);
+        }
       },
       error: function(response) {
         var error = response.responseJSON[fieldToUpdate];

app/assets/javascripts/sidebar.js

@@ -121,22 +121,22 @@
       var experimentId = sidebar.data('current-experiment');
       var taskId = sidebar.data('current-task');
       var currentPage = sidebar.data('page');
-      var li;
+      var link;
 
       if (currentPage === 'project') {
-        li = sidebar.find('li[data-project-id="' + projectId + '"]');
+        link = sidebar.find(`a[data-type="project"][data-id="${projectId}"]`);
       } else if (currentPage === 'experiment') {
-        li = sidebar.find('[data-experiment-id="' + experimentId + '"]');
+        link = sidebar.find(`a[data-type="experiment"][data-id="${experimentId}"]`);
       } else if (currentPage === 'canvas') {
-        li = sidebar.find('[data-experiment-id="' + experimentId + '"]');
-        li.find('.task-tree-link')
-          .append('<a href="" class="canvas-center-on">'
-                  + '<span class="fas fa-map-marker-alt"></span></a>');
+        link = sidebar.find(`a[data-type="experiment"][data-id="${experimentId}"]`);
+        let treeLink = link.closest('li').find('.task-tree-link');
+        treeLink.find('.canvas-center-on').remove();
+        treeLink.append('<a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>');
       } else if (currentPage === 'task') {
-        li = sidebar.find('[data-module-id="' + taskId + '"]');
+        link = sidebar.find(`a[data-type="my_module"][data-id="${taskId}"]`);
       }
-      li.find('a:first').addClass('disabled');
-      li.addClass('active');
+      link.addClass('disabled');
+      link.closest('li').addClass('active');
     }
 
     activateCurrent();

app/controllers/experiments_controller.rb

@@ -314,6 +314,7 @@ class ExperimentsController < ApplicationController
     @inline_editable_title_config = {
       name: 'title',
       params_group: 'experiment',
+      item_id: @experiment.id,
       field_to_udpate: 'name',
       path_to_update: experiment_path(@experiment)
     }

app/controllers/my_modules_controller.rb

@@ -720,6 +720,7 @@ class MyModulesController < ApplicationController
     @inline_editable_title_config = {
       name: 'title',
       params_group: 'my_module',
+      item_id: @my_module.id,
       field_to_udpate: 'name',
       path_to_update: my_module_path(@my_module)
     }

app/controllers/projects_controller.rb

@@ -331,6 +331,7 @@ class ProjectsController < ApplicationController
     @inline_editable_title_config = {
       name: 'title',
       params_group: 'project',
+      item_id: @project.id,
       field_to_udpate: 'name',
       path_to_update: project_path(@project)
     }

app/controllers/repositories_controller.rb

@@ -336,6 +336,7 @@ class RepositoriesController < ApplicationController
     @inline_editable_title_config = {
       name: 'title',
       params_group: 'repository',
+      item_id: @repository.id,
       field_to_udpate: 'name',
       path_to_update: team_repository_path(@repository),
       label_after: "<span class=\"repository-share-icon\">#{inventory_shared_status_icon(@repository, current_team)}</span>"

app/views/repositories/_sidebar.html.erb

@@ -16,13 +16,11 @@
         <% repositories.each do |repository| %>
           <li class="<%= 'active parent_li' if current_page?(repository_path(repository)) %>" >
             <span class="tree-link line-wrap no-indent">
-              <% if current_page?(repository_path(repository)) %>
-                <span title="<%= repository.name %>"><%= repository.name %></span>
-              <% else %>
-                <%= link_to repository.name,
-                            repository_path(repository),
-                            data: { 'no-turbolink' => 'true' } %>
-              <% end %>
+              <%= link_to repository.name,
+                          repository_path(repository),
+                          class: current_page?(repository_path(repository)) ? 'disabled' : '',
+                          title: repository.name,
+                          data: { 'no-turbolink' => 'true', type: 'repository', id: repository.id } %>
               <%= inventory_shared_status_icon(repository, current_team) %>
             </span>
           </li>

app/views/shared/_inline_editing.html.erb

@@ -2,6 +2,7 @@
   class="inline-editing-container inline-init-handler"
   data-field-to-update="<%= config[:field_to_udpate] %>"
   data-params-group="<%= config[:params_group] %>"
+  data-item-id="<%= config[:item_id] %>"
   data-path-to-update="<%= config[:path_to_update] %>"
   data-original-name="<%= initial_value %>"
   data-label-after='<%= config[:label_after]&.html_safe %>'
@@ -14,4 +15,4 @@
     <span class="cancel-button"><i class="fas fa-times"></i></span>
   </div>
   <span class="error-block"></span>
-</div>
+</div>

app/views/shared/sidebar/_experiments.html.erb

@@ -2,13 +2,14 @@
   <ul>
     <% project.active_experiments.each do |experiment| %>
       <% cache [action_name, current_user, experiment] do %>
-        <li data-parent="candidate" data-experiment-id="<%= experiment.id %>">
+        <li data-parent="candidate">
           <span class="tree-link line-wrap first-indent">
             <i class="no-arrow"></i>
             <%= link_to experiment.name,
                         experiment_action_to_link_to(experiment),
                         title: experiment.name,
-                        class: 'overview_exp_label'
+                        class: 'overview_exp_label',
+                        data: { type: 'experiment', id: experiment.id }
                         %>
           </span>
           <%= render partial: 'shared/sidebar/my_modules', locals: { experiment: experiment } %>

app/views/shared/sidebar/_my_modules.html.erb

@@ -3,7 +3,10 @@
     <% experiment.active_my_modules.each do |my_module| %>
       <li class="leaf" data-module-id="<%= my_module.id %>">
         <span class="tree-link task-tree-link second-indent">
-          <%= link_to my_module.name, module_action_to_link_to(my_module) %>
+          <%= link_to my_module.name,
+                      module_action_to_link_to(my_module),
+                      title: my_module.name,
+                      data: { type: 'my_module', id: my_module.id } %>
         </span>
       </li>
     <% end %>

app/views/shared/sidebar/_projects.html.erb

@@ -1,13 +1,13 @@
 <ul>
   <% @projects_tree.each do |project| %>
     <% cache [action_name, current_user, project] do %>
-      <li data-parent="candidate" data-project-id="<%= project.id %>">
+      <li data-parent="candidate">
         <span class="tree-link line-wrap no-indent">
           <i class="no-arrow"></i>
             <%= link_to project.name,
                         project_action_to_link_to(project),
                         title: project.name,
-                        data: { project_id: project.id } %>
+                        data: { type: 'project', id: project.id } %>
         </span>
         <%= render partial: 'shared/sidebar/experiments', locals: { project: project } %>
       </li>