Merge pull request #2905 from owid/update-react-17

owid · Nov 8, 2023 · e9ca135 · e9ca135
2 parents ab2b183 + 97e96b6
commit e9ca135
Show file tree

Hide file tree

Showing 20 changed files with 188 additions and 247 deletions.
diff --git a/adminSiteClient/EditableTags.tsx b/adminSiteClient/EditableTags.tsx
@@ -173,7 +173,10 @@ export class EditableTags extends React.Component<{
                                 )}
                                 <button
                                     className="btn btn-link EditableTags__action"
-                                    onClick={this.onToggleEdit}
+                                    onClick={(e) => {
+                                        this.onToggleEdit()
+                                        e.stopPropagation()
+                                    }}
                                 >
                                     <FontAwesomeIcon icon={faEdit} />
                                     Edit

diff --git a/explorer/Explorer.jsdom.test.tsx b/explorer/Explorer.jsdom.test.tsx
@@ -7,7 +7,7 @@ import {
 } from "./Explorer.sample.js"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import { GrapherTabOption } from "@ourworldindata/grapher"
 
 Enzyme.configure({ adapter: new Adapter() })

diff --git a/explorer/ExplorerControls.jsdom.test.tsx b/explorer/ExplorerControls.jsdom.test.tsx
@@ -5,7 +5,7 @@ import { ExplorerControlType } from "./ExplorerConstants.js"
 import { ExplorerControlPanel } from "./ExplorerControls.js"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 describe(ExplorerControlPanel, () => {

diff --git a/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx b/explorerAdminClient/ExplorerCreatePage.jsdom.test.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import { ExplorerCreatePage } from "./ExplorerCreatePage.js"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 describe(ExplorerCreatePage, () => {

diff --git a/package.json b/package.json
@@ -72,7 +72,6 @@
         "@types/d3": "^6",
         "@types/d3-format": "^2",
         "@types/enzyme": "^3.10.12",
-        "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/express": "^4.17.14",
         "@types/express-rate-limit": "^5.1.0",
         "@types/fs-extra": "^11.0.1",
@@ -92,10 +91,10 @@
         "@types/progress": "^2.0.5",
         "@types/prompts": "^2.0.14",
         "@types/randomstring": "^1.1.8",
-        "@types/react": "^16.14.23",
+        "@types/react": "^17.0.69",
         "@types/react-beautiful-dnd": "^13.1.2",
         "@types/react-color": "^3.0.2",
-        "@types/react-dom": "^17.0.11",
+        "@types/react-dom": "^17.0.22",
         "@types/react-recaptcha": "^2.3.4",
         "@types/react-router-dom": "^4.3.3",
         "@types/react-tag-autocomplete": "^6.1.1",
@@ -108,6 +107,7 @@
         "@types/url-parse": "^1.4.8",
         "@types/webfontloader": "^1.6.34",
         "@types/workerpool": "^6.1.0",
+        "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "algoliasearch": "^4.19.1",
         "antd": "^4.23.1",
         "archieml": "^0.5.0",
@@ -126,7 +126,6 @@
         "dotenv": "^16.0.1",
         "entities": "^4.4.0",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.6",
         "eslint": "^8.53.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.0",
@@ -176,13 +175,13 @@
         "prompts": "^2.4.0",
         "prop-types": "^15.7.2",
         "randomstring": "^1.2.2",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "react-animate-height": "^3.1.1",
         "react-beautiful-dnd": "^13.1.0",
         "react-codemirror2": "^7.3.0",
         "react-color": "^2.18.1",
         "react-diff-viewer": "^3.1.1",
-        "react-dom": "^16.14.0",
+        "react-dom": "^17.0.2",
         "react-error-boundary": "^4.0.10",
         "react-flip-toolkit": "^7.0.9",
         "react-horizontal-scrolling-menu": "^4.0.3",

diff --git a/packages/@ourworldindata/components/package.json b/packages/@ourworldindata/components/package.json
@@ -22,13 +22,13 @@
         "mobx": "^5.15.7",
         "mobx-formatters": "^1.0.2",
         "mobx-react": "5",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "ts-pattern": "^5.0.5"
     },
     "devDependencies": {
-        "@types/react": "^16.14.23",
-        "@types/react-dom": "^17.0.11",
+        "@types/react": "^17.0.69",
+        "@types/react-dom": "^17.0.22",
         "esbuild-sass-plugin": "^2.16.0",
         "eslint": "^8.53.0",
         "eslint-plugin-react-hooks": "^4.6.0",

diff --git a/packages/@ourworldindata/grapher/package.json b/packages/@ourworldindata/grapher/package.json
@@ -41,8 +41,8 @@
     "mobx-formatters": "^1.0.2",
     "mobx-react": "5",
     "mousetrap": "^1.6.5",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-flip-toolkit": "^7.0.9",
     "react-move": "^6.5.0",
     "react-select": "^5.7.3",
@@ -56,16 +56,15 @@
     "@types/d3": "^6",
     "@types/d3-format": "^2",
     "@types/enzyme": "^3.10.12",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^29.5.5",
     "@types/js-cookie": "^3.0.2",
     "@types/mousetrap": "^1.6.9",
-    "@types/react": "^16.14.23",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.69",
+    "@types/react-dom": "^17.0.22",
     "@types/topojson-client": "^3.1.1",
     "@types/url-parse": "^1.4.8",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "esbuild-sass-plugin": "^2.16.0",
     "eslint": "^8.53.0",
     "eslint-plugin-react-hooks": "^4.6.0",

diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.jsdom.test.tsx
@@ -7,7 +7,7 @@ import { ScaleType } from "../core/GrapherConstants"
 import { DualAxis } from "./Axis"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 it("can create horizontal axis", () => {

diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -248,11 +248,10 @@ export class ActionButtons extends React.Component<{
                                 dataTrackNote="chart_click_download"
                                 showLabel={this.showButtonLabels}
                                 icon={faDownload}
-                                onClick={action(
-                                    () =>
-                                        (this.manager.isDownloadModalOpen =
-                                            true)
-                                )}
+                                onClick={(e): void => {
+                                    this.manager.isDownloadModalOpen = true
+                                    e.stopPropagation()
+                                }}
                                 style={{ width: "100%" }}
                             />
                         </li>
@@ -264,7 +263,10 @@ export class ActionButtons extends React.Component<{
                                 dataTrackNote="chart_click_share"
                                 showLabel={this.showButtonLabels}
                                 icon={faShareNodes}
-                                onClick={this.toggleShareMenu}
+                                onClick={(e): void => {
+                                    this.toggleShareMenu()
+                                    e.stopPropagation()
+                                }}
                                 isActive={this.manager.isShareMenuActive}
                                 style={{ width: "100%" }}
                             />

diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -77,8 +77,9 @@ export class EntitySelectionToggle extends React.Component<{
             <div className="entity-selection-menu">
                 <button
                     className={classnames("menu-toggle", { active })}
-                    onClick={(): void => {
+                    onClick={(e): void => {
                         this.props.manager.isSelectingData = !active
+                        e.stopPropagation()
                     }}
                     data-track-note="chart_add_entity"
                 >

diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx
@@ -79,11 +79,12 @@ export class ShareMenu extends React.Component<ShareMenuProps, ShareMenuState> {
         document.removeEventListener("click", this.onClickSomewhere)
     }
 
-    @action.bound onEmbed(): void {
+    @action.bound onEmbed(e: React.MouseEvent): void {
         const { canonicalUrl, manager } = this
         if (!canonicalUrl) return
         manager.isEmbedModalOpen = true
         this.dismiss()
+        e.stopPropagation()
     }
 
     @action.bound async onNavigatorShare(): Promise<void> {

diff --git a/...worldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx b/...worldindata/grapher/src/controls/globalEntitySelector/GlobalEntitySelector.jsdom.test.tsx
@@ -3,7 +3,7 @@
 import React from "react"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import { GlobalEntitySelector } from "./GlobalEntitySelector"
 import { SelectionArray } from "../../selection/SelectionArray"
 Enzyme.configure({ adapter: new Adapter() })

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts b/packages/@ourworldindata/grapher/src/core/GrapherAnalytics.ts
@@ -138,30 +138,34 @@ export class GrapherAnalytics {
         // this is helpful for tracking clicks on charts that are embedded in articles, where we would like to know
         // which chart the user is interacting with
         const dataGrapherUrlAttr = "data-grapher-url"
-        document.addEventListener("click", async (ev) => {
-            const targetElement = ev.target as HTMLElement
-            const trackedElement = findDOMParent(
-                targetElement,
-                (el: HTMLElement) => el.getAttribute(dataTrackAttr) !== null
-            )
-            if (!trackedElement) return
-
-            const grapherUrl = trackedElement
-                .closest(`[${dataGrapherUrlAttr}]`)
-                ?.getAttribute(dataGrapherUrlAttr)
-
-            if (grapherUrl)
-                this.logGrapherClick(
-                    trackedElement.getAttribute(dataTrackAttr) || undefined,
-                    trackedElement.innerText,
-                    grapherUrl
+        document.addEventListener(
+            "click",
+            async (ev) => {
+                const targetElement = ev.target as HTMLElement
+                const trackedElement = findDOMParent(
+                    targetElement,
+                    (el: HTMLElement) => el.getAttribute(dataTrackAttr) !== null
                 )
-            else
-                this.logSiteClick(
-                    trackedElement.getAttribute(dataTrackAttr) || undefined,
-                    trackedElement.innerText
-                )
-        })
+                if (!trackedElement) return
+
+                const grapherUrl = trackedElement
+                    .closest(`[${dataGrapherUrlAttr}]`)
+                    ?.getAttribute(dataGrapherUrlAttr)
+
+                if (grapherUrl)
+                    this.logGrapherClick(
+                        trackedElement.getAttribute(dataTrackAttr) || undefined,
+                        trackedElement.innerText,
+                        grapherUrl
+                    )
+                else
+                    this.logSiteClick(
+                        trackedElement.getAttribute(dataTrackAttr) || undefined,
+                        trackedElement.innerText
+                    )
+            },
+            { capture: true, passive: true }
+        )
     }
 
     protected logToGA(event: GAEvent): void {

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.jsdom.test.tsx
@@ -12,7 +12,7 @@ import {
 } from "./DataTable.sample"
 
 import Enzyme, { ReactWrapper } from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 describe("when you render a table", () => {

diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -413,7 +413,8 @@ export class Footer<
                 <a
                     className="learn-more-about-data"
                     data-track-note="chart_click_sources"
-                    onClick={action(() => {
+                    onClick={action((e) => {
+                        e.stopPropagation()
                         // if embbedded, open the sources modal
                         if (this.manager.isEmbeddedInAnOwidPage) {
                             this.manager.isSourcesModalOpen = true

diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.jsdom.test.tsx
@@ -5,7 +5,7 @@ import { Grapher } from "../core/Grapher"
 import { legacyMapGrapher } from "./MapChart.sample"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 const grapherWrapper = Enzyme.mount(<Grapher {...legacyMapGrapher} />)

diff --git a/packages/@ourworldindata/utils/package.json b/packages/@ourworldindata/utils/package.json
@@ -22,7 +22,7 @@
     "mobx": "^5.15.7",
     "mobx-react": "5",
     "parsimmon": "^1.18.1",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-select": "^5.7.3",
     "react-tag-autocomplete": "^7.1.0",
     "s-expression": "^3.1.1",
@@ -38,7 +38,7 @@
     "@types/jest": "^29.5.5",
     "@types/lodash": "^4.14.185",
     "@types/parsimmon": "^1.10.6",
-    "@types/react": "^16.14.23",
+    "@types/react": "^17.0.69",
     "@types/react-tag-autocomplete": "^6.1.1",
     "@types/string-pixel-width": "^1.7.2",
     "@types/url-parse": "^1.4.8",

diff --git a/site/GrapherPage.jsdom.test.tsx b/site/GrapherPage.jsdom.test.tsx
@@ -14,7 +14,7 @@ import { SiteFooter } from "./SiteFooter.js"
 import { SiteHeader } from "./SiteHeader.js"
 
 import Enzyme, { ShallowWrapper } from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 Enzyme.configure({ adapter: new Adapter() })
 
 const mockGrapher: GrapherInterface = {

diff --git a/site/blocks/RelatedCharts.jsdom.test.tsx b/site/blocks/RelatedCharts.jsdom.test.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import { RelatedCharts } from "./RelatedCharts.js"
 
 import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
+import Adapter from "@wojtekmaj/enzyme-adapter-react-17"
 import {
     BAKED_BASE_URL,
     BAKED_GRAPHER_EXPORTS_BASE_URL,