[DevTools] Improve HOC search UX (#18802)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>

Author: bl00mber

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -626,4 +626,7 @@ exports[`Store should show the right display names for special component types 1
         <MyComponent> [ForwardRef]
     ▾ <Suspense>
         <MyComponent5>
+      <Baz> [withFoo][withBar]
+      <Baz> [Memo][withFoo][withBar]
+      <Baz> [ForwardRef][withFoo][withBar]
 `;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -871,6 +871,16 @@ describe('Store', () => {
     const MyComponent5 = (props, ref) => null;
     const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
+    const FakeHigherOrderComponent = () => null;
+    FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
+
+    const MemoizedFakeHigherOrderComponent = React.memo(
+      FakeHigherOrderComponent,
+    );
+    const ForwardRefFakeHigherOrderComponent = React.forwardRef(
+      FakeHigherOrderComponent,
+    );
+
     const App = () => (
       <React.Fragment>
         <MyComponent />
@@ -882,6 +892,9 @@ describe('Store', () => {
         <React.Suspense fallback="Loading...">
           <LazyComponent />
         </React.Suspense>
+        <FakeHigherOrderComponent />
+        <MemoizedFakeHigherOrderComponent />
+        <ForwardRefFakeHigherOrderComponent />
       </React.Fragment>
     );
 

packages/react-devtools-shared/src/devtools/utils.js

@@ -7,11 +7,6 @@
  * @flow
  */
 
-import {
-  ElementTypeForwardRef,
-  ElementTypeMemo,
-} from 'react-devtools-shared/src/types';
-
 import type {Element} from './views/Components/types';
 import type Store from './store';
 
@@ -30,19 +25,6 @@ export function printElement(element: Element, includeWeight: boolean = false) {
   if (element.hocDisplayNames !== null) {
     hocDisplayNames = [...element.hocDisplayNames];
   }
-  if (element.type === ElementTypeMemo) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['Memo'];
-    } else {
-      hocDisplayNames.push('Memo');
-    }
-  } else if (element.type === ElementTypeForwardRef) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['ForwardRef'];
-    } else {
-      hocDisplayNames.push('ForwardRef');
-    }
-  }
 
   const hocs =
     hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;

packages/react-devtools-shared/src/devtools/views/Components/Badge.js

@@ -9,10 +9,6 @@
 
 import * as React from 'react';
 import {Fragment} from 'react';
-import {
-  ElementTypeMemo,
-  ElementTypeForwardRef,
-} from 'react-devtools-shared/src/types';
 import styles from './Badge.css';
 
 import type {ElementType} from 'react-devtools-shared/src/types';
@@ -21,35 +17,24 @@ type Props = {|
   className?: string,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
+  children: React$Node,
 |};
 
-export default function Badge({className, hocDisplayNames, type}: Props) {
-  let hocDisplayName = null;
+export default function Badge({
+  className,
+  hocDisplayNames,
+  type,
+  children,
+}: Props) {
   let totalBadgeCount = 0;
-  let typeLabel = null;
 
   if (hocDisplayNames !== null) {
-    hocDisplayName = hocDisplayNames[0];
     totalBadgeCount += hocDisplayNames.length;
   }
 
-  if (type === ElementTypeMemo) {
-    typeLabel = 'Memo';
-    totalBadgeCount++;
-  } else if (type === ElementTypeForwardRef) {
-    typeLabel = 'ForwardRef';
-    totalBadgeCount++;
-  }
-
-  if (hocDisplayNames === null && typeLabel === null) {
-    return null;
-  }
-
   return (
     <Fragment>
-      <div className={`${styles.Badge} ${className || ''}`}>
-        {hocDisplayName || typeLabel}
-      </div>
+      <div className={`${styles.Badge} ${className || ''}`}>{children}</div>
       {totalBadgeCount > 1 && (
         <div className={styles.ExtraLabel}>+{totalBadgeCount - 1}</div>
       )}

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -137,11 +137,17 @@ export default function ElementView({data, index, style}: Props) {
             "
           </Fragment>
         )}
-        <Badge
-          className={styles.Badge}
-          hocDisplayNames={hocDisplayNames}
-          type={type}
-        />
+        {hocDisplayNames !== null && hocDisplayNames.length > 0 ? (
+          <Badge
+            className={styles.Badge}
+            hocDisplayNames={hocDisplayNames}
+            type={type}>
+            <DisplayName
+              displayName={hocDisplayNames[0]}
+              id={((id: any): number)}
+            />
+          </Badge>
+        ) : null}
       </div>
     </div>
   );

packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js

@@ -8,10 +8,6 @@
  */
 
 import * as React from 'react';
-import {
-  ElementTypeForwardRef,
-  ElementTypeMemo,
-} from 'react-devtools-shared/src/types';
 import styles from './HocBadges.css';
 
 import type {Element} from './types';
@@ -21,22 +17,14 @@ type Props = {|
 |};
 
 export default function HocBadges({element}: Props) {
-  const {hocDisplayNames, type} = ((element: any): Element);
+  const {hocDisplayNames} = ((element: any): Element);
 
-  let typeBadge = null;
-  if (type === ElementTypeMemo) {
-    typeBadge = 'Memo';
-  } else if (type === ElementTypeForwardRef) {
-    typeBadge = 'ForwardRef';
-  }
-
-  if (hocDisplayNames === null && typeBadge === null) {
+  if (hocDisplayNames === null) {
     return null;
   }
 
   return (
     <div className={styles.HocBadges}>
-      {typeBadge !== null && <div className={styles.Badge}>{typeBadge}</div>}
       {hocDisplayNames !== null &&
         hocDisplayNames.map(hocDisplayName => (
           <div key={hocDisplayName} className={styles.Badge}>

packages/react-devtools-shared/src/utils.js

@@ -275,6 +275,20 @@ export function separateDisplayNameAndHOCs(
       break;
   }
 
+  if (type === ElementTypeMemo) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['Memo'];
+    } else {
+      hocDisplayNames.unshift('Memo');
+    }
+  } else if (type === ElementTypeForwardRef) {
+    if (hocDisplayNames === null) {
+      hocDisplayNames = ['ForwardRef'];
+    } else {
+      hocDisplayNames.unshift('ForwardRef');
+    }
+  }
+
   return [displayName, hocDisplayNames];
 }