From 80a3f575199831c45a42010e8e577058d228efb7 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 30 Nov 2023 14:56:24 +0530 Subject: [PATCH] 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 --- app/client/src/entities/IDE/constants.ts | 14 +- app/client/src/entities/IDE/utils.ts | 14 +- .../common/dropTarget/DropTargetComponent.tsx | 2 +- app/client/src/navigation/FocusEntity.test.ts | 56 ++++---- app/client/src/navigation/FocusEntity.ts | 34 ++--- .../src/pages/Editor/IDE/LeftPane/index.tsx | 2 +- .../Editor/IDE/Sidebar/SidebarComponent.tsx | 124 ++++++++++++++++++ .../src/pages/Editor/IDE/Sidebar/index.tsx | 110 ++-------------- app/client/src/pages/Editor/IDE/hooks.ts | 4 +- app/client/src/sagas/ContextSwitchingSaga.ts | 6 +- app/client/src/utils/history.ts | 1 + 11 files changed, 201 insertions(+), 166 deletions(-) create mode 100644 app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx diff --git a/app/client/src/entities/IDE/constants.ts b/app/client/src/entities/IDE/constants.ts index 250d832264..a76ddb8e57 100644 --- 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", diff --git a/app/client/src/entities/IDE/utils.ts b/app/client/src/entities/IDE/utils.ts index 39f6211b2c..2caac2046c 100644 --- 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; } diff --git a/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx b/app/client/src/layoutSystems/common/dropTarget/DropTargetComponent.tsx index 841dae9a19..b004a249ef 100644 --- 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; diff --git a/app/client/src/navigation/FocusEntity.test.ts b/app/client/src/navigation/FocusEntity.test.ts index 179c4d1a48..7b74daf7d1 100644 --- 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, }, }, ]; diff --git a/app/client/src/navigation/FocusEntity.ts b/app/client/src/navigation/FocusEntity.ts index 317f9629e2..3f0cb8657d 100644 --- 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> = { 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, }; } diff --git a/app/client/src/pages/Editor/IDE/LeftPane/index.tsx b/app/client/src/pages/Editor/IDE/LeftPane/index.tsx index b0167afa77..ba1e814cd9 100644 --- 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); diff --git a/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx b/app/client/src/pages/Editor/IDE/Sidebar/SidebarComponent.tsx new file mode 100644 index 0000000000..77f5f840f0 --- /dev/null +++ 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 ( + + {isAppSidebarAnnouncementEnabled && + !isAppSidebarAnnouncementDismissed && ( + + + + + + Got it + + } + onCloseButtonClick={handlePopoverClose} + side="right" + title="App-level items have a new home!" + /> + + )} +
+ {topButtons.map((b) => ( + { + if (appState !== b.state) { + onClick(b.urlSuffix); + } + }} + selected={appState === b.state} + title={b.title} + /> + ))} +
+
+ {bottomButtons.map((b) => ( + { + if (appState !== b.state) { + onClick(b.urlSuffix); + } + }} + selected={appState === b.state} + tooltip={b.title} + /> + ))} +
+ + ); +} + +export default SidebarComponent; diff --git a/app/client/src/pages/Editor/IDE/Sidebar/index.tsx b/app/client/src/pages/Editor/IDE/Sidebar/index.tsx index a4a5453256..46a4cef906 100644 --- 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 ( - - {isAppSidebarAnnouncementEnabled && - !isAppSidebarAnnouncementDismissed && ( - - - - - - Got it - - } - onCloseButtonClick={handlePopoverClose} - side="right" - title="App-level items have a new home!" - /> - - )} -
- {TopButtons.map((b) => ( - { - if (appState !== b.state) { - onClick(b.urlSuffix); - } - }} - selected={appState === b.state} - title={b.title} - /> - ))} -
-
- {ButtonButtons.map((b) => ( - { - if (appState !== b.state) { - onClick(b.urlSuffix); - } - }} - selected={appState === b.state} - tooltip={b.title} - /> - ))} -
- + ); } diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts index 40d9a511a5..b79bd4d002 100644 --- 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)); diff --git a/app/client/src/sagas/ContextSwitchingSaga.ts b/app/client/src/sagas/ContextSwitchingSaga.ts index cb9785d8d0..884827ecca 100644 --- 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); diff --git a/app/client/src/utils/history.ts b/app/client/src/utils/history.ts index beb952ad04..ade7e61330 100644 --- 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 {