[ROAD 534] Add state to stories (#309)

* Add nokogiri for apple silicon

* Add `approved` field to the stories table

* Add `pending` method with specs

* Add `update_story` controller action

* Add frontend

* Use path helper instead of url

* Change button color with approval status

* Use enums for story status

* Use remote: true for status button and refactor routes

* Add appropriate specs and modify existing ones to the new changes

* Move story related css to appropriate file

* Change back to headless firefox

* Refactor routes

* Apply suggestions from code review

Co-authored-by: Juan Vásquez <[email protected]>

* Add status grid-area in scss

* Refactor label update logic

* Move status field to last position

* Remove Rejected as an option on story creation

* Add specs to test status selection on story creation

* Replace `row` for query selector

---------

Co-authored-by: Ariel Juodziukynas <[email protected]>
Co-authored-by: Juan Vásquez <[email protected]>

Author: 3 people

app/assets/javascripts/stories.js

@@ -26,3 +26,20 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+function updateStatusButton(color, status) {
+  const button = document.querySelector(".story-title .dropdown-wrapper > button");
+  button.className = `button ${color}`;
+
+  const span = button.querySelector("span");
+  span.textContent = status;
+
+  document.querySelector(":focus").blur();
+}
+
+function updateStatusLabel(status, storyId) {
+  let row = document.getElementById(`story_${storyId}`)
+  status_label = row.querySelector(".status > .story-status-badge")
+  status_label.textContent = status
+  status_label.classList.value = `story-status-badge ${status}`
+}

app/assets/stylesheets/3-atoms/_badges.scss

@@ -23,3 +23,29 @@
     background-color: #57ce81;
   }
 }
+
+.story-status-badge {
+  display: inline-block;
+  padding: 7px 15px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 20px;
+  font-size: 11px;
+  background-color: $orange;
+
+  &.approved {
+    background-color: $green;
+    border-color: #1d4ed8;
+    color: $white;
+  }
+
+  &.rejected {
+    background-color: $magenta;
+    border-color: #d77e72;
+    color: $white;
+  }
+
+}

app/assets/stylesheets/4-molecules/_tables.scss

@@ -11,7 +11,7 @@
   }
   .project-table__row {
     display: grid;
-    grid-template-columns: 1fr 70px 70px 260px;
+    grid-template-columns: 1fr 100px 70px 70px 260px;
     align-items: center;
     padding: 10px 0;
     &.project-table__row--reports {

app/assets/stylesheets/stories.scss

@@ -10,10 +10,12 @@
   word-break: break-all;
 }
 
-.story-description, .extra-info, .story_preview {
+.story-description,
+.extra-info,
+.story_preview {
   margin-bottom: 25px;
   font-size: 15px;
-  p{
+  p {
     margin-top: 1em;
   }
   em {
@@ -55,7 +57,6 @@
   margin-bottom: 1.5em;
 }
 
-
 .modal p {
   padding-bottom: 1.3em;
 }
@@ -72,6 +73,7 @@
     "title preview"
     "description preview"
     "extra extra-preview"
+    "status ."
     "submit .";
   grid-template-columns: repeat(2, minmax(50%, 1fr));
   grid-column-gap: 10px;
@@ -94,6 +96,10 @@
     &.story_extra_info {
       grid-area: extra;
     }
+
+    &.story_status {
+      grid-area: status;
+    }
   }
 
   .story_preview {
@@ -104,7 +110,8 @@
     grid-area: extra-preview;
   }
 
-  .extra_info_preview .content, .story_preview .content {
+  .extra_info_preview .content,
+  .story_preview .content {
     overflow: auto;
     max-height: min(50vh, 700px);
     // prevent long links from overflowing
@@ -131,6 +138,12 @@
   padding: 5px;
 }
 
+.story-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .comments-section {
   margin: 16px 0;
 

app/controllers/stories_controller.rb

@@ -1,8 +1,8 @@
 require "csv"
 class StoriesController < ApplicationController
   before_action :authenticate_user!
-  before_action :find_project, except: [:bulk_destroy, :render_markdown, :edit, :update, :destroy, :show, :move]
-  before_action :find_story, only: [:edit, :update, :destroy, :show, :move]
+  before_action :find_project, except: [:bulk_destroy, :render_markdown, :edit, :update, :destroy, :show, :move, :approve, :reject, :pending]
+  before_action :find_story, only: [:edit, :update, :destroy, :show, :move, :approve, :reject, :pending]
   before_action :validate_url_product_id, only: [:edit, :update, :destroy, :show, :move]
   before_action :ensure_unarchived!, except: [:show, :bulk_destroy, :render_markdown, :move]
 
@@ -127,6 +127,27 @@ def move
     redirect_to @project
   end
 
+  def approve
+    @story.approved!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
+  def reject
+    @story.rejected!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
+  def pending
+    @story.pending!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
   private
 
   def find_project
@@ -143,7 +164,7 @@ def validate_url_product_id
   end
 
   def stories_params
-    params.require(:story).permit(:title, :description, :extra_info, :project_id)
+    params.require(:story).permit(:title, :description, :extra_info, :project_id, :status)
   end
 
   def expected_csv_headers?(file)

app/helpers/stories_helper.rb

@@ -1,2 +1,18 @@
 module StoriesHelper
+  def status_label(story)
+    "<span class='story-status-badge #{story.status}'>#{story.status}</span>".html_safe
+  end
+
+  def status_color(story)
+    return "green" if @story.approved?
+    return "magenta" if @story.rejected?
+
+    "orange"
+  end
+
+  def options_for_status_select(story, action)
+    return options_for_select({"Pending" => "pending", "Approved" => "approved"}, selected: story.status) if action == "new"
+
+    options_for_select({"Pending" => "pending", "Approved" => "approved", "Rejected" => "rejected"}, selected: story.status)
+  end
 end

app/models/story.rb

@@ -8,6 +8,8 @@ class Story < ApplicationRecord
 
   before_create :add_position
 
+  enum :status, [:pending, :approved, :rejected]
+
   scope :by_position, -> { order("stories.position ASC NULLS FIRST, stories.created_at ASC") }
 
   def best_estimate_average

app/views/estimates/_update_row.js.erb

@@ -1,7 +1,7 @@
-let row = document.getElementById("story_<%= estimate.story_id %>")
-row.children[1].innerText = "<%= j(estimate.best_case_points.to_s) %>"
-row.children[2].innerText = "<%= j(estimate.worst_case_points.to_s) %>"
+updateStatusLabel("<%= estimate.story.status %>", "<%= estimate.story_id %>")
 
-let totals_row = document.querySelector('.project-table tfoot tr')
-totals_row.children[1].innerText = "<%= j @project.best_estimate_sum_per_user(current_user) %>"
-totals_row.children[2].innerText = "<%= j @project.worst_estimate_sum_per_user(current_user) %>"
+document.getElementById("best_estimate_<%= estimate.story_id %>").innerText = "<%= j(estimate.best_case_points.to_s) %>"
+document.getElementById("worst_estimate_<%= estimate.story_id %>").innerText = "<%= j(estimate.worst_case_points.to_s) %>"
+
+document.querySelector('.project-table tfoot tr > .best_estimates_total').innerText = "<%= j @project.best_estimate_sum_per_user(current_user) %>"
+document.querySelector('.project-table tfoot tr > .worst_estimates_total').innerText = "<%= j @project.worst_estimate_sum_per_user(current_user) %>"

app/views/estimates/create.js.erb

@@ -1,11 +1,11 @@
 (function(){
   <% if @estimate.persisted? %>
     <%= render partial: 'update_row', locals: {estimate: @estimate} %>
-    const addEstimate = row.querySelector('.add-estimate')
+    const addEstimate = document.getElementById("story_<%= @estimate.story_id %>").querySelector('.add-estimate')
     addEstimate.insertAdjacentHTML('afterend', "<%= j(link_to 'Edit Estimate', edit_project_story_estimate_path(@project.id, @estimate.story, @estimate.id), class: "button edit-estimate", remote: true) %>")
     addEstimate.remove()
     closeModal()
   <% else %>
     updateModal("New estimate", "<%= j(render partial: 'modal_body') %>")
   <% end %>
-})()
+})()

app/views/projects/show.html.erb

@@ -14,6 +14,7 @@
         <thead class="table-header fixed-header">
           <tr class="project-table__row project-table__row--header">
             <th class="project-table__cell">Story Title</th>
+            <th class="project-table__cell">Status</th>
             <th class="project-table__cell">Best<br />Estimate</th>
             <th class="project-table__cell">Worst<br />Estimate</th>
             <th class="project-table__cell story_actions">
@@ -25,14 +26,15 @@
         <tbody id="stories" data-url="<%= sort_stories_project_path(@project.id) %>" data-unlocked="<%= is_unlocked?(@project) %>">
           <% if @stories.present? %>
             <% @stories.each do | story | %>
-              <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" >
+              <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" data-status="<%= story.status %>">
                 <td class="project-table__cell">
                   <span class="popup">Copied to clipboard</span>
                   <input type="checkbox" name="stories[]" value="<%= story.id %>">
                   <%= link_to "#{story.id} - #{story.title}", [story.project, story] %>
                 </td>
-                <td class="project-table__cell"><%= story.estimate_for(current_user)&.best_case_points %></td>
-                <td class="project-table__cell"><%= story.estimate_for(current_user)&.worst_case_points %></td>
+                <td class="project-table__cell status"><%= status_label(story) %></td>
+                <td class="project-table__cell" id="best_estimate_<%= story.id %>"><%= story.estimate_for(current_user)&.best_case_points %></td>
+                <td class="project-table__cell" id="worst_estimate_<%= story.id %>"><%= story.estimate_for(current_user)&.worst_case_points %></td>
                 <td class="project-table__cell story_actions">
                 <% if is_unlocked?(@project) %>
                   <% if estimated(story) %>
@@ -81,8 +83,9 @@
         <tfoot>
           <tr class="project-table__row project-table__row--footer">
             <td class="project-table__cell">Total estimates</td>
-            <td class="project-table__cell"><%= @project.best_estimate_sum_per_user(current_user) %></td>
-            <td class="project-table__cell"><%= @project.worst_estimate_sum_per_user(current_user) %></td>
+            <td class="project-table__cell"></td>
+            <td class="project-table__cell best_estimates_total"><%= @project.best_estimate_sum_per_user(current_user) %></td>
+            <td class="project-table__cell worst_estimates_total"><%= @project.worst_estimate_sum_per_user(current_user) %></td>
             <td class="project-table__cell"></td>
           </tr>
         </tfoot>