|
| 1 | +/* |
| 2 | + * Copyright (c) 2024. Devtron Inc. |
| 3 | + */ |
| 4 | + |
| 5 | +import { |
| 6 | + Button, |
| 7 | + ButtonStyleType, |
| 8 | + ButtonVariantType, |
| 9 | + DraggableButton, |
| 10 | + DraggablePositionVariant, |
| 11 | + DraggableWrapper, |
| 12 | + Icon, |
| 13 | + PopupMenu, |
| 14 | +} from '@devtron-labs/devtron-fe-common-lib' |
| 15 | + |
| 16 | +import { ModifyRecipientPopUp } from './ModifyRecipientPopUp' |
| 17 | +import { BulkMultiSelectTagWidgetType } from './types' |
| 18 | + |
| 19 | +export const BulkMultiSelectTagWidget = ({ |
| 20 | + parentRef, |
| 21 | + selectedIdentifiersCount, |
| 22 | + showDeleteModal, |
| 23 | + events, |
| 24 | + applyModifyEvents, |
| 25 | + onChangeCheckboxHandler, |
| 26 | + selectedNotificationList, |
| 27 | + onOpenEditNotificationMenu, |
| 28 | + showModifyModal, |
| 29 | +}: BulkMultiSelectTagWidgetType) => { |
| 30 | + const renderModifyEventPopUpBody = () => ( |
| 31 | + <PopupMenu.Body> |
| 32 | + <ModifyRecipientPopUp |
| 33 | + events={events} |
| 34 | + applyModifyEvents={applyModifyEvents} |
| 35 | + onChangeCheckboxHandler={onChangeCheckboxHandler} |
| 36 | + selectedNotificationList={selectedNotificationList} |
| 37 | + /> |
| 38 | + </PopupMenu.Body> |
| 39 | + ) |
| 40 | + return ( |
| 41 | + <DraggableWrapper |
| 42 | + dragSelector=".drag-selector" |
| 43 | + positionVariant={DraggablePositionVariant.PARENT_BOTTOM_CENTER} |
| 44 | + parentRef={parentRef} |
| 45 | + zIndex="calc(var(--modal-index) - 1)" |
| 46 | + > |
| 47 | + <div className="flex dc__gap-8 pt-12 pb-12 pr-12 pl-8 bulk-selection-widget br-8"> |
| 48 | + <DraggableButton dragClassName="drag-selector" /> |
| 49 | + <div className="fs-13 lh-20 fw-6 flex dc__gap-12"> |
| 50 | + <span className="flex dc__gap-2 bcb-5 cn-0 br-4 pr-6 pl-6">{selectedIdentifiersCount}</span> |
| 51 | + <span className="cn-9">Selected</span> |
| 52 | + </div> |
| 53 | + <div className="dc__divider h-16" /> |
| 54 | + <div className="flex left dc__gap-4" /> |
| 55 | + <div className="flex left dc__gap-4"> |
| 56 | + <Button |
| 57 | + dataTestId="notification-delete-button" |
| 58 | + icon={<Icon name="ic-delete" color={null} />} |
| 59 | + variant={ButtonVariantType.borderLess} |
| 60 | + style={ButtonStyleType.neutral} |
| 61 | + ariaLabel="Delete Notifications" |
| 62 | + onClick={showDeleteModal} |
| 63 | + showAriaLabelInTippy |
| 64 | + /> |
| 65 | + <PopupMenu |
| 66 | + onToggleCallback={(isOpen) => { |
| 67 | + if (isOpen) { |
| 68 | + onOpenEditNotificationMenu() |
| 69 | + } |
| 70 | + }} |
| 71 | + > |
| 72 | + <PopupMenu.Button rootClassName="popup-button--notification-tab"> |
| 73 | + <Icon |
| 74 | + name="ic-error" |
| 75 | + color={null} |
| 76 | + size={20} |
| 77 | + tooltipProps={{ content: 'Modify events', alwaysShowTippyOnHover: true }} |
| 78 | + /> |
| 79 | + </PopupMenu.Button> |
| 80 | + {renderModifyEventPopUpBody()} |
| 81 | + </PopupMenu> |
| 82 | + |
| 83 | + <Button |
| 84 | + dataTestId="button__modify-recipients" |
| 85 | + icon={<Icon name="ic-users" color={null} />} |
| 86 | + variant={ButtonVariantType.borderLess} |
| 87 | + style={ButtonStyleType.neutral} |
| 88 | + ariaLabel="Modify Recipients" |
| 89 | + onClick={showModifyModal} |
| 90 | + showAriaLabelInTippy |
| 91 | + /> |
| 92 | + </div> |
| 93 | + </div> |
| 94 | + </DraggableWrapper> |
| 95 | + ) |
| 96 | +} |
0 commit comments