From abb46d75c76c48a3908aaeb009df66d8300a2730 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 3 Feb 2023 15:03:04 +0530 Subject: [PATCH] fix: URL replace issue in JS editor cmd click (#20220) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description When an app is connected via git, it adds an extra query param to the URL. This messes up with the cmd click url changes when navigating to a particular JS function. This change will maintain such query params to avoid any reload because of url changes > Fixes page load when navigating to a JS function via cmd click with git Fixes #20217 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 > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? - Manual - 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: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --- .../IDE/Command_Click_Navigation_spec.js | 31 ++++++++++++++++--- app/client/src/pages/Editor/JSEditor/Form.tsx | 6 +++- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js index 2c22cea532..d7383413d1 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js @@ -1,10 +1,12 @@ import reconnectDatasourceModal from "../../../../locators/ReconnectLocators"; import { ObjectsRegistry } from "../../../../support/Objects/Registry"; import { PROPERTY_SELECTOR } from "../../../../locators/WidgetLocators"; +import * as _ from "../../../../support/Objects/ObjectsCore"; const homePage = ObjectsRegistry.HomePage; const agHelper = ObjectsRegistry.AggregateHelper; const commonLocators = ObjectsRegistry.CommonLocators; +const ee = ObjectsRegistry.EntityExplorer; const NAVIGATION_ATTRIBUTE = "data-navigate-to"; @@ -52,9 +54,6 @@ const JSInput2TestCode = `export default { describe("1. CommandClickNavigation", function() { it("1. Import the test application", () => { homePage.NavigateToHome(); - cy.intercept("GET", "/api/v1/users/features", { - fixture: "featureFlags.json", - }).as("featureFlags"); cy.reload(); homePage.ImportApp("ContextSwitching.json"); cy.wait("@importNewApplication").then((interception) => { @@ -136,18 +135,40 @@ describe("1. CommandClickNavigation", function() { }); it("7. Will navigate to specific JS Functions", () => { + // It was found that when having git connected, + // cmd clicking to JS function reloaded the app. Will assert that does not happen + cy.generateUUID().then((uid) => { + const repoName = uid; + _.gitSync.CreateNConnectToGit(repoName); + _.gitSync.CreateGitBranch(repoName); + }); + cy.SearchEntityandOpen("Text1"); cy.updateCodeInput(".t--property-control-text", "{{ JSObject1.myFun1() }}"); + cy.wait(1000); + cy.get(`[${NAVIGATION_ATTRIBUTE}="JSObject1.myFun1"]`).click({ ctrlKey: true, }); cy.assertCursorOnCodeInput(".js-editor", { ch: 1, line: 3 }); + + // Assert context switching works when going back to canvas + ee.SelectEntityByName("Page1", "Pages"); + + cy.get(`div[data-testid='t--selected']`).should("have.length", 1); + cy.get(".t--property-pane-title").should("contain", "Text1"); + + // Go back to JS editor + cy.get(`[${NAVIGATION_ATTRIBUTE}="JSObject1.myFun1"]`).click({ + ctrlKey: true, + }); }); it("8. Will navigate within Js Object properly", () => { cy.updateCodeInput(".js-editor", JSInputTestCode); + cy.wait(1000); cy.get(`[${NAVIGATION_ATTRIBUTE}="JSObject1.myVar1"]`).click({ ctrlKey: true, }); @@ -156,7 +177,7 @@ describe("1. CommandClickNavigation", function() { codeMirrorInput.focus(); }); cy.assertCursorOnCodeInput(".js-editor", { ch: 2, line: 1 }); - + cy.wait(1000); cy.get(`[${NAVIGATION_ATTRIBUTE}="JSObject1.myFun1"]`).click({ ctrlKey: true, }); @@ -166,7 +187,7 @@ describe("1. CommandClickNavigation", function() { }); cy.assertCursorOnCodeInput(".js-editor", { ch: 2, line: 2 }); - + cy.wait(1000); cy.get(`[${NAVIGATION_ATTRIBUTE}="JSObject2.myFun1"]`).click({ ctrlKey: true, }); diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx index d70a4f6714..a7a26b17af 100644 --- a/app/client/src/pages/Editor/JSEditor/Form.tsx +++ b/app/client/src/pages/Editor/JSEditor/Form.tsx @@ -126,12 +126,15 @@ function JSEditorForm({ jsCollection: currentJSCollection }: Props) { useEffect(() => { if (hash) { + // Hash here could mean to navigate (set cursor/focus) to a particular function + // If the hash has a function name in this JS object, we will set that const actionName = hash.substring(1); const position = getJSPropertyLineFromName( currentJSCollection.body, actionName, ); if (position) { + // Resetting the focus and position based on the cmd click navigation dispatch(setFocusableInputField(`${currentJSCollection.name}.body`)); dispatch( setCodeEditorCursorAction( @@ -140,7 +143,8 @@ function JSEditorForm({ jsCollection: currentJSCollection }: Props) { CursorPositionOrigin.Navigation, ), ); - history.replace(window.location.pathname); + // Replace to remove the hash and set back the original URL + history.replace(window.location.pathname + window.location.search); } } }, [hash]);