diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js index da7784c759374..b9d3ba23e56e3 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js @@ -14,3 +14,4 @@ ************************************************************************/ export const enableProfilerChangedHookIndices = false; +export const isInternalFacebookBuild = false; diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js index 08fb7178c75ba..104cf263091a7 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js @@ -14,6 +14,7 @@ ************************************************************************/ export const enableProfilerChangedHookIndices = true; +export const isInternalFacebookBuild = true; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js index 6ad795840d58a..4d1b1472bba69 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js @@ -14,6 +14,7 @@ ************************************************************************/ export const enableProfilerChangedHookIndices = false; +export const isInternalFacebookBuild = false; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index bae23abc01223..7babb90cff377 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -49,6 +49,9 @@ export const CHANGE_LOG_URL = export const UNSUPPORTED_VERSION_URL = 'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back'; +export const REACT_DEVTOOLS_WORKPLACE_URL = + 'https://fburl.com/react-devtools-workplace-group'; + // HACK // // Extracting during build time avoids a temporarily invalid state for the inline target. diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js index 4fd5927160fea..f44e166b3a57f 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js @@ -11,6 +11,7 @@ import * as React from 'react'; import {findGitHubIssue} from './cache'; import UpdateExistingIssue from './UpdateExistingIssue'; import ReportNewIssue from './ReportNewIssue'; +import WorkplaceGroup from './WorkplaceGroup'; type Props = {| callStack: string | null, @@ -25,10 +26,12 @@ export default function SuspendingErrorView({ }: Props) { const maybeItem = errorMessage !== null ? findGitHubIssue(errorMessage) : null; + + let GitHubUI; if (maybeItem != null) { - return ; + GitHubUI = ; } else { - return ( + GitHubUI = ( ); } + + return ( + <> + {GitHubUI} + + + ); } diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js new file mode 100644 index 0000000000000..f885f9611f5bb --- /dev/null +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js @@ -0,0 +1,35 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import * as React from 'react'; +import {isInternalFacebookBuild} from 'react-devtools-feature-flags'; +import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants'; +import Icon from '../Icon'; +import styles from './shared.css'; + +export default function WorkplaceGroup() { + if (!isInternalFacebookBuild) { + return null; + } + + return ( +
+ + + Report this on Workplace + +
(Facebook employees only.)
+
+ ); +} diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css index 437bb3e055612..267cfad7b7e88 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css @@ -7,10 +7,23 @@ overflow: auto; padding: 0.25rem 0.5rem; background: var(--color-console-warning-background); + color: var(--color-text); border-bottom: 1px solid var(--color-console-warning-border); border-top: 1px solid var(--color-console-warning-border); } +.WorkplaceGroupRow { + flex: 0 0 auto; + display: flex; + align-items: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: auto; + padding: 0.25rem 0.5rem; + background: var(--color-background-hover); + border-bottom: 1px solid var(--color-border); +} + .ErrorBoundary { height: 100%; width: 100%; @@ -55,6 +68,10 @@ color: var(--color-link); } +.FacebookOnly { + margin-left: 0.25rem; +} + .ReproSteps { margin-left: 0.25rem; color: var(--color-console-warning-text); diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js index ce02611127f31..e879acdbfa614 100644 --- a/packages/react-devtools-shared/src/devtools/views/Icon.js +++ b/packages/react-devtools-shared/src/devtools/views/Icon.js @@ -17,6 +17,7 @@ export type IconType = | 'components' | 'copy' | 'error' + | 'facebook' | 'flame-chart' | 'interactions' | 'profiler' @@ -52,6 +53,9 @@ export default function Icon({className = '', type}: Props) { case 'error': pathData = PATH_ERROR; break; + case 'facebook': + pathData = PATH_FACEBOOK; + break; case 'flame-chart': pathData = PATH_FLAME_CHART; break; @@ -117,6 +121,10 @@ const PATH_COPY = ` const PATH_ERROR = `M16.971 0h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-1.402 16.945l-3.554-3.521-3.518 3.568-1.418-1.418 3.507-3.566-3.586-3.472 1.418-1.417 3.581 3.458 3.539-3.583 1.431 1.431-3.535 3.568 3.566 3.522-1.431 1.43z`; +const PATH_FACEBOOK = ` + M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-2 c-0.55,0-1,0.45-1,1v2h3v3h-3v6.95C18.05,21.45,22,17.19,22,12z +`; + const PATH_FLAME_CHART = ` M10.0650893,21.5040462 C7.14020814,20.6850349 5,18.0558698 5,14.9390244 C5,14.017627 5,9.81707317 7.83333333,7.37804878 C7.83333333,7.37804878 7.58333333,11.199187 10,