Improve styling on the reverse dependencies page (#3760)

* Reuse the `home__search` styles

* Render the reverse dependencies only if present

* Include new reverse dependencies search test

* Check the reverse dependency is rendered

* Fix `rubocop` updates

* Remove extra `l-wrap--b` wrapper

* Include `no_reverse_dependencies` helper text

* `bin/fill-locales`

* Check the no reverse dependencies text

app/views/reverse_dependencies/_search.html.erb

@@ -1,8 +1,8 @@
 <%= form_tag rubygem_reverse_dependencies_path(rubygem),
-  id: "rdeps-search", class: "header__search-wrap", method: :get do %>
-  <%= search_field_tag :rdeps_query, params[:rdeps_query], placeholder: t('.search_reverse_dependencies_html'), class: "header__search" %>
+  id: "rdeps-search", class: "home__search-wrap", method: :get do %>
+  <%= search_field_tag :rdeps_query, params[:rdeps_query], placeholder: t('.search_reverse_dependencies_html'), class: "home__search" %>
   <%= label_tag :rdeps_query do %>
     <span class="t-hidden"><%= t('.search_reverse_dependencies_html') %></span>
   <% end %>
-  <%= submit_tag '⌕', id: 'rdeps_search_submit', name: nil, class: "header__search__icon" %>
+  <%= submit_tag '⌕', id: 'rdeps_search_submit', name: nil, class: "home__search__icon" %>
 <% end %>

app/views/reverse_dependencies/index.html.erb

@@ -1,22 +1,26 @@
 <% content_for :title do %>
-  <div class="l-wrap--b">
-    <h1 class="t-display page__heading page__heading--small">
-      <%= t('.title', name: @rubygem.name) %>
-      <i class="page__subheading page__subheading--block"><%= t(".subtitle", name: @rubygem.name) %></i>
-    </h1>
-  </div>
+  <h1 class="t-display page__heading page__heading--small">
+    <%= t('.title', name: @rubygem.name) %>
+    <i class="page__subheading page__subheading--block"><%= t(".subtitle", name: @rubygem.name) %></i>
+  </h1>
 <% end %>
 
 <div class="l-overflow">
-  <div class="l-colspan--l colspan--l--has-border">
-    <header class="gems__header push">
-      <%= render "search", rubygem: @rubygem %>
-    </header>
+  <% if @reverse_dependencies.present? %>
+    <div class="l-colspan--l colspan--l--has-border">
+      <header class="push push--bottom-s">
+        <%= render "search", rubygem: @rubygem %>
+      </header>
 
-    <div class="reverse__dependencies">
-      <%= render partial: "rubygems/rubygem", collection: @reverse_dependencies %>
+      <div class="reverse__dependencies">
+        <%= render partial: "rubygems/rubygem", collection: @reverse_dependencies %>
+      </div>
+      <%= plain_paginate @reverse_dependencies %>
     </div>
-    <%= plain_paginate @reverse_dependencies %>
-  </div>
+  <% else %>
+    <div class="gem__desc">
+      <p><%= t(".no_reverse_dependencies") %></p>
+    </div>
+  <% end %>
   <%= render 'rubygems/aside' %>
 </div>

config/locales/de.yml

@@ -565,6 +565,7 @@ de:
     index:
       title:
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html:
   searches:

config/locales/en.yml

@@ -564,6 +564,7 @@ en:
     index:
       title: "Reverse dependencies for %{name}"
       subtitle: "Latest version of the following gems require %{name}"
+      no_reverse_dependencies: This gem has no reverse dependencies.
     search:
       search_reverse_dependencies_html: "Search reverse dependencies Gems…"
   searches:

config/locales/es.yml

@@ -609,6 +609,7 @@ es:
     index:
       title: Dependencias inversas para %{name}
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html: Buscar dependencias inversas Gems…
   searches:

config/locales/fr.yml

@@ -616,6 +616,7 @@ fr:
     index:
       title: Dépendances inversées pour %{name}
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html: Chercher des dépendances inversées Gems…
   searches:

config/locales/ja.yml

@@ -554,6 +554,7 @@ ja:
     index:
       title: "%{name}の被依存性"
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html: 被依存性の中から検索…
   searches:

config/locales/nl.yml

@@ -569,6 +569,7 @@ nl:
     index:
       title:
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html:
   searches:

config/locales/pt-BR.yml

@@ -592,6 +592,7 @@ pt-BR:
     index:
       title: Dependências Reversas para %{name}
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html: Buscar Gems com dependências…
   searches:

config/locales/zh-CN.yml

@@ -551,6 +551,7 @@ zh-CN:
     index:
       title: "%{name} 的反向依赖"
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html:
   searches:

config/locales/zh-TW.yml

@@ -552,6 +552,7 @@ zh-TW:
     index:
       title:
       subtitle:
+      no_reverse_dependencies:
     search:
       search_reverse_dependencies_html:
   searches:

test/integration/search_test.rb

@@ -94,4 +94,25 @@ class SearchTest < SystemTest
       Kaminari.configure { |c| c.default_per_page = 30 }
     end
   end
+
+  test "searching for reverse dependencies" do
+    dependency = create(:rubygem)
+    create(:version, rubygem: dependency)
+
+    gem = create(:rubygem)
+    version_one = create(:version, rubygem: gem)
+    create(:dependency, :runtime, version: version_one, rubygem: dependency)
+
+    visit "/gems/#{dependency.name}/reverse_dependencies"
+
+    assert page.has_content? "Search reverse dependencies Gems…"
+    within ".reverse__dependencies" do
+      assert page.has_content? gem.name
+    end
+
+    visit "/gems/#{gem.name}/reverse_dependencies"
+
+    refute page.has_content? "Search reverse dependencies Gems…"
+    assert page.has_content? "This gem has no reverse dependencies"
+  end
 end