From 6a8039b3131c4e0056cabd655b1aac991e44df25 Mon Sep 17 00:00:00 2001 From: Trisha Anand Date: Mon, 5 Feb 2024 14:11:20 +0530 Subject: [PATCH] Revert "fix: Navigating to page, navigate to last used segment instead of canvas" (#30891) Reverts appsmithorg/appsmith#30652 --- .../e2e/Regression/Apps/EchoApiCMS_spec.js | 8 +- .../e2e/Regression/Apps/PromisesApp_spec.js | 6 +- .../ExplorerTests/Hide_Page_spec.js | 2 - .../Git/GitImport/GitImport_spec.js | 4 +- .../ClientSide/SetProperty/SetOptions_Spec.ts | 14 +-- .../WidgetPropertySetters2_spec.ts | 3 - .../Sanity/Datasources/MySQLNoiseTest_spec.js | 7 +- app/client/cypress/support/ApiCommands.js | 2 +- .../src/pages/Editor/Explorer/Pages/index.tsx | 94 ++++++++++++++- .../Editor/IDE/EditorPane/PagesSection.tsx | 103 ++++++++++++++++- .../IDE/EditorPane/components/PageElement.tsx | 108 ------------------ app/client/src/pages/Editor/IDE/hooks.ts | 44 ------- 12 files changed, 203 insertions(+), 192 deletions(-) delete mode 100644 app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx diff --git a/app/client/cypress/e2e/Regression/Apps/EchoApiCMS_spec.js b/app/client/cypress/e2e/Regression/Apps/EchoApiCMS_spec.js index 197d01bc3c..4eeb13eca9 100644 --- a/app/client/cypress/e2e/Regression/Apps/EchoApiCMS_spec.js +++ b/app/client/cypress/e2e/Regression/Apps/EchoApiCMS_spec.js @@ -75,7 +75,7 @@ describe( it("4. Send mail and verify post request body", function () { // navigating to canvas - PageLeftPane.switchSegment(PagePaneSegment.UI); + cy.xpath(appPage.pagebutton).click(); cy.get(appPage.submitButton).should("be.visible"); cy.xpath("//span[text()='3']").click({ force: true }); cy.get(appPage.mailButton).closest("div").click(); @@ -89,7 +89,7 @@ describe( .type("Task completed", { force: true }); cy.get(appPage.confirmButton).closest("div").click({ force: true }); cy.get(appPage.closeButton).closest("div").click({ force: true }); - PageLeftPane.switchSegment(PagePaneSegment.UI); + cy.xpath(appPage.pagebutton).click({ force: true }); PageLeftPane.switchSegment(PagePaneSegment.Queries); cy.xpath(appPage.postApi).click({ force: true }); cy.ResponseCheck("Test"); @@ -99,14 +99,14 @@ describe( it("5. Delete proposal and verify delete request body", function () { // navigating back to canvas - PageLeftPane.switchSegment(PagePaneSegment.UI); + cy.xpath(appPage.pagebutton).click({ force: true }); cy.get(appPage.submitButton).closest("div").should("be.visible"); cy.xpath("//span[text()='Dan.Wyman@hotmail.com']").click({ force: true }); // deleting the proposal and asserting delete call's response cy.xpath(appPage.deleteButton).click({ force: true }); cy.xpath(appPage.deleteTaskText).should("be.visible"); cy.get(appPage.confirmButton).closest("div").click({ force: true }); - PageLeftPane.switchSegment(PagePaneSegment.UI); + cy.xpath(appPage.pagebutton).click({ force: true }); EditorNavigation.SelectEntityByName("delete_proposal", EntityType.Api); cy.ResponseCheck("Dan.Wyman@hotmail.com"); cy.ResponseCheck("Recusan"); diff --git a/app/client/cypress/e2e/Regression/Apps/PromisesApp_spec.js b/app/client/cypress/e2e/Regression/Apps/PromisesApp_spec.js index 2a348e14a2..faa619eee1 100644 --- a/app/client/cypress/e2e/Regression/Apps/PromisesApp_spec.js +++ b/app/client/cypress/e2e/Regression/Apps/PromisesApp_spec.js @@ -7,8 +7,6 @@ import { } from "../../../support/Objects/ObjectsCore"; import EditorNavigation, { EntityType, - PageLeftPane, - PagePaneSegment, } from "../../../support/Pages/EditorNavigation"; const commonlocators = require("../../../locators/commonlocators.json"); @@ -61,7 +59,7 @@ describe( shouldCreateNewJSObj: true, }, ); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); cy.wait("@getConsolidatedData"); // verify text in the text widget @@ -115,7 +113,7 @@ describe( EditorNavigation.SelectEntityByName("JSObject1", EntityType.JSObject); jsEditor.SelectFunctionDropdown("clearStore"); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); cy.xpath("//span[text()='Clear store']").click({ force: true }); cy.get(".t--draggable-textwidget span") .eq(5) diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Hide_Page_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Hide_Page_spec.js index a3ae877c73..68af153851 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Hide_Page_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Hide_Page_spec.js @@ -1,6 +1,5 @@ import EditorNavigation, { EntityType, - PageLeftPane, } from "../../../../support/Pages/EditorNavigation"; import * as _ from "../../../../support/Objects/ObjectsCore"; @@ -17,7 +16,6 @@ describe( entityNameinLeftSidebar: "Page2", action: "Hide", }); - PageLeftPane.switchToAddNew(); cy.ClearSearch(); _.deployMode.DeployApp(); cy.get(".t--page-switch-tab").should("have.length", 2); diff --git a/app/client/cypress/e2e/Regression/ClientSide/Git/GitImport/GitImport_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Git/GitImport/GitImport_spec.js index c83f453e79..783e3d9f50 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Git/GitImport/GitImport_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Git/GitImport/GitImport_spec.js @@ -166,7 +166,7 @@ describe("Git import flow ", { tags: ["@tag.Git"] }, function () { // verify jsObject is not duplicated agHelper.Sleep(2000); //for cloning of table data to finish EditorNavigation.SelectEntityByName(jsObject, EntityType.JSObject); //Also checking jsobject exists after cloning the page - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1 Copy", EntityType.Page); cy.xpath("//input[@class='bp3-input' and @value='Success']").should( "be.visible", ); @@ -192,7 +192,6 @@ describe("Git import flow ", { tags: ["@tag.Git"] }, function () { cy.xpath("//input[@value='Success']"); // navigate to Page1 and verify data cy.get(".t--page-switch-tab").contains("Page1").click({ force: true }); - PageLeftPane.switchSegment(PagePaneSegment.UI); table.AssertTableLoaded(); // verify api response binded to input widget cy.xpath("//input[@value='this is a test']"); @@ -212,7 +211,6 @@ describe("Git import flow ", { tags: ["@tag.Git"] }, function () { cy.xpath("//input[@value='Success']"); // navigate to Page1 and verify data cy.get(".t--page-switch-tab").contains("Page1 Copy").click({ force: true }); - PageLeftPane.switchSegment(PagePaneSegment.UI); table.AssertTableLoaded(0, 1, "v1"); cy.xpath("//input[@value='this is a test']"); cy.xpath("//input[@value='Success']"); diff --git a/app/client/cypress/e2e/Regression/ClientSide/SetProperty/SetOptions_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/SetProperty/SetOptions_Spec.ts index e09e085cf5..6cae600c1d 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/SetProperty/SetOptions_Spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/SetProperty/SetOptions_Spec.ts @@ -11,8 +11,6 @@ import { } from "../../../../support/Objects/ObjectsCore"; import EditorNavigation, { EntityType, - PageLeftPane, - PagePaneSegment, } from "../../../../support/Pages/EditorNavigation"; describe( @@ -39,7 +37,7 @@ describe( }, ); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + @@ -62,7 +60,7 @@ describe( false, ); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + @@ -85,7 +83,7 @@ describe( false, ); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + @@ -108,7 +106,7 @@ describe( false, ); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + @@ -131,7 +129,7 @@ describe( false, ); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + @@ -160,7 +158,7 @@ describe( } }`); jsEditor.RunJSObj(); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + diff --git a/app/client/cypress/e2e/Regression/ClientSide/SetProperty/WidgetPropertySetters2_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/SetProperty/WidgetPropertySetters2_spec.ts index 7513a69e03..9fe3369221 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/SetProperty/WidgetPropertySetters2_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/SetProperty/WidgetPropertySetters2_spec.ts @@ -11,8 +11,6 @@ import { } from "../../../../support/Objects/ObjectsCore"; import EditorNavigation, { EntityType, - PageLeftPane, - PagePaneSegment, } from "../../../../support/Pages/EditorNavigation"; describe( @@ -136,7 +134,6 @@ describe( ); jsEditor.RunJSObj(); EditorNavigation.SelectEntityByName("Page1", EntityType.Page); - PageLeftPane.switchSegment(PagePaneSegment.UI); agHelper .GetText( locators._widgetInDeployed(draggableWidgets.INPUT_V2) + diff --git a/app/client/cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js b/app/client/cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js index 34818e04f4..d658c58898 100644 --- a/app/client/cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js +++ b/app/client/cypress/e2e/Sanity/Datasources/MySQLNoiseTest_spec.js @@ -1,6 +1,5 @@ -import { - PageLeftPane, - PagePaneSegment, +import EditorNavigation, { + EntityType, } from "../../../support/Pages/EditorNavigation"; const datasourceEditor = require("../../../locators/DatasourcesEditor.json"); @@ -48,7 +47,7 @@ describe( ); cy.SaveAndRunAPI(); cy.ResponseCheck("killed"); - PageLeftPane.switchSegment(PagePaneSegment.UI); + EditorNavigation.SelectEntityByName("Page1", EntityType.Page); cy.wait(2000); // run kill query cy.get(".bp3-button-text:contains('Kill Session')").should("be.visible"); diff --git a/app/client/cypress/support/ApiCommands.js b/app/client/cypress/support/ApiCommands.js index 47b5084adb..cde24de7f6 100644 --- a/app/client/cypress/support/ApiCommands.js +++ b/app/client/cypress/support/ApiCommands.js @@ -85,7 +85,7 @@ Cypress.Commands.add("EditApiNameFromExplorer", (apiname) => { .clear() .type(apiname, { force: true }) .should("have.value", apiname) - .blur({ force: true }); + .blur(); // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(3000); }); diff --git a/app/client/src/pages/Editor/Explorer/Pages/index.tsx b/app/client/src/pages/Editor/Explorer/Pages/index.tsx index 6609be1909..0cc0b5dfdb 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/index.tsx +++ b/app/client/src/pages/Editor/Explorer/Pages/index.tsx @@ -12,32 +12,45 @@ import { getCurrentPageId, } from "selectors/editorSelectors"; import { EntityClassNames } from "../Entity"; -import { createNewPageFromEntities } from "actions/pageActions"; +import history, { NavigationMethod } from "utils/history"; +import { createNewPageFromEntities, updatePage } from "actions/pageActions"; +import { defaultPageIcon, pageIcon } from "../ExplorerIcons"; import { ADD_PAGE_TOOLTIP, createMessage } from "@appsmith/constants/messages"; import type { Page } from "@appsmith/constants/ReduxActionConstants"; import { getNextEntityName } from "utils/AppsmithUtils"; +import PageContextMenu from "./PageContextMenu"; +import { resolveAsSpaceChar } from "utils/helpers"; import { getExplorerPinned } from "selectors/explorerSelector"; import { setExplorerPinnedAction } from "actions/explorerActions"; import { selectAllPages } from "@appsmith/selectors/entitiesSelector"; +import { builderURL, widgetListURL } from "@appsmith/RouteBuilder"; import { getExplorerStatus, saveExplorerStatus, } from "@appsmith/pages/Editor/Explorer/helpers"; import AddPageContextMenu from "./AddPageContextMenu"; +import AnalyticsUtil from "utils/AnalyticsUtil"; import { useLocation } from "react-router"; +import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; import type { AppState } from "@appsmith/reducers"; import { getCurrentWorkspaceId } from "@appsmith/selectors/selectedWorkspaceSelectors"; import { getInstanceId } from "@appsmith//selectors/tenantSelectors"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; -import { getHasCreatePagePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; +import { + getHasCreatePagePermission, + getHasManagePagePermission, +} from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; import { ENTITY_HEIGHT, RelativeContainer, StyledEntity, } from "../Common/components"; import { EntityExplorerResizeHandler } from "../Common/EntityExplorerResizeHandler"; -import { PageElement } from "pages/Editor/IDE/EditorPane/components/PageElement"; +import { + PERMISSION_TYPE, + isPermitted, +} from "@appsmith/utils/permissionHelpers"; function Pages() { const applicationId = useSelector(getCurrentApplicationId); @@ -65,6 +78,28 @@ function Pages() { } }, [currentPageId]); + const switchPage = useCallback( + (page: Page) => { + const navigateToUrl = + currentPageId === page.pageId + ? widgetListURL({}) + : builderURL({ + pageId: page.pageId, + }); + AnalyticsUtil.logEvent("PAGE_NAME_CLICK", { + name: page.pageName, + fromUrl: location.pathname, + type: "PAGES", + toUrl: navigateToUrl, + }); + dispatch(toggleInOnboardingWidgetSelection(true)); + history.push(navigateToUrl, { + invokedBy: NavigationMethod.EntityExplorer, + }); + }, + [location.pathname, currentPageId], + ); + const [isMenuOpen, openMenu] = useState(false); const workspaceId = useSelector(getCurrentWorkspaceId); @@ -113,10 +148,59 @@ function Pages() { isFeatureEnabled, userAppPermissions, ); + const hasExportPermission = isPermitted( + userAppPermissions ?? [], + PERMISSION_TYPE.EXPORT_APPLICATION, + ); const pageElements = useMemo( - () => pages.map((page) => ), - [pages, location.pathname], + () => + pages.map((page) => { + const icon = page.isDefault ? defaultPageIcon : pageIcon; + const isCurrentPage = currentPageId === page.pageId; + const pagePermissions = page.userPermissions; + const canManagePages = getHasManagePagePermission( + isFeatureEnabled, + pagePermissions, + ); + + const contextMenu = ( + + ); + + return ( + switchPage(page)} + active={isCurrentPage} + canEditEntityName={canManagePages} + className={`page ${isCurrentPage && "activePage"}`} + contextMenu={contextMenu} + disabled={page.isHidden} + entityId={page.pageId} + icon={icon} + isDefaultExpanded={isCurrentPage} + key={page.pageId} + name={page.pageName} + onNameEdit={resolveAsSpaceChar} + searchKeyword={""} + step={1} + updateEntityName={(id, name) => + updatePage({ id, name, isHidden: !!page.isHidden }) + } + /> + ); + }), + [pages, currentPageId, applicationId, location.pathname], ); return ( diff --git a/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx b/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx index bc7517d6c1..ade47a04f6 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/PagesSection.tsx @@ -4,22 +4,39 @@ import { animated, useSpring } from "react-spring"; import { useDispatch, useSelector } from "react-redux"; import { useLocation } from "react-router"; -import { selectAllPages } from "@appsmith/selectors/entitiesSelector"; +import { + getCurrentPageId, + selectAllPages, +} from "@appsmith/selectors/entitiesSelector"; import type { Page } from "@appsmith/constants/ReduxActionConstants"; -import { getHasCreatePagePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; +import PageContextMenu from "pages/Editor/Explorer/Pages/PageContextMenu"; +import { StyledEntity } from "pages/Editor/Explorer/Common/components"; +import { defaultPageIcon, pageIcon } from "pages/Editor/Explorer/ExplorerIcons"; +import { + getHasCreatePagePermission, + getHasManagePagePermission, +} from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; import { getCurrentApplicationId } from "selectors/editorSelectors"; import { EntityClassNames } from "pages/Editor/Explorer/Entity"; +import { + isPermitted, + PERMISSION_TYPE, +} from "@appsmith/utils/permissionHelpers"; import { getCurrentApplication } from "@appsmith/selectors/applicationSelectors"; import type { AppState } from "@appsmith/reducers"; -import { createNewPageFromEntities } from "actions/pageActions"; +import { builderURL, widgetListURL } from "@appsmith/RouteBuilder"; +import AnalyticsUtil from "utils/AnalyticsUtil"; +import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; +import history, { NavigationMethod } from "utils/history"; +import { resolveAsSpaceChar } from "utils/helpers"; +import { createNewPageFromEntities, updatePage } from "actions/pageActions"; import { setIdeEditorPagesActiveStatus } from "actions/ideActions"; import AddPageContextMenu from "pages/Editor/Explorer/Pages/AddPageContextMenu"; import { getNextEntityName } from "utils/AppsmithUtils"; import { getCurrentWorkspaceId } from "@appsmith/selectors/selectedWorkspaceSelectors"; import { getInstanceId } from "@appsmith/selectors/tenantSelectors"; -import { PageElement } from "pages/Editor/IDE/EditorPane/components/PageElement"; const AnimatedFlex = animated(Flex); @@ -27,6 +44,7 @@ const PagesSection = () => { const dispatch = useDispatch(); const location = useLocation(); const pages: Page[] = useSelector(selectAllPages); + const currentPageId = useSelector(getCurrentPageId); const applicationId = useSelector(getCurrentApplicationId); const userAppPermissions = useSelector( (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [], @@ -43,6 +61,11 @@ const PagesSection = () => { to: { opacity: 1, height: "100%" }, })); + const hasExportPermission = isPermitted( + userAppPermissions ?? [], + PERMISSION_TYPE.EXPORT_APPLICATION, + ); + const canCreatePages = getHasCreatePagePermission( isFeatureEnabled, userAppPermissions, @@ -52,6 +75,29 @@ const PagesSection = () => { api.start(); }, []); + const switchPage = useCallback( + (page: Page) => { + const navigateToUrl = + currentPageId === page.pageId + ? widgetListURL({}) + : builderURL({ + pageId: page.pageId, + }); + AnalyticsUtil.logEvent("PAGE_NAME_CLICK", { + name: page.pageName, + fromUrl: location.pathname, + type: "PAGES", + toUrl: navigateToUrl, + }); + dispatch(toggleInOnboardingWidgetSelection(true)); + dispatch(setIdeEditorPagesActiveStatus(false)); + history.push(navigateToUrl, { + invokedBy: NavigationMethod.EntityExplorer, + }); + }, + [location.pathname, currentPageId], + ); + const createPageCallback = useCallback(() => { const name = getNextEntityName( "Page", @@ -72,8 +118,53 @@ const PagesSection = () => { const onMenuClose = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen]); const pageElements = useMemo( - () => pages.map((page) => ), - [pages, location.pathname], + () => + pages.map((page) => { + const icon = page.isDefault ? defaultPageIcon : pageIcon; + const isCurrentPage = currentPageId === page.pageId; + const pagePermissions = page.userPermissions; + const canManagePages = getHasManagePagePermission( + isFeatureEnabled, + pagePermissions, + ); + + const contextMenu = ( + + ); + + return ( + switchPage(page)} + active={isCurrentPage} + canEditEntityName={canManagePages} + className={`page fullWidth ${isCurrentPage && "activePage"}`} + contextMenu={contextMenu} + disabled={page.isHidden} + entityId={page.pageId} + icon={icon} + isDefaultExpanded={isCurrentPage} + key={page.pageId} + name={page.pageName} + onNameEdit={resolveAsSpaceChar} + searchKeyword={""} + step={1} + updateEntityName={(id, name) => + updatePage({ id, name, isHidden: !!page.isHidden }) + } + /> + ); + }), + [pages, currentPageId, applicationId, location.pathname], ); return ( diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx deleted file mode 100644 index c9ef7def2d..0000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/PageElement.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useCallback } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { useLocation } from "react-router"; - -import type { Page } from "@appsmith/constants/ReduxActionConstants"; -import { defaultPageIcon, pageIcon } from "pages/Editor/Explorer/ExplorerIcons"; -import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector"; -import { getHasManagePagePermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers"; -import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; -import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag"; -import PageContextMenu from "pages/Editor/Explorer/Pages/PageContextMenu"; -import { getCurrentApplicationId } from "selectors/editorSelectors"; -import { EntityClassNames } from "pages/Editor/Explorer/Entity"; -import { - PERMISSION_TYPE, - isPermitted, -} from "@appsmith/utils/permissionHelpers"; -import { getCurrentApplication } from "@appsmith/selectors/applicationSelectors"; -import type { AppState } from "@appsmith/reducers"; -import { StyledEntity } from "pages/Editor/Explorer/Common/components"; -import { resolveAsSpaceChar } from "utils/helpers"; -import { updatePage } from "actions/pageActions"; -import { useGetPageFocusUrl } from "pages/Editor/IDE/hooks"; -import AnalyticsUtil from "utils/AnalyticsUtil"; -import { toggleInOnboardingWidgetSelection } from "actions/onboardingActions"; -import { setIdeEditorPagesActiveStatus } from "actions/ideActions"; -import history, { NavigationMethod } from "utils/history"; - -const PageElement = ({ page }: { page: Page }) => { - const dispatch = useDispatch(); - const location = useLocation(); - const navigateToUrl = useGetPageFocusUrl(page.pageId); - - const currentPageId = useSelector(getCurrentPageId); - const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); - const applicationId = useSelector(getCurrentApplicationId); - const userAppPermissions = useSelector( - (state: AppState) => getCurrentApplication(state)?.userPermissions ?? [], - ); - - const icon = page.isDefault ? defaultPageIcon : pageIcon; - const isCurrentPage = currentPageId === page.pageId; - const pagePermissions = page.userPermissions; - - const canManagePages = getHasManagePagePermission( - isFeatureEnabled, - pagePermissions, - ); - const hasExportPermission = isPermitted( - userAppPermissions ?? [], - PERMISSION_TYPE.EXPORT_APPLICATION, - ); - - const switchPage = useCallback( - (page: Page) => { - AnalyticsUtil.logEvent("PAGE_NAME_CLICK", { - name: page.pageName, - fromUrl: location.pathname, - type: "PAGES", - toUrl: navigateToUrl, - }); - dispatch(toggleInOnboardingWidgetSelection(true)); - dispatch(setIdeEditorPagesActiveStatus(false)); - history.push(navigateToUrl, { - invokedBy: NavigationMethod.EntityExplorer, - }); - }, - [location.pathname, currentPageId, navigateToUrl], - ); - - const contextMenu = ( - - ); - - return ( - switchPage(page)} - active={isCurrentPage} - canEditEntityName={canManagePages} - className={`page fullWidth ${isCurrentPage && "activePage"}`} - contextMenu={contextMenu} - disabled={page.isHidden} - entityId={page.pageId} - icon={icon} - isDefaultExpanded={isCurrentPage} - key={page.pageId} - name={page.pageName} - onNameEdit={resolveAsSpaceChar} - searchKeyword={""} - step={1} - updateEntityName={(id, name) => - updatePage({ id, name, isHidden: !!page.isHidden }) - } - /> - ); -}; - -export { PageElement }; diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts index 96d3edadf5..e904fd6d11 100644 --- a/app/client/src/pages/Editor/IDE/hooks.ts +++ b/app/client/src/pages/Editor/IDE/hooks.ts @@ -13,16 +13,11 @@ import { getPropertyPaneWidth } from "selectors/propertyPaneSelectors"; import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector"; import history, { NavigationMethod } from "utils/history"; import { - builderURL, jsCollectionListURL, queryListURL, widgetListURL, } from "@appsmith/RouteBuilder"; import { DEFAULT_EDITOR_PANE_WIDTH } from "constants/AppConstants"; -import isEmpty from "lodash/isEmpty"; -import pickBy from "lodash/pickBy"; -import { getFocusInfo } from "selectors/focusHistorySelectors"; -import { getCurrentGitBranch } from "selectors/gitSyncSelectors"; export const useCurrentAppState = () => { const [appState, setAppState] = useState(EditorState.EDITOR); @@ -159,42 +154,3 @@ export const useSegmentNavigation = (): { return { onSegmentChange }; }; - -export const useGetPageFocusUrl = (pageId: string): string => { - const editorStateString = "EDITOR_STATE."; - const focusInfo = useSelector(getFocusInfo); - const branch = useSelector(getCurrentGitBranch); - const [focusPageUrl, setFocusPageUrl] = useState( - builderURL({ pageId: pageId }), - ); - - useEffect(() => { - const editorState = pickBy( - focusInfo, - (v, k) => - k === editorStateString + pageId + "#" + (branch || "undefined"), - ); - - if (isEmpty(editorState)) { - return; - } - - const segment = - Object.values(editorState)[0].state?.SelectedSegment || - EditorEntityTab.UI; - - switch (segment) { - case EditorEntityTab.UI: - setFocusPageUrl(widgetListURL({ pageId: pageId })); - break; - case EditorEntityTab.JS: - setFocusPageUrl(jsCollectionListURL({ pageId: pageId })); - break; - case EditorEntityTab.QUERIES: - setFocusPageUrl(queryListURL({ pageId: pageId })); - break; - } - }, [focusInfo, branch]); - - return focusPageUrl; -};