From 7d9996a0b49c794f9df22f3b53174d1119937c96 Mon Sep 17 00:00:00 2001
From: arpitnath <arpitnath42@gmail.com>
Date: Fri, 15 Sep 2023 18:58:36 +0530
Subject: [PATCH] fixes: header and user

---
 frontend/src/Editor/EditorFunc.jsx        |  1 -
 frontend/src/Editor/Header/index.js       | 13 ++++-----
 frontend/src/Editor/LeftSidebar/index.jsx |  2 --
 frontend/src/Editor/ManageAppUsers.jsx    | 34 ++++++++++++-----------
 4 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx
index b9781d3dc6..2276127fee 100644
--- a/frontend/src/Editor/EditorFunc.jsx
+++ b/frontend/src/Editor/EditorFunc.jsx
@@ -1472,7 +1472,6 @@ const EditorComponent = (props) => {
           appDefinition={_.cloneDeep(appDefinition)}
           toggleAppMaintenance={toggleAppMaintenance}
           editingVersion={editingVersion}
-          app={app}
           appVersionPreviewLink={appVersionPreviewLink}
           canUndo={canUndo}
           canRedo={canRedo}
diff --git a/frontend/src/Editor/Header/index.js b/frontend/src/Editor/Header/index.js
index 5fdcf86bf9..e788c039e8 100644
--- a/frontend/src/Editor/Header/index.js
+++ b/frontend/src/Editor/Header/index.js
@@ -18,7 +18,6 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 
 export default function EditorHeader({
   M,
-  app,
   appVersionPreviewLink,
   canUndo,
   canRedo,
@@ -31,15 +30,13 @@ export default function EditorHeader({
   saveEditingVersion,
   onVersionDelete,
   isMaintenanceOn,
-  appName,
-  appId,
   slug,
   darkMode,
 }) {
   const currentUser = useCurrentUser();
 
   const { updateState } = useAppDataActions();
-  const { isSaving } = useAppInfo();
+  const { isSaving, appId, appName, app, currentVersionId, isPublic } = useAppInfo();
 
   const handleSlugChange = (newSlug) => {
     updateState({ slug: newSlug });
@@ -99,7 +96,7 @@ export default function EditorHeader({
                 }}
               >
                 <div className="global-settings-app-wrapper p-0 m-0 ">
-                  <EditAppName appId={app.id} appName={app.name} onNameChanged={onNameChanged} />
+                  <EditAppName appId={appId} appName={appName} onNameChanged={onNameChanged} />
                 </div>
                 <HeaderActions canUndo={canUndo} canRedo={canRedo} handleUndo={handleUndo} handleRedo={handleRedo} />
                 <div className="d-flex align-items-center">
@@ -136,9 +133,10 @@ export default function EditorHeader({
                   {editingVersion && (
                     <AppVersionsManager
                       appId={appId}
-                      releasedVersionId={app.current_version_id}
+                      releasedVersionId={currentVersionId}
                       setAppDefinitionFromVersion={setAppDefinitionFromVersion}
                       onVersionDelete={onVersionDelete}
+                      isPublic={isPublic ?? false}
                     />
                   )}
                 </div>
@@ -150,9 +148,10 @@ export default function EditorHeader({
             >
               <div className="navbar-nav flex-row order-md-last release-buttons ">
                 <div className="nav-item">
-                  {app.id && (
+                  {appId && (
                     <ManageAppUsers
                       app={app}
+                      appId={appId}
                       slug={slug}
                       M={M}
                       handleSlugChange={handleSlugChange}
diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx
index e501ce2ae7..cd7a2eda30 100644
--- a/frontend/src/Editor/LeftSidebar/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/index.jsx
@@ -134,8 +134,6 @@ export const LeftSidebar = forwardRef((props, ref) => {
     sideBarBtnRefs.current[page] = ref;
   };
 
-  console.log('-----arpit::::: [gs]', { appDefinition });
-
   const SELECTED_ITEMS = {
     page: (
       <LeftSidebarPageSelector
diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx
index d3eca4c38e..cd8d858c73 100644
--- a/frontend/src/Editor/ManageAppUsers.jsx
+++ b/frontend/src/Editor/ManageAppUsers.jsx
@@ -19,7 +19,8 @@ class ManageAppUsersComponent extends React.Component {
 
     this.state = {
       showModal: false,
-      app: { ...props.app },
+      isPublic: false,
+      appId: null,
       slugError: null,
       isLoading: true,
       isSlugVerificationInProgress: false,
@@ -29,14 +30,15 @@ class ManageAppUsersComponent extends React.Component {
   }
 
   componentDidMount() {
-    const appId = this.props.app.id;
-    this.fetchAppUsers();
-    this.setState({ appId });
+    const appId = this.props.appId;
+    this.fetchAppUsers(appId);
+    this.setState({ appId, isPublic: this.props.isPublic });
   }
 
-  fetchAppUsers = () => {
+  fetchAppUsers = (appId) => {
+    console.log('---arpit [manager users]:; ', { x: this.props });
     appService
-      .getAppUsers(this.props.app.id)
+      .getAppUsers(appId)
       .then((data) =>
         this.setState({
           users: data.users,
@@ -64,11 +66,11 @@ class ManageAppUsersComponent extends React.Component {
     const { organizationUserId, role } = this.state.newUser;
 
     appService
-      .createAppUser(this.state.app.id, organizationUserId, role)
+      .createAppUser(this.state.appId, organizationUserId, role)
       .then(() => {
         this.setState({ addingUser: false, newUser: {} });
         toast.success('Added user successfully');
-        this.fetchAppUsers();
+        this.fetchAppUsers(this.state.appId);
       })
       .catch(({ error }) => {
         this.setState({ addingUser: false });
@@ -77,14 +79,14 @@ class ManageAppUsersComponent extends React.Component {
   };
 
   toggleAppVisibility = () => {
-    const newState = !this.state.app.is_public;
+    const newState = !this.state.isPublic;
     this.setState({
       ischangingVisibility: true,
     });
 
     // eslint-disable-next-line no-unused-vars
     appService
-      .setVisibility(this.state.app.id, newState)
+      .setVisibility(this.state.appId, newState)
       .then(() => {
         this.setState({
           ischangingVisibility: false,
@@ -109,11 +111,11 @@ class ManageAppUsersComponent extends React.Component {
   };
 
   handleSetSlug = (event) => {
-    const newSlug = event.target.value || this.props.app.id;
+    const newSlug = event.target.value || this.props.appId;
     this.setState({ isSlugVerificationInProgress: true });
 
     appService
-      .setSlug(this.state.app.id, newSlug)
+      .setSlug(this.state.appId, newSlug)
       .then(() => {
         this.setState({
           slugError: null,
@@ -134,8 +136,8 @@ class ManageAppUsersComponent extends React.Component {
   }, 500);
 
   render() {
-    const { isLoading, app, slugError, isSlugVerificationInProgress } = this.state;
-    const appId = app.id;
+    const { isLoading, app, slugError, isSlugVerificationInProgress, appId } = this.state;
+
     const appLink = `${window.public_config?.TOOLJET_HOST}${getSubpath() ? getSubpath() : ''}/applications/`;
     const shareableLink = appLink + (this.props.slug || appId);
     const slugButtonClass = isSlugVerificationInProgress ? '' : slugError !== null ? 'is-invalid' : 'is-valid';
@@ -176,7 +178,7 @@ class ManageAppUsersComponent extends React.Component {
                       className="form-check-input color-slate12"
                       type="checkbox"
                       onClick={this.toggleAppVisibility}
-                      checked={this.state.app.is_public}
+                      checked={this.state.isPublic}
                       disabled={this.state.ischangingVisibility}
                       data-cy="make-public-app-toggle"
                     />
@@ -223,7 +225,7 @@ class ManageAppUsersComponent extends React.Component {
                   </div>
                 </div>
                 <hr />
-                {(this.state.app.is_public || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && (
+                {(this.state.isPublic || window?.public_config?.ENABLE_PRIVATE_APP_EMBED === 'true') && (
                   <div className="shareable-link mb-3">
                     <label className="form-label" data-cy="iframe-link-label">
                       <small>