import {Fragment, ReactNode} from 'react'; import styled from '@emotion/styled'; import { addErrorMessage, addLoadingMessage, addSuccessMessage, } from 'sentry/actionCreators/indicator'; import {ModalRenderProps, openModal} from 'sentry/actionCreators/modal'; import Button from 'sentry/components/actions/button'; import ButtonBar from 'sentry/components/buttonBar'; import Checkbox from 'sentry/components/checkbox'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; import ErrorBoundary from 'sentry/components/errorBoundary'; import decodeMailbox from 'sentry/components/feedback/decodeMailbox'; import MailboxPicker from 'sentry/components/feedback/list/mailboxPicker'; import type useListItemCheckboxState from 'sentry/components/feedback/list/useListItemCheckboxState'; import useMutateFeedback from 'sentry/components/feedback/useMutateFeedback'; import PanelItem from 'sentry/components/panels/panelItem'; import {Flex} from 'sentry/components/profiling/flex'; import {IconEllipsis} from 'sentry/icons/iconEllipsis'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import {GroupStatus} from 'sentry/types'; import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import useOrganization from 'sentry/utils/useOrganization'; import useUrlParams from 'sentry/utils/useUrlParams'; function openConfirmModal({ onConfirm, body, footerConfirm, }: { body: ReactNode; footerConfirm: ReactNode; onConfirm: () => void | Promise; }) { openModal(({Body, Footer, closeModal}: ModalRenderProps) => ( {body} )); } interface Props extends Pick< ReturnType, | 'countSelected' | 'deselectAll' | 'isAllSelected' | 'isAnySelected' | 'selectAll' | 'selectedIds' > {} const statusToText: Record = { resolved: 'Resolve', unresolved: 'Unresolve', }; export default function FeedbackListHeader({ countSelected, deselectAll, isAllSelected, isAnySelected, selectAll, selectedIds, }: Props) { const {mailbox} = useLocationQuery({ fields: { mailbox: decodeMailbox, }, }); const {setParamValue: setMailbox} = useUrlParams('mailbox'); return ( { if (isAllSelected === true) { deselectAll(); } else { selectAll(); } }} /> {isAnySelected ? ( ) : ( )} ); } interface HasSelectionProps extends Pick< ReturnType, 'countSelected' | 'selectedIds' | 'deselectAll' > { mailbox: ReturnType; } function HasSelection({ mailbox, countSelected, selectedIds, deselectAll, }: HasSelectionProps) { const organization = useOrganization(); const {markAsRead, resolve} = useMutateFeedback({ feedbackIds: selectedIds, organization, }); const mutationOptionsResolve = { onError: () => { addErrorMessage(t('An error occurred while updating the feedbacks.')); }, onSuccess: () => { addSuccessMessage(t('Updated feedbacks')); deselectAll(); }, }; const mutationOptionsRead = { onError: () => { addErrorMessage(t('An error occurred while updating the feedbacks.')); }, onSuccess: () => { addSuccessMessage(t('Updated feedbacks')); }, }; return ( {tct('[countSelected] Selected', { countSelected, })} , showChevron: false, size: 'xs', }} items={[ { key: 'mark read', label: t('Mark Read'), onAction: () => { openConfirmModal({ onConfirm: () => { addLoadingMessage(t('Updating feedbacks...')); markAsRead(true, mutationOptionsRead); }, body: t('Are you sure you want to mark these feedbacks as read?'), footerConfirm: 'Mark read', }); }, }, { key: 'mark unread', label: t('Mark Unread'), onAction: () => { openConfirmModal({ onConfirm: () => { addLoadingMessage(t('Updating feedbacks...')); markAsRead(false, mutationOptionsRead); }, body: t('Are you sure you want to mark these feedbacks as unread?'), footerConfirm: 'Mark unread', }); }, }, ]} /> ); } const HeaderPanelItem = styled(PanelItem)` display: flex; padding: ${space(1)} ${space(2)} ${space(1)} ${space(2)}; gap: ${space(1)}; align-items: center; `;