fix(customHomePage): fixes after design review of hierarchy view (#14194)

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>

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}>

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 {

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">
+                    <Button onClick={() => loadChildren(node)} variant="link" color="gray">
-                        Load {maxNumberOfChildrenToLoad} more
+                        Show {maxNumberOfChildrenToLoad} more
                     </Button>
                 </Row>
             )}

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,

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;