fix: reduce bundle size

package.json

@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.2",
     "@react-pdf/renderer": "^3.1.11",
     "@sentry/react": "^8.32.0",
     "@sentry/webpack-plugin": "^2.22.4",
@@ -44,6 +45,7 @@
     "file-saver": "^2.0.2",
     "final-form": "^4.20.7",
     "font-awesome": "^4.7.0",
+    "formik": "^2.4.9",
     "history": "^4.7.2",
     "html-webpack-plugin": "^5.5.0",
     "i18n-react": "^0.6.4",
@@ -59,7 +61,7 @@
     "mini-css-extract-plugin": "^2.6.0",
     "moment": "^2.22.2",
     "moment-timezone": "^0.5.21",
-    "openstack-uicore-foundation": "4.2.28-beta.6",
+    "openstack-uicore-foundation": "5.0.47",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",

src/app.js

@@ -23,7 +23,7 @@ import LogInCallbackRoute from './routes/login-callback-route'
 import DefaultRoute from "./routes/default-route";
 import SummitLayout from './layouts/summit-layout';
 import LandingLayout from './layouts/landing-layout';
-import {AjaxLoader} from "openstack-uicore-foundation/lib/components";
+import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
 import {resetLoading} from "openstack-uicore-foundation/lib/utils/actions";
 import {doLogout, onUserAuth, getUserInfo} from 'openstack-uicore-foundation/lib/security/actions';
 import {initLogOut, doLoginBasicLogin, getIdToken} from 'openstack-uicore-foundation/lib/security/methods';
@@ -41,8 +41,7 @@ import URI from "urijs";
 import { putOnLocalStorage }
   from "openstack-uicore-foundation/lib/utils/methods";
 import {BACK_URL} from "./utils/constants";
-import * as Sentry from "@sentry/react";
-import {SentryFallbackFunction} from './components/SentryErrorComponent';
+import SentryErrorBoundary from "./components/SentryErrorBoundary";
 // here is set by default user lang as en
 let language = localStorage.getItem("PREFERRED_LANGUAGE");
 
@@ -90,6 +89,7 @@ window.SHOW_LANGUAGE_SELECTION = !!Number(process.env["SHOW_LANGUAGE_SELECTION"]
 window.SUPPORT_EMAIL = process.env["SUPPORT_EMAIL"];
 window.SENTRY_DSN = process.env["SENTRY_DSN"];
 window.SENTRY_TRACE_SAMPLE_RATE = process.env['SENTRY_TRACE_SAMPLE_RATE'];
+window.SENTRY_TRACE_PROPAGATION_TARGETS = process.env['SENTRY_TRACE_PROPAGATION_TARGETS'];
 
 if (exclusiveSections.hasOwnProperty(window.APP_CLIENT_NAME)) {
   window.EXCLUSIVE_SECTIONS = exclusiveSections[window.APP_CLIENT_NAME];
@@ -144,29 +144,8 @@ const App = ({isLoggedUser, onUserAuth, doLogout, getUserInfo, loading, ...props
     profile_pic = jwt.payload.picture;
   }
 
-  if (window.SENTRY_DSN && window.SENTRY_DSN !== "" && sentryInitialized === false) {
-    console.log("app init sentry ...")
-    // Initialize Sentry
-    Sentry.init({
-      dsn: window.SENTRY_DSN,
-      integrations: [
-        Sentry.browserTracingIntegration(),
-        Sentry.replayIntegration(),
-      ],
-      // Set tracesSampleRate to 1.0 to capture 100%
-      // of transactions for performance monitoring.
-      tracesSampleRate: window.SENTRY_TRACE_SAMPLE_RATE,
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-      tracePropagationTargets: ["localhost"],
-      // Session Replay
-      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-    });
-    setSentryInitialized(true);
-  }
-
   return (
-    <Sentry.ErrorBoundary fallback={SentryFallbackFunction({ componentName: "Call For Presentation App" })}>
+    <SentryErrorBoundary componentName="Call For Presentation App">
       <Router history={history}>
         <SelectionPlanContext.Provider value={{ selectionPlanCtx, setSelectionPlanCtx }}>
 
@@ -209,7 +188,7 @@ const App = ({isLoggedUser, onUserAuth, doLogout, getUserInfo, loading, ...props
           </div>
         </SelectionPlanContext.Provider>
       </Router>
-    </Sentry.ErrorBoundary>
+    </SentryErrorBoundary>
   );
 }
 

src/components/SentryErrorBoundary.js

@@ -0,0 +1,60 @@
+import React, { Component } from "react";
+import { SentryFallbackFunction } from "./SentryErrorComponent";
+
+class SentryErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { Sentry: null, hasError: false };
+  }
+
+  // Makes this component itself a real error boundary, active from the very
+  // first render - the Sentry-backed ErrorBoundary below only becomes
+  // available after its chunk loads, so without this there is a window
+  // (every initial mount) with no boundary at all.
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    // Best-effort report: only reachable if this boundary caught the error
+    // itself rather than the nested Sentry.ErrorBoundary (e.g. during the
+    // bootstrap window before the chunk loads, or if Sentry is disabled).
+    const { Sentry } = this.state;
+    if (Sentry) {
+      Sentry.captureException(error, { extra: info });
+    }
+  }
+
+  componentDidMount() {
+    if (window.SENTRY_DSN && window.SENTRY_DSN !== "") {
+      import("../sentry-init").then(({ initSentry }) => {
+        const Sentry = initSentry();
+        this.setState({ Sentry });
+      });
+    }
+  }
+
+  render() {
+    const { Sentry, hasError } = this.state;
+    const { children, componentName } = this.props;
+
+    if (hasError) {
+      return SentryFallbackFunction({ componentName });
+    }
+
+    if (Sentry) {
+      const { ErrorBoundary } = Sentry;
+      return (
+        <ErrorBoundary
+          fallback={SentryFallbackFunction({ componentName })}
+        >
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default SentryErrorBoundary;

src/components/affiliationstable/AffiliationsTable.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import AffiliationsActionsTableCell from './AffiliationsActionsTableCell';
-import { OrganizationInput, DateTimePicker } from 'openstack-uicore-foundation/lib/components'
+import DateTimePicker from 'openstack-uicore-foundation/lib/components/inputs/datetimepicker';
+import OrganizationInput from 'openstack-uicore-foundation/lib/components/inputs/organization-input';
 import { epochToMoment, formatEpoch } from 'openstack-uicore-foundation/lib//utils/methods'
 import { addAffiliation, saveAffiliation, deleteAffiliation } from "../../actions/member-actions"
 import T from "i18n-react/dist/i18n-react";

src/components/clock.js

@@ -12,7 +12,7 @@
  **/
 
 import React from 'react';
-import { Clock }  from "openstack-uicore-foundation/lib/components";
+import Clock  from "openstack-uicore-foundation/lib/components/clock";
 import { updateClock } from '../actions/clock-actions';
 import { connect } from 'react-redux';
 

src/components/inputs/questions-input.js

@@ -13,7 +13,11 @@
 
 import React from 'react';
 import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
-import {Input, Dropdown, RadioList, CheckboxList, RawHTML} from 'openstack-uicore-foundation/lib/components'
+import Input from 'openstack-uicore-foundation/lib/components/inputs/text-input';
+import Dropdown from 'openstack-uicore-foundation/lib/components/inputs/dropdown';
+import RadioList from 'openstack-uicore-foundation/lib/components/inputs/radio-list';
+import CheckboxList from 'openstack-uicore-foundation/lib/components/inputs/checkbox-list';
+import RawHTML from 'openstack-uicore-foundation/lib/components/raw-html';
 import {EXTRA_QUESTION_MAX_LENGTH} from "../../utils/constants";
 
 export default class QuestionsInput extends React.Component {

src/components/presentation-review-form.js

@@ -14,7 +14,7 @@
 import React from 'react'
 import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
 import SubmitButtons from "./presentation-submit-buttons";
-import { RawHTML } from 'openstack-uicore-foundation/lib/components'
+import RawHTML from 'openstack-uicore-foundation/lib/components/raw-html'
 import T from "i18n-react/dist/i18n-react";
 import {getMarketingValue} from "./marketing-setting";
 

src/components/presentation-speakers-form.js

@@ -14,7 +14,8 @@
 import React from 'react'
 import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
 import SubmitButtons from "./presentation-submit-buttons";
-import { Exclusive, Dropdown } from 'openstack-uicore-foundation/lib/components'
+import Exclusive from 'openstack-uicore-foundation/lib/components/exclusive-wrapper';
+import Dropdown from 'openstack-uicore-foundation/lib/components/inputs/dropdown';
 import T from "i18n-react/dist/i18n-react";
 import CPFSpeakerInput from './inputs/speaker-input'
 import Swal from "sweetalert2";

src/components/presentation-summary-form.js

@@ -14,7 +14,13 @@
 import React, {useState, useEffect} from 'react'
 import T from 'i18n-react/dist/i18n-react'
 import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
-import {Dropdown, Input, RadioList, RawHTML, TextArea, TextEditor, Exclusive} from 'openstack-uicore-foundation/lib/components'
+import Dropdown from 'openstack-uicore-foundation/lib/components/inputs/dropdown';
+import Input from 'openstack-uicore-foundation/lib/components/inputs/text-input';
+import RadioList from 'openstack-uicore-foundation/lib/components/inputs/radio-list';
+import RawHTML from 'openstack-uicore-foundation/lib/components/raw-html';
+import TextArea from 'openstack-uicore-foundation/lib/components/inputs/textarea-input';
+import TextEditor from 'openstack-uicore-foundation/lib/components/inputs/editor-input';
+import Exclusive from 'openstack-uicore-foundation/lib/components/exclusive-wrapper';
 import SubmitButtons from './presentation-submit-buttons'
 import {scrollToError, validate} from '../utils/methods'
 import QuestionsInput from '../components/inputs/questions-input'

src/components/presentation-uploads-form.js

@@ -13,7 +13,8 @@
 
 import React from 'react'
 import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
-import {RawHTML, UploadInputV2} from 'openstack-uicore-foundation/lib/components'
+import RawHTML from 'openstack-uicore-foundation/lib/components/raw-html';
+import UploadInputV2 from 'openstack-uicore-foundation/lib/components/inputs/upload-input-v2';
 import {findElementPos} from 'openstack-uicore-foundation/lib/utils/methods'
 import SubmitButtons from './presentation-submit-buttons'
 import {scrollToError} from '../utils/methods'

src/components/speaker-form.js

@@ -17,7 +17,15 @@ import 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css'
 import {findElementPos} from 'openstack-uicore-foundation/lib/utils/methods'
 import AffiliationsTable from './affiliationstable'
 import PresentationLinks from "./inputs/presentation-links";
-import { Input, TextEditor, UploadInput, Exclusive, CountryInput, LanguageInput, CheckboxList, FreeMultiTextInput, RegistrationCompanyInput } from 'openstack-uicore-foundation/lib/components'
+import Input from 'openstack-uicore-foundation/lib/components/inputs/text-input';
+import TextEditor from 'openstack-uicore-foundation/lib/components/inputs/editor-input';
+import UploadInput from 'openstack-uicore-foundation/lib/components/inputs/upload-input';
+import Exclusive from 'openstack-uicore-foundation/lib/components/exclusive-wrapper';
+import CountryInput from 'openstack-uicore-foundation/lib/components/inputs/country-input';
+import LanguageInput from 'openstack-uicore-foundation/lib/components/inputs/language-input';
+import CheckboxList from 'openstack-uicore-foundation/lib/components/inputs/checkbox-list';
+import FreeMultiTextInput from 'openstack-uicore-foundation/lib/components/inputs/free-multi-text-input';
+import RegistrationCompanyInput from 'openstack-uicore-foundation/lib/components/inputs/registration-company-input';
 import {validate, scrollToError} from "../utils/methods";
 
 

src/layouts/all-plans-layout.js

@@ -11,18 +11,29 @@
  * limitations under the License.
  **/
 
-import React from 'react'
-import {connect} from 'react-redux';
-import {Switch, Route, Redirect} from 'react-router-dom';
-import {getAllFromSummit} from '../actions/base-actions';
-import AllSelectionPlansPage from "../pages/all-selection-plans-page";
+import React, { Suspense } from 'react'
+import { connect } from 'react-redux';
+import { Switch, Route, Redirect } from 'react-router-dom';
+import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
+import { getAllFromSummit } from '../actions/base-actions';
 import NavMenu from "../components/nav-menu";
-import SelectionPlanLayout from "./selection-plan-layout";
-import ProfilePage from "../pages/profile-page";
-import SelectionProcessPage from "../pages/selection-process-page";
-import TracksGuidePage from "../pages/tracks-guide-page";
 
-const AllPlansLayout = ({summit, location, match, speaker, member}) => {
+const SelectionPlanLayout = React.lazy(() => import("./selection-plan-layout"));
+
+const AllSelectionPlansPage = React.lazy(() =>
+  import("../pages/all-selection-plans-page")
+);
+const ProfilePage = React.lazy(() =>
+  import("../pages/profile-page")
+);
+const SelectionProcessPage = React.lazy(() =>
+  import("../pages/selection-process-page")
+);
+const TracksGuidePage = React.lazy(() =>
+  import("../pages/tracks-guide-page")
+);
+
+const AllPlansLayout = ({ summit, location, match, speaker, member }) => {
   const loggedUser = (speaker && speaker.id) ? speaker : member;
   const getActiveMenu = () => {
     if (location.pathname.includes('presentations')) {
@@ -40,18 +51,20 @@ const AllPlansLayout = ({summit, location, match, speaker, member}) => {
     <div className="primary-layout container-fluid">
       <div className="row">
         <div className="col-md-3">
-          <NavMenu user={loggedUser} active={getActiveMenu()} exclusiveSections={window.EXCLUSIVE_SECTIONS}/>
+          <NavMenu user={loggedUser} active={getActiveMenu()} exclusiveSections={window.EXCLUSIVE_SECTIONS} />
         </div>
         <div className="col-md-9">
           <main id="page-wrap">
-            <Switch>
-              <Route strict exact path={match.url} component={AllSelectionPlansPage}/>
-              <Route strict exact path={`${match.url}/profile`} component={ProfilePage}/>
-              <Route path={`${match.url}/:selection_plan_id(\\d+)`} component={SelectionPlanLayout}/>
-              <Route path={`${match.url}/selection_process`} render={props => <SelectionProcessPage {...props} />} />
-              <Route path={`${match.url}/tracks_guide`} render={props => <TracksGuidePage {...props} />} />
-              <Route render={() => (<Redirect to={`/app/${summit.slug}/all-plans`}/>)}/>
-            </Switch>
+            <Suspense fallback={<AjaxLoader show relative size={120} />}>
+              <Switch>
+                <Route strict exact path={match.url} component={AllSelectionPlansPage} />
+                <Route strict exact path={`${match.url}/profile`} component={ProfilePage} />
+                <Route path={`${match.url}/:selection_plan_id(\\d+)`} component={SelectionPlanLayout} />
+                <Route path={`${match.url}/selection_process`} render={props => <SelectionProcessPage {...props} />} />
+                <Route path={`${match.url}/tracks_guide`} render={props => <TracksGuidePage {...props} />} />
+                <Route render={() => (<Redirect to={`/app/${summit.slug}/all-plans`} />)} />
+              </Switch>
+            </Suspense>
           </main>
         </div>
       </div>
@@ -60,11 +73,11 @@ const AllPlansLayout = ({summit, location, match, speaker, member}) => {
 
 }
 
-const mapStateToProps = ({baseState, loggedUserState}) => ({
+const mapStateToProps = ({ baseState, loggedUserState }) => ({
   member: loggedUserState.member,
   speaker: baseState.speaker,
   summit: baseState.summit,
   loading: baseState.loading
 })
 
-export default connect(mapStateToProps, {getAllFromSummit})(AllPlansLayout);
+export default connect(mapStateToProps, { getAllFromSummit })(AllPlansLayout);

src/layouts/landing-layout.js

@@ -11,29 +11,33 @@
  * limitations under the License.
  **/
 
-import React from 'react'
-import {Switch, Route, Redirect} from 'react-router-dom';
-import LandingPage from "../pages/landing-page";
+import React, { Suspense } from 'react'
+import { Switch, Route, Redirect } from 'react-router-dom';
 import URI from "urijs";
-import {BACK_URL} from "../utils/constants";
+import AjaxLoader from "openstack-uicore-foundation/lib/components/ajaxloader";
+import { BACK_URL } from "../utils/constants";
 
-const LandingLayout = ({match, ...parentProps}) => {
+const LandingPage = React.lazy(() =>
+  import("../pages/landing-page")
+);
+
+const LandingLayout = ({ match, ...parentProps }) => {
   const summitSlug = match.params.summit_slug;
   let url = URI(window.location.href);
   let currentBackUrl = null
-  if(url.hasQuery(BACK_URL))
-        currentBackUrl = url.query(true)[BACK_URL];
+  if (url.hasQuery(BACK_URL))
+    currentBackUrl = url.query(true)[BACK_URL];
 
-  if(currentBackUrl){
-      return (
-          <Route render={ props => {
-              return <Redirect to={currentBackUrl} />
-          }} />
-      )
+  if (currentBackUrl) {
+    return (
+      <Route render={props => {
+        return <Redirect to={currentBackUrl} />
+      }} />
+    )
   }
 
   return (
-    <>
+    <Suspense fallback={<AjaxLoader show relative size={120} />}>
       <Switch>
         <Route
           strict
@@ -46,7 +50,7 @@ const LandingLayout = ({match, ...parentProps}) => {
           render={props => (<LandingPage summitSlug={summitSlug} {...parentProps} {...props} />)}
         />
       </Switch>
-    </>
+    </Suspense>
   );
 
 }