Use a table for unmatched keywords

openSUSE · Apr 19, 2024 · 6e9c272 · 6e9c272
1 parent d8d76c5
commit 6e9c272
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 43 deletions.
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
@@ -307,3 +307,7 @@ body {
   border-top: 1px solid rgb(208, 215, 222);
   padding-top: 1em;
 }
+
+.hover-table tr:hover td {
+  background-color: #e9ecef;
+}
diff --git a/t/error_review.t b/t/error_review.t
@@ -167,10 +167,11 @@ subtest 'Manual review' => sub {
 
   $t->get_ok('/reviews/calc_report/1')->status_is(200)->element_exists('#license-chart')
     ->element_exists('#unmatched-files')->text_is('#unmatched-count', '4')
-    ->text_like('#unmatched-files li:nth-of-type(2) a',               qr!Mojolicious-7.25/lib/Mojolicious.pm!)
-    ->text_like('#unmatched-files li:nth-of-type(2)',                 qr![0-9.]+% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(2) b',               qr!Apache-2.0!)
-    ->text_like('#unmatched-files li:nth-of-type(2) .estimated-risk', qr!Risk 7!)->element_exists('#risk-5');
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(1) a', qr!Mojolicious-7.25/lib/Mojolicious.pm!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2)',   qr![0-9.]+% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) b', qr!Apache-2.0!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) .estimated-risk', qr!Risk 7!)
+    ->element_exists('#risk-5');
   $t->element_exists('#emails')->text_like('#emails tr td', qr!coolo\@suse\.com!)->element_exists('#urls')
     ->text_like('#urls tr td', qr!http://mojolicious.org!);
 

diff --git a/t/manual_review.t b/t/manual_review.t
@@ -202,24 +202,24 @@ subtest 'Details after reindexing' => sub {
 
   $t->get_ok('/reviews/calc_report/1')->header_like(Vary => qr/Accept-Encoding/)->status_is(200)
     ->element_exists('#license-chart')->element_exists('#unmatched-files')->text_is('#unmatched-count', '4')
-    ->text_like('#unmatched-files li:nth-of-type(1) a',               qr!Mojolicious-7.25/LICENSE!)
-    ->text_like('#unmatched-files li:nth-of-type(1)',                 qr![0-9.]+% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(1) b',               qr!Snippet!)
-    ->text_like('#unmatched-files li:nth-of-type(1) .estimated-risk', qr!Risk 7!)
-    ->text_like('#unmatched-files li:nth-of-type(2) a',               qr!Mojolicious-7.25/lib/Mojolicious.pm!)
-    ->text_like('#unmatched-files li:nth-of-type(2)',                 qr![0-9.]+% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(2) b',               qr!Apache-2.0!)
-    ->text_like('#unmatched-files li:nth-of-type(2) .estimated-risk', qr!Risk 7!)
-    ->text_like('#unmatched-files li:nth-of-type(3) a',               qr!Mojolicious-7.25/Changes!)
-    ->text_like('#unmatched-files li:nth-of-type(3)',                 qr!100% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(3) b',               qr!Snippet!)
-    ->text_like('#unmatched-files li:nth-of-type(3) .estimated-risk', qr!Risk 5!)
-    ->text_like('#unmatched-files li:nth-of-type(4) a',               qr!perl-Mojolicious.changes!)
-    ->text_like('#unmatched-files li:nth-of-type(4)',                 qr!100% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(4) b',               qr!Snippet!)
-    ->text_like('#unmatched-files li:nth-of-type(4) .estimated-risk', qr!Risk 5!)->element_exists('#risk-5')
-    ->text_like('#risk-5 li',                                         qr!Apache-2.0!)
-    ->text_like('#risk-5 li ul li:nth-of-type(1) a',                  qr!Mojolicious-7.25/lib/Mojolicious.pm!)
+    ->text_like('#unmatched-files tr:nth-of-type(1) td:nth-of-type(1) a',               qr!Mojolicious-7.25/LICENSE!)
+    ->text_like('#unmatched-files tr:nth-of-type(1) td:nth-of-type(2)',                 qr![0-9.]+% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(1) td:nth-of-type(2) b',               qr!Snippet!)
+    ->text_like('#unmatched-files tr:nth-of-type(1) td:nth-of-type(2) .estimated-risk', qr!Risk 7!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(1) a', qr!Mojolicious-7.25/lib/Mojolicious.pm!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2)',   qr![0-9.]+% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) b', qr!Apache-2.0!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) .estimated-risk', qr!Risk 7!)
+    ->text_like('#unmatched-files tr:nth-of-type(3) td:nth-of-type(1) a',               qr!Mojolicious-7.25/Changes!)
+    ->text_like('#unmatched-files tr:nth-of-type(3) td:nth-of-type(2)',                 qr!100% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(3) td:nth-of-type(2) b',               qr!Snippet!)
+    ->text_like('#unmatched-files tr:nth-of-type(3) td:nth-of-type(2) .estimated-risk', qr!Risk 5!)
+    ->text_like('#unmatched-files tr:nth-of-type(4) td:nth-of-type(1) a',               qr!perl-Mojolicious.changes!)
+    ->text_like('#unmatched-files tr:nth-of-type(4) td:nth-of-type(2)',                 qr!100% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(4) td:nth-of-type(2) b',               qr!Snippet!)
+    ->text_like('#unmatched-files tr:nth-of-type(4) td:nth-of-type(2) .estimated-risk', qr!Risk 5!)
+    ->element_exists('#risk-5')->text_like('#risk-5 li', qr!Apache-2.0!)
+    ->text_like('#risk-5 li ul li:nth-of-type(1) a', qr!Mojolicious-7.25/lib/Mojolicious.pm!)
     ->text_like('#risk-5 li ul li:nth-of-type(2) a', qr!Mojolicious-7.25/lib/Mojolicious/resources/public/!);
   $t->element_exists('#emails')->text_like('#emails tr td', qr!coolo\@suse\.com!)->element_exists('#urls')
     ->text_like('#urls tr td', qr!http://mojolicious.org!);
@@ -242,10 +242,11 @@ subtest 'Manual review' => sub {
 
   $t->get_ok('/reviews/calc_report/1')->status_is(200)->element_exists('#license-chart')
     ->element_exists('#unmatched-files')->text_is('#unmatched-count', '4')
-    ->text_like('#unmatched-files li:nth-of-type(2) a',               qr!Mojolicious-7.25/lib/Mojolicious.pm!)
-    ->text_like('#unmatched-files li:nth-of-type(2)',                 qr![0-9.]+% similarity to!)
-    ->text_like('#unmatched-files li:nth-of-type(2) b',               qr!Apache-2.0!)
-    ->text_like('#unmatched-files li:nth-of-type(2) .estimated-risk', qr!Risk 7!)->element_exists('#risk-5');
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(1) a', qr!Mojolicious-7.25/lib/Mojolicious.pm!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2)',   qr![0-9.]+% similarity to!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) b', qr!Apache-2.0!)
+    ->text_like('#unmatched-files tr:nth-of-type(2) td:nth-of-type(2) .estimated-risk', qr!Risk 7!)
+    ->element_exists('#risk-5');
   $t->element_exists('#emails')->text_like('#emails tr td', qr!coolo\@suse\.com!)->element_exists('#urls')
     ->text_like('#urls tr td', qr!http://mojolicious.org!);
 

diff --git a/templates/reviewer/report.html.ep b/templates/reviewer/report.html.ep
@@ -16,26 +16,30 @@
         Unmatched keywords in (at least) <span id="unmatched-count"><%= $unmatched %></span>
         <%= $unmatched == 1 ? 'file' : 'files' %>
         <div id="filelist-snippets" class="collapse show">
-          <ul>
+          <table class="table table-borderless m-0 ms-2 hover-table">
           % for my $file (@{$report->{missed_files}}) {
-            <li>
-              <a href="#file-<%= $file->{id} %>" class="file-link"data-file="<%= $file->{id} %>"><%= $file->{name} %></a>
-              % my $max_risk = $file->{max_risk};
-              - <%= $file->{match} %>% similarity to <b><%= $file->{license} %></b>,
-              estimated
-              % if ($max_risk == 9) {
-                <div class="badge text-bg-dark estimated-risk">Risk <%= $max_risk %></div>
-              % }
-              % elsif ($max_risk > 3) {
-                <div class="badge text-bg-danger estimated-risk">Risk <%= $max_risk %></div>
-              % }
-              % else {
-                <div class="badge text-bg-success estimated-risk">Risk <%= $max_risk %></div>
-              % }
-            </li>
+            <tr>
+              <td>
+                <a href="#file-<%= $file->{id} %>" class="file-link"data-file="<%= $file->{id} %>"><%= $file->{name} %></a>
+              </td>
+              <td class="text-end">
+                % my $max_risk = $file->{max_risk};
+                <%= $file->{match} %>% similarity to <b><%= $file->{license} %></b>,
+                estimated
+                % if ($max_risk == 9) {
+                  <div class="badge text-bg-dark estimated-risk">Risk <%= $max_risk %></div>
+                % }
+                % elsif ($max_risk > 3) {
+                  <div class="badge text-bg-danger estimated-risk">Risk <%= $max_risk %></div>
+                % }
+                % else {
+                  <div class="badge text-bg-success estimated-risk">Risk <%= $max_risk %></div>
+                % }
+              </td>
+            </tr>
             % $linked_files{$file->{id}} = 1;
           % }
-          </ul>
+          </table>
         </div>
 
       </div>