From dc28e0ec48f58c1fc42e1c4aa8ad28eaec6fff3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
 <55978943+cauemarcondes@users.noreply.github.com>
Date: Tue, 8 Sep 2020 14:02:45 +0100
Subject: [PATCH] [APM] Trace timeline: Multi-fold function doesn't update when
 all accordions are collapsed or expanded (#76899)

* update outside state when expanding or collapsing the entry transaction

* reverting icons
---
 .../Waterfall/accordion_waterfall.tsx                | 12 ++++++++----
 .../WaterfallContainer/Waterfall/index.tsx           |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
index 833937835f870..c447d7fba86b8 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
@@ -25,9 +25,7 @@ interface AccordionWaterfallProps {
   location: Location;
   errorsPerTransaction: IWaterfall['errorsPerTransaction'];
   childrenByParentId: Record<string, IWaterfallItem[]>;
-  onToggleEntryTransaction?: (
-    nextState: EuiAccordionProps['forceState']
-  ) => void;
+  onToggleEntryTransaction?: () => void;
   timelineMargins: Margins;
   onClickWaterfallItem: (item: IWaterfallItem) => void;
 }
@@ -106,6 +104,7 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
     errorsPerTransaction,
     timelineMargins,
     onClickWaterfallItem,
+    onToggleEntryTransaction,
   } = props;
 
   const nextLevel = level + 1;
@@ -147,7 +146,12 @@ export function AccordionWaterfall(props: AccordionWaterfallProps) {
       arrowDisplay={isEmpty(children) ? 'none' : 'left'}
       initialIsOpen={true}
       forceState={isOpen ? 'open' : 'closed'}
-      onToggle={() => setIsOpen((isCurrentOpen) => !isCurrentOpen)}
+      onToggle={() => {
+        setIsOpen((isCurrentOpen) => !isCurrentOpen);
+        if (onToggleEntryTransaction) {
+          onToggleEntryTransaction();
+        }
+      }}
     >
       {children.map((child) => (
         <AccordionWaterfall
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
index 0958f99b5bd98..d166656db0672 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -109,6 +109,7 @@ export function Waterfall({
         onClickWaterfallItem={(item: IWaterfallItem) =>
           toggleFlyout({ history, item, location })
         }
+        onToggleEntryTransaction={() => setIsAccordionOpen((isOpen) => !isOpen)}
       />
     );
   }