Choosing between React or ERB Layout

gilad215 · December 2, 2018, 4:10pm

Hello everyone.
We are ready to create a Full React view, starting with the Audits page. I wrote a component that is essentially app/views/layouts/_application_content.html.erb in React.

When rendering a React page, application_content.html.erb should not be rendered,
We thought the best approach is to create a class ReactController < ApplicationController that will contain a boolean telling the Layout its a React View. Thoughts?

Thanks

TimoGoebel · December 2, 2018, 8:42pm

That’s good news. Please note that the expire_hosts plugin does some overrides on the audits page and that we should make sure not to break the plugin.

That sounds sane to me. We probably want to have that controller for all SPA pages anyways.

sharvit · December 3, 2018, 9:08am

@TimoGoebel I think it is going to be blocker issue because we still don’t have a ready solution for extending react components/pages.

I love the idea of using ReactController
I afraid boolean telling the layout what kind of layout to render can lead us to abuse it in a way we will start add if react do .. else do .. in too many places.

I prefer a solution when we have different layout files for react pages. (we can reuse whatever stay the same between layouts).

This is basically the approach @amirfefer and I went throw when we implemented the POC for SPA:

The react controller:

github.com

sharvit/foreman/blob/poc/react-router/app/controllers/react_controller.rb

class ReactController < ApplicationController
  layout 'layouts/react_application'

  def index
    render 'react/react_page'
  end

  def new
    render 'react/react_page'
  end

  def edit
    render 'react/react_page'
  end
end

The non-react layout (layout with content):

github.com

sharvit/foreman/blob/poc/react-router/app/views/layouts/application.html.erb

<%= content_for(:content) do %>
  <%= render :partial => 'layouts/application_content' %>
<% end %>

<%= render :template => 'layouts/base' %>

The react layout (layout without content):

gilad215 · December 3, 2018, 12:30pm

Implemented @sharvit suggestion.

PR is up!

github.com/theforeman/foreman

Fixes #25609 - Move Audits page to React

theforeman:develop ← glekner:auditview

opened 12:27PM - 03 Dec 18 UTC

glekner

+933 -20

Merging all the React components into one Page component for the Audits view. … - Created a generic `PageLayout` component. - Created a `AuditsPage` component. - Created a ReactController to disable the erb PageLayout File structure: ![filestructure](https://user-images.githubusercontent.com/24938324/49373571-3e7cd400-f707-11e8-9560-ad8d0ee86875.png) Also separated the components from pages in the `componentRegistry`: <img width="395" alt="screenshot 2018-12-03 13 46 52" src="https://user-images.githubusercontent.com/24938324/49373635-74ba5380-f707-11e8-966d-31ded0c2c570.png">

gilad215 · December 3, 2018, 12:47pm

Is there a way to test it? currently the Audits table is already in React, so there is no reason the plugin shouldn’t work (if its working now)

TimoGoebel · December 3, 2018, 2:50pm

This functionality was broken when the audit page was moved to react. I just noticed now. I believe we need a solution for this. Plugin’s are key to Foreman’s success in the community and we’re currently doing a great job making it hard for plugin authors.