Merge pull request #317 from basemate/sf/action-follow-response-issue-288

Implementing `follow_response` for `action` component

Author: jonasjabari

app/concepts/matestack/ui/core/action/action.js

@@ -26,9 +26,27 @@ const componentDef = {
         if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
           matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
         }
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && (
+            self.componentConfig["success"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
           let path = self.componentConfig["success"]["transition"]["path"]
           self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && self.componentConfig["success"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["transition_to"] || response.request.responseURL;
+          self.$store.dispatch('navigateTo', {url: path, backwards: false});
+          return;
         }
       })
       .catch(function(error){

docs/components/action.md

@@ -62,6 +62,33 @@ success: {
 }
 ```
 
+When the server redirects to a url, for example after creating a new record, the transition needs to be configured to follow this redirect of the server response.
+
+```ruby
+success: {
+  emit: 'my_action_success',
+  transition: {
+    follow_response: true
+  }
+}
+```
+
+A controller action that would create a record and then respond with the url the page should transition to, could look like this:
+
+```ruby
+class TestModelsController < ApplicationController
+  include Matestack::Ui::Core::ApplicationHelper
+
+  def create
+    @test_model = TestModel.create(test_model_params)
+
+    render json: {
+      transition_to: test_model_path(@test_model)
+    }, status: :ok
+  end
+end
+```
+
 ### Failure
 
 As counterpart to the success part of the action component, there is also the possibility to define the failure behavior. This is what gets triggered after the response to our action returns a failure code, usually in the range of `400` or `500` HTTP status codes.

spec/usage/components/action_spec.rb

@@ -619,4 +619,174 @@ def response
   #
   # end
 
+  specify "follow_response option makes a transition follow controllers' transition_to" do
+
+    class TestModelsController < ExampleController
+      include Matestack::Ui::Core::ApplicationHelper
+
+      def index
+        responder_for Pages::FollowResponseExampleApp::ExamplePage
+      end
+
+      def create
+        @test_model = TestModel.create title: params[:title]
+        render json: {
+          transition_to: test_model_path(id: @test_model.id)
+        }, status: :ok
+      end
+
+      def show
+        @test_model = TestModel.find params[:id]
+        responder_for Pages::FollowResponseExampleApp::TestModelPage
+      end
+    end
+
+    Rails.application.routes.append do
+      resources :test_models
+    end
+    Rails.application.reload_routes!
+
+    class Apps::FollowResponseExampleApp < Matestack::Ui::App
+      def response
+        components {
+          heading size: 1, text: "My Example App Layout"
+          main do
+            page_content
+          end
+        }
+      end
+    end
+
+    module Pages::FollowResponseExampleApp
+    end
+
+    class Pages::FollowResponseExampleApp::ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          action action_config do
+            button text: "Click me!"
+          end
+        }
+      end
+
+      def action_config
+        return {
+          method: :post,
+          path: :test_models_path,
+          data: {
+            title: "A title for my new test object"
+          },
+          success: {
+            transition: {
+              follow_response: true
+            }
+          }
+        }
+      end
+
+    end
+
+    class Pages::FollowResponseExampleApp::TestModelPage < Matestack::Ui::Page
+      def response
+        components {
+          heading text: @test_model.title, size: 1
+          plain "This page has been loaded via redirect_to and follow_response."
+        }
+      end
+    end
+
+    visit "/test_models"
+
+    click_button "Click me!"
+
+    expect(page).to have_no_text "Click me"
+    expect(page).to have_text "A title for my new test object"
+    expect(page).to have_text "This page has been loaded via redirect_to and follow_response."
+
+  end
+
+  specify "follow_response option makes a transition follow controllers' redirect_to" do
+
+    class TestModelsController < ExampleController
+      include Matestack::Ui::Core::ApplicationHelper
+
+      def index
+        responder_for Pages::FollowResponseExampleApp::ExamplePage
+      end
+
+      def create
+        @test_model = TestModel.create title: params[:title]
+        redirect_to test_model_path(id: @test_model.id)
+      end
+
+      def show
+        @test_model = TestModel.find params[:id]
+        responder_for Pages::FollowResponseExampleApp::TestModelPage
+      end
+    end
+
+    Rails.application.routes.append do
+      resources :test_models
+    end
+    Rails.application.reload_routes!
+
+    class Apps::FollowResponseExampleApp < Matestack::Ui::App
+      def response
+        components {
+          heading size: 1, text: "My Example App Layout"
+          main do
+            page_content
+          end
+        }
+      end
+    end
+
+    module Pages::FollowResponseExampleApp
+    end
+
+    class Pages::FollowResponseExampleApp::ExamplePage < Matestack::Ui::Page
+      def response
+        components {
+          action action_config do
+            button text: "Click me!"
+          end
+        }
+      end
+
+      def action_config
+        return {
+          method: :post,
+          path: :test_models_path,
+          data: {
+            title: "A title for my new test object"
+          },
+          success: {
+            transition: {
+              follow_response: true
+            }
+          }
+        }
+      end
+
+    end
+
+    class Pages::FollowResponseExampleApp::TestModelPage < Matestack::Ui::Page
+      def response
+        components {
+          heading text: @test_model.title, size: 1
+          plain "This page has been loaded via redirect_to and follow_response."
+        }
+      end
+    end
+
+    visit "/test_models"
+
+    click_button "Click me!"
+
+    expect(page).to have_no_text "Click me"
+    expect(page).to have_text "A title for my new test object"
+    expect(page).to have_text "This page has been loaded via redirect_to and follow_response."
+
+  end
+
 end