Pull `Badge` out as a shared functional component

Test plan: Trivial refactor; `yarn test` suffices

src/app/credExplorer/pagerankTable/Connection.js

@@ -10,7 +10,7 @@ import {DynamicAdapterSet} from "../../adapters/adapterSet";
 import {TableRow} from "./TableRow";
 import {NodeRow} from "./Node";
 
-import {edgeVerb, nodeDescription, type SharedProps} from "./shared";
+import {edgeVerb, nodeDescription, type SharedProps, Badge} from "./shared";
 
 type ConnectionRowListProps = {|
   +depth: number,
@@ -91,23 +91,6 @@ export class ConnectionView extends React.PureComponent<{|
 |}> {
   render() {
     const {connection, adapters} = this.props;
-    function Badge({children}) {
-      return (
-        // The outer <span> acts as a strut to ensure that the badge
-        // takes up a full line height, even though its text is smaller.
-        <span>
-          <span
-            style={{
-              textTransform: "uppercase",
-              fontWeight: 700,
-              fontSize: "smaller",
-            }}
-          >
-            {children}
-          </span>
-        </span>
-      );
-    }
     const {adjacency} = connection;
     switch (adjacency.type) {
       case "SYNTHETIC_LOOP":

src/app/credExplorer/pagerankTable/shared.js

@@ -1,5 +1,6 @@
 // @flow
 
+import React, {type Node as ReactNode} from "react";
 import {
   type EdgeAddressT,
   type NodeAddressT,
@@ -38,3 +39,21 @@ export type SharedProps = {|
   +adapters: DynamicAdapterSet,
   +maxEntriesPerList: number,
 |};
+
+export function Badge({children}: {children: ReactNode}): ReactNode {
+  return (
+    // The outer <span> acts as a strut to ensure that the badge
+    // takes up a full line height, even though its text is smaller.
+    <span>
+      <span
+        style={{
+          textTransform: "uppercase",
+          fontWeight: 700,
+          fontSize: "smaller",
+        }}
+      >
+        {children}
+      </span>
+    </span>
+  );
+}