chore: Refactoring sidebar on app editor to support the same on package editor (#29212)

## Description Refactoring sidebar on app editor to support the same on package editor #### PR fixes following issue(s) Fixes [#28476](https://github.com/appsmithorg/appsmith/issues/28476) #### Type of change - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] 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>
2023-11-30 14:56:24 +05:30 · 2023-11-30 14:56:24 +05:30 · 80a3f57519
commit 80a3f57519
parent 141b92059a
11 changed files with 201 additions and 166 deletions
--- a/app/client/src/entities/IDE/constants.ts
+++ b/app/client/src/entities/IDE/constants.ts
@ -1,4 +1,4 @@
-export enum AppState {
+export enum EditorState {
  DATA = "DATA",
  EDITOR = "EDITOR",
  SETTINGS = "SETTINGS",
@ -6,7 +6,7 @@ export enum AppState {
 }

 export interface SidebarButton {
-  state: AppState;
+  state: EditorState;
  icon: string;
  title?: string;
  urlSuffix: string;
@ -14,28 +14,28 @@ export interface SidebarButton {

 export const TopButtons: SidebarButton[] = [
  {
-    state: AppState.EDITOR,
+    state: EditorState.EDITOR,
    icon: "file-copy-2-line",
    title: "Editor",
    urlSuffix: "",
  },
  {
-    state: AppState.DATA,
+    state: EditorState.DATA,
    icon: "database-2-line",
    title: "Data",
    urlSuffix: "datasource",
  },
 ];

-export const ButtonButtons: SidebarButton[] = [
+export const BottomButtons: SidebarButton[] = [
  {
-    state: AppState.LIBRARIES,
+    state: EditorState.LIBRARIES,
    icon: "box-3-line",
    title: "Libraries",
    urlSuffix: "libraries",
  },
  {
-    state: AppState.SETTINGS,
+    state: EditorState.SETTINGS,
    icon: "settings-2-line",
    title: "Settings",
    urlSuffix: "settings",
--- a/app/client/src/entities/IDE/utils.ts
+++ b/app/client/src/entities/IDE/utils.ts
@ -7,9 +7,9 @@ import {
  INTEGRATION_EDITOR_PATH,
  SAAS_GSHEET_EDITOR_ID_PATH,
 } from "constants/routes";
-import { AppState } from "./constants";
+import { EditorState } from "./constants";

-export function getCurrentAppState(currentUrl: string): AppState {
+export function getCurrentAppState(currentUrl: string): EditorState {
  const match = matchPath<{
    appState?: "datasource" | "settings" | "libraries";
    datasourceId?: string;
@ -31,14 +31,14 @@ export function getCurrentAppState(currentUrl: string): AppState {
  if (match) {
    const { appState, datasourceId, selectedTab } = match.params;
    if (appState === "datasource" || datasourceId || selectedTab) {
-      return AppState.DATA;
+      return EditorState.DATA;
    } else if (appState === "settings") {
-      return AppState.SETTINGS;
+      return EditorState.SETTINGS;
    } else if (appState === "libraries") {
-      return AppState.LIBRARIES;
+      return EditorState.LIBRARIES;
    } else {
-      return AppState.EDITOR;
+      return EditorState.EDITOR;
    }
  }
-  return AppState.EDITOR;
+  return EditorState.EDITOR;
 }
--- a/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx
+++ b/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx
@ -50,7 +50,7 @@ import StarterBuildingBlocks from "./starterBuildingBlocks";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import useCurrentAppState from "pages/Editor/IDE/hooks";
-import { AppState as IDEAppState } from "entities/IDE/constants";
+import { EditorState as IDEAppState } from "entities/IDE/constants";

 export type DropTargetComponentProps = PropsWithChildren<{
  snapColumnSpace: number;
--- a/app/client/src/navigation/FocusEntity.test.ts
+++ b/app/client/src/navigation/FocusEntity.test.ts
@ -1,5 +1,5 @@
 import { identifyEntityFromPath, FocusEntity } from "navigation/FocusEntity";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";

 describe("identifyEntityFromPath", () => {
  const oldUrlCases = [
@ -9,7 +9,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.CANVAS,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -18,7 +18,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.PROPERTY_PANE,
        id: "ryvc8i7oja",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -27,7 +27,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -36,7 +36,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myApiId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -45,7 +45,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myQueryId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -54,7 +54,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -63,7 +63,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT,
        id: "myJSId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -72,7 +72,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
    {
@ -81,7 +81,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE,
        id: "myDatasourceId",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
  ];
@ -92,7 +92,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.CANVAS,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -101,7 +101,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.PROPERTY_PANE,
        id: "ryvc8i7oja",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -110,7 +110,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -119,7 +119,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myApiId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -128,7 +128,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myQueryId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -137,7 +137,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -146,7 +146,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT,
        id: "myJSId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -155,7 +155,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
    {
@ -164,7 +164,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE,
        id: "myDatasourceId",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
  ];
@ -175,7 +175,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.CANVAS,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -184,7 +184,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.PROPERTY_PANE,
        id: "ryvc8i7oja",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -193,7 +193,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -202,7 +202,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myApiId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -211,7 +211,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.QUERY,
        id: "myQueryId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -220,7 +220,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -229,7 +229,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.JS_OBJECT,
        id: "myJSId",
        pageId: "myPageId",
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      },
    },
    {
@ -238,7 +238,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE_LIST,
        id: "",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
    {
@ -247,7 +247,7 @@ describe("identifyEntityFromPath", () => {
        entity: FocusEntity.DATASOURCE,
        id: "myDatasourceId",
        pageId: "myPageId",
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      },
    },
  ];
--- a/app/client/src/navigation/FocusEntity.ts
+++ b/app/client/src/navigation/FocusEntity.ts
@ -15,7 +15,7 @@ import {
  SAAS_EDITOR_DATASOURCE_ID_PATH,
 } from "pages/Editor/SaaSEditor/constants";
 import { TEMP_DATASOURCE_ID } from "constants/Datasource";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";

 export enum FocusEntity {
  PAGE = "PAGE",
@ -45,7 +45,7 @@ export const FocusStoreHierarchy: Partial<Record<FocusEntity, FocusEntity>> = {
 export interface FocusEntityInfo {
  entity: FocusEntity;
  id: string;
-  appState: AppState;
+  appState: EditorState;
  pageId?: string;
 }

@ -100,7 +100,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.NONE,
      id: "",
      pageId: "",
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.apiId) {
@ -109,14 +109,14 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
        entity: FocusEntity.QUERY,
        id: match.params.apiId,
        pageId: match.params.pageId,
-        appState: AppState.EDITOR,
+        appState: EditorState.EDITOR,
      };
    }
    return {
      entity: FocusEntity.QUERY,
      id: match.params.apiId,
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.datasourceId) {
@ -125,14 +125,14 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
        entity: FocusEntity.NONE,
        id: match.params.datasourceId,
        pageId: match.params.pageId,
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      };
    } else {
      return {
        entity: FocusEntity.DATASOURCE,
        id: match.params.datasourceId,
        pageId: match.params.pageId,
-        appState: AppState.DATA,
+        appState: EditorState.DATA,
      };
    }
  }
@ -141,7 +141,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.DATASOURCE,
      id: match.params.selectedTab,
      pageId: match.params.pageId,
-      appState: AppState.DATA,
+      appState: EditorState.DATA,
    };
  }
  if (match.params.entity === "datasource") {
@ -149,7 +149,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.DATASOURCE_LIST,
      id: "",
      pageId: match.params.pageId,
-      appState: AppState.DATA,
+      appState: EditorState.DATA,
    };
  }
  if (match.params.queryId) {
@ -157,7 +157,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.QUERY,
      id: match.params.queryId,
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.collectionId) {
@ -165,7 +165,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.JS_OBJECT,
      id: match.params.collectionId,
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.widgetIds) {
@ -173,7 +173,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.PROPERTY_PANE,
      id: match.params.widgetIds,
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.entity === "queries") {
@ -181,7 +181,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.QUERY_LIST,
      id: "",
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.entity === "jsObjects") {
@ -189,7 +189,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      entity: FocusEntity.JS_OBJECT_LIST,
      id: "",
      pageId: match.params.pageId,
-      appState: AppState.EDITOR,
+      appState: EditorState.EDITOR,
    };
  }
  if (match.params.entity) {
@ -197,7 +197,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      return {
        entity: FocusEntity.LIBRARY,
        id: "",
-        appState: AppState.LIBRARIES,
+        appState: EditorState.LIBRARIES,
        pageId: match.params.pageId,
      };
    }
@ -205,7 +205,7 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
      return {
        entity: FocusEntity.SETTINGS,
        id: "",
-        appState: AppState.SETTINGS,
+        appState: EditorState.SETTINGS,
        pageId: match.params.pageId,
      };
    }
@ -214,6 +214,6 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
    entity: FocusEntity.CANVAS,
    id: "",
    pageId: match.params.pageId,
-    appState: AppState.EDITOR,
+    appState: EditorState.EDITOR,
  };
 }
--- a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx
@ -21,7 +21,7 @@ import { PagesPane } from "../PagesPane";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";

-const LeftPaneContainer = styled.div`
+export const LeftPaneContainer = styled.div`
  height: 100%;
  min-width: 150px;
  border-right: 1px solid var(--ads-v2-color-border);
--- a/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx
+++ b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx
@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import SidebarButton from "./SidebarButton";
+import type { SidebarButton as SidebarButtonType } from "entities/IDE/constants";
+import {
+  AnnouncementPopover,
+  AnnouncementPopoverTrigger,
+  AnnouncementPopoverContent,
+  Button,
+} from "design-system";
+import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
+
+const Container = styled.div`
+  width: 50px;
+  border-right: 1px solid var(--ads-v2-color-border);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--ads-v2-color-bg);
+  position: relative;
+`;
+
+const DummyTrigger = styled.div`
+  width: 0;
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 10%;
+`;
+
+interface SidebarComponentProps {
+  topButtons: SidebarButtonType[];
+  bottomButtons: SidebarButtonType[];
+  appState: string;
+  onClick: (suffix: string) => void;
+  isAppSidebarAnnouncementEnabled: boolean;
+}
+
+function SidebarComponent(props: SidebarComponentProps) {
+  const {
+    appState,
+    bottomButtons,
+    isAppSidebarAnnouncementEnabled,
+    onClick,
+    topButtons,
+  } = props;
+  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
+  const isAppSidebarEnabled = useIsAppSidebarEnabled();
+  const isAppSidebarAnnouncementDismissed =
+    localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true";
+
+  const handlePopoverClose = () => {
+    setIsPopoverOpen(false);
+    localStorage.setItem(
+      "isAppSidebarAnnouncementDismissed",
+      JSON.stringify(true),
+    );
+  };
+
+  if (!isAppSidebarEnabled) {
+    return null;
+  }
+
+  return (
+    <Container className="t--sidebar" id="t--app-sidebar">
+      {isAppSidebarAnnouncementEnabled &&
+        !isAppSidebarAnnouncementDismissed && (
+          <AnnouncementPopover open={isPopoverOpen}>
+            <AnnouncementPopoverTrigger>
+              <DummyTrigger className="sidebar-popover-trigger" />
+            </AnnouncementPopoverTrigger>
+            <AnnouncementPopoverContent
+              align="center"
+              arrowFillColor="#F6F2FA"
+              banner="https://assets.appsmith.com/new-sidebar-banner.svg"
+              collisionPadding={{ top: 20 }}
+              description="Navigate faster through datasources, pages, and app settings."
+              footer={
+                <Button kind="primary" onClick={handlePopoverClose} size="md">
+                  Got it
+                </Button>
+              }
+              onCloseButtonClick={handlePopoverClose}
+              side="right"
+              title="App-level items have a new home!"
+            />
+          </AnnouncementPopover>
+        )}
+      <div>
+        {topButtons.map((b) => (
+          <SidebarButton
+            icon={b.icon}
+            key={b.state}
+            onClick={() => {
+              if (appState !== b.state) {
+                onClick(b.urlSuffix);
+              }
+            }}
+            selected={appState === b.state}
+            title={b.title}
+          />
+        ))}
+      </div>
+      <div>
+        {bottomButtons.map((b) => (
+          <SidebarButton
+            icon={b.icon}
+            key={b.state}
+            onClick={() => {
+              if (appState !== b.state) {
+                onClick(b.urlSuffix);
+              }
+            }}
+            selected={appState === b.state}
+            tooltip={b.title}
+          />
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+export default SidebarComponent;
--- a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx
+++ b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx
@ -1,53 +1,22 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { getIsAppSidebarAnnouncementEnabled } from "selectors/ideSelectors";
 import { useSelector, useDispatch } from "react-redux";
-import styled from "styled-components";
-import SidebarButton from "./SidebarButton";
 import { builderURL } from "@appsmith/RouteBuilder";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import history, { NavigationMethod } from "utils/history";
-import { ButtonButtons, TopButtons } from "entities/IDE/constants";
 import useCurrentAppState from "../hooks";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
 import { fetchWorkspace } from "@appsmith/actions/workspaceActions";
-import {
-  AnnouncementPopover,
-  AnnouncementPopoverTrigger,
-  AnnouncementPopoverContent,
-  Button,
-} from "design-system";
 import { inGuidedTour } from "selectors/onboardingSelectors";
-import { useIsAppSidebarEnabled } from "../../../../navigation/featureFlagHooks";
-
-const Container = styled.div`
-  width: 50px;
-  border-right: 1px solid var(--ads-v2-color-border);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: var(--ads-v2-color-bg);
-  position: relative;
-`;
-
-const DummyTrigger = styled.div`
-  width: 0;
-  height: 0;
-  position: absolute;
-  right: 0;
-  top: 10%;
-`;
+import SidebarComponent from "./SidebarComponent";
+import { BottomButtons, TopButtons } from "entities/IDE/constants";

 function Sidebar() {
  const dispatch = useDispatch();
  const appState = useCurrentAppState();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(true);
-  const isAppSidebarEnabled = useIsAppSidebarEnabled();
  const isAppSidebarAnnouncementEnabled = useSelector(
    getIsAppSidebarAnnouncementEnabled,
  );
-  const isAppSidebarAnnouncementDismissed =
-    localStorage.getItem("isAppSidebarAnnouncementDismissed") === "true";
  const pageId = useSelector(getCurrentPageId);

  const currentWorkspaceId = useSelector(getCurrentWorkspaceId);
@ -71,78 +40,19 @@ function Sidebar() {
    },
    [pageId],
  );
-  if (!isAppSidebarEnabled) {
-    return null;
-  }
-
-  const handlePopoverClose = () => {
-    setIsPopoverOpen(false);
-    localStorage.setItem(
-      "isAppSidebarAnnouncementDismissed",
-      JSON.stringify(true),
-    );
-  };

  if (guidedTourEnabled) {
    return null;
  }

  return (
-    <Container className="t--sidebar" id="t--app-sidebar">
-      {isAppSidebarAnnouncementEnabled &&
-        !isAppSidebarAnnouncementDismissed && (
-          <AnnouncementPopover open={isPopoverOpen}>
-            <AnnouncementPopoverTrigger>
-              <DummyTrigger className="sidebar-popover-trigger" />
-            </AnnouncementPopoverTrigger>
-            <AnnouncementPopoverContent
-              align="center"
-              arrowFillColor="#F6F2FA"
-              banner="https://assets.appsmith.com/new-sidebar-banner.svg"
-              collisionPadding={{ top: 20 }}
-              description="Navigate faster through datasources, pages, and app settings."
-              footer={
-                <Button kind="primary" onClick={handlePopoverClose} size="md">
-                  Got it
-                </Button>
-              }
-              onCloseButtonClick={handlePopoverClose}
-              side="right"
-              title="App-level items have a new home!"
-            />
-          </AnnouncementPopover>
-        )}
-      <div>
-        {TopButtons.map((b) => (
-          <SidebarButton
-            icon={b.icon}
-            key={b.state}
-            onClick={() => {
-              if (appState !== b.state) {
-                onClick(b.urlSuffix);
-              }
-            }}
-            selected={appState === b.state}
-            title={b.title}
-          />
-        ))}
-      </div>
-      <div>
-        {ButtonButtons.map((b) => (
-          <SidebarButton
-            icon={b.icon}
-            key={b.state}
-            onClick={() => {
-              if (appState !== b.state) {
-                onClick(b.urlSuffix);
-              }
-            }}
-            selected={appState === b.state}
-            tooltip={b.title}
-          />
-        ))}
-      </div>
-    </Container>
+    <SidebarComponent
+      appState={appState}
+      bottomButtons={BottomButtons}
+      isAppSidebarAnnouncementEnabled={isAppSidebarAnnouncementEnabled}
+      onClick={onClick}
+      topButtons={TopButtons}
+    />
  );
 }

--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { AppState } from "entities/IDE/constants";
+import { EditorState } from "entities/IDE/constants";
 import { useLocation } from "react-router";
 import { getCurrentAppState } from "entities/IDE/utils";

 const useCurrentAppState = () => {
-  const [appState, setAppState] = useState(AppState.EDITOR);
+  const [appState, setAppState] = useState(EditorState.EDITOR);
  const { pathname } = useLocation();
  useEffect(() => {
    setAppState(getCurrentAppState(pathname));
--- a/app/client/src/sagas/ContextSwitchingSaga.ts
+++ b/app/client/src/sagas/ContextSwitchingSaga.ts
@ -27,7 +27,7 @@ import {
  isAppStateChange,
  isPageChange,
 } from "../navigation/FocusUtils";
-import { AppState } from "../entities/IDE/constants";
+import { EditorState } from "../entities/IDE/constants";
 import { getCurrentApplicationId } from "../selectors/editorSelectors";
 import { get } from "lodash";

@ -212,7 +212,7 @@ function* getEntitiesForStore(previousPath: string, currentPath: string) {
        entityInfo: {
          entity: FocusEntity.PAGE,
          id: prevFocusEntityInfo.pageId,
-          appState: AppState.EDITOR,
+          appState: EditorState.EDITOR,
        },
      });
    }
@ -282,7 +282,7 @@ function* getEntitiesForSet(
        entityInfo: {
          entity: FocusEntity.PAGE,
          id: currentEntityInfo.pageId,
-          appState: AppState.EDITOR,
+          appState: EditorState.EDITOR,
        },
      });
      const focusHistory: FocusState = yield select(getCurrentFocusInfo, key);
--- a/app/client/src/utils/history.ts
+++ b/app/client/src/utils/history.ts
@ -15,6 +15,7 @@ export enum NavigationMethod {
  ActionBackButton = "ActionBackButton",
  ContextSwitching = "ContextSwitching",
  AppSidebar = "AppSidebar",
+  PackageSidebar = "PackageSidebar",
 }

 export interface AppsmithLocationState {