DT-244 show ID in row - filter by id (#301)

* DT-244 show ID in row - filter by id

* Add replace to remove string 'story' from ID value

* Update label tag

* Add spec case to fill search input and filter elements

* DT-244 Spec clause to ensure only 1 row render

app/assets/javascripts/project.js

@@ -105,7 +105,7 @@ const filterStories = () => {
     const storyTitle = element
       .querySelector("td:first-child")
       .innerText.toLowerCase();
-    if (storyTitle.includes(searchTerm)) {
+    if (storyTitle.includes(searchTerm) || element.id.replace(/\D/g, '').includes(searchTerm)) {
       cl.remove("hidden");
     } else {
       cl.add("hidden");

app/views/projects/show.html.erb

@@ -3,7 +3,7 @@
     <h1 class="dashboard-title"><%= render partial: "shared/project_title", locals: {allow_edit: true, project: @project} %></h1>
 
     <div class="search-field">
-      <%= label_tag 'title_contains', "Filter by title" %>
+      <%= label_tag 'title_contains', "Filter by title or ID" %>
       <%= search_field_tag 'title_contains', nil, onkeyup: "filterStories()" %>
     </div>
   </div>
@@ -28,7 +28,7 @@
               <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" >
                 <td class="project-table__cell">
                   <input type="checkbox" name="stories[]" value="<%= story.id %>">
-                  <%= link_to story.title, [story.project, story] %>
+                  <%= link_to "#{story.id} - #{story.title}", [story.project, story] %>
                   <button class="copy-link btn-clipboard" data-clipboard-text="<%= project_story_url(@project, story) %>" title='Copy story'><i class="fa fa-link"></i><span class= "popup">Copied to clipboard</span></button>
                 </td>
                 <td class="project-table__cell"><%= story.estimate_for(current_user)&.best_case_points %></td>

spec/features/stories_manage_spec.rb

@@ -318,4 +318,25 @@
 
     expect(page).not_to have_selector(".project-table.sorting")
   end
+
+  it "filter stories by title or ID", js: true do
+    story4 = FactoryBot.create(:story, project: project, title: "Deprecation warning XYZ")
+    story5 = FactoryBot.create(:story, project: project, title: "Dangerous query method")
+
+    visit project_path(id: project.id)
+
+    fill_in "title_contains", with: "XYZ"
+
+    within("#stories") do
+      expect(find("td:nth-child(1)")).to have_text story4.title
+      expect(all("#stories > tr").count).to eq(1)
+    end
+
+    fill_in "title_contains", with: story5.id
+
+    within("#stories") do
+      expect(find("td:nth-child(1)")).to have_text story5.title
+      expect(all("#stories > tr").count).to eq(1)
+    end
+  end
 end