fix(aci): Avoid crashing page when queryObj is null (#94377)

I guess we have a few metric issues that are missing their snuba query.
Avoids crashing page and displays query missing error

Author: scttcper

static/app/types/workflowEngine/detectors.tsx

@@ -32,7 +32,7 @@ export interface SnubaQueryDataSource extends BaseDataSource {
     snubaQuery: SnubaQuery;
     status: number;
     subscription: string;
-  };
+  } | null;
   type: 'snuba_query_subscription';
 }
 

static/app/views/detectors/components/detailsPanel.tsx

@@ -12,6 +12,10 @@ interface DetailsPanelProps {
 }
 
 function SnubaQueryDetails({dataSource}: {dataSource: SnubaQueryDataSource}) {
+  if (!dataSource.queryObj) {
+    return <Container>{t('Query not found.')}</Container>;
+  }
+
   return (
     <Container>
       <Flex direction="column" gap={space(0.5)}>

static/app/views/detectors/components/detectorLink.tsx

@@ -122,6 +122,9 @@ function DataSourceDetails({dataSource}: {dataSource: DataSource}) {
   const type = dataSource.type;
   switch (type) {
     case 'snuba_query_subscription':
+      if (!dataSource.queryObj) {
+        return <DetailItem>{t('Query not found.')}</DetailItem>;
+      }
       return (
         <Fragment>
           <DetailItem>{dataSource.queryObj.snubaQuery.environment}</DetailItem>

static/app/views/detectors/detail.spec.tsx

@@ -17,9 +17,9 @@ describe('DetectorDetails', function () {
   const ownerTeam = TeamFixture();
   const dataSource = SnubaQueryDataSourceFixture({
     queryObj: {
-      ...defaultDataSource.queryObj,
+      ...defaultDataSource.queryObj!,
       snubaQuery: {
-        ...defaultDataSource.queryObj.snubaQuery,
+        ...defaultDataSource.queryObj!.snubaQuery,
         query: 'test',
         environment: 'test-environment',
       },
@@ -65,10 +65,10 @@ describe('DetectorDetails', function () {
       await screen.findByRole('heading', {name: snubaQueryDetector.name})
     ).toBeInTheDocument();
     // Displays the snuba query
-    expect(screen.getByText(dataSource.queryObj.snubaQuery.query)).toBeInTheDocument();
+    expect(screen.getByText(dataSource.queryObj!.snubaQuery.query)).toBeInTheDocument();
     // Displays the environment
     expect(
-      screen.getByText(dataSource.queryObj.snubaQuery.environment!)
+      screen.getByText(dataSource.queryObj!.snubaQuery.environment!)
     ).toBeInTheDocument();
     // Displays the owner team
     expect(screen.getByText(`Assign to #${ownerTeam.slug}`)).toBeInTheDocument();

static/app/views/detectors/detail.tsx

@@ -47,7 +47,7 @@ const priorities: Priority[] = [
 
 function getDetectorEnvironment(detector: Detector) {
   return detector.dataSources?.find(ds => ds.type === 'snuba_query_subscription')
-    ?.queryObj.snubaQuery.environment;
+    ?.queryObj?.snubaQuery.environment;
 }
 
 function AssignToTeam({teamId}: {teamId: string}) {