Basic array support

Summary:
Attributes Inspector didn't have support for inspectable arrays.

This change addresses an issue with the inspectable itself and adds basic support to it in the visualiser.

Reviewed By: LukeDefeo

Differential Revision: D41522879

fbshipit-source-id: f9cad42470541039c8157477b0fe9bc58f18f1ba

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

@@ -90,6 +90,32 @@ const ObjectAttributeInspector: React.FC<{
   );
 };
 
+const ArrayAttributeInspector: React.FC<{
+  metadata: Map<MetadataId, Metadata>;
+  name: string;
+  items: Inspectable[];
+  level: number;
+}> = ({metadata, name, items, level}) => {
+  return (
+    <div style={RowStyle}>
+      {name}
+      {items.map(function (item, idx) {
+        const inspectableValue = item;
+        const attributeName = idx.toString();
+        return (
+          <ObjectContainer
+            key={name + idx}
+            style={{
+              paddingLeft: level,
+            }}>
+            {create(metadata, attributeName, inspectableValue, level + 2)}
+          </ObjectContainer>
+        );
+      })}
+    </div>
+  );
+};
+
 function create(
   metadata: Map<MetadataId, Metadata>,
   name: string,
@@ -164,6 +190,15 @@ function create(
           <TextValue>{inspectable.value}</TextValue>
         </NamedAttributeInspector>
       );
+    case 'array':
+      return (
+        <ArrayAttributeInspector
+          metadata={metadata}
+          name={displayableName(name)}
+          items={inspectable.items}
+          level={level}
+        />
+      );
     case 'object':
       return (
         <ObjectAttributeInspector