Merge branch 'fix/back-to-editor' into 'feature/acl'

Back to editor in app view mode should not be visible to users with only read application permissions

See merge request theappsmith/internal-tools-client!719

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

@@ -12,6 +12,7 @@ import {
 import {
   ReduxActionTypes,
   PageListPayload,
+  ApplicationPayload,
 } from "constants/ReduxActionConstants";
 import {
   getPageList,
@@ -35,6 +36,9 @@ import {
 } from "actions/metaActions";
 import AppRoute from "pages/common/AppRoute";
 import { editorInitializer } from "utils/EditorUtils";
+import { getCurrentOrg } from "selectors/organizationSelectors";
+import { PERMISSION_TYPE } from "pages/Applications/permissionHelpers";
+import { Organization } from "constants/orgConstants";
 
 const AppViewWrapper = styled.div`
   margin-top: ${props => props.theme.headerHeight};
@@ -51,6 +55,7 @@ const AppViewerBody = styled.section`
 export type AppViewerProps = {
   currentDSLPageId?: string;
   currentLayoutId?: string;
+  currentApplication: ApplicationPayload | undefined;
   pages?: PageListPayload;
   initializeAppViewer: Function;
   isInitialized: boolean;
@@ -86,8 +91,10 @@ class AppViewer extends Component<
   }
 
   public render() {
-    const { isInitialized } = this.props;
+    const { isInitialized, currentApplication } = this.props;
+    const userPermissions = currentApplication?.userPermissions ?? [];
     if (!isInitialized) return null;
+
     const items: SideNavItemProps[] | undefined =
       this.props.pages &&
       this.props.pages.map(page => ({
@@ -101,6 +108,7 @@ class AppViewer extends Component<
         loading: false,
       }));
     if (!this.state.registered) return null;
+
     return (
       <EditorContext.Provider
         value={{
@@ -110,7 +118,11 @@ class AppViewer extends Component<
         }}
       >
         <AppViewWrapper>
-          <AppViewerHeader url={this.props.editorURL} />
+          <AppViewerHeader
+            url={this.props.editorURL}
+            permissions={userPermissions || []}
+            permissionRequired={PERMISSION_TYPE.MANAGE_APPLICATION}
+          />
           <AppViewerBody>
             <AppViewerSideNavWrapper>
               <SideNav items={items} active={this.props.currentDSLPageId} />
@@ -136,6 +148,7 @@ const mapStateToProps = (state: AppState) => ({
   pages: getPageList(state),
   isInitialized: getIsInitialized(state),
   editorURL: getEditorURL(state),
+  currentApplication: state.ui.applications.currentApplication,
 });
 
 const mapDispatchToProps = (dispatch: any) => ({

app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import StyledHeader from "components/designSystems/appsmith/StyledHeader";
 import Button from "components/editorComponents/Button";
 import { BACK_TO_EDITOR } from "constants/messages";
+import { isPermitted } from "pages/Applications/permissionHelpers";
 const HeaderWrapper = styled(StyledHeader)`
   position: fixed;
   top: 0;
@@ -13,12 +14,19 @@ const HeaderWrapper = styled(StyledHeader)`
 `;
 type AppViewerHeaderProps = {
   url?: string;
+  permissionRequired: string;
+  permissions: string[];
 };
 
 export const AppViewerHeader = (props: AppViewerHeaderProps) => {
+  const hasPermission = isPermitted(
+    props.permissions,
+    props.permissionRequired,
+  );
+
   return (
     <HeaderWrapper>
-      {props.url && (
+      {props.url && hasPermission && (
         <Button
           className="t--back-to-editor"
           href={props.url}

app/client/src/sagas/InitSagas.ts

@@ -10,6 +10,7 @@ import { fetchPage, fetchPageList } from "actions/pageActions";
 import { fetchDatasources } from "actions/datasourceActions";
 import { fetchPlugins } from "actions/pluginActions";
 import { fetchActions } from "actions/actionActions";
+import { fetchApplication } from "actions/applicationActions";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 
@@ -64,6 +65,7 @@ export function* initializeAppViewerSaga(
   yield all([
     put(fetchActions(applicationId)),
     put(fetchPageList(applicationId)),
+    put(fetchApplication(applicationId)),
   ]);
 
   yield all([