DHFPROD-8111: Modeling graph UI fixes

Author: briantang

marklogic-data-hub-central/ui/src/components/modeling/graph-view/graph-view.tsx

@@ -270,7 +270,7 @@ const GraphView: React.FC<Props> = (props) => {
         pane2Style={splitPaneStyles.pane2}
         split="vertical"
         primary="first"
-        defaultSize="70%"
+        defaultSize="66%"
         onDragFinished={handleSplitPaneResize}
       >
         {graphViewMainPanel}

marklogic-data-hub-central/ui/src/components/modeling/property-table/property-table.module.scss

@@ -112,6 +112,11 @@
   display: inline-block;
 }
 
+.addPropertyButton {
+  line-height: normal;
+  padding: 1.5px 8px !important;
+}
+
 .disabledButton {
   cursor: not-allowed;
 }

marklogic-data-hub-central/ui/src/components/modeling/property-table/property-table.test.tsx

@@ -3,7 +3,7 @@ import {render, screen, fireEvent, within, cleanup} from "@testing-library/react
 import {waitFor} from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import PropertyTable from "./property-table";
-
+import {onClosestTableRow} from "../../../util/test-utils";
 import {entityReferences, primaryEntityTypes} from "../../../api/modeling";
 import curateData from "../../../assets/mock-data/curation/flows.data";
 import {ConfirmationType} from "../../../types/common-types";
@@ -220,6 +220,53 @@ describe("Entity Modeling Property Table Component", () => {
     expect(getAllByText("string")).toHaveLength(10);
   });
 
+  test("Expand/Collapse all works in Property table side panel view", async () => {
+    let entityName = propertyTableEntities[2].entityName;
+    let definitions = propertyTableEntities[2].model.definitions;
+    const {queryByText, getByTestId, getAllByText} =  render(
+      <PropertyTable
+        canReadEntityModel={true}
+        canWriteEntityModel={false}
+        entityName={entityName}
+        definitions={definitions}
+        sidePanelView={true}
+        updateSavedEntity={jest.fn()}
+      />
+    );
+
+    //properties under Address and Billing structured properties should be hidden by default
+    expect(queryByText("street")).not.toBeInTheDocument();
+    expect(queryByText("state")).not.toBeInTheDocument();
+    expect(queryByText("fiveDigit")).not.toBeInTheDocument();
+    expect(queryByText("plusFour")).not.toBeInTheDocument();
+
+    //verify expand all
+    fireEvent.click(getByTestId("expandBtn"));
+
+    //all nested properties should be present
+    expect(getAllByText("street")).toHaveLength(2);
+    expect(getAllByText("state")).toHaveLength(2);
+    expect(getAllByText("fiveDigit")).toHaveLength(2);
+    expect(getAllByText("plusFour")).toHaveLength(2);
+
+    //verify collapse all
+    fireEvent.click(getByTestId("collapseBtn"));
+
+    //all nested properties should be present
+
+    //address
+    expect(onClosestTableRow(getAllByText("street")[0])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("state")[0])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("fiveDigit")[0])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("plusFour")[0])?.style.display).toBe("none");
+    //billing
+    expect(onClosestTableRow(getAllByText("street")[1])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("state")[1])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("fiveDigit")[1])?.style.display).toBe("none");
+    expect(onClosestTableRow(getAllByText("plusFour")[1])?.style.display).toBe("none");
+  });
+
+
   test("Property Table renders and shows messaging when entity name does not match a definition", async () => {
     let entityName = propertyTableEntities[2].entityName + "-different";
     let definitions = propertyTableEntities[2].model.definitions;

marklogic-data-hub-central/ui/src/components/modeling/property-table/property-table.tsx

@@ -103,6 +103,9 @@ const PropertyTable: React.FC<Props> = (props) => {
   const [expandedRows, setExpandedRows] = useState<string[]>(expandedRowStorage ? expandedRowStorage : []);
   const [newRowKey, setNewRowKey] = useState("");
 
+  const [sourceExpandedKeys, setSourceExpandedKeys] = useState<any[]>([]);
+  const [expandedSourceFlag, setExpandedSourceFlag] = useState(false);
+
   useEffect(() => {
     updateEntityDefinitionsAndRenderTable(props.definitions);
   }, [props.definitions]);
@@ -895,8 +898,47 @@ const PropertyTable: React.FC<Props> = (props) => {
     }
   };
 
-  const handleSourceExpandCollapse = (option) => {
+  //Collapse all-Expand All button
+
+  const toggleSourceRowExpanded = (expanded, record, rowKey) => {
+    if (!sourceExpandedKeys.includes(record.rowKey)) {
+      setSourceExpandedKeys(prevState => {
+        let finalKeys = prevState.concat([record["key"]]);
+        setExpandedSourceFlag(true);
+        return finalKeys;
+      });
+
+    } else {
+      setSourceExpandedKeys(prevState => {
+        let finalKeys = prevState.filter(item => item !== record["key"]);
+        setExpandedSourceFlag(false);
+        return finalKeys;
+      });
+    }
+  };
 
+  const getKeysToExpandFromTable = (dataArr, rowKey, allKeysToExpand: any = [], expanded?) => {
+
+    dataArr.forEach(obj => {
+      if (obj.hasOwnProperty("children")) {
+        allKeysToExpand.push(obj[rowKey]);
+        if (rowKey === "key" && (!expandedSourceFlag || expanded)) {
+          getKeysToExpandFromTable(obj["children"], rowKey, allKeysToExpand);
+        }
+      }
+    });
+    return allKeysToExpand;
+  };
+
+  const handleSourceExpandCollapse = (option) => {
+    let keys = getKeysToExpandFromTable(tableData, "key", [], true);
+    if (option === "collapse") {
+      setSourceExpandedKeys([]);
+      setExpandedSourceFlag(false);
+    } else {
+      setSourceExpandedKeys([...keys]);
+      setExpandedSourceFlag(true);
+    }
   };
 
   // Check if entity name has no matching definition
@@ -958,8 +1000,8 @@ const PropertyTable: React.FC<Props> = (props) => {
           locale={{emptyText: " "}}
           columns={headerColumns}
           dataSource={tableData}
-          onExpand={onExpand}
-          expandedRowKeys={expandedRows}
+          onExpand={props.sidePanelView ? (expanded, record) => toggleSourceRowExpanded(expanded, record, "key") : onExpand}
+          expandedRowKeys={props.sidePanelView ? sourceExpandedKeys : expandedRows}
           pagination={false}
         />
       }