From 7ccc6874a32ad64ea2ebdfb92cde2ed7b3b419fc Mon Sep 17 00:00:00 2001 From: balajisoundar Date: Fri, 15 Mar 2024 13:17:11 +0530 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20[map=20chart=20widget]=20create=20un?= =?UTF-8?q?ique=20instance=20of=20map=20loader=20per=20widget=20to=20avoi?= =?UTF-8?q?=E2=80=A6=20(#31822)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit …d cross cancelling loader calls ## Description Create an instance of map loader per widget to avoid one widget cancelling calls of another widget. Fixes https://github.com/appsmithorg/appsmith/issues/31819 ## Automation /ok-to-test tags="@tag.Maps" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `cd13c989d8b911a064629bf1d8c683e09927d3b2` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit - **New Features** - Enhanced the Map Widget to load maps more efficiently with the introduction of `loadMapGenerator`. - **Tests** - Added Cypress tests to ensure the Map Widget loads correctly on the canvas. - **Refactor** - Updated the Map Widget loading process for better performance and flexibility. --- .../Widgets/Others/MapWidget_loading_Spec.ts | 23 +++++++++++++++++++ .../MapChartWidget/component/index.tsx | 4 +++- .../MapChartWidget/component/utilities.ts | 4 ++-- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts new file mode 100644 index 000000000000..e3e56ddefc87 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_loading_Spec.ts @@ -0,0 +1,23 @@ +/// +import { + agHelper, + entityExplorer, + draggableWidgets, +} from "../../../../../support/Objects/ObjectsCore"; + +describe( + "Map chart Widget", + { tags: ["@tag.Widget", "@tag.Maps"] }, + function () { + it("1.Drag two Map Widget and Verify the Map Widget is loading", () => { + //Add map and verify + entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200); + entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 600, 200); + agHelper.RefreshPage(); + agHelper.AssertElementLength( + ".t--draggable-mapchartwidget svg text:contains('Global Population')", + 2, + ); + }); + }, +); diff --git a/app/client/src/widgets/MapChartWidget/component/index.tsx b/app/client/src/widgets/MapChartWidget/component/index.tsx index c5dcdee8a300..3ba358eee415 100644 --- a/app/client/src/widgets/MapChartWidget/component/index.tsx +++ b/app/client/src/widgets/MapChartWidget/component/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react"; import styled from "styled-components"; import type { MapColorObject, MapTypes } from "../constants"; import type { MapData } from "./types"; -import { getChartOption, loadMap } from "./utilities"; +import { getChartOption, loadMapGenerator } from "./utilities"; import * as echarts from "echarts"; import countryDetails from "./countryDetails"; import clsx from "clsx"; @@ -27,6 +27,8 @@ const MapChartContainer = styled.div<{ export default function EchartComponent(props: MapChartComponentProps) { const [isLoading, setIsLoading] = useState(false); + const loadMap = useMemo(loadMapGenerator, []); + const [key, setKey] = useState(0); const { caption, colorRange, data, onDataPointClick, showLabels, type } = diff --git a/app/client/src/widgets/MapChartWidget/component/utilities.ts b/app/client/src/widgets/MapChartWidget/component/utilities.ts index c00fe46af86f..41f0d8231a3d 100644 --- a/app/client/src/widgets/MapChartWidget/component/utilities.ts +++ b/app/client/src/widgets/MapChartWidget/component/utilities.ts @@ -43,7 +43,7 @@ export function getSpecialAreas(map: MapTypes): GeoSpecialAreas { /* * Function to load the map geojson file and register it with echarts */ -export const loadMap = (() => { +export const loadMapGenerator = () => { let abortController: AbortController | null = null; return async (type: MapTypes) => { @@ -85,7 +85,7 @@ export const loadMap = (() => { return Promise.resolve(); } }; -})(); +}; function getProjection(type: string) { switch (type) { From 782c7b0f98d223938a7208024060a046940eac77 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 15 Mar 2024 15:24:26 +0530 Subject: [PATCH 2/4] fix: remove counter of cmd + click navigation usage (#31830) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Fixes the blocker issue for canvas resize by removing the counter of cmd + click as that goes to local storage and that is somehow causing this issue Fixes #31820 ## Automation /ok-to-test tags="@tag.Widget" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `00eee43d89c9df1071a3a1daca449629e48386ca` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit - **Refactor** - Improved the widget selection process by streamlining the tracking and storage method within the application. --- app/client/src/sagas/WidgetSelectionSagas.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/app/client/src/sagas/WidgetSelectionSagas.ts b/app/client/src/sagas/WidgetSelectionSagas.ts index 1fe5dbba3534..a7982f8ce4da 100644 --- a/app/client/src/sagas/WidgetSelectionSagas.ts +++ b/app/client/src/sagas/WidgetSelectionSagas.ts @@ -61,10 +61,6 @@ import type { FeatureFlags } from "@appsmith/entities/FeatureFlag"; import { getWidgetSelectorByWidgetId } from "selectors/layoutSystemSelectors"; import { getAppViewerPageIdFromPath } from "@appsmith/pages/Editor/Explorer/helpers"; import AnalyticsUtil from "../utils/AnalyticsUtil"; -import { - retrieveCodeWidgetNavigationUsed, - storeCodeWidgetNavigationUsed, -} from "../utils/storage"; // The following is computed to be used in the entity explorer // Every time a widget is selected, we need to expand widget entities @@ -220,9 +216,6 @@ function* appendSelectedWidgetToUrlSaga( const isWidgetSelectionBlocked: boolean = yield select( getWidgetSelectionBlock, ); - const timesUsedCodeModeWidgetSelection: number = yield call( - retrieveCodeWidgetNavigationUsed, - ); const appMode: APP_MODE = yield select(getAppMode); const viewMode = appMode === APP_MODE.PUBLISHED; if (isSnipingMode || viewMode) return; @@ -243,12 +236,6 @@ function* appendSelectedWidgetToUrlSaga( }); if (invokedBy === NavigationMethod.CanvasClick && isWidgetSelectionBlocked) { AnalyticsUtil.logEvent("CODE_MODE_WIDGET_SELECTION"); - if (timesUsedCodeModeWidgetSelection < 2) { - yield call( - storeCodeWidgetNavigationUsed, - timesUsedCodeModeWidgetSelection + 1, - ); - } } if (currentURL !== newUrl) { history.push(newUrl, { invokedBy }); From 77bb2a4fdd3c5188fb77b6f7165ce69cc490b87b Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Fri, 15 Mar 2024 16:47:48 +0530 Subject: [PATCH 3/4] chore: Have a failsafe for split screen if we turn off the feature flag (#31832) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Adds a failsafe for Split screen feature when flag is turned off ## Automation /ok-to-test tags="@tag.IDE" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `434c36e595e46c378b58fa14bd1c9d04a3bfd119` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit - **New Features** - Introduced an `Editor View Mode` option to enhance user interface customization based on feature availability. --- app/client/src/selectors/ideSelectors.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/app/client/src/selectors/ideSelectors.tsx b/app/client/src/selectors/ideSelectors.tsx index 1bd5451b66b6..a9df3685fe80 100644 --- a/app/client/src/selectors/ideSelectors.tsx +++ b/app/client/src/selectors/ideSelectors.tsx @@ -2,7 +2,10 @@ import { createSelector } from "reselect"; import { selectFeatureFlags } from "@appsmith/selectors/featureFlagsSelectors"; import type { AppState } from "@appsmith/reducers"; import { getPageActions } from "@appsmith/selectors/entitiesSelector"; -import { EditorEntityTab } from "@appsmith/entities/IDE/constants"; +import { + EditorEntityTab, + EditorViewMode, +} from "@appsmith/entities/IDE/constants"; export const getIsSideBySideEnabled = createSelector( selectFeatureFlags, @@ -11,7 +14,16 @@ export const getIsSideBySideEnabled = createSelector( flags.rollout_side_by_side_enabled, ); -export const getIDEViewMode = (state: AppState) => state.ui.ide.view; +export const getIDEViewMode = createSelector( + getIsSideBySideEnabled, + (state) => state.ui.ide.view, + (featureFlag, ideViewMode) => { + if (featureFlag) { + return ideViewMode; + } + return EditorViewMode.FullScreen; + }, +); export const getPagesActiveStatus = (state: AppState) => state.ui.ide.pagesActive; From 635af92e2e408da0bb37e0bb314199b0e8bb9498 Mon Sep 17 00:00:00 2001 From: Rudraprasad Das Date: Fri, 15 Mar 2024 17:40:30 +0530 Subject: [PATCH 4/4] fix: fixing redirect from ds modal after import (#31834) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Redirection issue on DS Reconfigure modal after user imports the application ## Automation /ok-to-test tags="@tag.Fork,@tag.ImportExport" ### :mag: Cypress test results > [!IMPORTANT] > Workflow run: > Commit: `16953d533498713ec3e3eefb943614b20bdd5b95` > Cypress dashboard url: Click here! > All cypress tests have passed 🎉🎉🎉 ## Summary by CodeRabbit - **Refactor** - Improved the redirection logic in the `ReconnectDatasourceModal` to ensure users are navigated correctly based on their current application context. --- .../pages/Editor/gitSync/ReconnectDatasourceModal.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx b/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx index 25fd58eb9092..6a732e4095ee 100644 --- a/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx +++ b/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx @@ -75,7 +75,6 @@ import { getFetchedWorkspaces } from "@appsmith/selectors/workspaceSelectors"; import { getApplicationsOfWorkspace } from "@appsmith/selectors/selectedWorkspaceSelectors"; import useReconnectModalData from "@appsmith/pages/Editor/gitSync/useReconnectModalData"; import { resetImportData } from "@appsmith/actions/workspaceActions"; -import history from "utils/history"; const Section = styled.div` display: flex; @@ -439,6 +438,11 @@ function ReconnectDatasourceModal() { // If either the close button or the overlay was clicked close the modal if (shouldClose) { onClose(); + const isInsideApplication = + window.location.pathname.split("/")[1] === "app"; + if (isInsideApplication && editorURL) { + window.location.href = editorURL; + } } } }; @@ -563,7 +567,10 @@ function ReconnectDatasourceModal() { const onSkipBtnClick = () => { AnalyticsUtil.logEvent("RECONNECTING_SKIP_TO_APPLICATION_BUTTON_CLICK"); localStorage.setItem("importedAppPendingInfo", "null"); - editorURL && history.push(editorURL); + if (editorURL) { + // window location because history push changes routes shallowly and some side effects needed for page loading might not run + window.location.href = editorURL; + } onClose(); };