[ROAD 534] Add state to stories

Gemfile.lock

@@ -198,6 +198,8 @@ GEM
     next_rails (1.2.2)
       colorize (>= 0.8.1)
     nio4r (2.5.8)
+    nokogiri (1.14.3-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.14.3-x86_64-darwin)
       racc (~> 1.4)
     nokogiri (1.14.3-x86_64-linux)
@@ -399,6 +401,7 @@ GEM
     zeitwerk (2.6.7)
 
 PLATFORMS
+  arm64-darwin-22
   x86_64-darwin-21
   x86_64-linux
 

app/assets/javascripts/stories.js

@@ -26,3 +26,13 @@ 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();
+}

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

@@ -126,3 +126,9 @@
   border: 1px solid #9b054d;
   padding: 5px;
 }
+
+.story-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}

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]
 
@@ -112,6 +112,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
@@ -128,7 +149,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, :approved)
   end
 
   def expected_csv_headers?(file)

app/helpers/stories_helper.rb

@@ -1,2 +1,13 @@
 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?
+
+    return "orange" if @story.pending?
+  end
 end

app/models/story.rb

@@ -7,6 +7,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,10 @@
 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) %>"
+status_label = row.querySelector(".status > .story-status-badge")
+status_label.textContent = "<%= estimate.story.status %>"
+status_label.classList.value = "story-status-badge <%= estimate.story.status %>"
 
-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

@@ -8,4 +8,4 @@
   <% 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">
                   <input type="checkbox" name="stories[]" value="<%= story.id %>">
                   <%= link_to 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>
-                <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) %>
@@ -83,8 +85,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>

app/views/shared/_story.html.erb

@@ -1,4 +1,17 @@
-<h4 class="word-break">Story #<%= story.id %>: <%= story.title %></h4>
+<div class="story-title">
+  <h4 class="word-break">Story #<%= story.id %>: <%= story.title %></h4>
+  <div class="dropdown-wrapper">
+    <button class="button <%= status_color(story) %>">
+      <span><%= story.status %></span>
+      <i class="fa fa-solid fa-caret-down"></i>
+    </button>
+    <div class="dropdown">
+      <%= button_to "Approve", approve_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+      <%= button_to "Reject", reject_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+      <%= button_to "Pending", pending_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+    </div>
+  </div>
+</div>
 
 <div class="story-description">
   <%= markdown(story.description) %>

app/views/shared/update_status.js.erb

@@ -0,0 +1 @@
+updateStatusButton("<%= status_color(@story) %>", "<%= @story.status %>");

app/views/stories/_form.html.erb

@@ -13,6 +13,11 @@
 
   <%= f.hidden_field :project_id, value: params[:project_id] %>
 
+  <div class="field story_status">
+    <%= f.label :status, "Status" %>
+    <%= f.select :status, options_for_select({ "Pending" => "pending", "Approved" => "approved", "Rejected" => "rejected" }, selected: @story.status), class: "project-story-approved" %>
+  </div>
+
   <div class="field story_title">
     <%= f.label :title %>
     <%= f.text_field :title, placeholder: "Story Title", class: "project-story-title", autofocus: true %>

config/routes.rb

@@ -11,6 +11,10 @@
   get "home/index"
   get "reports/index"
 
+  patch "stories/:id/approve", to: "stories#approve", as: "approve_story"
+  patch "stories/:id/reject", to: "stories#reject", as: "reject_story"
+  patch "stories/:id/pending", to: "stories#pending", as: "pending_story"
+
   resource :stories do
     post :bulk_destroy, to: "stories#bulk_destroy"
     post :render_markdown

db/migrate/20230829001347_add_status_to_stories.rb

@@ -0,0 +1,5 @@
+class AddStatusToStories < ActiveRecord::Migration[7.0]
+  def change
+    add_column :stories, :status, :integer, default: 0
+  end
+end

db/schema.rb

@@ -44,6 +44,7 @@
     t.integer "position"
     t.integer "real_score"
     t.string "extra_info"
+    t.integer "status", default: 0
   end
 
   create_table "users", force: :cascade do |t|

spec/controllers/stories_controller_spec.rb

@@ -144,5 +144,32 @@
         expect(response).to redirect_to project2
       end
     end
+
+    describe "#approve" do
+      it "updates the story status to approved" do
+        patch :approve, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("approved")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
+
+    describe "#reject" do
+      it "updates the story status to rejected" do
+        patch :reject, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("rejected")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
+
+    describe "#pending" do
+      it "updates the story status to pending" do
+        patch :pending, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("pending")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
   end
 end

spec/features/story_show_spec.rb

@@ -0,0 +1,47 @@
+require "rails_helper"
+
+RSpec.describe "story status", js: true do
+  let(:user) { FactoryBot.create(:user) }
+  let(:project) { FactoryBot.create(:project) }
+  let!(:story) { FactoryBot.create(:story, project: project) }
+
+  before do
+    login_as(user, scope: :user)
+  end
+
+  context "from the show page" do
+    it "allows me to change the story status" do
+      visit project_story_path(project_id: project.id, id: story.id)
+
+      status_button = find(".dropdown-wrapper").find("button")
+
+      status_button.click
+      click_button("Approve")
+
+      status_button = find(".dropdown-wrapper").find("button")
+
+      expect(status_button).to have_text("approved")
+    end
+  end
+
+  context "from the estimation modal" do
+    it "allows me to change the story status" do
+      visit project_path(id: project.id)
+      click_link "Add Estimate"
+
+      status_button = find(".story-title").find(".dropdown-wrapper").find("button")
+
+      status_button.click
+      click_button("Approve")
+
+      status_button = find(".story-title").find(".dropdown-wrapper").find("button")
+
+      expect(status_button).to have_text("approved")
+
+      click_button "Save changes"
+
+      status_badge = find(".project-table").find(".status").find(".story-status-badge")
+      expect(status_badge).to have_text("approved")
+    end
+  end
+end

spec/rails_helper.rb

@@ -15,7 +15,7 @@
   browser_options.args << "-headless"
   Capybara::Selenium::Driver.new(app, browser: :firefox, options: browser_options)
 end
-Capybara.javascript_driver = :headless_firefox
+Capybara.javascript_driver = :selenium
 Capybara.server = :puma, {Silent: true}
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
@@ -63,8 +63,8 @@ def expect_closed_modal
 
   def expect_story_estimates(story, best, worst)
     within_story_row(story) do
-      expect(find("td:nth-child(2)")).to have_text best.to_s
-      expect(find("td:nth-child(3)")).to have_text worst.to_s
+      expect(find("td:nth-child(3)")).to have_text best.to_s
+      expect(find("td:nth-child(4)")).to have_text worst.to_s
     end
   end
 end