ref(replays): make selector empty messages better (#57402)

Before:
<img width="1162" alt="SCR-20231003-mtmy"
src="https://github.com/getsentry/sentry/assets/56095982/033342be-7f0f-47df-a441-a2282ca63ef4">
<img width="1162" alt="SCR-20231003-mtlj"
src="https://github.com/getsentry/sentry/assets/56095982/ca34b776-d8d7-4c14-aa3e-dc89de5d5187">


After:
<img width="1147" alt="SCR-20231003-mtce"
src="https://github.com/getsentry/sentry/assets/56095982/5ba8bb3e-77ea-4776-b4bf-4cfe1574fb8d">
<img width="1163" alt="SCR-20231003-mszs"
src="https://github.com/getsentry/sentry/assets/56095982/c228e002-93d1-4401-b1f6-9729cdf12e8b">
<img width="1161" alt="SCR-20231003-mswd"
src="https://github.com/getsentry/sentry/assets/56095982/eae6ef94-8ef7-40b2-bc37-07e24e4ff93d">
<img width="1135" alt="SCR-20231003-mrim"
src="https://github.com/getsentry/sentry/assets/56095982/6105dfd6-0dff-4fb1-9a80-69b95358a7e4">

Closes https://github.com/getsentry/team-replay/issues/218

static/app/components/gridEditable/index.tsx

@@ -93,6 +93,7 @@ type GridEditableProps<DataRow, ColumnKey> = {
     ) => React.ReactNode[];
   };
   location: Location;
+  emptyMessage?: React.ReactNode;
   error?: React.ReactNode | null;
   /**
    * Inject a set of buttons into the top of the grid table.
@@ -101,9 +102,10 @@ type GridEditableProps<DataRow, ColumnKey> = {
    */
   headerButtons?: () => React.ReactNode;
   height?: string | number;
-  isLoading?: boolean;
 
+  isLoading?: boolean;
   scrollable?: boolean;
+
   stickyHeader?: boolean;
 
   /**
@@ -412,12 +414,15 @@ class GridEditable<
   }
 
   renderEmptyData() {
+    const {emptyMessage} = this.props;
     return (
       <GridRow>
         <GridBodyCellStatus>
-          <EmptyStateWarning>
-            <p>{t('No results found for your query')}</p>
-          </EmptyStateWarning>
+          {emptyMessage ?? (
+            <EmptyStateWarning>
+              <p>{t('No results found for your query')}</p>
+            </EmptyStateWarning>
+          )}
         </GridBodyCellStatus>
       </GridRow>
     );

static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx

@@ -7,7 +7,7 @@ import LoadingIndicator from 'sentry/components/loadingIndicator';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconCursorArrow} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import useDeadRageSelectors from 'sentry/utils/replays/hooks/useDeadRageSelectors';
 import {ColorOrAlias} from 'sentry/utils/theme';
@@ -110,7 +110,13 @@ function AccordionWidget({
       {isError || (!isLoading && filteredData.length === 0) ? (
         <CenteredContentContainer>
           <EmptyStateWarning>
-            <p>{t('No results found')}</p>
+            <div>{t('No results found')}</div>
+            <EmptySubtitle>
+              {tct(
+                "Once your users start clicking around, you'll see the top selectors that were [type] clicked here.",
+                {type: deadOrRage}
+              )}
+            </EmptySubtitle>
           </EmptyStateWarning>
         </CenteredContentContainer>
       ) : (
@@ -285,4 +291,11 @@ export const RightAlignedCell = styled('div')`
   gap: ${space(1)};
 `;
 
+const EmptySubtitle = styled('div')`
+  font-size: ${p => p.theme.fontSizeMedium};
+  line-height: 1.8em;
+  padding-left: ${space(1)};
+  padding-right: ${space(1)};
+`;
+
 export default DeadRageSelectorCards;

static/app/views/replays/deadRageClick/selectorTable.tsx

@@ -147,12 +147,24 @@ export default function SelectorTable({
     [queryPrefix]
   );
 
+  const selectorEmptyMessage = (
+    <MessageContainer>
+      <Title>{t('No dead or rage clicks found')}</Title>
+      <Subtitle>
+        {t(
+          "Once your users start clicking around, you'll see the top selectors that were dead or rage clicked here."
+        )}
+      </Subtitle>
+    </MessageContainer>
+  );
+
   return (
     <GridEditable
       error={isError}
       isLoading={isLoading}
       data={data ?? []}
       columnOrder={columns}
+      emptyMessage={selectorEmptyMessage}
       columnSortBy={[]}
       stickyHeader
       grid={{
@@ -226,6 +238,21 @@ const StyledTooltip = styled(Tooltip)`
   display: inherit;
 `;
 
+const Subtitle = styled('div')`
+  font-size: ${p => p.theme.fontSizeMedium};
+`;
+
+const Title = styled('div')`
+  font-size: 24px;
+`;
+
+const MessageContainer = styled('div')`
+  display: grid;
+  grid-auto-flow: row;
+  gap: ${space(1)};
+  justify-items: center;
+`;
+
 const WidgetProjectContainer = styled('div')`
   display: flex;
   flex-direction: row;