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

android/plugins/litho/src/main/java/com/facebook/flipper/plugins/uidebugger/litho/descriptors/props/ComponentPropExtractor.kt

@@ -134,7 +134,7 @@ object ComponentPropExtractor {
 
           override fun isArray(array: EditorArray?): Inspectable {
             val values = array?.value?.map { value -> toInspectable(name, value) }
-            return InspectableArray(0, values ?: listOf())
+            return InspectableArray(values ?: listOf())
           }
 
           override fun isPick(pick: EditorPick): Inspectable = InspectableValue.Enum(pick.selected)

android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Inspectable.kt

@@ -22,7 +22,7 @@ import kotlinx.serialization.encoding.Encoder
 // for native android this should probably be false.
 @SerialName("array")
 @Serializable
-data class InspectableArray(val id: Int, val items: List<Inspectable>) : Inspectable()
+data class InspectableArray(val items: List<Inspectable>) : Inspectable()
 
 // In this context, mutable means you can add / remove keys,
 // for native android this should probably be false.

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

desktop/plugins/public/ui-debugger/types.tsx

@@ -129,6 +129,7 @@ export type Tag = 'Native' | 'Declarative' | 'Android' | 'Litho';
 
 export type Inspectable =
   | InspectableObject
+  | InspectableArray
   | InspectableText
   | InspectableNumber
   | InspectableColor
@@ -196,6 +197,11 @@ export type InspectableObject = {
   fields: Record<MetadataId, Inspectable>;
 };
 
+export type InspectableArray = {
+  type: 'array';
+  items: Inspectable[];
+};
+
 export type InspectableUnknown = {
   type: 'unknown';
   value: string;