{"body":"","parents":["acdc9bae674d27fb107a8ed99680148f07cfd55d"],"patch":"diff --git a\/src\/__tests__\/__snapshots__\/profiling-test.js.snap b\/src\/__tests__\/__snapshots__\/profiling-test.js.snap\nindex 3c952e04f2..d508f633a5 100644\n--- a\/src\/__tests__\/__snapshots__\/profiling-test.js.snap\n+++ b\/src\/__tests__\/__snapshots__\/profiling-test.js.snap\n@@ -266,7 +266,7 @@ Object {\n \"interactionCount\": 0,\n \"rootID\": 1,\n },\n- \"version\": 1,\n+ \"version\": 2,\n }\n `;\n \n@@ -516,7 +516,7 @@ Object {\n \"interactionCount\": 0,\n \"rootID\": 1,\n },\n- \"version\": 1,\n+ \"version\": 2,\n }\n `;\n \n@@ -714,7 +714,7 @@ Object {\n \"interactionCount\": 2,\n \"rootID\": 1,\n },\n- \"version\": 1,\n+ \"version\": 2,\n }\n `;\n \n@@ -915,6 +915,6 @@ Object {\n \"interactionCount\": 0,\n \"rootID\": 1,\n },\n- \"version\": 1,\n+ \"version\": 2,\n }\n `;\ndiff --git a\/src\/__tests__\/profiling-test.js b\/src\/__tests__\/profiling-test.js\nindex 52070bcaa7..37b7d40ccc 100644\n--- a\/src\/__tests__\/profiling-test.js\n+++ b\/src\/__tests__\/profiling-test.js\n@@ -69,6 +69,19 @@ describe('profiling', () => {\n TestRenderer = utils.requireTestRenderer();\n });\n \n+ it('should throw if importing older\/unsupported data', () => {\n+ const {\n+ prepareProfilingImport,\n+ } = require('src\/devtools\/views\/Profiler\/utils');\n+ expect(() =>\n+ prepareProfilingImport(\n+ JSON.stringify({\n+ version: 0,\n+ })\n+ )\n+ ).toThrow('Unsupported profiler export version \"0\"');\n+ });\n+\n describe('ProfilingSummary', () => {\n it('should be collected for each commit', async done => {\n const Parent = ({ count }) => {\ndiff --git a\/src\/backend\/renderer.js b\/src\/backend\/renderer.js\nindex 4917a51d89..4c7e0c1752 100644\n--- a\/src\/backend\/renderer.js\n+++ b\/src\/backend\/renderer.js\n@@ -18,6 +18,7 @@ import {\n ElementTypeRoot,\n ElementTypeSuspense,\n } from 'src\/types';\n+import { PROFILER_EXPORT_VERSION } from 'src\/constants';\n import {\n getDisplayName,\n getSavedComponentFilters,\n@@ -2058,7 +2059,7 @@ export function attach(\n }\n }\n return {\n- version: 1,\n+ version: PROFILER_EXPORT_VERSION,\n profilingSummary: getProfilingSummary(rootID),\n commitDetails,\n interactions: getInteractions(rootID),\ndiff --git a\/src\/constants.js b\/src\/constants.js\nindex fcbf9cb65e..0ba0cb8b69 100644\n--- a\/src\/constants.js\n+++ b\/src\/constants.js\n@@ -15,3 +15,5 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =\n 'React::DevTools::lastSelection';\n \n export const __DEBUG__ = false;\n+\n+export const PROFILER_EXPORT_VERSION = 2;\ndiff --git a\/src\/devtools\/views\/Profiler\/FilterModal.css b\/src\/devtools\/views\/Profiler\/CommitFilterModal.css\nsimilarity index 100%\nrename from src\/devtools\/views\/Profiler\/FilterModal.css\nrename to src\/devtools\/views\/Profiler\/CommitFilterModal.css\ndiff --git a\/src\/devtools\/views\/Profiler\/FilterModal.js b\/src\/devtools\/views\/Profiler\/CommitFilterModal.js\nsimilarity index 84%\nrename from src\/devtools\/views\/Profiler\/FilterModal.js\nrename to src\/devtools\/views\/Profiler\/CommitFilterModal.js\nindex f1c1477e8d..c47c254e0a 100644\n--- a\/src\/devtools\/views\/Profiler\/FilterModal.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFilterModal.js\n@@ -1,16 +1,13 @@\n \/\/ @flow\n \n import React, { useCallback, useContext, useEffect, useRef } from 'react';\n+import { CommitFilterModalContext } from '.\/CommitFilterModalContext';\n import { ProfilerContext } from '.\/ProfilerContext';\n import { useModalDismissSignal } from '..\/hooks';\n \n-import styles from '.\/FilterModal.css';\n+import styles from '.\/CommitFilterModal.css';\n \n-type Props = {|\n- dismissModal: () => void,\n-|};\n-\n-export default function FilterModal({ dismissModal }: Props) {\n+export default function FilterModal(_: {||}) {\n const {\n isCommitFilterEnabled,\n minCommitDuration,\n@@ -18,6 +15,11 @@ export default function FilterModal({ dismissModal }: Props) {\n setMinCommitDuration,\n } = useContext(ProfilerContext);\n \n+ const { setIsModalShowing } = useContext(CommitFilterModalContext);\n+ const dismissModal = useCallback(() => setIsModalShowing(false), [\n+ setIsModalShowing,\n+ ]);\n+\n const handleNumberChange = useCallback(\n (event: SyntheticEvent) => {\n const newValue = parseFloat(event.currentTarget.value);\ndiff --git a\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js b\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js\nindex fc68ad88a8..37412b8fe7 100644\n--- a\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js\n+++ b\/src\/devtools\/views\/Profiler\/CommitFilterModalContext.js\n@@ -3,8 +3,8 @@\n import React, { createContext, useMemo, useState } from 'react';\n \n type Context = {|\n- isFilterModalShowing: boolean,\n- setIsFilterModalShowing: (value: boolean) => void,\n+ isModalShowing: boolean,\n+ setIsModalShowing: (value: boolean) => void,\n |};\n \n const CommitFilterModalContext = createContext(((null: any): Context));\n@@ -15,14 +15,14 @@ type Props = {|\n |};\n \n function CommitFilterModalContextController({ children }: Props) {\n- const [isFilterModalShowing, setIsFilterModalShowing] = useState(false);\n+ const [isModalShowing, setIsModalShowing] = useState(false);\n \n const value = useMemo(\n () => ({\n- isFilterModalShowing,\n- setIsFilterModalShowing,\n+ isModalShowing,\n+ setIsModalShowing,\n }),\n- [isFilterModalShowing]\n+ [isModalShowing]\n );\n \n return (\ndiff --git a\/src\/devtools\/views\/Profiler\/ImportFailedModal.css b\/src\/devtools\/views\/Profiler\/ImportFailedModal.css\nnew file mode 100644\nindex 0000000000..ec0416caf1\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ImportFailedModal.css\n@@ -0,0 +1,39 @@\n+.Background {\n+ position: absolute;\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ align-items: flex-start;\n+ justify-content: center;\n+ padding: 1rem;\n+ background-color: var(--color-modal-background);\n+ overflow: auto;\n+}\n+\n+.Dialog {\n+ position: relative;\n+ z-index: 3;\n+ min-width: 20rem;\n+ max-width: 100%;\n+ display: inline-block;\n+ background-color: var(--color-background);\n+ padding: 0.5rem;\n+ border: 1px solid var(--color-border);\n+ border-radius: 0.25rem;\n+}\n+\n+.Header {\n+ font-size: var(--font-size-sans-large);\n+ margin-bottom: 0.5rem;\n+}\n+\n+.Buttons {\n+ text-align: right;\n+}\n+\n+.ErrorMessage {\n+ margin: 0.5rem 0;\n+ color: var(--color-dim);\n+ font-family: var(--font-family-monospace);\n+ font-size: var(--font-size-monospace-normal);\n+}\ndiff --git a\/src\/devtools\/views\/Profiler\/ImportFailedModal.js b\/src\/devtools\/views\/Profiler\/ImportFailedModal.js\nnew file mode 100644\nindex 0000000000..8f28220c50\n--- \/dev\/null\n+++ b\/src\/devtools\/views\/Profiler\/ImportFailedModal.js\n@@ -0,0 +1,35 @@\n+\/\/ @flow\n+\n+import React, { useCallback, useContext, useRef } from 'react';\n+import { ImportFailedModalContext } from '.\/ImportFailedModalContext';\n+import Button from '..\/Button';\n+import { useModalDismissSignal } from '..\/hooks';\n+\n+import styles from '.\/ImportFailedModal.css';\n+\n+export default function ImportFailedModal(_: {||}) {\n+ const { importError, setImportError } = useContext(ImportFailedModalContext);\n+ const dismissModal = useCallback(() => setImportError(null), [\n+ setImportError,\n+ ]);\n+ const modalRef = useRef(null);\n+\n+ useModalDismissSignal(modalRef, dismissModal);\n+\n+ return (\n+

\n+

Import failed<\/div>\n+

The profiling data you selected cannot be imported.<\/div>\n+ {importError !== null && (\n+

{importError.message}<\/div>\n+ )}\n+

\n+

dillon1000/react

Files changed