123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- import {Fragment} from 'react';
- import styled from '@emotion/styled';
- import ActionButton from 'sentry/components/actions/button';
- import MenuItemActionLink from 'sentry/components/actions/menuItemActionLink';
- import {Button} from 'sentry/components/button';
- import ButtonBar from 'sentry/components/buttonBar';
- import ConfirmDelete from 'sentry/components/confirmDelete';
- import DropdownLink from 'sentry/components/dropdownLink';
- import {Tooltip} from 'sentry/components/tooltip';
- import {IconEllipsis} from 'sentry/icons/iconEllipsis';
- import {t} from 'sentry/locale';
- import {space} from 'sentry/styles/space';
- import {CustomRepoType} from 'sentry/types/debugFiles';
- import TextBlock from 'sentry/views/settings/components/text/textBlock';
- type Props = {
- hasAccess: boolean;
- hasFeature: boolean;
- onDelete: () => void;
- onEdit: () => void;
- repositoryName: string;
- repositoryType: string;
- disabled?: boolean;
- syncNowButton?: React.ReactElement;
- };
- function Actions({
- repositoryName,
- repositoryType,
- disabled,
- onEdit,
- onDelete,
- hasFeature,
- hasAccess,
- syncNowButton,
- }: Props) {
- function renderConfirmDelete(element: React.ReactElement) {
- return (
- <ConfirmDelete
- confirmText={t('Delete Repository')}
- message={
- repositoryType === CustomRepoType.APP_STORE_CONNECT ? (
- <Fragment>
- <TextBlock>
- <strong>
- {t(
- 'Removing App Store Connect symbol source does not remove current dSYMs.'
- )}
- </strong>
- </TextBlock>
- <TextBlock>
- {t(
- 'The App Store Connect symbol source periodically imports dSYMs into the "Uploaded debug information files". Removing this symbol source does not delete those files and they will remain available for symbolication until deleted directly.'
- )}
- </TextBlock>
- </Fragment>
- ) : (
- <Fragment>
- <TextBlock>
- <strong>
- {t('Removing this repository applies instantly to new events.')}
- </strong>
- </TextBlock>
- <TextBlock>
- {t(
- 'Debug files from this repository will not be used to symbolicate future events. This may create new issues and alert members in your organization.'
- )}
- </TextBlock>
- </Fragment>
- )
- }
- confirmInput={repositoryName}
- priority="danger"
- onConfirm={onDelete}
- >
- {element}
- </ConfirmDelete>
- );
- }
- const actionsDisabled = !hasAccess || !hasFeature || disabled;
- return (
- <StyledButtonBar gap={1}>
- {syncNowButton}
- <ButtonTooltip
- title={
- !hasFeature
- ? undefined
- : !hasAccess
- ? t(
- 'You do not have permission to edit custom repositories configurations.'
- )
- : undefined
- }
- disabled={actionsDisabled}
- >
- <ActionBtn disabled={actionsDisabled} onClick={onEdit} size="sm">
- {t('Configure')}
- </ActionBtn>
- </ButtonTooltip>
- {actionsDisabled ? (
- <ButtonTooltip
- title={
- !hasFeature
- ? undefined
- : !hasAccess
- ? t(
- 'You do not have permission to delete custom repositories configurations.'
- )
- : undefined
- }
- disabled={actionsDisabled}
- >
- <ActionBtn size="sm" disabled>
- {t('Delete')}
- </ActionBtn>
- </ButtonTooltip>
- ) : (
- renderConfirmDelete(<ActionBtn size="sm">{t('Delete')}</ActionBtn>)
- )}
- <DropDownWrapper>
- <DropdownLink
- caret={false}
- disabled={actionsDisabled}
- customTitle={
- <StyledActionButton
- aria-label={t('Actions')}
- disabled={actionsDisabled}
- title={
- !hasFeature
- ? undefined
- : !hasAccess
- ? t(
- 'You do not have permission to edit and delete custom repositories configurations.'
- )
- : undefined
- }
- icon={<IconEllipsis />}
- />
- }
- anchorRight
- >
- <MenuItemActionLink onClick={onEdit}>{t('Configure')}</MenuItemActionLink>
- {renderConfirmDelete(<MenuItemActionLink>{t('Delete')}</MenuItemActionLink>)}
- </DropdownLink>
- </DropDownWrapper>
- </StyledButtonBar>
- );
- }
- export default Actions;
- const StyledActionButton = styled(ActionButton)`
- height: 32px;
- `;
- const StyledButtonBar = styled(ButtonBar)`
- gap: ${space(1)};
- grid-column: 2/2;
- grid-row: 4/4;
- grid-auto-flow: row;
- margin-top: ${space(0.5)};
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- grid-column: 3/3;
- grid-row: 1/3;
- grid-auto-flow: column;
- margin-top: 0;
- }
- `;
- const ButtonTooltip = styled(Tooltip)`
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- display: none;
- }
- `;
- const ActionBtn = styled(Button)`
- width: 100%;
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- display: none;
- }
- `;
- const DropDownWrapper = styled('div')`
- display: none;
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- display: block;
- }
- `;
|