Add no results page for serach on project page [SCI-5333]

app/assets/javascripts/projects/index.js

@@ -598,8 +598,12 @@
         $('#breadcrumbsWrapper').html(data.breadcrumbs_html);
         $('#toolbarWrapper').html(data.toolbar_html);
         viewContainer.data('projects-cards-url', data.projects_cards_url);
-        viewContainer.find('.card, .projects-group').remove();
+        viewContainer.removeClass('no-results');
+        viewContainer.find('.card, .projects-group, .no-results-container').remove();
         viewContainer.append(data.cards_html);
+        if (viewContainer.find('.no-results-container').length) {
+          viewContainer.addClass('no-results');
+        }
         selectedProjects.length = 0;
         selectedProjectFolders.length = 0;
         updateProjectsToolbar();
@@ -756,7 +760,6 @@
 
       $(e.target).closest('.dropdown').removeClass('open');
 
-
       createdOnFromFilter = $createdOnFromFilter.val();
       createdOnToFilter = $createdOnToFilter.val();
       membersFilter = dropdownSelector.getValues($('.members-filter'));

app/assets/stylesheets/projects.scss

@@ -775,6 +775,30 @@ li.module-hover {
       grid-template-columns: repeat(auto-fill, minmax(291px, 1fr));
       width: 100%;
 
+      &.no-results {
+        display: block;
+        margin-top: 100px;
+
+        .no-results-img {
+          display: block;
+          margin: auto;
+          max-height: 230px;
+        }
+
+        .no-results-title {
+          @include font-h1;
+          margin-bottom: .25em;
+          margin-top: 1.25em;
+          text-align: center;
+        }
+
+        .no-results-description {
+          @include font-main;
+          color: $color-silver-chalice;
+          text-align: center;
+        }
+      }
+
       .table-header {
         display: none;
       }
@@ -1219,4 +1243,3 @@ li.module-hover {
     margin: 1em 0;
   }
 }
-

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

@@ -1,10 +1,18 @@
-<% projects_by_folder.each do |folder, projects| %>
-  <div class="projects-group">
-    <%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: folder } %>
+<% if projects_by_folder.blank? %>
+  <div class="no-results-container">
+    <%= image_tag('/images/no_search_results.png', class: 'no-results-img') %>
+    <div class="no-results-title"><%= t('projects.index.no_results_found') %></div>
+    <div class="no-results-description"><%= t('projects.index.no_results_description') %></div>
   </div>
-  <% projects.each do |project| %>
-    <% cache [current_user, project] do %>
-      <%= render partial: 'projects/index/project_card', locals: { project: project } %>
+<% else %>
+  <% projects_by_folder.each do |folder, projects| %>
+    <div class="projects-group">
+      <%= render partial: 'projects/index/breadcrumbs', locals: { target_folder: folder } %>
+    </div>
+    <% projects.each do |project| %>
+      <% cache [current_user, project] do %>
+        <%= render partial: 'projects/index/project_card', locals: { project: project } %>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>

config/locales/en.yml

@@ -341,6 +341,8 @@ en:
       no_users: "No users!"
       manage_users: "Manage users"
       no_notifications: "There are no overdue tasks at the moment"
+      no_results_found: "No results found..."
+      no_results_description: "Try resetting your filter or choose a different search querry"
       module_overdue_html: "Task <em>%{module}</em> is overdue (%{days})."
       module_overdue_days:
         one: "1 day"