From 3d4fcb979571160661e1f3aa45ce85ea3d2ef6a2 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:32:34 +0530
Subject: [PATCH] chore: move settings pane to the left (#28002)

## Description

Show settings pane on the left in place of explorer. This will be later
in a sidepane.

Fixes https://github.com/appsmithorg/appsmith/issues/27955

#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Hetu Nandu <hetunandu@gmail.com>
---
 .../Editor/AppSettingsPane/PaneHeader.tsx     | 19 ++++++++++++----
 .../src/pages/Editor/WidgetsEditor/index.tsx  | 22 +++++++++++++++++--
 .../src/pages/Editor/WidgetsEditorWrapper.tsx |  8 ++++++-
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
index 534065b38b..52c677c41b 100644
--- a/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
+++ b/app/client/src/pages/Editor/AppSettingsPane/PaneHeader.tsx
@@ -6,12 +6,13 @@ import {
   APP_SETTINGS_PANE_HEADER,
 } from "@appsmith/constants/messages";
 import { Tooltip } from "design-system";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { Button } from "design-system";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import classNames from "classnames";
 
 const StyledHeader = styled.div`
   height: 48px;
-  padding: 10px 0px 10px;
   border-bottom: 1px solid var(--ads-v2-color-border);
   margin-bottom: 0;
 `;
@@ -24,8 +25,16 @@ const StyledText = styled.div`
 
 function PaneHeader() {
   const dispatch = useDispatch();
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+
   return (
-    <StyledHeader className="flex justify-start items-center">
+    <StyledHeader
+      className={classNames({
+        "flex justify-start items-center py-2.5": !isAppSidebarEnabled,
+        "flex justify-between	flex-row-reverse items-center py-2.5 pl-4":
+          isAppSidebarEnabled,
+      })}
+    >
       <Tooltip content={APP_SETTINGS_CLOSE_TOOLTIP()} placement="bottom">
         <Button
           className="ml-2 pr-2"
@@ -34,7 +43,9 @@ function PaneHeader() {
           kind="tertiary"
           onClick={() => dispatch(closeAppSettingsPaneAction())}
           size="md"
-          startIcon="double-arrow-right"
+          startIcon={
+            isAppSidebarEnabled ? "close-control" : "double-arrow-right"
+          }
         />
       </Tooltip>
       <StyledText>{APP_SETTINGS_PANE_HEADER()}</StyledText>
diff --git a/app/client/src/pages/Editor/WidgetsEditor/index.tsx b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
index 4d6c78fa8a..9118e0c8dc 100644
--- a/app/client/src/pages/Editor/WidgetsEditor/index.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor/index.tsx
@@ -31,9 +31,13 @@ import MainContainerWrapper from "./MainContainerWrapper";
 import EmptyCanvasPrompts from "./EmptyCanvasPrompts";
 import { useAutoHeightUIState } from "utils/hooks/autoHeightUIHooks";
 import { PageViewWrapper } from "pages/AppViewer/AppPage.styled";
-import { NAVIGATION_SETTINGS } from "constants/AppConstants";
+import {
+  APP_SETTINGS_PANE_WIDTH,
+  NAVIGATION_SETTINGS,
+} from "constants/AppConstants";
 import {
   getAppSettingsPaneContext,
+  getIsAppSettingsPaneOpen,
   getIsAppSettingsPaneWithNavigationTabOpen,
 } from "selectors/appSettingsPaneSelectors";
 import { AppSettingsTabs } from "../AppSettingsPane/AppSettings";
@@ -46,6 +50,8 @@ import classNames from "classnames";
 import { getSnapshotUpdatedTime } from "selectors/autoLayoutSelectors";
 import { getReadableSnapShotDetails } from "layoutSystems/autolayout/utils/AutoLayoutUtils";
 import AnonymousDataPopup from "../FirstTimeUserOnboarding/AnonymousDataPopup";
+import AppSettingsPane from "../AppSettingsPane";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
 
 function WidgetsEditor() {
   const { deselectAll, focusWidget } = useWidgetSelection();
@@ -75,6 +81,9 @@ function WidgetsEditor() {
   const isPreviewingNavigation =
     isPreviewMode || isAppSettingsPaneWithNavigationTabOpen;
 
+  const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+
   const shouldShowSnapShotBanner =
     !!readableSnapShotDetails && !isPreviewingNavigation;
 
@@ -165,6 +174,13 @@ function WidgetsEditor() {
     <EditorContextProvider renderMode="CANVAS">
       {guidedTourEnabled && <Guide />}
       <div className="relative flex flex-row w-full overflow-hidden">
+        {isAppSettingsPaneOpen && isAppSidebarEnabled && (
+          <div className="h-full flex">
+            <div style={{ width: APP_SETTINGS_PANE_WIDTH }}>
+              <AppSettingsPane />
+            </div>
+          </div>
+        )}
         <div
           className={classNames({
             "relative flex flex-col w-full overflow-hidden": true,
@@ -227,7 +243,9 @@ function WidgetsEditor() {
           </div>
           <Debugger />
         </div>
-        <PropertyPaneWrapper />
+        {!(isAppSettingsPaneOpen && isAppSidebarEnabled) && (
+          <PropertyPaneWrapper />
+        )}
       </div>
     </EditorContextProvider>
   );
diff --git a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
index f0ac582932..da0e6ce934 100644
--- a/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditorWrapper.tsx
@@ -18,6 +18,8 @@ import EditorWrapperBody from "./commons/EditorWrapperBody";
 import WidgetsEditorEntityExplorer from "./WidgetsEditorEntityExplorer";
 import EditorWrapperContainer from "./commons/EditorWrapperContainer";
 import Sidebar from "components/Sidebar";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import { getIsAppSettingsPaneOpen } from "selectors/appSettingsPaneSelectors";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -27,12 +29,16 @@ const SentryRoute = Sentry.withSentryRouting(Route);
 function WidgetsEditorWrapper() {
   const { path } = useRouteMatch();
   const isPreviewMode = useSelector(previewModeSelector);
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  const isAppSettingsPaneOpen = useSelector(getIsAppSettingsPaneOpen);
 
   return (
     <>
       <EditorWrapperContainer>
         <Sidebar />
-        <WidgetsEditorEntityExplorer />
+        {!(isAppSidebarEnabled && isAppSettingsPaneOpen) && (
+          <WidgetsEditorEntityExplorer />
+        )}
         <EditorWrapperBody id="app-body">
           <Switch key={BUILDER_PATH}>
             <SentryRoute