From 2f3a32b7baa4e82919c4c2b60138af70d6a82207 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Thu, 5 Jan 2023 17:33:55 +0530
Subject: [PATCH] pass header editors context (#5218)

---
 frontend/src/Editor/Editor.jsx | 219 +++++++++++++++++----------------
 1 file changed, 112 insertions(+), 107 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 11c07bdd6f..24fad683ed 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -1782,114 +1782,119 @@ class EditorComponent extends React.Component {
           onCancel={() => this.cancelDeletePageRequest()}
           darkMode={this.props.darkMode}
         />
-        <div className="header">
-          <header className="navbar navbar-expand-md navbar-light d-print-none">
-            <div className="container-xl header-container">
-              <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
-                <span className="navbar-toggler-icon"></span>
-              </button>
-              <h1 className="navbar-brand d-none-navbar-horizontal pe-0">
-                <Link to={'/'} data-cy="editor-page-logo">
-                  <Logo />
-                </Link>
-              </h1>
-              <GlobalSettings
-                currentState={currentState}
-                globalSettingsChanged={this.globalSettingsChanged}
-                globalSettings={appDefinition.globalSettings}
-                darkMode={this.props.darkMode}
-                toggleAppMaintenance={this.toggleAppMaintenance}
-                is_maintenance_on={this.state.app.is_maintenance_on}
-              />
-              <EditAppName appId={app.id} appName={app.name} onNameChanged={this.onNameChanged} />
-              <HeaderActions
-                canUndo={this.canUndo}
-                canRedo={this.canRedo}
-                handleUndo={this.handleUndo}
-                handleRedo={this.handleRedo}
-                currentLayout={currentLayout}
-                toggleCurrentLayout={this.toggleCurrentLayout}
-              />
-              <span
-                className={cx('autosave-indicator', {
-                  'autosave-indicator-saving': this.state.isSaving,
-                  'text-danger': this.state.saveError,
-                  'd-none': this.isVersionReleased(),
-                })}
-                data-cy="autosave-indicator"
-              >
-                {this.state.isSaving
-                  ? 'Saving...'
-                  : this.state.saveError
-                  ? 'Could not save changes'
-                  : 'All changes are saved'}
-              </span>
-              {config.ENABLE_MULTIPLAYER_EDITING && <RealtimeAvatars />}
-              {editingVersion && (
-                <AppVersionsManager
-                  appId={appId}
-                  editingVersion={editingVersion}
-                  releasedVersionId={app.current_version_id}
-                  setAppDefinitionFromVersion={this.setAppDefinitionFromVersion}
-                  showCreateVersionModalPrompt={showCreateVersionModalPrompt}
-                  closeCreateVersionModalPrompt={this.closeCreateVersionModalPrompt}
-                />
-              )}
-              <div className="navbar-nav flex-row order-md-last release-buttons">
-                <div className="nav-item me-1">
-                  {app.id && (
-                    <ManageAppUsers
-                      app={app}
-                      slug={slug}
-                      darkMode={this.props.darkMode}
-                      handleSlugChange={this.handleSlugChange}
-                    />
-                  )}
-                </div>
-                <div className="nav-item me-1">
-                  <Link
-                    title="Preview"
-                    to={appVersionPreviewLink}
-                    target="_blank"
-                    rel="noreferrer"
-                    data-cy="preview-link-button"
-                  >
-                    <svg
-                      className="icon cursor-pointer w-100 h-100"
-                      width="33"
-                      height="33"
-                      viewBox="0 0 33 33"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M10.4712 16.2205C12.1364 18.9742 14.1064 20.2205 16.3646 20.2205C18.6227 20.2205 20.5927 18.9742 22.258 16.2205C20.5927 13.4669 18.6227 12.2205 16.3646 12.2205C14.1064 12.2205 12.1364 13.4669 10.4712 16.2205ZM9.1191 15.8898C10.9694 12.6519 13.3779 10.8872 16.3646 10.8872C19.3513 10.8872 21.7598 12.6519 23.6101 15.8898C23.7272 16.0947 23.7272 16.3464 23.6101 16.5513C21.7598 19.7891 19.3513 21.5539 16.3646 21.5539C13.3779 21.5539 10.9694 19.7891 9.1191 16.5513C9.00197 16.3464 9.00197 16.0947 9.1191 15.8898ZM16.3646 15.5539C15.9964 15.5539 15.6979 15.8524 15.6979 16.2205C15.6979 16.5887 15.9964 16.8872 16.3646 16.8872C16.7328 16.8872 17.0312 16.5887 17.0312 16.2205C17.0312 15.8524 16.7328 15.5539 16.3646 15.5539ZM14.3646 16.2205C14.3646 15.116 15.26 14.2205 16.3646 14.2205C17.4692 14.2205 18.3646 15.116 18.3646 16.2205C18.3646 17.3251 17.4692 18.2205 16.3646 18.2205C15.26 18.2205 14.3646 17.3251 14.3646 16.2205Z"
-                        fill="#3E63DD"
-                      />
-                    </svg>
+        <EditorContextWrapper>
+          <div className="header">
+            <header className="navbar navbar-expand-md navbar-light d-print-none">
+              <div className="container-xl header-container">
+                <button
+                  className="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbar-menu"
+                >
+                  <span className="navbar-toggler-icon"></span>
+                </button>
+                <h1 className="navbar-brand d-none-navbar-horizontal pe-0">
+                  <Link to={'/'} data-cy="editor-page-logo">
+                    <Logo />
                   </Link>
-                </div>
-                <div className="nav-item dropdown">
-                  {app.id && (
-                    <ReleaseVersionButton
-                      isVersionReleased={this.isVersionReleased()}
-                      appId={app.id}
-                      appName={app.name}
-                      onVersionRelease={this.onVersionRelease}
-                      editingVersion={editingVersion}
-                      saveEditingVersion={this.saveEditingVersion}
-                    />
-                  )}
+                </h1>
+                <GlobalSettings
+                  currentState={currentState}
+                  globalSettingsChanged={this.globalSettingsChanged}
+                  globalSettings={appDefinition.globalSettings}
+                  darkMode={this.props.darkMode}
+                  toggleAppMaintenance={this.toggleAppMaintenance}
+                  is_maintenance_on={this.state.app.is_maintenance_on}
+                />
+                <EditAppName appId={app.id} appName={app.name} onNameChanged={this.onNameChanged} />
+                <HeaderActions
+                  canUndo={this.canUndo}
+                  canRedo={this.canRedo}
+                  handleUndo={this.handleUndo}
+                  handleRedo={this.handleRedo}
+                  currentLayout={currentLayout}
+                  toggleCurrentLayout={this.toggleCurrentLayout}
+                />
+                <span
+                  className={cx('autosave-indicator', {
+                    'autosave-indicator-saving': this.state.isSaving,
+                    'text-danger': this.state.saveError,
+                    'd-none': this.isVersionReleased(),
+                  })}
+                  data-cy="autosave-indicator"
+                >
+                  {this.state.isSaving
+                    ? 'Saving...'
+                    : this.state.saveError
+                    ? 'Could not save changes'
+                    : 'All changes are saved'}
+                </span>
+                {config.ENABLE_MULTIPLAYER_EDITING && <RealtimeAvatars />}
+                {editingVersion && (
+                  <AppVersionsManager
+                    appId={appId}
+                    editingVersion={editingVersion}
+                    releasedVersionId={app.current_version_id}
+                    setAppDefinitionFromVersion={this.setAppDefinitionFromVersion}
+                    showCreateVersionModalPrompt={showCreateVersionModalPrompt}
+                    closeCreateVersionModalPrompt={this.closeCreateVersionModalPrompt}
+                  />
+                )}
+                <div className="navbar-nav flex-row order-md-last release-buttons">
+                  <div className="nav-item me-1">
+                    {app.id && (
+                      <ManageAppUsers
+                        app={app}
+                        slug={slug}
+                        darkMode={this.props.darkMode}
+                        handleSlugChange={this.handleSlugChange}
+                      />
+                    )}
+                  </div>
+                  <div className="nav-item me-1">
+                    <Link
+                      title="Preview"
+                      to={appVersionPreviewLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      data-cy="preview-link-button"
+                    >
+                      <svg
+                        className="icon cursor-pointer w-100 h-100"
+                        width="33"
+                        height="33"
+                        viewBox="0 0 33 33"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <rect x="0.363281" y="0.220703" width="32" height="32" rx="6" fill="#F0F4FF" />
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M10.4712 16.2205C12.1364 18.9742 14.1064 20.2205 16.3646 20.2205C18.6227 20.2205 20.5927 18.9742 22.258 16.2205C20.5927 13.4669 18.6227 12.2205 16.3646 12.2205C14.1064 12.2205 12.1364 13.4669 10.4712 16.2205ZM9.1191 15.8898C10.9694 12.6519 13.3779 10.8872 16.3646 10.8872C19.3513 10.8872 21.7598 12.6519 23.6101 15.8898C23.7272 16.0947 23.7272 16.3464 23.6101 16.5513C21.7598 19.7891 19.3513 21.5539 16.3646 21.5539C13.3779 21.5539 10.9694 19.7891 9.1191 16.5513C9.00197 16.3464 9.00197 16.0947 9.1191 15.8898ZM16.3646 15.5539C15.9964 15.5539 15.6979 15.8524 15.6979 16.2205C15.6979 16.5887 15.9964 16.8872 16.3646 16.8872C16.7328 16.8872 17.0312 16.5887 17.0312 16.2205C17.0312 15.8524 16.7328 15.5539 16.3646 15.5539ZM14.3646 16.2205C14.3646 15.116 15.26 14.2205 16.3646 14.2205C17.4692 14.2205 18.3646 15.116 18.3646 16.2205C18.3646 17.3251 17.4692 18.2205 16.3646 18.2205C15.26 18.2205 14.3646 17.3251 14.3646 16.2205Z"
+                          fill="#3E63DD"
+                        />
+                      </svg>
+                    </Link>
+                  </div>
+                  <div className="nav-item dropdown">
+                    {app.id && (
+                      <ReleaseVersionButton
+                        isVersionReleased={this.isVersionReleased()}
+                        appId={app.id}
+                        appName={app.name}
+                        onVersionRelease={this.onVersionRelease}
+                        editingVersion={editingVersion}
+                        saveEditingVersion={this.saveEditingVersion}
+                      />
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          </header>
-        </div>
-        <DndProvider backend={HTML5Backend}>
-          <EditorContextWrapper>
+            </header>
+          </div>
+          <DndProvider backend={HTML5Backend}>
             <div className="sub-section">
               <LeftSidebar
                 appVersionsId={this.state?.editingVersion?.id}
@@ -2253,8 +2258,8 @@ class EditorComponent extends React.Component {
                 />
               )}
             </div>
-          </EditorContextWrapper>
-        </DndProvider>
+          </DndProvider>
+        </EditorContextWrapper>
       </div>
     );
   }