Promote k state to top level

Summary:
In the new sidebar design complex types are behind a preview. before states was an array under the key states.

Now we create a top level attribute according to its index

Reviewed By: lblasa

Differential Revision: D50654698

fbshipit-source-id: 410c50c5f1ab14efc77184a5b147d9bdf70761d4

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

@@ -99,10 +99,22 @@ object ComponentDataExtractor {
         val id = getMetadataId(componentName, field.name)
         val editorValue: EditorValue? = EditorRegistry.read(field.type, field, stateContainer)
         if (editorValue != null) {
+
+          val inspectable = toInspectable(field.name, editorValue)
+
+          if (inspectable is InspectableArray) {
+            inspectable.items.forEachIndexed { idx, item ->
+              val metadataId =
+                  MetadataRegister.register(
+                      MetadataRegister.TYPE_ATTRIBUTE, "kstate", idx.toString())
+              stateFields[metadataId] = item
+            }
+          } else {
             stateFields[id] = toInspectable(field.name, editorValue)
           }
         }
       }
+    }
     return InspectableObject(stateFields)
   }
 

android/plugins/litho/src/test/java/com/facebook/flipper/plugins/uidebugger/litho/KStateContainerExtractionTest.kt

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import com.facebook.flipper.plugins.uidebugger.descriptors.MetadataRegister
 import com.facebook.flipper.plugins.uidebugger.litho.descriptors.props.ComponentDataExtractor
 import com.facebook.flipper.plugins.uidebugger.model.InspectableArray
 import com.facebook.flipper.plugins.uidebugger.model.InspectableObject
@@ -16,16 +17,22 @@ import org.junit.Test
 class KStateContainerExtractionTest {
   @Test
   @Throws(Exception::class)
-  fun testCanExtractKState() {
+  fun testCanExtractKStateIntoSeparateAttributesByIndex() {
 
     // this test ensures that our reflection based extraction doesn't break if the KState class
     // structure changes
-    val stateContainer = KStateContainer.withNewState(null, "foo")
+    MetadataRegister.reset()
+    val stateContainer =
+        KStateContainer.withNewState(KStateContainer.withNewState(null, "foo"), true)
 
     val result = ComponentDataExtractor.getState(stateContainer, "Comp1")
 
+    val first = MetadataRegister.get("kstate", "0")?.id ?: -1
+    val second = MetadataRegister.get("kstate", "1")?.id ?: -2
     assertEquals(
+        InspectableObject(
+            mapOf(first to InspectableValue.Text("foo"), second to InspectableValue.Boolean(true))),
         result,
-        InspectableObject(mapOf(1 to InspectableArray(listOf(InspectableValue.Text("foo"))))))
+    )
   }
 }