Implement lazy components in login page

.postcssrc.yml

@@ -1,3 +1,3 @@
 plugins:
-  postcss-smart-import: {}
-  postcss-cssnext: {}
+  # postcss-smart-import: {}
+  # postcss-cssnext: {}

app/javascript/packs/login.scss

@@ -1,45 +1,45 @@
 /* As we disabled automatic PF4/React css inline injection */
 /* Now we need to add pf4 styles manually */
 
-// import 'patternflyStyles/pf4Base'
-@import '~@patternfly/patternfly/patternfly-variables.css';
-@import '~@patternfly/patternfly/patternfly-shield-noninheritable.css';
-@import '~@patternfly/patternfly/patternfly-shield-inheritable.css';
-@import '~@patternfly/patternfly/patternfly-common.css';
-@import '~@patternfly/patternfly/patternfly-globals.css';
-@import '~@patternfly/patternfly/patternfly-addons.css';
-
-@import '~@patternfly/patternfly/components/Page/page.css';
-@import '~@patternfly/patternfly/components/Nav/nav.css';
-@import '~@patternfly/patternfly/components/ContextSelector/context-selector.css';
-@import '~@patternfly/patternfly/layouts/Level/level.css';
-@import '~@patternfly/patternfly/patternfly-fonts.css';
-
-/****** HACK ******/
-
-/* PF4 font-size is not dynamic, but ours is.
-As we are still in a transition where PF4 is not totally implemented,
-we are keeping the dinamycally calculated size.
-This code must be removed once PF4 is implemented in the whole application */
-
-@media screen and (max-width: 979px) {
-  html {
-    font-size: 0.65rem!important;
-  }
-}
-
-@media screen and (min-width: 980px) {
-  html {
-      font-size:calc(0.65rem + 0.35 * ((100vw - 50rem) / 50))!important;
-  }
-}
-
-@media screen and (min-width: 1600px) {
-  html {
-      font-size:1rem!important;
-  }
-}
-/****** END OF HACK ******/
+// // import 'patternflyStyles/pf4Base'
+// @import '~@patternfly/patternfly/patternfly-variables.css';
+// @import '~@patternfly/patternfly/patternfly-shield-noninheritable.css';
+// @import '~@patternfly/patternfly/patternfly-shield-inheritable.css';
+// @import '~@patternfly/patternfly/patternfly-common.css';
+// @import '~@patternfly/patternfly/patternfly-globals.css';
+// @import '~@patternfly/patternfly/patternfly-addons.css';
+
+// @import '~@patternfly/patternfly/components/Page/page.css';
+// @import '~@patternfly/patternfly/components/Nav/nav.css';
+// @import '~@patternfly/patternfly/components/ContextSelector/context-selector.css';
+// @import '~@patternfly/patternfly/layouts/Level/level.css';
+// @import '~@patternfly/patternfly/patternfly-fonts.css';
+
+// /****** HACK ******/
+
+// /* PF4 font-size is not dynamic, but ours is.
+// As we are still in a transition where PF4 is not totally implemented,
+// we are keeping the dinamycally calculated size.
+// This code must be removed once PF4 is implemented in the whole application */
+
+// @media screen and (max-width: 979px) {
+//   html {
+//     font-size: 0.65rem!important;
+//   }
+// }
+
+// @media screen and (min-width: 980px) {
+//   html {
+//       font-size:calc(0.65rem + 0.35 * ((100vw - 50rem) / 50))!important;
+//   }
+// }
+
+// @media screen and (min-width: 1600px) {
+//   html {
+//       font-size:1rem!important;
+//   }
+// }
+// /****** END OF HACK ******/
 
 // import 'patternflyStyles/loginPage'
 @import '~@patternfly/patternfly/components/Login/login.css';

app/javascript/packs/login.ts

@@ -1 +1,12 @@
-// TODO: move here login_page and sign_up_page packs
+import render from 'LoginPage/render'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const containerId = 'pf-login-page-container'
+  const container = document.getElementById(containerId)
+
+  if (!container) {
+    return
+  }
+
+  render(container)
+})

app/javascript/src/ChangePassword/components/ChangePassword.tsx

@@ -62,7 +62,7 @@ const ChangePassword: FunctionComponent<Props> = ({
       brandImgSrc={brandImg}
       loginTitle="Change Password"
     >
-      {errors.length && <FlashMessages flashMessages={errors} />}
+      {errors.length > 0 && <FlashMessages flashMessages={errors} />}
       <Form
         noValidate
         acceptCharset="UTF-8"

app/javascript/src/LoginPage/LoginPageWrapper.tsx

@@ -1,7 +1,6 @@
 import { Component } from 'react'
 import { LoginPage } from '@patternfly/react-core'
 
-import { createReactWrapper } from 'utilities/createReactWrapper'
 import { AuthenticationProviders } from 'LoginPage/loginForms/AuthenticationProviders'
 import { FlashMessages } from 'LoginPage/loginForms/FlashMessages'
 import { ForgotCredentials } from 'LoginPage/loginForms/ForgotCredentials'
@@ -84,8 +83,5 @@ class SimpleLoginPage extends Component<Props, State> {
   }
 }
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const LoginPageWrapper = (props: Props, containerId: string): void => { createReactWrapper(<SimpleLoginPage {...props} />, containerId) }
-
 export type { Props }
-export { SimpleLoginPage, LoginPageWrapper }
+export { SimpleLoginPage as default }

app/javascript/src/LoginPage/RequestPasswordWrapper.tsx

@@ -1,6 +1,5 @@
 import { LoginPage } from '@patternfly/react-core'
 
-import { createReactWrapper } from 'utilities/createReactWrapper'
 import brandImg from 'LoginPage/assets/images/3scale_Logo_Reverse.png'
 import PF4DownstreamBG from 'LoginPage/assets/images/PF4DownstreamBG.svg'
 import { FlashMessages } from 'LoginPage/loginForms/FlashMessages'
@@ -35,8 +34,6 @@ const RequestPassword: FunctionComponent<Props> = ({
   </LoginPage>
 )
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const RequestPasswordWrapper = (props: Props, containerId: string): void => { createReactWrapper(<RequestPassword {...props} />, containerId) }
-
 export type { Props }
-export { RequestPassword, RequestPasswordWrapper }
+export default RequestPassword
+export { RequestPassword }

app/javascript/src/LoginPage/SignupPageWrapper.tsx

@@ -1,6 +1,5 @@
 import { LoginPage } from '@patternfly/react-core'
 
-import { createReactWrapper } from 'utilities/createReactWrapper'
 import brandImg from 'LoginPage/assets/images/3scale_Logo_Reverse.png'
 import PF4DownstreamBG from 'LoginPage/assets/images/PF4DownstreamBG.svg'
 import { FlashMessages } from 'LoginPage/loginForms/FlashMessages'
@@ -22,8 +21,6 @@ const SignupPage: FunctionComponent<Props> = ({ user, name, path }) => (
   </LoginPage>
 )
 
-// eslint-disable-next-line react/jsx-props-no-spreading
-const SignupPageWrapper = (props: Props, containerId: string): void => { createReactWrapper(<SignupPage {...props} />, containerId) }
-
 export type { Props }
-export { SignupPage, SignupPageWrapper }
+export default SignupPage
+export { SignupPage }

app/javascript/src/LoginPage/render.tsx

@@ -0,0 +1,30 @@
+import { lazy, StrictMode, Suspense } from 'react'
+import { render } from 'react-dom'
+
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+// @ts-expect-error TS2691
+const LoginPage = lazy(() => import('LoginPage/LoginPageWrapper.tsx'))
+// @ts-expect-error TS2691
+const RequestPassword = lazy(() => import('LoginPage/RequestPasswordWrapper.tsx'))
+// @ts-expect-error TS2691
+const SignupPage = lazy(() => import('LoginPage/SignupPageWrapper.tsx'))
+// @ts-expect-error TS2691
+const ChangePassword = lazy(() => import('ChangePassword/components/ChangePassword.tsx'))
+/* eslint-enable @typescript-eslint/no-unsafe-return */
+
+export default function (container: HTMLElement): void {
+  const { loginProps, changePasswordProps, signupProps, requestProps } = container.dataset
+
+  render((
+    <StrictMode>
+      <Suspense fallback="">
+        {/* eslint-disable react/jsx-props-no-spreading */}
+        {loginProps && <LoginPage {...JSON.parse(loginProps)} />}
+        {changePasswordProps && <ChangePassword {...JSON.parse(changePasswordProps)} />}
+        {signupProps && <SignupPage {...JSON.parse(signupProps)} />}
+        {requestProps && <RequestPassword {...JSON.parse(requestProps)} />}
+        {/* eslint-enable react/jsx-props-no-spreading */}
+      </Suspense>
+    </StrictMode>
+  ), container)
+}

app/views/provider/invitee_signups/show.html.erb

@@ -1,5 +1,3 @@
-<%= javascript_pack_tag 'sign_up_page' %>
-
 <%= tag("div", :id => "pf-login-page-container", :"data-signup-props" => {:path => provider_invitee_signup_path(@invitation.token),
   :name => @invitation.account.name,
   :user => {

app/views/provider/passwords/reset.html.slim

@@ -1,7 +1,6 @@
-= javascript_pack_tag 'request_password_page'
 - authentication_providers = (@authentication_providers || []).map { |ap| {authorizeURL: ap.authorize_url, humanKind: ap.human_kind} }
 - flash_messages = (flash || []).map { |f| {type: f[0], message: f[1]}}
 
-div#pf-request-page-container data-request-props={flashMessages: flash_messages,
+div#pf-login-page-container data-request-props={flashMessages: flash_messages,
   providerLoginPath: provider_login_path,
   providerPasswordPath: provider_password_path }.to_json

app/views/provider/passwords/show.html.erb

@@ -1,4 +1,2 @@
-<%= javascript_pack_tag 'change_password' %>
-
 <%= tag :div, id: 'pf-login-page-container',
               data: { change_password_props: @password_presenter.change_password_props_json } %>

app/views/provider/sessions/new.html.slim

@@ -1,4 +1,3 @@
-= javascript_pack_tag 'login_page'
 - authentication_providers = (@authentication_providers || []).map { |ap| {authorizeURL: ap.authorize_url, humanKind: ap.human_kind} }
 - flash_messages = (flash || []).map { |f| {type: f[0], message: f[1]}}
 - is_master_account = domain_account.master?

config/webpack/development.js

@@ -1,4 +1,5 @@
 const environment = require('./environment')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 
 // Add Webpack custom configs here
 environment.loaders.append('eslint', {
@@ -18,4 +19,6 @@ environment.loaders.append('eslint', {
 const tsLoader = environment.loaders.get('ts')
 tsLoader.options.reportFiles = [/!(spec\/javascripts)/]
 
+environment.plugins.append('analyzer', new BundleAnalyzerPlugin())
+
 module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -3,42 +3,17 @@ const path = require('path')
 
 // Add global webpack configs here
 
-environment.loaders.delete('css')
-environment.loaders.delete('moduleCss')
-environment.loaders.delete('sass')
-environment.loaders.delete('moduleSass')
-
 environment.loaders.append('ts', {
   test: /.(ts|tsx)$/,
   options: {},
+  include: path.resolve(__dirname, '../../app/javascript'),
   loader: 'ts-loader'
 })
 
-environment.loaders.append('null', {
-  test: /\.css$/,
-  include: stylesheet => stylesheet.indexOf('@patternfly/react-styles/css/') > -1,
-  use: ['null-loader']
-})
-
-environment.loaders.append('style', {
-  test: /(\.css|\.scss|\.sass)$/,
-  use: [
-    { loader: 'style-loader' },
-    { loader: 'css-loader' },
-    {
-      loader: 'sass-loader',
-      options: {
-        modules: true,
-        localIdentName: '[name]---[local]---[hash:base64:5]'
-      }
-    }
-  ]
-})
-
 environment.loaders.append('yaml', {
   test: /\.ya?ml$/,
   use: 'yaml-loader',
-  include: path.resolve(__dirname, '../../app/javascript'),
+  include: path.resolve(__dirname, '../../app/javascript/src/QuickStarts/templates'),
   type: 'json'
 })
 
@@ -52,14 +27,14 @@ environment.loaders.append('yaml', {
  *
  * https://github.com/3scale/porta/pull/3072
  */
-const { output } = environment.config;
-const oldPublicPath = output.publicPath
-output.publicPath = '';
-
-const fileLoader = environment.loaders.get('file');
-Object.assign(fileLoader.use[0].options, {
-  publicPath: oldPublicPath,
-  postTransformPublicPath: (p) => `window.rails_asset_host + ${p}`
-});
+// const { output } = environment.config;
+// const oldPublicPath = output.publicPath
+// output.publicPath = '';
+
+// const fileLoader = environment.loaders.get('file');
+// Object.assign(fileLoader.use[0].options, {
+//   publicPath: oldPublicPath,
+//   postTransformPublicPath: (p) => `window.rails_asset_host + ${p}`
+// });
 
 module.exports = environment

package.json

@@ -69,6 +69,7 @@
     "ts-loader": "8.4.0",
     "typescript": "^4.8.4",
     "webpack": "4.46.0",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.1",
     "yaml-loader": "^0.6.0"