chore: Add Sidebar with Pages Tab (#27965)

## Description
Adds the sidebar with just the pages tab for now. This is just a visual
change, with no way to switch to any other state on the app sidebar.
This change is behind a feature flag.


#### PR fixes following issue(s)
Fixes #27936

#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

## 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: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>

app/client/package.json

@@ -97,7 +97,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@2.1.21",
+    "design-system": "npm:@appsmithorg/design-system@2.1.23",
     "design-system-old": "npm:@appsmithorg/design-system-old@1.1.12",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",

app/client/src/components/Sidebar/SidebarButton.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Icon, Text } from "design-system";
+import styled from "styled-components";
+
+interface Props {
+  title: string;
+  selected: boolean;
+  icon: string;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 64px;
+  width: 50px;
+  text-align: center;
+  align-items: center;
+  gap: 5px;
+`;
+
+const IconContainer = styled.div<{ selected: boolean }>`
+  padding: 2px;
+  background-color: ${(props) =>
+    props.selected ? "var(--ads-v2-color-bg-muted)" : "white"};
+  border-radius: 3px;
+  width: 28px;
+  cursor: pointer;
+`;
+
+function SidebarButton(props: Props) {
+  return (
+    <Container>
+      <IconContainer selected={props.selected}>
+        <Icon name={props.icon} size="lg" />
+      </IconContainer>
+      <Text kind="body-s">{props.title}</Text>
+    </Container>
+  );
+}
+
+export default SidebarButton;

app/client/src/components/Sidebar/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { getIsAppSidebarEnabled } from "selectors/ideSelectors";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import SidebarButton from "./SidebarButton";
+
+const Container = styled.div`
+  width: 50px;
+  border-right: 1px solid var(--ads-v2-color-border);
+  height: 100%;
+`;
+
+function Sidebar() {
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
+  if (!isAppSidebarEnabled) {
+    return null;
+  }
+  return (
+    <Container className="z-[3]">
+      <SidebarButton icon="database-2-line" selected={false} title="Data" />
+      <SidebarButton icon="file-copy-2-line" selected title="Pages" />
+    </Container>
+  );
+}
+
+export default Sidebar;

app/client/src/constants/AppConstants.ts

@@ -125,6 +125,8 @@ export const SIDEBAR_WIDTH = {
   MINIMAL: 66,
 };
 
+export const APP_SIDEBAR_WIDTH = 50;
+
 export const APPLICATION_TITLE_MAX_WIDTH = 192;
 export const APPLICATION_TITLE_MAX_WIDTH_MOBILE = 150;
 //all values are in milliseconds

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

@@ -17,6 +17,7 @@ import EditorsRouter from "./routes";
 import EditorWrapperBody from "./commons/EditorWrapperBody";
 import WidgetsEditorEntityExplorer from "./WidgetsEditorEntityExplorer";
 import EditorWrapperContainer from "./commons/EditorWrapperContainer";
+import Sidebar from "components/Sidebar";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -30,6 +31,7 @@ function WidgetsEditorWrapper() {
   return (
     <>
       <EditorWrapperContainer>
+        <Sidebar />
         <WidgetsEditorEntityExplorer />
         <EditorWrapperBody id="app-body">
           <Switch key={BUILDER_PATH}>

app/client/src/utils/hooks/useDynamicAppLayout.tsx

@@ -4,7 +4,10 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { updateLayoutForMobileBreakpointAction } from "actions/autoLayoutActions";
 import { updateCanvasLayoutAction } from "actions/editorActions";
-import { APP_SETTINGS_PANE_WIDTH } from "constants/AppConstants";
+import {
+  APP_SETTINGS_PANE_WIDTH,
+  APP_SIDEBAR_WIDTH,
+} from "constants/AppConstants";
 import {
   DefaultLayoutType,
   layoutConfigurations,
@@ -42,6 +45,7 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { useLocation } from "react-router";
 import { CANVAS_VIEWPORT } from "constants/componentClassNameConstants";
 import { getLayoutSystemType } from "selectors/layoutSystemSelectors";
+import { getIsAppSidebarEnabled } from "../../selectors/ideSelectors";
 
 const GUTTER_WIDTH = 72;
 export const AUTOLAYOUT_RESIZER_WIDTH_BUFFER = 40;
@@ -75,6 +79,7 @@ export const useDynamicAppLayout = () => {
   const queryParams = new URLSearchParams(search);
   const isEmbed = queryParams.get("embed");
   const isNavbarVisibleInEmbeddedApp = queryParams.get("navbar");
+  const isAppSidebarEnabled = useSelector(getIsAppSidebarEnabled);
 
   // /**
   //  * calculates min height
@@ -149,6 +154,10 @@ export const useDynamicAppLayout = () => {
       calculatedWidth -= explorerWidth;
     }
 
+    if (appMode === APP_MODE.EDIT && isAppSidebarEnabled) {
+      calculatedWidth -= APP_SIDEBAR_WIDTH;
+    }
+
     /**
      * If there is
      * 1. a sidebar for navigation,

app/client/yarn.lock

@@ -10490,7 +10490,7 @@ __metadata:
     cypress-xpath: ^1.6.0
     dayjs: ^1.10.6
     deep-diff: ^1.0.2
-    design-system: "npm:@appsmithorg/design-system@2.1.21"
+    design-system: "npm:@appsmithorg/design-system@2.1.23"
     design-system-old: "npm:@appsmithorg/design-system-old@1.1.12"
     diff: ^5.0.0
     dotenv: ^8.1.0
@@ -14603,9 +14603,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"design-system@npm:@appsmithorg/design-system@2.1.21":
-  version: 2.1.21
-  resolution: "@appsmithorg/design-system@npm:2.1.21"
+"design-system@npm:@appsmithorg/design-system@2.1.23":
+  version: 2.1.23
+  resolution: "@appsmithorg/design-system@npm:2.1.23"
   dependencies:
     "@radix-ui/react-dialog": ^1.0.2
     "@radix-ui/react-dropdown-menu": ^2.0.4
@@ -14631,7 +14631,7 @@ __metadata:
     react-dom: ^17.0.2
     react-router-dom: ^5.0.0
     styled-components: ^5.3.6
-  checksum: 7d23312f769b62c1cb84608a9083e6d39c67201096604e6c3d86bfab8b351c4b4055bd3ed1b199aa2e8464eef2ae2e77743c65537c80273ae174a3975ee0d5b9
+  checksum: c64a75d8e64cf09d6db915f37584a849e412f979966145461f538c9ee1b5bda6a26170526f5ad1e55366732d72b1e9e33c14a049e298876f0dfeb3a2adfacbb7
   languageName: node
   linkType: hard