fix: Upgrade map widget library to support react 17 #19315

jsartisan · 2022-12-30T06:14:33Z

This PR:

updates the react 16 to react 17
replaces the underlying library for the map widget
adds clustering of markers
refactor code for map widget's component

Description

Fixes #16946

Type of change

Breaking change

How Has This Been Tested?

Manually

Test Plan

https://github.com/appsmithorg/TestSmith/issues/2149

Issues raised during DP testing

fix: Upgrade map widget library to support react 17 #19315 (comment)

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

vercel · 2022-12-30T06:14:36Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Jan 13, 2023 at 1:29PM (UTC)

jsartisan · 2022-12-30T14:28:42Z

/ok-to-test sha=218c9f7

github-actions · 2022-12-30T14:29:11Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3807397999.
Workflow: Appsmith External Integration Test Workflow.
Commit: 218c9f7.
PR: 19315.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19315&runId=3807397999_1

github-actions · 2022-12-30T15:34:53Z

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/GuidedTour_spec.js
cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_To_App_spec.js
cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts
cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts
cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/EmptyDataSource_spec.js

github-actions · 2022-12-30T16:49:52Z

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts
cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/EmptyDataSource_spec.js
cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/EmptyDataSource_spec.js

keyurparalkar

Is this issue occuring: Component re-renders on change in zoom level?

app/client/src/widgets/MapWidget/component/Map.tsx

keyurparalkar · 2023-01-02T13:16:41Z

app/client/src/widgets/MapWidget/component/Map.tsx

+        id="map"
+        ref={mapRef}
+      />
+      <Clusterer map={map} markers={markers} {...rest} />


Do we require the clustering feature in this PR?

keyurparalkar · 2023-01-02T13:18:17Z

app/client/src/widgets/MapWidget/component/Map.tsx

+      <Clusterer map={map} markers={markers} {...rest} />
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, {


Are we using cloneElement to pass down map object to all children?

keyurparalkar · 2023-01-02T13:23:36Z

app/client/src/widgets/MapWidget/component/SearchBox.tsx

+  useEffect(() => {
+    if (!searchBoxRef.current) return;
+
+    searchBoxObjRef.current = new window.google.maps.places.SearchBox(


We should check that window has google and map object

keyurparalkar · 2023-01-02T13:24:59Z

app/client/src/widgets/MapWidget/widget/index.tsx

@@ -304,7 +304,7 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
    };
  }

-  updateCenter = (lat: number, long: number, title?: string) => {
+  updateCenter = (lat?: number, long?: number, title?: string) => {
    this.props.updateWidgetMetaProperty("center", { lat, long, title });


Did we save lng or long in the DSL?

keyurparalkar · 2023-01-02T13:28:58Z

app/client/src/components/propertyControls/LocationSearchControl.tsx

-  onSearchBoxMounted = (ref: SearchBox) => {
-    this.searchBox = ref;
+  onSearchBoxMounted = (ref: any) => {
+    if (window) {


Also check if map object exists?

keyurparalkar · 2023-01-02T13:30:01Z

app/client/src/widgets/MapWidget/component/index.tsx

+    case Status.FAILURE:
+      return <span>Error in the component</span>;
+    case Status.SUCCESS:
+      return <span>Component loaded....</span>;


When there is a FAILURE or LOADING state are we should these span elements or appsmith defaults?

app/client/src/widgets/MapWidget/component/Clusterer.tsx

laveena-en · 2023-01-03T10:47:17Z

@jsartisan A loading state is seen in place of the text box under Initial location.

And the corresponding location isn’t showing up on the map, on searching for a particular city.
Can you please check? https://ivp6ez0ljb.vmaker.com/record/8XtxRhdwQYClpbub

github-actions · 2023-01-06T11:08:34Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3854745148.
Workflow: Appsmith External Integration Test Workflow.
Commit: 151a37e.
PR: 19315.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19315&runId=3854745148_1

yaldram · 2023-01-06T11:19:57Z

We still can see this issue in the modal widget, Drag to select multiple widgets is not working. @jsartisan please check this with @rahulramesha, it is related to the onClickCapture breaking change in react 17.

github-actions · 2023-01-06T12:36:59Z

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts

yaldram · 2023-01-09T06:18:26Z

QA - The drag to select multiple widgets inside the Modal widget is fixed by Ashok, and is working as expected.

kamakshibhat-appsmith · 2023-01-11T09:55:42Z

Issues and observations: @yaldram

Issue with footer remix icons not showing up
the clickable action for open up the Errors/logs pane is not working LOOM

…have accurate active element

…mithorg/appsmith into chore/map-widget-lib-change

yaldram · 2023-01-13T13:55:08Z

/ok-to-test sha=f14aa50

github-actions · 2023-01-13T13:55:32Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3911918276.
Workflow: Appsmith External Integration Test Workflow.
Commit: f14aa50.
PR: 19315.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19315&runId=3911918276_1

github-actions · 2023-01-13T15:23:21Z

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RepoLimitExceededErrorModal_spec.js
cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_To_App_spec.js
cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js

refactor code + add clustering

440080b

github-actions bot added App Viewers Pod This label assigns issues to the app viewers pod Enhancement New feature or request High This issue blocks a user from building or impacts a lot of users Map Widget Bug Something isn't working and removed Enhancement New feature or request labels Dec 30, 2022

remove react-google-maps

083efdf

github-actions bot added the Enhancement New feature or request label Dec 30, 2022

reorder imports

218c9f7

jsartisan assigned keyurparalkar Dec 30, 2022

github-actions bot removed the Enhancement New feature or request label Dec 30, 2022

vercel bot deployed to Preview December 30, 2022 06:37 View deployment

github-actions bot added Enhancement New feature or request and removed Enhancement New feature or request labels Dec 30, 2022

jsartisan unassigned keyurparalkar Dec 30, 2022

jsartisan requested a review from keyurparalkar December 30, 2022 10:47

keyurparalkar reviewed Jan 2, 2023

View reviewed changes

yaldram mentioned this pull request Jan 3, 2023

chore: updated react versions to 17 appsmithorg/design-system#303

Merged

7 tasks

code review feedback fixes

13bacc6

github-actions bot added the Enhancement New feature or request label Jan 3, 2023

vercel bot deployed to Preview January 3, 2023 06:25 View deployment

update design system version

da61014

vercel bot deployed to Preview January 3, 2023 07:20 View deployment

fixing modal selection issues.

87e3a3b

marks0351 dismissed keyurparalkar’s stale review via 87e3a3b January 9, 2023 05:21

vercel bot deployed to Preview January 9, 2023 05:27 View deployment

fix: merge conflicts resolved.

fdfbbc6

vercel bot deployed to Preview January 11, 2023 04:55 View deployment

github-actions bot removed the Enhancement New feature or request label Jan 11, 2023

yaldram added 2 commits January 11, 2023 16:44

fix: latest design system with remix icons.

1a9ad97

Merge branch 'release' into chore/map-widget-lib-change

09f0c22

github-actions bot added the Enhancement New feature or request label Jan 11, 2023

vercel bot deployed to Preview January 11, 2023 11:23 View deployment

github-actions bot added Enhancement New feature or request and removed Enhancement New feature or request labels Jan 11, 2023

moving propertyPnae search's should focus login inside setTimeout to …

afe298a

…have accurate active element

github-actions bot added the Enhancement New feature or request label Jan 13, 2023

vercel bot deployed to Preview January 13, 2023 08:59 View deployment

yaldram added 3 commits January 13, 2023 18:31

fix: merge conflicts resolved.

5271616

feat: added new version of the design system.

418f83e

Merge branch 'chore/map-widget-lib-change' of https://github.com/apps…

f14aa50

…mithorg/appsmith into chore/map-widget-lib-change

vercel bot deployed to Preview January 13, 2023 13:29 View deployment

rohitagarwal88 merged commit eba4745 into release Jan 13, 2023

rohitagarwal88 deleted the chore/map-widget-lib-change branch January 13, 2023 18:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Upgrade map widget library to support react 17 #19315

fix: Upgrade map widget library to support react 17 #19315

jsartisan commented Dec 30, 2022 •

edited by kamakshibhat-appsmith

vercel bot commented Dec 30, 2022 •

edited

jsartisan commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

keyurparalkar left a comment

keyurparalkar Jan 2, 2023

keyurparalkar Jan 2, 2023

keyurparalkar Jan 2, 2023

keyurparalkar Jan 2, 2023

keyurparalkar Jan 2, 2023

keyurparalkar Jan 2, 2023

laveena-en commented Jan 3, 2023

github-actions bot commented Jan 6, 2023

yaldram commented Jan 6, 2023 •

edited

github-actions bot commented Jan 6, 2023

yaldram commented Jan 9, 2023

kamakshibhat-appsmith commented Jan 11, 2023 •

edited

yaldram commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

fix: Upgrade map widget library to support react 17 #19315

fix: Upgrade map widget library to support react 17 #19315

Conversation

jsartisan commented Dec 30, 2022 • edited by kamakshibhat-appsmith

Description

Type of change

How Has This Been Tested?

Test Plan

Issues raised during DP testing

Checklist:

Dev activity

QA activity:

vercel bot commented Dec 30, 2022 • edited

jsartisan commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

github-actions bot commented Dec 30, 2022

keyurparalkar left a comment

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

keyurparalkar Jan 2, 2023

Choose a reason for hiding this comment

laveena-en commented Jan 3, 2023

github-actions bot commented Jan 6, 2023

yaldram commented Jan 6, 2023 • edited

github-actions bot commented Jan 6, 2023

yaldram commented Jan 9, 2023

kamakshibhat-appsmith commented Jan 11, 2023 • edited

yaldram commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

jsartisan commented Dec 30, 2022 •

edited by kamakshibhat-appsmith

vercel bot commented Dec 30, 2022 •

edited

yaldram commented Jan 6, 2023 •

edited

kamakshibhat-appsmith commented Jan 11, 2023 •

edited