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
This commit is contained in:
borisdamato
2020-05-11 02:17:21 -07:00
committed by Facebook GitHub Bot
parent c7ff6f6266
commit d5cb0e907f

View File

@@ -612,17 +612,20 @@ class DataDescriptionContainer extends PureComponent<{
case 'text': case 'text':
case 'string': case 'string':
if (val.startsWith('http://') || val.startsWith('https://')) { const isUrl = val.startsWith('http://') || val.startsWith('https://');
if (isUrl) {
return ( return (
<> <>
<Link href={val}>{highlighter.render(val)}</Link> <Link href={val}>{highlighter.render(val)}</Link>
<Glyph {editable && (
name="pencil" <Glyph
variant="outline" name="pencil"
color={colors.light20} variant="outline"
size={16} color={colors.light20}
style={pencilStyle} size={16}
/> style={{cursor: 'pointer', marginLeft: 8}}
/>
)}
</> </>
); );
} else { } else {