import type {ComponentProps, ReactNode} from 'react';
import {useState} from 'react';
import styled from '@emotion/styled';
import Accordion from 'sentry/components/accordion/accordion';
import {LinkButton} from 'sentry/components/button';
import EmptyStateWarning from 'sentry/components/emptyStateWarning';
import Placeholder from 'sentry/components/placeholder';
import {Flex} from 'sentry/components/profiling/flex';
import QuestionTooltip from 'sentry/components/questionTooltip';
import TextOverflow from 'sentry/components/textOverflow';
import {IconCursorArrow, IconSearch} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import useDeadRageSelectors from 'sentry/utils/replays/hooks/useDeadRageSelectors';
import type {ColorOrAlias} from 'sentry/utils/theme';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
import {
ContentContainer,
HeaderContainer,
HeaderTitleLegend,
Subtitle,
WidgetContainer,
} from 'sentry/views/profiling/landing/styles';
import ExampleReplaysList from 'sentry/views/replays/deadRageClick/exampleReplaysList';
import {
ProjectInfo,
SelectorLink,
transformSelectorQuery,
} from 'sentry/views/replays/deadRageClick/selectorTable';
function DeadRageSelectorCards() {
return (
{t('Most Dead Clicks')}
{t('Suggested replays to watch')}
}
deadOrRage="dead"
/>
{t('Most Rage Clicks')}
{t('Suggested replays to watch')}
}
deadOrRage="rage"
/>
);
}
function AccordionWidget({
clickType,
deadOrRage,
header,
}: {
clickType: 'count_dead_clicks' | 'count_rage_clicks';
deadOrRage: 'dead' | 'rage';
header: ReactNode;
}) {
const [selectedListIndex, setSelectListIndex] = useState(-1);
const {isLoading, isError, data} = useDeadRageSelectors({
per_page: 3,
sort: `-${clickType}`,
cursor: undefined,
prefix: 'selector_',
isWidgetData: true,
});
const location = useLocation();
const filteredData = data.filter(d => (d[clickType] ?? 0) > 0);
const clickColor = deadOrRage === 'dead' ? 'yellow300' : 'red300';
return (
{header}
{isLoading ? (
) : isError || (!isLoading && filteredData.length === 0) ? (
{t('No results found')}
{tct(
'There were no [type] clicks within this timeframe. Expand your timeframe, or increase your replay sample rate to see more data.',
{type: deadOrRage}
)}
) : (
{
const selectorQuery = `${deadOrRage}.selector:"${transformSelectorQuery(
d.dom_element.fullSelector
)}"`;
return {
header: () => (
),
content: () => (
),
};
})}
/>
)}
);
}
function AccordionItemHeader({
count,
clickColor,
selector,
selectorQuery,
id,
}: {
clickColor: ColorOrAlias;
count: number;
id: number;
selector: string;
selectorQuery: string;
}) {
const clickCount = (
{count}
);
return (
{clickCount}
);
}
function SearchButton({
label,
sort,
path,
...props
}: {
label: ReactNode;
path: string;
sort: string;
} & Omit, 'size' | 'to'>) {
const location = useLocation();
const organization = useOrganization();
return (
{label}
);
}
const SplitCardContainer = styled('div')`
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: max-content;
grid-auto-flow: column;
gap: 0 ${space(2)};
align-items: stretch;
`;
const ClickCount = styled(TextOverflow)`
color: ${p => p.theme.gray400};
display: grid;
grid-template-columns: auto auto;
gap: ${space(0.75)};
align-items: center;
`;
const StyledHeaderContainer = styled(HeaderContainer)`
grid-auto-flow: row;
align-items: center;
grid-template-rows: auto;
grid-template-columns: 30px auto;
`;
const LeftAlignedContentContainer = styled(ContentContainer)`
justify-content: flex-start;
`;
const CenteredContentContainer = styled(ContentContainer)`
justify-content: center;
`;
const StyledButton = styled(LinkButton)`
width: 100%;
border-radius: ${p => p.theme.borderRadiusBottom};
padding: ${space(3)};
border-bottom: none;
border-left: none;
border-right: none;
font-size: ${p => p.theme.fontSizeMedium};
`;
const StyledAccordionHeader = styled('div')`
display: grid;
grid-template-columns: 1fr max-content;
flex: 1;
`;
const TitleTooltipContainer = styled('div')`
display: flex;
gap: ${space(1)};
align-items: center;
`;
const StyledWidgetHeader = styled(HeaderTitleLegend)`
display: grid;
justify-content: space-between;
align-items: center;
`;
const StyledWidgetContainer = styled(WidgetContainer)`
margin-bottom: 0;
padding-top: ${space(1.5)};
`;
export const RightAlignedCell = styled('div')`
text-align: right;
display: flex;
align-items: center;
justify-content: center;
gap: ${space(1)};
padding-left: ${space(1)};
`;
const EmptySubtitle = styled('div')`
font-size: ${p => p.theme.fontSizeMedium};
line-height: 1.6em;
padding-left: ${space(1)};
padding-right: ${space(1)};
`;
const LoadingContainer = styled(ContentContainer)`
gap: ${space(0.25)};
padding: ${space(1)} ${space(0.5)} 3px ${space(0.5)};
`;
const StyledPlaceholder = styled(Placeholder)`
height: 34px;
`;
const EmptyHeader = styled(Flex)`
justify-content: center;
align-items: center;
gap: ${space(1.5)};
color: ${p => p.theme.gray300};
`;
export default DeadRageSelectorCards;