From d5cb0e907f321e3146a9e652c69ebf43a2953eda Mon Sep 17 00:00:00 2001
From: borisdamato <boris@clearscore.com>
Date: Mon, 11 May 2020 02:17:21 -0700
Subject: [PATCH] Fix pencil icon visible for non-editable fields (#1002)

Summary:
DataDescriptor currently shows a pencil icon next to text values starting with http/https. This is because otherwise it wouldn't be possible to edit them as a click would open the link in a web browser instead of triggering the edit mode.
Because of how this logic is implemented, it doesn't take into account whether editmode is enabled or not, thus it shows the pencil icon even when there's no need for it (custom plugins with no edit mode).

## Changelog

Fixed pencil icon visible in DataInspector for non-editable text fields
Pull Request resolved: https://github.com/facebook/flipper/pull/1002

Test Plan:
I tested this locally with LayoutInspector and my own custom plugin. The pencil still appears and works in the LayoutInspector but doesn't show up anymore in my custom plugin as the data there is not editable

## Result after the fix:
**Editable (LayoutInspector)**
![image](https://user-images.githubusercontent.com/1525460/79031299-c1345f80-7b95-11ea-8807-247794554524.png)

**Non-Editable (Custom Plugin)**
![image](https://user-images.githubusercontent.com/1525460/79031336-f771df00-7b95-11ea-8608-936495153fc2.png)

Reviewed By: passy

Differential Revision: D21400359

Pulled By: mweststrate

fbshipit-source-id: 62b18f3f6c75c1b07440d51fca363d7e6fc60c6a
---
 .../data-inspector/DataDescription.tsx        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx b/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
index 0bab849bf..6ab04233f 100644
--- a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
@@ -612,17 +612,20 @@ class DataDescriptionContainer extends PureComponent<{
 
       case 'text':
       case 'string':
-        if (val.startsWith('http://') || val.startsWith('https://')) {
+        const isUrl = val.startsWith('http://') || val.startsWith('https://');
+        if (isUrl) {
           return (
             <>
               <Link href={val}>{highlighter.render(val)}</Link>
-              <Glyph
-                name="pencil"
-                variant="outline"
-                color={colors.light20}
-                size={16}
-                style={pencilStyle}
-              />
+              {editable && (
+                <Glyph
+                  name="pencil"
+                  variant="outline"
+                  color={colors.light20}
+                  size={16}
+                  style={{cursor: 'pointer', marginLeft: 8}}
+                />
+              )}
             </>
           );
         } else {