fix(flat-table-row): add support for controlling expanded rows externally FE-4007

cypress/features/regression/designSystem/flatTable.feature

@@ -244,4 +244,18 @@ Feature: Design Systems FlatTable component
     When I type 1 in pagination input
       And I press "Enter" onto focused element
     Then 1 row is visible
-      And Pagination input should have 1 value
+      And Pagination input should have 1 value
+
+  @positive
+  Scenario: You can collapse all rows by clicking on Collapse All
+    Given I open "Design System Flat Table Expandable" component page "controlled" in no iframe
+    When I click "Collapse All" button on preview 
+    Then The subrows are not visible
+
+  @positive 
+  Scenario: You can expand all rows by clicking on Expand All
+    Given I open "Design System Flat Table Expandable" component page "controlled" in no iframe
+      And I click "Collapse All" button on preview
+      And I wait 100
+    When I click "Expand All" button on preview
+    Then The subrows are visible

cypress/features/regression/dialogFullScreen.feature

@@ -61,9 +61,9 @@ Feature: Dialog Full Screen component
   @positive
   Scenario: Verify that nested dialog is closed by pressing Esc key
     Given I open nested "Dialog Full Screen Test" component in noIFrame with "dialogFullScreen" json from "commonComponents" using "default" object name
-      And I "Open Main Dialog" button on preview
+      And I click "Open Main Dialog" button on preview
       And I wait 500
-      And I "Open Nested Dialog" button on preview
+      And I click "Open Nested Dialog" button on preview
       And Dialog is visible
     When I hit ESC key in noIframe
     Then Dialog Full Screen is visible

cypress/support/step-definitions/common-steps.js

@@ -111,7 +111,7 @@ When("I open component preview in noIFrame", () => {
   commonButtonPreviewNoIFrameRoot().click();
 });
 
-When("I {string} button on preview", (text) => {
+When("I click {string} button on preview", (text) => {
   getDataElementByValue("main-text").contains(text).click();
 });
 

src/components/flat-table/flat-table-expandable.stories.mdx

@@ -14,6 +14,7 @@ import {
 } from ".";
 import BatchSelection from "../batch-selection";
 import IconButton from "../icon-button";
+import Button from "../button";
 import Icon from "../icon";
 import Pager from "../pager";
 import {
@@ -1040,6 +1041,76 @@ truncated styling applied, this is because of the caret icon that is rendered wi
   </Story>
 </Preview>
 
+### Controlled
+
+<Preview>
+  <Story
+    name="controlled"
+    parameters={{ chromatic: { disable: true } }}
+    >
+    {() => {
+      const [expanded, setExpanded] = useState(true);
+      const SubRows = [
+        <FlatTableRow>
+          <FlatTableCell>Child one</FlatTableCell>
+          <FlatTableCell>York</FlatTableCell>
+          <FlatTableCell>Single</FlatTableCell>
+          <FlatTableCell>2</FlatTableCell>
+        </FlatTableRow>,
+        <FlatTableRow>
+          <FlatTableCell>Child two</FlatTableCell>
+          <FlatTableCell>Edinburgh</FlatTableCell>
+          <FlatTableCell>Single</FlatTableCell>
+          <FlatTableCell>1</FlatTableCell>
+        </FlatTableRow>,
+      ];
+      return (
+        <>
+         <Button onClick={() => setExpanded((prev) => !prev)}>
+          {expanded ? "Collapse All" : "Expand All"}
+        </Button>
+        <FlatTable>
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader>Name</FlatTableHeader>
+              <FlatTableHeader>Location</FlatTableHeader>
+              <FlatTableHeader>Relationship Status</FlatTableHeader>
+              <FlatTableHeader>Dependents</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow expanded={expanded} expandable subRows={SubRows}>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>0</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expanded={expanded} expandable subRows={SubRows}>
+              <FlatTableCell>Jane Doe</FlatTableCell>
+              <FlatTableCell>York</FlatTableCell>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>2</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expanded={expanded} expandable subRows={SubRows}>
+              <FlatTableCell>John Smith</FlatTableCell>
+              <FlatTableCell>Edinburgh</FlatTableCell>
+              <FlatTableCell>Single</FlatTableCell>
+              <FlatTableCell>1</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow expanded={expanded} expandable subRows={SubRows}>
+              <FlatTableCell>Jane Smith</FlatTableCell>
+              <FlatTableCell>Newcastle</FlatTableCell>
+              <FlatTableCell>Married</FlatTableCell>
+              <FlatTableCell>5</FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+        </>
+      );
+    }}
+  </Story>
+</Preview>
+
 ## Props
 
 ### FlatTableRow

src/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -1,6 +1,7 @@
 import React, {
   useCallback,
   useContext,
+  useEffect,
   useLayoutEffect,
   useRef,
   useState,
@@ -118,6 +119,10 @@ const FlatTableRow = React.forwardRef(
       }
     }, [rowHeaderIndex, stickyCellWidths]);
 
+    useEffect(() => {
+      setIsExpanded(expanded);
+    }, [expanded]);
+
     return (
       <SidebarContext.Consumer>
         {(context) => (

src/components/flat-table/flat-table-row/flat-table-row.spec.js

@@ -676,6 +676,45 @@ describe("FlatTableRow", () => {
           expect(onClickFn).toHaveBeenCalled();
         });
       });
+
+      describe("when used as a controlled component", () => {
+        it("should update the expanded state of the rows", () => {
+          const MockComponent = (props) => {
+            const [expanded, setExpanded] = React.useState(false);
+            return (
+              <>
+                <button type="button" onClick={() => setExpanded(!expanded)}>
+                  Change Expanded State
+                </button>
+                <table>
+                  <tbody>
+                    <FlatTableRow {...props} expanded={expanded}>
+                      <FlatTableCell>cell1</FlatTableCell>
+                      <FlatTableCell>cell2</FlatTableCell>
+                    </FlatTableRow>
+                  </tbody>
+                </table>
+              </>
+            );
+          };
+
+          const wrapper = mount(<MockComponent expandable subRows={SubRows} />);
+
+          act(() => {
+            wrapper.find("button").props().onClick();
+          });
+          wrapper.update();
+
+          expect(wrapper.find(StyledFlatTableRow).length).toEqual(3);
+
+          act(() => {
+            wrapper.find("button").props().onClick();
+          });
+          wrapper.update();
+
+          expect(wrapper.find(StyledFlatTableRow).length).toEqual(1);
+        });
+      });
     });
 
     describe("when focused and enter/space is pressed", () => {