fix(release-health): Convert project IDs to slugs (#93053)

This is consistent with e.g. tables when a project column is added.
Other datasets handle this project name properly, it seems like only the
sessions data uses the project ID when requesting projects.

We should probably patch the backend but this is an immediate fix for
the feedback. Presumably, we can't join the data to easily get the slug
for the ID from the sessions endpoint.

Author: narsaynorath

static/app/components/modals/widgetViewerModal.tsx

@@ -91,6 +91,7 @@ import {
 } from 'sentry/views/dashboards/widgetCard/dashboardsMEPContext';
 import type {GenericWidgetQueriesChildrenProps} from 'sentry/views/dashboards/widgetCard/genericWidgetQueries';
 import IssueWidgetQueries from 'sentry/views/dashboards/widgetCard/issueWidgetQueries';
+import type {ReleaseWidgetQueriesProps} from 'sentry/views/dashboards/widgetCard/releaseWidgetQueries';
 import ReleaseWidgetQueries from 'sentry/views/dashboards/widgetCard/releaseWidgetQueries';
 import {WidgetCardChartContainer} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
 import WidgetQueries from 'sentry/views/dashboards/widgetCard/widgetQueries';
@@ -627,7 +628,7 @@ function WidgetViewerModal(props: Props) {
     );
   };
 
-  const renderReleaseTable: ReleaseWidgetQueries['props']['children'] = ({
+  const renderReleaseTable: ReleaseWidgetQueriesProps['children'] = ({
     tableResults,
     loading,
     pageLinks,

static/app/views/dashboards/widgetBuilder/releaseWidget/fields.tsx

@@ -64,7 +64,6 @@ export const FIELD_TO_METRICS_EXPRESSION = {
   'crash_free_rate(user)': SessionMetric.USER_CRASH_FREE_RATE,
   'crash_rate(session)': SessionMetric.SESSION_CRASH_RATE,
   'crash_rate(user)': SessionMetric.USER_CRASH_RATE,
-  project: 'project_id',
 };
 
 export const METRICS_EXPRESSION_TO_FIELD = invert(FIELD_TO_METRICS_EXPRESSION);

static/app/views/dashboards/widgetCard/releaseWidgetQueries.tsx

@@ -12,12 +12,14 @@ import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Series} from 'sentry/types/echarts';
 import type {Organization, SessionApiResponse} from 'sentry/types/organization';
+import type {Project} from 'sentry/types/project';
 import type {Release} from 'sentry/types/release';
 import {defined, escapeDoubleQuotes} from 'sentry/utils';
 import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery';
 import {stripDerivedMetricsPrefix} from 'sentry/utils/discover/fields';
 import {TOP_N} from 'sentry/utils/discover/types';
 import {TAG_VALUE_ESCAPE_PATTERN} from 'sentry/utils/queryString';
+import withProjects from 'sentry/utils/withProjects';
 import {ReleasesConfig} from 'sentry/views/dashboards/datasetConfig/releases';
 import type {DashboardFilters, Widget, WidgetQuery} from 'sentry/views/dashboards/types';
 import {DEFAULT_TABLE_LIMIT, DisplayType} from 'sentry/views/dashboards/types';
@@ -35,10 +37,11 @@ import type {
 } from './genericWidgetQueries';
 import GenericWidgetQueries from './genericWidgetQueries';
 
-type Props = {
+export interface ReleaseWidgetQueriesProps {
   api: Client;
   children: (props: GenericWidgetQueriesChildrenProps) => React.JSX.Element;
   organization: Organization;
+  projects: Project[];
   selection: PageFilters;
   widget: Widget;
   cursor?: string;
@@ -49,7 +52,7 @@ type Props = {
     tableResults?: TableDataWithTitle[];
     timeseriesResults?: Series[];
   }) => void;
-};
+}
 
 type State = {
   loading: boolean;
@@ -142,7 +145,7 @@ export function requiresCustomReleaseSorting(query: WidgetQuery): boolean {
   return useMetricsAPI && rawOrderby === 'release';
 }
 
-class ReleaseWidgetQueries extends Component<Props, State> {
+class ReleaseWidgetQueries extends Component<ReleaseWidgetQueriesProps, State> {
   state: State = {
     loading: false,
     errorMessage: undefined,
@@ -157,7 +160,7 @@ class ReleaseWidgetQueries extends Component<Props, State> {
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>): void {
+  componentDidUpdate(prevProps: Readonly<ReleaseWidgetQueriesProps>): void {
     if (
       !requiresCustomReleaseSorting(prevProps.widget.queries[0]!) &&
       requiresCustomReleaseSorting(this.props.widget.queries[0]!) &&
@@ -317,7 +320,7 @@ class ReleaseWidgetQueries extends Component<Props, State> {
   };
 
   afterFetchData = (data: SessionApiResponse) => {
-    const {widget} = this.props;
+    const {widget, projects} = this.props;
     const {releases} = this.state;
 
     const isDescending = widget.queries[0]!.orderby.startsWith('-');
@@ -346,6 +349,15 @@ class ReleaseWidgetQueries extends Component<Props, State> {
       });
       data.groups = data.groups.slice(0, this.limit);
     }
+
+    data.groups.forEach(group => {
+      // Convert the project ID in the grouping results to the project slug
+      // for a more human readable display
+      if (group.by.project) {
+        const project = projects.find(p => p.id === String(group.by.project));
+        group.by.project = project?.slug ?? group.by.project;
+      }
+    });
   };
 
   render() {
@@ -395,4 +407,4 @@ class ReleaseWidgetQueries extends Component<Props, State> {
   }
 }
 
-export default ReleaseWidgetQueries;
+export default withProjects(ReleaseWidgetQueries);