[Maps] Fix saved object (map) switching issue

[kindsun]

Currently trying to switch between recently viewed maps doesn't actually change maps:

The URL changes and a routing event is detected by the Maps app, but the saved object isn't actually loaded and no state is applied. This was discovered while working on #111195 which requires navigation between saved objects in case of a conflict.

This PR just forces react to generate a new map page if a new map saved object id is passed through.

[elasticmachine]

Pinging @elastic/kibana-gis (Team:Geo)

[kindsun]

@elasticmachine merge upstream

[nreese]

Thanks for finding this issue and putting up a fix. There is actually a much easier solution that will avoid adding additional componentDidUpdate and getDerivedStateFromProps checks.

In https://github.com/elastic/kibana/blob/master/x-pack/plugins/maps/public/render_app.tsx#L95, just add the line key={routeProps.match.params.savedMapId ? routeProps.match.params.savedMapId : 'new'}. That will force react to create a new instance of MapPage when savedMapId changes.

    <MapPage
        key={routeProps.match.params.savedMapId ? routeProps.match.params.savedMapId : 'new'}
        mapEmbeddableInput={mapEmbeddableInput}
        embeddableId={embeddableId}
        onAppLeave={onAppLeave}
        setHeaderActionMenu={setHeaderActionMenu}
        stateTransfer={stateTransfer}
        originatingApp={originatingApp}
      />

[kindsun]

Thanks for finding this issue and putting up a fix. There is actually a much easier solution that will avoid adding additional componentDidUpdate and getDerivedStateFromProps checks.

In master/x-pack/plugins/maps/public/render_app.tsx#L95, just add the line key={routeProps.match.params.savedMapId ? routeProps.match.params.savedMapId : 'new'}. That will force react to create a new instance of MapPage when savedMapId changes.

    <MapPage
        key={routeProps.match.params.savedMapId ? routeProps.match.params.savedMapId : 'new'}
        mapEmbeddableInput={mapEmbeddableInput}
        embeddableId={embeddableId}
        onAppLeave={onAppLeave}
        setHeaderActionMenu={setHeaderActionMenu}
        stateTransfer={stateTransfer}
        originatingApp={originatingApp}
      />

👍 Easier sounds good, thanks! I'll give this a shot

[nreese]

LGTM
code review, tested in chrome.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 62b8d65
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
maps	3.2MB	3.2MB	+80.0B

History

• 💔 Build #153403 failed db067f24e7d9cea68abdf91a680c3d35cd0ad284
• 💔 Build #153383 failed 34226b3
• 💔 Build #153053 failed 4e0154b
• 💔 Build #152992 failed 6f53811
• 💔 Build #152974 failed 5bce44a

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.x
✅	7.15

The backport PRs will be merged automatically after passing CI.