Enrich raw data with metadata

Summary:
As metadata got split from attributes, raw data became harder to read.

This change annotates raw data with attribute names to ease readability and thus usability.

Reviewed By: antonk52

Differential Revision: D41400622

fbshipit-source-id: 8bebb2bd368490b9d7a2b4435749cdf0570b7571

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -33,6 +33,7 @@ import {
   TextAttributeValueStyle,
 } from './Styles';
 import {Glyph} from 'flipper';
+import {transform} from '../../../dataTransform';
 
 const NumberValue = styled.span(NumberAttributeValueStyle);
 const TextValue = styled.span(TextAttributeValueStyle);
@@ -240,7 +241,7 @@ export const AttributesInspector: React.FC<Props> = ({
       {...sections}
       {rawDisplayEnabled && (
         <Panel key="Raw" title="Raw Data" collapsed>
-          <DataInspector data={node.attributes} />
+          <DataInspector data={transform(node.attributes, metadata)} />
         </Panel>
       )}
     </>