Move Registration to application editor

app/client/package.json

@@ -107,6 +107,7 @@
     "start": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=DEVELOPMENT HOST=dev.appsmith.com craco start",
     "build": "./build.sh",
     "build-local": "craco --max-old-space-size=4096 build --config craco.build.config.js",
+    "build-staging": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=STAGING craco --max-old-space-size=4096 build --config craco.build.config.js",
     "test": "cypress/test.sh",
     "eject": "react-scripts eject",
     "start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",

app/client/src/components/utils/AppsmithLoader.tsx

@@ -0,0 +1 @@
+export default null;

app/client/src/index.tsx

@@ -4,12 +4,10 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import Loader from "pages/common/Loader";
 import "./index.css";
-import * as serviceWorker from "./serviceWorker";
+// import * as serviceWorker from "./serviceWorker";
 import { Router, Switch, Redirect } from "react-router-dom";
 import history from "./utils/history";
 import { ThemeProvider, theme } from "constants/DefaultTheme";
-import { DndProvider } from "react-dnd";
-import TouchBackend from "react-dnd-touch-backend";
 
 import { appInitializer } from "utils/AppsmithUtils";
 import AppRoute from "./pages/common/AppRoute";
@@ -31,96 +29,99 @@ import {
 
 const loadingIndicator = <Loader />;
 const App = lazy(() => import("./App"));
-const UserAuth = lazy(() => import("./pages/UserAuth"));
+const UserAuth = lazy(() =>
-const Editor = lazy(() => import("./pages/Editor"));
+  import(/* webpackPrefetch: 5 */ "./pages/UserAuth"),
-const Applications = lazy(() => import("./pages/Applications"));
+);
-const PageNotFound = lazy(() => import("./pages/common/PageNotFound"));
+const Editor = lazy(() => import(/* webpackPrefetch: 3 */ "./pages/Editor"));
-const AppViewer = lazy(() => import("./pages/AppViewer"));
+const Applications = lazy(() =>
-const Organization = lazy(() => import("./pages/organization"));
+  import(/* webpackPrefetch: 4 */ "./pages/Applications"),
-const Users = lazy(() => import("./pages/users"));
+);
+const PageNotFound = lazy(() =>
+  import(/* webpackPrefetch: true */ "./pages/common/PageNotFound"),
+);
+const AppViewer = lazy(() =>
+  import(/* webpackPrefetch: 2 */ "./pages/AppViewer"),
+);
+const Organization = lazy(() =>
+  import(/* webpackPrefetch: 1 */ "./pages/organization"),
+);
+const Users = lazy(() => import(/* webpackPrefetch: true */ "./pages/users"));
 appInitializer();
 
 ReactDOM.render(
-  <DndProvider
+  <Provider store={store}>
-    backend={TouchBackend}
+    <ThemeProvider theme={theme}>
-    options={{
+      <ToastContainer
-      enableMouseEvents: true,
+        hideProgressBar
-    }}
+        draggable={false}
-  >
+        transition={Slide}
-    <Provider store={store}>
+        autoClose={5000}
-      <ThemeProvider theme={theme}>
+        closeButton={false}
-        <ToastContainer
+      />
-          hideProgressBar
+      <Helmet>
-          draggable={false}
+        <meta charSet="utf-8" />
-          transition={Slide}
+        <link rel="shortcut icon" href="/favicon-orange.ico" />
-          autoClose={5000}
+      </Helmet>
-          closeButton={false}
+      <Router history={history}>
-        />
+        <Suspense fallback={loadingIndicator}>
-        <Helmet>
+          <Switch>
-          <meta charSet="utf-8" />
+            <AppRoute
-          <link rel="shortcut icon" href="/favicon-orange.ico" />
+              exact
-        </Helmet>
+              path={BASE_URL}
-        <Router history={history}>
+              component={App}
-          <Suspense fallback={loadingIndicator}>
+              name={"App"}
-            <Switch>
+              routeProtected
-              <AppRoute
+            />
-                exact
+            <AppRoute
-                path={BASE_URL}
+              path={ORG_URL}
-                component={App}
+              component={Organization}
-                name={"App"}
+              name={"Organisation"}
-                routeProtected
+              routeProtected
-              />
+            />
-              <AppRoute
+            <AppRoute
-                path={ORG_URL}
+              exact
-                component={Organization}
+              path={USERS_URL}
-                name={"Organisation"}
+              component={Users}
-                routeProtected
+              name={"Users"}
-              />
+              routeProtected
-              <AppRoute
+            />
-                exact
+            <AppRoute
-                path={USERS_URL}
+              path={USER_AUTH_URL}
-                component={Users}
+              component={UserAuth}
-                name={"Users"}
+              name={"UserAuth"}
-                routeProtected
+            />
-              />
+            <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
-              <AppRoute
+            <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
-                path={USER_AUTH_URL}
+            <AppRoute
-                component={UserAuth}
+              exact
-                name={"UserAuth"}
+              path={APPLICATIONS_URL}
-              />
+              component={Applications}
-              <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
+              name={"Home"}
-              <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
+              routeProtected
-              <AppRoute
+            />
-                exact
+            <AppRoute
-                path={APPLICATIONS_URL}
+              path={BUILDER_URL}
-                component={Applications}
+              component={Editor}
-                name={"Home"}
+              name={"Editor"}
-                routeProtected
+              routeProtected
-              />
+            />
-              <AppRoute
+            <AppRoute
-                path={BUILDER_URL}
+              path={APP_VIEW_URL}
-                component={Editor}
+              component={AppViewer}
-                name={"Editor"}
+              name={"AppViewer"}
-                routeProtected
+              routeProtected
-              />
+              logDisable
-              <AppRoute
+            />
-                path={APP_VIEW_URL}
+            <AppRoute component={PageNotFound} name={"PageNotFound"} />
-                component={AppViewer}
+          </Switch>
-                name={"AppViewer"}
+        </Suspense>
-                routeProtected
+      </Router>
-                logDisable
+    </ThemeProvider>
-              />
+  </Provider>,
-              <AppRoute component={PageNotFound} name={"PageNotFound"} />
-            </Switch>
-          </Suspense>
-        </Router>
-      </ThemeProvider>
-    </Provider>
-  </DndProvider>,
   document.getElementById("root"),
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();

app/client/src/pages/Editor/index.tsx

@@ -12,6 +12,8 @@ import { UserApplication } from "constants/userConstants";
 import { AppState } from "reducers";
 import EditorHeader from "./EditorHeader";
 import MainContainer from "./MainContainer";
+import { DndProvider } from "react-dnd";
+import TouchBackend from "react-dnd-touch-backend";
 import {
   getCurrentApplicationId,
   getCurrentLayoutId,
@@ -35,6 +37,7 @@ import { RenderModes } from "constants/WidgetConstants";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { fetchPage } from "actions/pageActions";
+import { editorInitializer } from "utils/EditorUtils";
 
 type EditorProps = {
   currentPageName?: string;
@@ -62,9 +65,13 @@ type EditorProps = {
 class Editor extends Component<EditorProps> {
   public state = {
     isDialogOpen: false,
+    registered: false,
   };
 
   componentDidMount() {
+    editorInitializer().then(() => {
+      this.setState({ registered: true });
+    });
     const { applicationId, pageId } = this.props.match.params;
     if (applicationId && pageId) {
       this.props.initEditor(applicationId, pageId);
@@ -116,55 +123,62 @@ class Editor extends Component<EditorProps> {
     if (!this.props.match.params.applicationId) {
       return <Redirect to="/applications" />;
     }
-    if (!this.props.isEditorInitialized) return null;
+    if (!this.props.isEditorInitialized || !this.state.registered) return null;
     return (
-      <div>
+      <DndProvider
-        <Helmet>
+        backend={TouchBackend}
-          <meta charSet="utf-8" />
+        options={{
-          <title>Editor | Appsmith</title>
+          enableMouseEvents: true,
-        </Helmet>
+        }}
-        <EditorHeader
+      >
-          isSaving={this.props.isSaving}
+        <div>
-          pageName={this.props.currentPageName}
+          <Helmet>
-          onPublish={this.handlePublish}
+            <meta charSet="utf-8" />
-          onCreatePage={this.handleCreatePage}
+            <title>Editor | Appsmith</title>
-          pages={this.props.pages}
+          </Helmet>
-          currentPageId={this.props.currentPageId}
+          <EditorHeader
-          currentApplicationId={this.props.currentApplicationId}
+            isSaving={this.props.isSaving}
-          isPublishing={this.props.isPublishing}
+            pageName={this.props.currentPageName}
-          publishedTime={this.props.publishedTime}
+            onPublish={this.handlePublish}
-          createModal={this.props.createModal}
+            onCreatePage={this.handleCreatePage}
-        />
+            pages={this.props.pages}
-        <MainContainer />
+            currentPageId={this.props.currentPageId}
-        <Dialog
+            currentApplicationId={this.props.currentApplicationId}
-          isOpen={this.state.isDialogOpen}
+            isPublishing={this.props.isPublishing}
-          canOutsideClickClose={true}
+            publishedTime={this.props.publishedTime}
-          canEscapeKeyClose={true}
+            createModal={this.props.createModal}
-          title="Application Published"
+          />
-          onClose={this.handleDialogClose}
+          <MainContainer />
-          icon="tick-circle"
+          <Dialog
-        >
+            isOpen={this.state.isDialogOpen}
-          <div className={Classes.DIALOG_BODY}>
+            canOutsideClickClose={true}
-            <p>
+            canEscapeKeyClose={true}
-              {
+            title="Application Published"
-                "Your awesome application is now published with the current changes!"
+            onClose={this.handleDialogClose}
-              }
+            icon="tick-circle"
-            </p>
+          >
-          </div>
+            <div className={Classes.DIALOG_BODY}>
-          <div className={Classes.DIALOG_FOOTER}>
+              <p>
-            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                {
-              <AnchorButton
+                  "Your awesome application is now published with the current changes!"
-                target={this.props.currentApplicationId}
+                }
-                href={getApplicationViewerPageURL(
+              </p>
-                  this.props.currentApplicationId,
-                  this.props.currentPageId,
-                )}
-                text="View Application"
-              />
             </div>
-          </div>
+            <div className={Classes.DIALOG_FOOTER}>
-        </Dialog>
+              <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-      </div>
+                <AnchorButton
+                  target={this.props.currentApplicationId}
+                  href={getApplicationViewerPageURL(
+                    this.props.currentApplicationId,
+                    this.props.currentPageId,
+                  )}
+                  text="View Application"
+                />
+              </div>
+            </div>
+          </Dialog>
+        </div>
+      </DndProvider>
     );
   }
 }

app/client/src/utils/AppsmithUtils.tsx

@@ -3,12 +3,8 @@ import { getAppsmithConfigs } from "configs";
 import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
 import FontFaceObserver from "fontfaceobserver";
-import PropertyControlRegistry from "./PropertyControlRegistry";
-import WidgetBuilderRegistry from "./WidgetRegistry";
 import { Property } from "api/ActionAPI";
 import _ from "lodash";
-import moment from "moment-timezone";
-import ValidationRegistry from "./ValidationRegistry";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import * as log from "loglevel";
 import { LogLevelDesc } from "loglevel";
@@ -27,10 +23,6 @@ export const createReducer = (
 };
 
 export const appInitializer = () => {
-  WidgetBuilderRegistry.registerWidgetBuilders();
-  PropertyControlRegistry.registerPropertyControlBuilders();
-  ValidationRegistry.registerInternalValidators();
-  moment.tz.setDefault(moment.tz.guess());
   const appsmithConfigs = getAppsmithConfigs();
   if (appsmithConfigs.sentry.enabled && appsmithConfigs.sentry.config) {
     Sentry.init(appsmithConfigs.sentry.config);

app/client/src/utils/EditorUtils.ts

@@ -0,0 +1,11 @@
+import WidgetBuilderRegistry from "./WidgetRegistry";
+import PropertyControlRegistry from "./PropertyControlRegistry";
+import ValidationRegistry from "./ValidationRegistry";
+export const editorInitializer = async () => {
+  WidgetBuilderRegistry.registerWidgetBuilders();
+  PropertyControlRegistry.registerPropertyControlBuilders();
+  ValidationRegistry.registerInternalValidators();
+
+  const moment = await import("moment-timezone");
+  moment.tz.setDefault(moment.tz.guess());
+};

app/client/src/utils/WidgetRegistry.tsx

@@ -37,8 +37,7 @@ import FormButtonWidget, {
 import IconWidget, { IconWidgetProps } from "widgets/IconWidget";
 
 import CanvasWidget from "widgets/CanvasWidget";
-
+export default class WidgetBuilderRegistry {
-class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder(
       "CONTAINER_WIDGET",
@@ -281,5 +280,3 @@ class WidgetBuilderRegistry {
     );
   }
 }
-
-export default WidgetBuilderRegistry;

app/client/src/widgets/ChartWidget.tsx

@@ -7,7 +7,9 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import Skeleton from "components/utils/Skeleton";
 
 const ChartComponent = lazy(() =>
-  import("components/designSystems/appsmith/ChartComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/appsmith/ChartComponent"
+  ),
 );
 
 class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {

app/client/src/widgets/TableWidget.tsx

@@ -16,7 +16,9 @@ import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 
 const TableComponent = lazy(() =>
-  import("components/designSystems/syncfusion/TableComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/syncfusion/TableComponent"
+  ),
 );
 
 function constructColumns(