diff --git a/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx b/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx index e3fe1634c6..762f230856 100644 --- a/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/ModuleMenu.tsx @@ -1,11 +1,13 @@ import { Icon, Text, Tooltip, colors } from '@components'; import { Dropdown } from 'antd'; -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import styled from 'styled-components'; import { usePageTemplateContext } from '@app/homeV3/context/PageTemplateContext'; import { DEFAULT_GLOBAL_MODULE_TYPES } from '@app/homeV3/modules/constants'; +import { getCustomGlobalModules } from '@app/homeV3/template/components/addModuleMenu/utils'; import { ModulePositionInput } from '@app/homeV3/template/types'; +import { ConfirmationModal } from '@app/sharedV2/modals/ConfirmationModal'; import { PageModuleFragment } from '@graphql/template.generated'; @@ -32,9 +34,16 @@ interface Props { } export default function ModuleMenu({ module, position }: Props) { + const [showRemoveModuleConfirmation, setShowRemoveModuleConfirmation] = useState(false); const { type } = module.properties; const canEdit = !DEFAULT_GLOBAL_MODULE_TYPES.includes(type); + const { globalTemplate } = usePageTemplateContext(); + const isAdminCreatedModule = useMemo(() => { + const adminCreatedModules = getCustomGlobalModules(globalTemplate); + return adminCreatedModules.some((adminCreatedModule) => adminCreatedModule.urn === module.urn); + }, [globalTemplate, module.urn]); + const { removeModule, moduleModalState: { openToEdit }, @@ -58,52 +67,68 @@ export default function ModuleMenu({ module, position }: Props) { const menuItemStyle = { fontSize: '14px', padding: '5px 16px' }; return ( - - {originNode}} - menu={{ - items: [ - { - title: 'Edit', - key: 'edit', - label: ( - <> - {!canEdit ? ( - - + <> + + {originNode}} + menu={{ + items: [ + { + title: 'Edit', + key: 'edit', + label: ( + <> + {!canEdit ? ( + + + Edit + + + ) : ( + Edit - - ) : ( - - Edit - - )} - - ), - style: { - ...menuItemStyle, + )} + + ), + style: { + ...menuItemStyle, + }, + onClick: handleEditModule, + disabled: !canEdit, }, - onClick: handleEditModule, - disabled: !canEdit, - }, - { - title: 'Remove', - label: 'Remove', - key: 'remove', - style: { - ...menuItemStyle, - color: colors.red[500], + { + title: 'Remove', + label: 'Remove', + key: 'remove', + style: { + ...menuItemStyle, + color: colors.red[500], + }, + onClick: () => setShowRemoveModuleConfirmation(true), }, - onClick: handleRemove, - }, - ], - }} - > - - - + ], + }} + > + + + + + setShowRemoveModuleConfirmation(false)} + modalTitle="Remove Module?" + modalText={ + isAdminCreatedModule + ? 'Are you sure you want to remove this module? You can re-add it later from the Home Defaults section when adding a new module.' + : 'Are you sure you want to remove this module? You can always create a new one later if needed.' + } + closeButtonText="Cancel" + confirmButtonText="Confirm" + /> + ); } diff --git a/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx b/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx index 35472cb26e..601801ee6c 100644 --- a/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx +++ b/datahub-web-react/src/app/homeV3/module/components/__tests__/ModuleMenu.test.tsx @@ -27,6 +27,13 @@ vi.mock('@components', () => ({ )), Tooltip: (props: any) => , Text: (props: any) =>

, + Button: (props: any) =>