import styled from '@emotion/styled';
import type {Location} from 'history';
import {SectionHeading} from 'sentry/components/charts/styles';
import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
import {Tooltip} from 'sentry/components/tooltip';
import {IconLink} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import type {Organization} from 'sentry/types/organization';
import type {Project} from 'sentry/types/project';
import {decodeScalar} from 'sentry/utils/queryString';
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
import {DEFAULT_MAX_DURATION} from 'sentry/views/performance/trends/utils';
import {
getPerformanceLandingUrl,
getPerformanceTrendsUrl,
} from 'sentry/views/performance/utils';
import {SidebarSection} from './styles';
type Props = {
location: Location;
organization: Organization;
project?: Project;
};
function ProjectQuickLinks({organization, project, location}: Props) {
function getTrendsLink() {
const queryString = decodeScalar(location.query.query);
const conditions = new MutableSearch(queryString || '');
conditions.setFilterValues('tpm()', ['>0.01']);
conditions.setFilterValues('transaction.duration', [
'>0',
`<${DEFAULT_MAX_DURATION}`,
]);
return {
pathname: getPerformanceTrendsUrl(organization),
query: {
project: project?.id,
cursor: undefined,
query: conditions.formatString(),
},
};
}
const quickLinks = [
{
title: t('User Feedback'),
to: {
pathname: `/organizations/${organization.slug}/user-feedback/`,
query: {project: project?.id},
},
},
{
title: t('View Transactions'),
to: {
pathname: getPerformanceLandingUrl(organization),
query: {project: project?.id},
},
disabled: !organization.features.includes('performance-view'),
},
{
title: t('Most Improved/Regressed Transactions'),
to: getTrendsLink(),
disabled: !organization.features.includes('performance-view'),
},
];
return (
{t('Quick Links')}
{quickLinks
// push disabled links to the bottom
.sort((link1, link2) => Number(!!link1.disabled) - Number(!!link2.disabled))
.map(({title, to, disabled}) => (
{title}
))}
);
}
const QuickLink = styled(p =>
p.disabled ? (
{p.children}
) : (
)
)<{
disabled?: boolean;
}>`
margin-bottom: ${space(1)};
display: grid;
align-items: center;
gap: ${space(1)};
grid-template-columns: auto 1fr;
${p =>
p.disabled &&
`
color: ${p.theme.gray200};
cursor: not-allowed;
`}
`;
const QuickLinkText = styled('span')`
font-size: ${p => p.theme.fontSizeMedium};
${p => p.theme.overflowEllipsis}
`;
export default ProjectQuickLinks;