yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-27 18:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement(ui/homepage): miscellaneous design review updates for custom home page (#14209)

Browse Source
This commit is contained in:
purnimagarg1 2025-07-24 22:56:37 +05:30 committed by GitHub
parent 446f31f1bd
commit bcee2a4fb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx
View File

@ -1,4 +1,4 @@
import { Icon, colors } from '@components';
import { Icon, Text, Tooltip, colors } from '@components';
import { Dropdown } from 'antd';
import React, { useCallback } from 'react';
import styled from 'styled-components';
@ -61,20 +61,31 @@ export default function ModuleMenu({ module, position }: Props) {
dropdownRender={(originNode) => <StyledDropdownContainer>{originNode}</StyledDropdownContainer>}
menu={{
items: [
...(canEdit
? [
{
title: 'Edit',
key: 'edit',
label: 'Edit',
style: {
...menuItemStyle,
color: colors.gray[600],
},
onClick: handleEditModule,
},
]
: []),
{
title: 'Edit',
key: 'edit',
label: (
<>
{!canEdit ? (
<Tooltip title="You can not edit Default widgets">
<Text color="gray" colorLevel={300}>
Edit
</Text>
</Tooltip>
) : (
<Text color="gray" colorLevel={600}>
Edit
</Text>
)}
</>
),
style: {
...menuItemStyle,
},
onClick: handleEditModule,
disabled: !canEdit,
},
{
title: 'Remove',
label: 'Remove',

2
datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx
View File

@ -25,6 +25,8 @@ vi.mock('@components', () => ({
{icon}
</div>
)),
Tooltip: (props: any) => <span {...props} />,
Text: (props: any) => <p {...props} />,
colors: {
gray: {
600: '#4B5563',

14
datahub-web-react/src/app/homeV3/template/components/addModuleMenu/components/ModuleMenuItem.tsx
View File

@ -5,8 +5,18 @@ import MenuItem from '@app/homeV3/template/components/addModuleMenu/components/M
interface Props {
module: ModuleInfo;
isDisabled?: boolean;
isSmallModule?: boolean;
}
export default function ModuleMenuItem({ module }: Props) {
return <MenuItem description={module.description} title={module.name} icon={module.icon} />;
export default function ModuleMenuItem({ module, isDisabled, isSmallModule }: Props) {
return (
<MenuItem
description={module.description}
title={module.name}
icon={module.icon}
isDisabled={isDisabled}
isSmallModule={isSmallModule}
/>
);
}

18
datahub-web-react/src/app/homeV3/template/components/addModuleMenu/useAddModuleMenu.tsx
View File

@ -199,15 +199,27 @@ export default function useAddModuleMenu(position: ModulePositionInput, closeMen
const customGlobalModules: PageModuleFragment[] = getCustomGlobalModules(globalTemplate);
if (customGlobalModules.length > 0) {
const adminModuleItems = customGlobalModules.map((module) => ({
title: module.properties.name,
name: module.properties.name,
key: module.urn,
label: <ModuleMenuItem module={convertModuleToModuleInfo(module)} />,
label: (
<ModuleMenuItem
module={convertModuleToModuleInfo(module)}
isDisabled={
(SMALL_MODULE_TYPES.includes(module.properties.type) && !isSmallModuleRow) ||
(LARGE_MODULE_TYPES.includes(module.properties.type) && isSmallModuleRow)
}
isSmallModule={SMALL_MODULE_TYPES.includes(module.properties.type)}
/>
),
onClick: () => handleAddExistingModule(module),
disabled:
(SMALL_MODULE_TYPES.includes(module.properties.type) && !isSmallModuleRow) ||
(LARGE_MODULE_TYPES.includes(module.properties.type) && isSmallModuleRow),
}));
const homeDefaults = {
key: 'adminCreatedModulesGroup',
title: 'Home Defaults',
name: 'Home Defaults',
label: (
<MenuItem
icon="Database"