yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-11-03 12:16:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
v-tarasevich-blitz-brain 2025-07-23 23:10:08 +03:00 committed by GitHub
parent 63ad2d06d2
commit 9b8ea4b309
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
datahub-web-react/src/app/homeV3/moduleModals/common/BaseModuleModal.tsx
View File

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

1
datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/HierarchyViewModal.tsx
View File

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

2
datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/DepthMargin.tsx
View File

@ -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 {

11
datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/TreeNodeRenderer.tsx
View File

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

2
datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/context/TreeViewContextProvider.tsx
View File

@ -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,

3
datahub-web-react/src/app/homeV3/modules/hierarchyViewModule/treeView/types.ts
View File

@ -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;