Add Facebook-internal build link to Workplace group

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js

@@ -14,3 +14,4 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = false;

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.

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.

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.

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,15 +26,24 @@ export default function SuspendingErrorView({
 }: Props) {
   const maybeItem =
     errorMessage !== null ? findGitHubIssue(errorMessage) : null;
+
+  let GitHubUI;
   if (maybeItem != null) {
-    return <UpdateExistingIssue gitHubIssue={maybeItem} />;
+    GitHubUI = <UpdateExistingIssue gitHubIssue={maybeItem} />;
   } else {
-    return (
+    GitHubUI = (
       <ReportNewIssue
         callStack={callStack}
         componentStack={componentStack}
         errorMessage={errorMessage}
       />
     );
   }
+
+  return (
+    <>
+      {GitHubUI}
+      <WorkplaceGroup />
+    </>
+  );
 }

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 (
+    <div className={styles.WorkplaceGroupRow}>
+      <Icon className={styles.ReportIcon} type="facebook" />
+      <a
+        className={styles.ReportLink}
+        href={REACT_DEVTOOLS_WORKPLACE_URL}
+        rel="noopener noreferrer"
+        target="_blank"
+        title="Report bug">
+        Report this on Workplace
+      </a>
+      <div className={styles.FacebookOnly}>(Facebook employees only.)</div>
+    </div>
+  );
+}

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);

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,