feat(starfish): Highlight TTFD and link to docs when 0 (#59997)

Underline instances of 0ms TTFD and prompt user through tooltip to visit
docs and learn how to instrument their application.

Only highlights the value if there is one project selected, and it is
either android or ios.

Author: narsaynorath

static/app/views/starfish/views/screens/screensTable.tsx

@@ -1,11 +1,13 @@
-import {Fragment} from 'react';
+import {Fragment, useMemo} from 'react';
 import * as qs from 'query-string';
 
 import GridEditable, {GridColumnHeader} from 'sentry/components/gridEditable';
 import SortLink from 'sentry/components/gridEditable/sortLink';
+import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import Pagination from 'sentry/components/pagination';
-import {t} from 'sentry/locale';
+import {Tooltip} from 'sentry/components/tooltip';
+import {t, tct} from 'sentry/locale';
 import {
   TableData,
   TableDataRow,
@@ -16,6 +18,8 @@ import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
 import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
+import usePageFilters from 'sentry/utils/usePageFilters';
+import useProjects from 'sentry/utils/useProjects';
 import TopResultsIndicator from 'sentry/views/discover/table/topResultsIndicator';
 import {TableColumn} from 'sentry/views/discover/table/types';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
@@ -32,11 +36,20 @@ type Props = {
 
 export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
   const location = useLocation();
+  const {selection} = usePageFilters();
+  const {projects} = useProjects();
   const organization = useOrganization();
   const {primaryRelease, secondaryRelease} = useReleaseSelection();
   const truncatedPrimary = formatVersionAndCenterTruncate(primaryRelease ?? '', 15);
   const truncatedSecondary = formatVersionAndCenterTruncate(secondaryRelease ?? '', 15);
 
+  const project = useMemo(() => {
+    if (selection.projects.length !== 1) {
+      return null;
+    }
+    return projects.find(p => p.id === String(selection.projects));
+  }, [projects, selection.projects]);
+
   const eventViewColumns = eventView.getColumns();
 
   const columnNameMap = {
@@ -97,6 +110,34 @@ export function ScreensTable({data, eventView, isLoading, pageLinks}: Props) {
       organization,
       unit: data?.meta.units?.[column.key],
     });
+    if (
+      column.key.includes('time_to_full_display') &&
+      row[column.key] === 0 &&
+      project?.platform &&
+      ['android', 'apple-ios'].includes(project.platform)
+    ) {
+      const docsUrl =
+        project?.platform === 'android'
+          ? 'https://docs.sentry.io/platforms/android/performance/instrumentation/automatic-instrumentation/#time-to-full-display'
+          : 'https://docs.sentry.io/platforms/apple/guides/ios/performance/instrumentation/automatic-instrumentation/#time-to-full-display';
+      return (
+        <div style={{textAlign: 'right'}}>
+          <Tooltip
+            title={tct(
+              'Measuring TTFD requires manual instrumentation in your application. To learn how to collect TTFD, see the documentation [link].',
+              {
+                link: <ExternalLink href={docsUrl}>{t('here')}</ExternalLink>,
+              }
+            )}
+            showUnderline
+            isHoverable
+          >
+            {rendered}
+          </Tooltip>
+        </div>
+      );
+    }
+
     return rendered;
   }