chore(ui): add support for custom messages and options in delete widget modal (#13570)

This commit is contained in:
Sachin Chaurasiya 2023-10-14 10:10:05 +05:30 committed by GitHub
parent 53629c8cc0
commit f323a4a8b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 9 deletions

View File

@ -11,6 +11,13 @@
* limitations under the License. * limitations under the License.
*/ */
export interface DeleteOption {
title: string;
description: string;
type: DeleteType;
isAllowed: boolean;
}
export interface DeleteWidgetModalProps { export interface DeleteWidgetModalProps {
visible: boolean; visible: boolean;
onCancel: () => void; onCancel: () => void;
@ -24,6 +31,8 @@ export interface DeleteWidgetModalProps {
entityId?: string; entityId?: string;
prepareType?: boolean; prepareType?: boolean;
isRecursiveDelete?: boolean; isRecursiveDelete?: boolean;
successMessage?: string;
deleteOptions?: DeleteOption[];
afterDeleteAction?: (isSoftDelete?: boolean) => void; afterDeleteAction?: (isSoftDelete?: boolean) => void;
} }

View File

@ -54,6 +54,8 @@ const DeleteWidgetModal = ({
prepareType = true, prepareType = true,
isRecursiveDelete, isRecursiveDelete,
afterDeleteAction, afterDeleteAction,
successMessage,
deleteOptions,
}: DeleteWidgetModalProps) => { }: DeleteWidgetModalProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [entityDeleteState, setEntityDeleteState] = const [entityDeleteState, setEntityDeleteState] =
@ -123,6 +125,7 @@ const DeleteWidgetModal = ({
if (response.status === 200) { if (response.status === 200) {
showSuccessToast( showSuccessToast(
successMessage ??
t('server.entity-deleted-successfully', { t('server.entity-deleted-successfully', {
entity: startCase(entityType), entity: startCase(entityType),
}) })
@ -217,7 +220,7 @@ const DeleteWidgetModal = ({
title={`${t('label.delete')} ${entityName}`} title={`${t('label.delete')} ${entityName}`}
onCancel={handleOnEntityDeleteCancel}> onCancel={handleOnEntityDeleteCancel}>
<Radio.Group value={value} onChange={onChange}> <Radio.Group value={value} onChange={onChange}>
{DELETE_OPTION.map( {(deleteOptions ?? DELETE_OPTION).map(
(option) => (option) =>
option.isAllowed && ( option.isAllowed && (
<Radio <Radio

View File

@ -29,6 +29,7 @@ import { NO_PERMISSION_FOR_ACTION } from '../../../../constants/HelperTextUtil';
import { DROPDOWN_ICON_SIZE_PROPS } from '../../../../constants/ManageButton.constants'; import { DROPDOWN_ICON_SIZE_PROPS } from '../../../../constants/ManageButton.constants';
import { EntityType } from '../../../../enums/entity.enum'; import { EntityType } from '../../../../enums/entity.enum';
import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils'; import { ANNOUNCEMENT_ENTITIES } from '../../../../utils/AnnouncementsUtils';
import { DeleteOption } from '../../DeleteWidget/DeleteWidget.interface';
import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal'; import DeleteWidgetModal from '../../DeleteWidget/DeleteWidgetModal';
import './ManageButton.less'; import './ManageButton.less';
@ -54,6 +55,9 @@ interface Props {
onEditDisplayName?: (data: EntityName) => Promise<void>; onEditDisplayName?: (data: EntityName) => Promise<void>;
allowRename?: boolean; allowRename?: boolean;
prepareType?: boolean; prepareType?: boolean;
successMessage?: string;
deleteButtonDescription?: string;
deleteOptions?: DeleteOption[];
} }
const ManageButton: FC<Props> = ({ const ManageButton: FC<Props> = ({
@ -77,6 +81,9 @@ const ManageButton: FC<Props> = ({
onEditDisplayName, onEditDisplayName,
allowRename, allowRename,
prepareType = true, prepareType = true,
successMessage,
deleteButtonDescription,
deleteOptions,
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [isDelete, setIsDelete] = useState<boolean>(false); const [isDelete, setIsDelete] = useState<boolean>(false);
@ -199,12 +206,12 @@ const ManageButton: FC<Props> = ({
{ {
label: ( label: (
<ManageButtonItemLabel <ManageButtonItemLabel
description={t( description={
'message.delete-entity-type-action-description', deleteButtonDescription ??
{ t('message.delete-entity-type-action-description', {
entityType, entityType,
})
} }
)}
icon={ icon={
<IconDelete <IconDelete
className="m-t-xss" className="m-t-xss"
@ -254,6 +261,7 @@ const ManageButton: FC<Props> = ({
afterDeleteAction={afterDeleteAction} afterDeleteAction={afterDeleteAction}
allowSoftDelete={allowSoftDelete} allowSoftDelete={allowSoftDelete}
deleteMessage={deleteMessage} deleteMessage={deleteMessage}
deleteOptions={deleteOptions}
entityId={entityId || ''} entityId={entityId || ''}
entityName={entityName || ''} entityName={entityName || ''}
entityType={entityType || ''} entityType={entityType || ''}
@ -261,6 +269,7 @@ const ManageButton: FC<Props> = ({
isRecursiveDelete={isRecursiveDelete} isRecursiveDelete={isRecursiveDelete}
prepareType={prepareType} prepareType={prepareType}
softDeleteMessagePostFix={softDeleteMessagePostFix} softDeleteMessagePostFix={softDeleteMessagePostFix}
successMessage={successMessage}
visible={isDelete} visible={isDelete}
onCancel={() => setIsDelete(false)} onCancel={() => setIsDelete(false)}
/> />