From 9b8ea4b309ce9127f98ebbd8cfdb720fdde70dfd Mon Sep 17 00:00:00 2001
From: v-tarasevich-blitz-brain <v.tarasevich@blitz-brain.com>
Date: Wed, 23 Jul 2025 23:10:08 +0300
Subject: [PATCH] fix(customHomePage): fixes after design review of hierarchy
 view (#14194)

---
 .../homeV3/moduleModals/common/BaseModuleModal.tsx    |  4 +++-
 .../hierarchyViewModule/HierarchyViewModal.tsx        |  1 +
 .../hierarchyViewModule/treeView/DepthMargin.tsx      |  2 +-
 .../hierarchyViewModule/treeView/TreeNodeRenderer.tsx | 11 ++++++++---
 .../treeView/context/TreeViewContextProvider.tsx      |  2 ++
 .../modules/hierarchyViewModule/treeView/types.ts     |  3 +++
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/datahub-web-react/src/app/homeV3/moduleModals/common/BaseModuleModal.tsx b/datahub-web-react/src/app/homeV3/moduleModals/common/BaseModuleModal.tsx
index 5941dce400..426499d8ff 100644
--- a/datahub-web-react/src/app/homeV3/moduleModals/common/BaseModuleModal.tsx
+++ b/datahub-web-react/src/app/homeV3/moduleModals/common/BaseModuleModal.tsx
@@ -15,6 +15,7 @@ interface Props {
     subtitle?: string;
     onUpsert: () => void;
     width?: string;
+    maxWidth?: string;
     submitButtonProps?: Partial<ModalButton>;
 }
 
@@ -24,6 +25,7 @@ export default function BaseModuleModal({
     children,
     onUpsert,
     width,
+    maxWidth,
     submitButtonProps,
 }: React.PropsWithChildren<Props>) {
     const {
@@ -57,7 +59,7 @@ export default function BaseModuleModal({
             maskClosable={false} // to avoid accidental clicks that closes the modal
             bodyStyle={modalBodyStyles}
             width={width || '90%'}
-            style={{ maxWidth: 1100 }}
+            style={{ maxWidth: maxWidth ?? 1100 }}
         >
             {children}
         </Modal>
diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx
index de7e9a4a6c..ae7d239641 100644
--- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx
+++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx
@@ -67,6 +67,7 @@ export default function HierarchyViewModal() {
             title={`${isEditing ? 'Edit' : 'Add'} Hierarchy View`}
             subtitle="Create a widget by selecting assets and information that will be shown to your users"
             onUpsert={handleUpsertAssetCollectionModule}
+            maxWidth="900px"
         >
             <Form form={form} initialValues={initialFormState}>
                 <HierarchyFormContextProvider initialValues={initialFormState}>
diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/DepthMargin.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/DepthMargin.tsx
index 994eba7bc0..3e618a28ad 100644
--- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/DepthMargin.tsx
+++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/DepthMargin.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const DepthMarginContainer = styled.div<{ $depth: number }>`
-    margin-left: calc(8px * ${(props) => props.$depth});
+    margin-left: calc(16px * ${(props) => props.$depth});
 `;
 
 interface Props {
diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/TreeNodeRenderer.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/TreeNodeRenderer.tsx
index fda66b7f75..06575f65ae 100644
--- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/TreeNodeRenderer.tsx
+++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/TreeNodeRenderer.tsx
@@ -42,6 +42,7 @@ export default function TreeNodeRenderer({ node, depth }: Props) {
         getHasSelectedChildren,
         select,
         explicitlySelectChildren,
+        enableIntermediateSelectState,
         toggleSelected,
         getIsChildrenLoading,
         getNumberOfNotLoadedChildren,
@@ -55,6 +56,10 @@ export default function TreeNodeRenderer({ node, depth }: Props) {
     const isSelectable = useMemo(() => getIsSelectable(node), [node, getIsSelectable]);
     const isSelected = useMemo(() => getIsSelected(node), [node, getIsSelected]);
     const hasSelectedChildren = useMemo(() => getHasSelectedChildren(node), [node, getHasSelectedChildren]);
+    const isIntermediatelySelected = useMemo(
+        () => !isSelected && hasSelectedChildren && !!enableIntermediateSelectState,
+        [isSelected, hasSelectedChildren, enableIntermediateSelectState],
+    );
 
     const isChildrenLoading = useMemo(() => getIsChildrenLoading(node), [node, getIsChildrenLoading]);
 
@@ -107,7 +112,7 @@ export default function TreeNodeRenderer({ node, depth }: Props) {
                         <Checkbox
                             isChecked={isSelected}
                             setIsChecked={() => toggleSelected(node)}
-                            isIntermediate={!isSelected && hasSelectedChildren}
+                            isIntermediate={isIntermediatelySelected}
                         />
                     </>
                 )}
@@ -127,8 +132,8 @@ export default function TreeNodeRenderer({ node, depth }: Props) {
                 <Row>
                     <DepthMargin depth={depth + 1} />
                     <ExpandToggler expandable={false} />
-                    <Button onClick={() => loadChildren(node)} variant="link">
-                        Load {maxNumberOfChildrenToLoad} more
+                    <Button onClick={() => loadChildren(node)} variant="link" color="gray">
+                        Show {maxNumberOfChildrenToLoad} more
                     </Button>
                 </Row>
             )}
diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/context/TreeViewContextProvider.tsx b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/context/TreeViewContextProvider.tsx
index b3774bf1b3..bc464c2bab 100644
--- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/context/TreeViewContextProvider.tsx
+++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/context/TreeViewContextProvider.tsx
@@ -25,6 +25,7 @@ export default function TreeViewContextProvider({
     explicitlyUnselectChildren,
     explicitlySelectParent,
     explicitlyUnselectParent,
+    enableIntermediateSelectState,
     numberOfChildrenToLoad = DEFAULT_NUMBER_OF_CHILDREN_TO_LOAD,
 }: React.PropsWithChildren<TreeViewContextProviderProps>) {
     const [internalExpandedValues, setInternalExpandedValues] = useState<string[]>(expandedValues ?? []);
@@ -261,6 +262,7 @@ export default function TreeViewContextProvider({
                 explicitlyUnselectChildren,
                 explicitlySelectParent,
                 explicitlyUnselectParent,
+                enableIntermediateSelectState,
 
                 // Async loading of children
                 getIsChildrenLoading,
diff --git a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/types.ts b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/types.ts
index db62448390..422c88a20e 100644
--- a/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/types.ts
+++ b/datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/types.ts
@@ -51,6 +51,7 @@ export interface TreeViewContextType {
     explicitlyUnselectChildren?: boolean;
     explicitlySelectParent?: boolean;
     explicitlyUnselectParent?: boolean;
+    enableIntermediateSelectState?: boolean;
 
     // Async loading of children
     // -------------------------------------------------
@@ -91,6 +92,8 @@ export interface TreeViewContextProviderProps {
     explicitlySelectParent?: boolean;
     // If enabled it prevents unselecting of parent if any its children were unselected
     explicitlyUnselectParent?: boolean;
+    // If enabled it shows intermediate state of checkbox when the current node is not selected but it has selected nested nodes
+    enableIntermediateSelectState?: boolean;
 
     // Optional custom renderer of nodes
     renderNodeLabel?: (props: TreeNodeProps) => React.ReactNode;