fix(metric-alerts): Ensure that changing project in create alert page is saved correctly (#54052)

Author: malwilley

static/app/views/alerts/rules/metric/ruleForm.spec.tsx

@@ -4,6 +4,7 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
 import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
+import ProjectsStore from 'sentry/stores/projectsStore';
 import {metric} from 'sentry/utils/analytics';
 import RuleFormContainer from 'sentry/views/alerts/rules/metric/ruleForm';
 import {permissionAlertText} from 'sentry/views/settings/project/permissionAlert';
@@ -38,6 +39,7 @@ describe('Incident Rules Form', () => {
     });
     organization = initialData.organization;
     project = initialData.project;
+    ProjectsStore.loadInitialData([project]);
     routerContext = initialData.routerContext;
     MockApiClient.addMockResponse({
       url: '/organizations/org-slug/tags/',
@@ -113,10 +115,22 @@ describe('Incident Rules Form', () => {
   describe('Creating a new rule', () => {
     let createRule;
     beforeEach(() => {
+      ProjectsStore.loadInitialData([
+        project,
+        {
+          ...project,
+          id: '10',
+          slug: 'project-slug-2',
+        },
+      ]);
       createRule = MockApiClient.addMockResponse({
         url: '/organizations/org-slug/alert-rules/',
         method: 'POST',
       });
+      MockApiClient.addMockResponse({
+        url: '/projects/org-slug/project-slug-2/environments/',
+        body: [],
+      });
     });
 
     /**
@@ -160,6 +174,43 @@ describe('Incident Rules Form', () => {
       expect(metric.startTransaction).toHaveBeenCalledWith({name: 'saveAlertRule'});
     });
 
+    it('can create a rule for a different project', async () => {
+      const rule = TestStubs.MetricRule();
+      createWrapper({
+        rule: {
+          ...rule,
+          id: undefined,
+          eventTypes: ['default'],
+        },
+      });
+
+      // Clear field
+      await userEvent.clear(screen.getByPlaceholderText('Enter Alert Name'));
+
+      // Enter in name so we can submit
+      await userEvent.type(
+        screen.getByPlaceholderText('Enter Alert Name'),
+        'Incident Rule'
+      );
+
+      // Change project
+      await userEvent.click(screen.getByText('project-slug'));
+      await userEvent.click(screen.getByText('project-slug-2'));
+
+      await userEvent.click(screen.getByLabelText('Save Rule'));
+
+      expect(createRule).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          data: expect.objectContaining({
+            name: 'Incident Rule',
+            projects: ['project-slug-2'],
+          }),
+        })
+      );
+      expect(metric.startTransaction).toHaveBeenCalledWith({name: 'saveAlertRule'});
+    });
+
     it('creates a rule with generic_metrics dataset', async () => {
       organization.features = [...organization.features, 'mep-rollout-flag'];
       const rule = TestStubs.MetricRule();

static/app/views/alerts/rules/metric/ruleForm.tsx

@@ -634,6 +634,7 @@ class RuleFormContainer extends DeprecatedAsyncComponent<Props, State> {
         {
           ...rule,
           ...model.getTransformedData(),
+          projects: [project.slug],
           triggers: sanitizedTriggers,
           resolveThreshold: isEmpty(resolveThreshold) ? null : resolveThreshold,
           thresholdType,