Merge pull request #2856 from mlorb/ml-sci-5009

Update empty states for smart annotation results and dismiss button [SCI-5009]

app/assets/javascripts/sitewide/atwho_res.js

@@ -230,4 +230,8 @@ var SmartAnnotation = (function() {
       SmartAnnotation.init(this);
     }
   });
+
+  $(document).on('click', '.atwho-view .dismiss', function() {
+    $(this).closest('.atwho-view').hide();
+  });
 }());

app/assets/stylesheets/shared/smart_annotation.scss

@@ -14,6 +14,7 @@
 
   .atwho-header-res {
     .nav-tabs {
+      align-items: center;
       margin-bottom: 0;
     }
 
@@ -23,6 +24,14 @@
       padding: .25em;
     }
 
+    .dismiss {
+      @include font-button;
+      color: $color-silver-chalice;
+      cursor: pointer;
+      margin-left: auto;
+      padding: .5em .75em;
+    }
+
     .repository-object {
       max-width: 250px;
       overflow: hidden;
@@ -36,6 +45,32 @@
     padding: 0;
   }
 
+  .atwho-no-results {
+    color: $color-silver-chalice;
+    padding: 1.5em 7em;
+    text-align: center;
+
+    .description {
+      @include font-main;
+      padding: 0 4em 2.5em;
+    }
+  }
+
+  .atwho-header {
+    @include font-small;
+    border-bottom: $border-default;
+    color: $color-silver-chalice;
+    padding: .5em;
+
+    .dismiss {
+      @include font-button;
+      cursor: pointer;
+      float: right;
+      padding: 0 .25em;
+      position: relative;
+    }
+  }
+
   .atwho-footer {
     @include font-small;
     border-top: $border-default;

app/assets/stylesheets/themes/scinote.scss

@@ -1709,38 +1709,6 @@ th.custom-field .modal-tooltiptext {
   pointer-events: none;
 }
 
-// AtWho (smart annotations)
-
-// <Custom atwho style>
-
-.atwho-user-container {
-  align-items: center;
-  display: inline-flex;
-
-  .global-avatar-container {
-    line-height: 30px;
-    margin: 0 2px 0 4px;
-
-    img {
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
-.atwho-user-popover {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.atwho-user-img-popover {
-  cursor: default;
-}
-
-.atwho-no-results {
-  padding: 5px 10px;
-}
-
 .popover {
   border-radius: 3px;
   min-width: 450px;

app/views/shared/smart_annotation/_experiment_items.html.erb

@@ -19,7 +19,7 @@
     <div class="more-results"><%= t('atwho.more_results') %></div>
   <% end %>
   <% if experiments.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'experiments' } %>
   <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_menu.html.erb

@@ -5,6 +5,7 @@
     <a class="tab-button sa-experiments" href="#exp-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.experiments') %></a>
     <a class="tab-button sa-tasks" href="#tsk-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.tasks') %></a>
     <a class="tab-button sa-repositories" href="#rep-tab-<%= at_who_key %>" data-toggle="tab"><%= t('atwho.inventories') %></a>
+    <div class="dismiss"><span class="fas fa-times"></span></div>
   </div>
   <div class="tab-content">
     <div class="tab-pane" role="tabpanel" id="prj-tab-<%= at_who_key %>" data-object-type="PROJECT"></div>

app/views/shared/smart_annotation/_my_module_items.html.erb

@@ -21,7 +21,7 @@
     <div class="more-results"><%= t('atwho.more_results') %></div>
   <% end %>
   <% if my_modules.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'my_modules' } %>
   <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_no_results.html.erb

@@ -1,5 +1,6 @@
 <div class="atwho-no-results">
-  <span><%= t("atwho.no_results") %></span>
+  <h1><%= t("atwho.no_results.#{object_type}") %></h1>
+  <div class="description"><%= t("atwho.no_results.description") %></div>
   <!-- "No results" hack for at.js -->
   <span style="display: none"><%= @query %></span>
 </div>

app/views/shared/smart_annotation/_project_items.html.erb

@@ -10,7 +10,7 @@
     <div class="more-results"><%= t('atwho.more_results') %></div>
   <% end %>
   <% if projects.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'projects' } %>
   <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_repository_items.html.erb

@@ -10,7 +10,7 @@
     <div class="more-results"><%= t('atwho.more_results') %></div>
   <% end %>
   <% if repository_rows.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'repository_rows' } %>
   <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

app/views/shared/smart_annotation/_users.html.erb

@@ -1,4 +1,8 @@
 <% limit_reached = users.length == Constants::ATWHO_SEARCH_LIMIT + 1 %>
+<div class="atwho-header">
+  <span><%= t("atwho.users.header") %></span>
+  <div class="dismiss"><span class="fas fa-times"></span></div>
+</div>
 <div class="atwho-scroll-container">
   <% users.limit(Constants::ATWHO_SEARCH_LIMIT).each do |user| %>
     <li class="atwho-user" data-full-name="<%= user.full_name %>" data-id="<%= user.id.base62_encode %>" data-type="rep_item">
@@ -13,7 +17,7 @@
     <div class="more-results"><%= t('atwho.more_results') %></div>
   <% end %>
   <% if users.empty? %>
-    <%= render partial: 'shared/smart_annotation/no_results.html.erb' %>
+    <%= render partial: 'shared/smart_annotation/no_results.html.erb', locals: { object_type: 'users' } %>
   <% end %>
 </div>
 <%= render partial: 'shared/smart_annotation/footer.html.erb' %>

config/locales/en.yml

@@ -2279,7 +2279,13 @@ en:
         forbidden: 'You do not have permission to add files.'
         not_found: 'Element not found.'
   atwho:
-    no_results: "No results found"
+    no_results:
+      projects: "Projects with this name were not found"
+      experiments: "Experiments with this name were not found"
+      my_modules: "Tasks with this name were not found"
+      repository_rows: "Items with this name were not found"
+      users: "Users with this name were not found"
+      description: "Please make sure there are no typos, or erase letters one by one unless you see some results"
     projects: PROJECTS
     experiments: EXPERIMENTS
     tasks: TASKS
@@ -2287,6 +2293,7 @@ en:
     more_results: To get other results, please type more
     users:
       title: "People"
+      header: "Type the name or email of the user you want to mention (they will be notified)"
       help: "Navigate: ↑ ↓    •    Submit: Enter / Tab    •    Dismiss: Esc"
       popover_html: "<span class='silver'>Team:</span>&nbsp;%{team} <br> <span class='silver'>Role:</span>&nbsp;%{role} <br> <span class='silver'>Joined:</span>&nbsp;%{time}"
     res: