import {Fragment} from 'react';
import {browserHistory} from 'react-router';
import styled from '@emotion/styled';
import {ModalRenderProps, openModal} from 'sentry/actionCreators/modal';
import {Button} from 'sentry/components/button';
import ExternalLink from 'sentry/components/links/externalLink';
import {ReplayNewFeatureBanner} from 'sentry/components/replays/replayNewFeatureBanner';
import {IconBroadcast} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import useDismissAlert from 'sentry/utils/useDismissAlert';
import {useLocation} from 'sentry/utils/useLocation';
const REPLAY_CLICK_SEARCH_FEATURE_BANNER_KEY = 'new-feature-banner-replays-click-search';
interface Props {
needSdkUpdates: boolean;
}
export function ReplaySearchAlert({needSdkUpdates}: Props) {
const location = useLocation();
const {dismiss, isDismissed} = useDismissAlert({
key: REPLAY_CLICK_SEARCH_FEATURE_BANNER_KEY,
});
if (isDismissed) {
return null;
}
const heading = (
{tct('Introducing [feature]', {
feature: (
{t('Click Search')}
),
})}
);
const description = (
{tct(
`Find replays which captured specific DOM elements using our new search key [key]`,
{
key: {t("'click'")},
}
)}
);
const handleTryNow = () => {
browserHistory.push({
...location,
query: {
...location.query,
query: 'click.tag:button',
},
});
dismiss();
};
const handleLearnMore = () => {
openModal(LearnMoreModal);
};
if (isDismissed) {
return null;
}
if (needSdkUpdates) {
return (
{t('Learn More')}
}
/>
);
}
return (
{t('Try Now')}
}
/>
);
}
function LearnMoreModal({Header, Body, Footer, closeModal}: ModalRenderProps) {
return (
{t('Click Search')}
{t(
'Search by user click is a new feature which allows you to search for replays by DOM element - or in other words - where users have clicked to interact with specific parts of your web app.'
)}