Devtools: Display as link if value is in specified protocols

facebook · Jul 26, 2021 · 847f967 · 847f967
1 parent 4758e45
commit 847f967
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -243,6 +243,13 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    let shouldDisplayAsLink = false;
+    let protocolsAllowedAsLinks = ['file:///', 'http://', 'https://', 'vscode://'];
+
+    if (dataType === 'string' && protocolsAllowedAsLinks.some((protocolPrefix) => value.startsWith(protocolPrefix))) {
+      shouldDisplayAsLink = true;
+    }
+
     children = (
       <div
         key="root"
@@ -260,7 +267,11 @@ export default function KeyValue({
             value={value}
           />
         ) : (
-          <span className={styles.Value}>{displayValue}</span>
+          (shouldDisplayAsLink) ? (
+            <a href={value} target="_blank">{displayValue}</a>
+          ) : (
+            <span className={styles.Value}>{displayValue}</span>
+          )
         )}
       </div>
     );