From 96162f40cb7db3a9965957678adf832735db4f9e Mon Sep 17 00:00:00 2001
From: Gijs Weterings <gweterings@fb.com>
Date: Thu, 31 Oct 2019 08:40:04 -0700
Subject: [PATCH] Layout plugin: Add option to Expand/collapse recursively

Summary:
Uses a slightly modified version of the deep expansion. In testing, there were a few issues due to the function in Inspector::onElementExpanded is essentially a toggle. I added an optional parameter to override this toggle behavior for child elements, and also flipped the order of root and child actions during collapsing, as the child state otherwise didn't persist properly (due to the component being unmounted, would be my guess?) This change should be non-breaking to other uses of the method that don't use the `deep: true` parameter
close https://github.com/facebook/flipper/issues/223

Reviewed By: passy

Differential Revision: D18225057

fbshipit-source-id: 53e840f07bf648249b5a4b36d115918dba215ff8
---
 src/plugins/layout/Inspector.tsx              | 27 ++++++++++++-------
 .../elements-inspector/elements.tsx           |  8 ++++++
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/plugins/layout/Inspector.tsx b/src/plugins/layout/Inspector.tsx
index 4b9b251e6..bf25ed783 100644
--- a/src/plugins/layout/Inspector.tsx
+++ b/src/plugins/layout/Inspector.tsx
@@ -303,15 +303,24 @@ export default class Inspector extends Component<Props> {
     }),
   );
 
-  onElementExpanded = (id: ElementID, deep: boolean) => {
-    const expanded = !this.elements()[id].expanded;
-    this.updateElement(id, {expanded});
-    if (expanded) {
-      this.getChildren(id, {}).then(children => {
-        if (deep) {
-          children.forEach(child => this.onElementExpanded(child.id, deep));
-        }
-      });
+  onElementExpanded = (
+    id: ElementID,
+    deep: boolean,
+    forceExpand: boolean = false,
+  ) => {
+    const shouldExpand = forceExpand || !this.elements()[id].expanded;
+    if (shouldExpand) {
+      this.updateElement(id, {expanded: shouldExpand});
+    }
+    this.getChildren(id, {}).then(children => {
+      if (deep) {
+        children.forEach(child =>
+          this.onElementExpanded(child.id, deep, shouldExpand),
+        );
+      }
+    });
+    if (!shouldExpand) {
+      this.updateElement(id, {expanded: shouldExpand});
     }
   };
 
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index 425093e83..b22adc4fd 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -253,6 +253,14 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
           this.props.onElementExpanded(this.props.id, false);
         },
       },
+      {
+        label: props.element.expanded
+          ? 'Collapse all child elements'
+          : 'Expand all child elements',
+        click: () => {
+          this.props.onElementExpanded(this.props.id, true);
+        },
+      },
     ];
 
     for (const extension of props.contextMenuExtensions) {