[FEATURE] make isolated components work in rails legayc views

Author: Nils Henning

app/concepts/matestack/ui/core/isolated/children_wrapper.haml

@@ -0,0 +1,2 @@
+%div{ class: 'matestack-isolated-component-root'}
+  =yield

app/concepts/matestack/ui/core/isolated/isolated.rb

@@ -40,7 +40,9 @@ def show
 
     # this method gets called when the isolate vuejs component requests isolated content
     def render_isolated_content
-      render :children if authorized?
+      render :children_wrapper do
+        render :children if authorized?
+      end
     end
 
     def authorized?

app/helpers/matestack/ui/core/application_helper.rb

@@ -44,13 +44,11 @@ def render(*args)
                   (matestack_arg < Matestack::Ui::Page)
             Rendering::MainRenderer.render(self, matestack_arg, options)
           else
-            # if called from a controller and params contains a component key render without layout
-            # else it was called from within an app/page and should render normally
-            # if self.is_a?(ActionController::Base) && params&.dig(:component_key)
-            #   super layout: false
-            # else
+            if params[:component_class].present? && !((options = args.first).is_a?(Hash) && options[:html].present?)
+              Rendering::MainRenderer.render(self, Matestack::Ui::Page, {})
+            else
               super
-            # end
+            end
           end
         end
 

docker-compose.yml

@@ -9,6 +9,8 @@ services:
       - "3000:3000"
     environment:
       RAILS_ENV: development
+    links:
+      - postgres_dummy
     volumes:
       - ./:/app
       - gem-volume:/usr/local/bundle
@@ -59,6 +61,17 @@ services:
     volumes:
       - test-data-volume:/var/lib/postgresql/data
 
+  postgres_dummy:
+    image: postgres
+    expose:
+      - 5432
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: dummy
+    volumes:
+      - test-data-volume:/var/lib/postgresql/data
+
 volumes:
   test-data-volume:
   gem-volume:

spec/dummy/app/matestack/components/legacy_views/pages/isolated.rb

@@ -2,7 +2,11 @@ class Components::LegacyViews::Pages::Isolated < Matestack::Ui::IsolatedComponen
 
   def response
     div class: 'my-isolated' do
-      plain I18n.l(DateTime.now)
+      plain DateTime.now.strftime('%Q')
+    end
+    hr
+    async rerender_on: 'async_update_time', id: 'foobar' do
+      paragraph id: 'async-time', text: DateTime.now.strftime('%Q')
     end
   end
 

spec/dummy/config/database.yml

@@ -13,7 +13,8 @@ test:
 
 development:
   <<: *default
-  database: development
+  host: postgres_dummy
+  database: dummy
 
 staging:
   <<: *default

spec/test/components/dynamic/isolated/isolated_spec.rb

@@ -70,10 +70,10 @@ def response
 
     visit "/example"
     # used on page
-    expect(page).to have_xpath('//div[@id="page-div"]/div[@class="matestack-isolated-component-container"]/div[@class="matestack-isolated-component-wrapper"]/div[@class="some-isolated-component"]/span[@id="text" and contains(.,"some isolated compenent")]')
+    expect(page).to have_xpath('//div[@id="page-div"]/div[@class="matestack-isolated-component-container"]/div[@class="matestack-isolated-component-wrapper"]/div[@class="matestack-isolated-component-root"]/div[@class="some-isolated-component"]/span[@id="text" and contains(.,"some isolated compenent")]')
 
     # used on component
-    expect(page).to have_xpath('//div[@id="page-div"]/div[@class="some-other-component"]/div[@class="matestack-isolated-component-container"]/div[@class="matestack-isolated-component-wrapper"]/div[@class="some-isolated-component"]/span[@id="text" and contains(.,"some isolated compenent")]')
+    expect(page).to have_xpath('//div[@id="page-div"]/div[@class="some-other-component"]/div[@class="matestack-isolated-component-container"]/div[@class="matestack-isolated-component-wrapper"]/div[@class="matestack-isolated-component-root"]/div[@class="some-isolated-component"]/span[@id="text" and contains(.,"some isolated compenent")]')
 
   end
 

spec/test/components/legacy_views/isolated_spec.rb

@@ -8,12 +8,22 @@
 
     expect(page).to have_content('Isolated Custom Component')
     expect(page).to have_css('.my-isolated')
+    expect(page).to have_css('#async-time')
     initial_timestamp = page.find(".my-isolated").text #initial page load
-    sleep
+    
     page.execute_script('MatestackUiCore.matestackEventHub.$emit("update_time")')
     expect(page).to have_content('Isolated Custom Component')
     expect(page).to have_css('.my-isolated')
+    expect(page).to have_css('#async-time')
     expect(page).not_to have_content(initial_timestamp)
+    async_timestamp = page.find("#async-time").text #initial page load
+    
+    expect(page).to have_content(async_timestamp, count: 2)
+    # rerender async inside isolate
+    page.execute_script('MatestackUiCore.matestackEventHub.$emit("async_update_time")')
+    expect(page).to have_css('.my-isolated')
+    expect(page).to have_css('#async-time')
+    expect(page).to have_content(async_timestamp, count: 1) # isolate component still has same timestamp, async has different
   end
 
 end