ref(project-creation): Introduce useCreateProjectRules hook (#92186)

This hook was introduced to follow our standard use of react-query and
will be used in this
[PR](#92183).

Author: priscilawebdev

static/app/components/onboarding/useCreateProjectRules.ts

@@ -0,0 +1,35 @@
+import {useMutation} from 'sentry/utils/queryClient';
+import type RequestError from 'sentry/utils/requestError/requestError';
+import useApi from 'sentry/utils/useApi';
+import useOrganization from 'sentry/utils/useOrganization';
+import type {RequestDataFragment} from 'sentry/views/projectInstall/issueAlertOptions';
+
+interface Variables
+  extends Partial<
+    Pick<
+      RequestDataFragment,
+      'conditions' | 'actions' | 'actionMatch' | 'frequency' | 'name'
+    >
+  > {
+  projectSlug: string;
+}
+
+export function useCreateProjectRules() {
+  const api = useApi({persistInFlight: true});
+  const organization = useOrganization();
+  // TODO(priscila): Introduce better response types
+  return useMutation<{id: string}, RequestError, Variables>({
+    mutationFn: ({projectSlug, name, conditions, actions, actionMatch, frequency}) => {
+      return api.requestPromise(`/projects/${organization.slug}/${projectSlug}/rules/`, {
+        method: 'POST',
+        data: {
+          name,
+          conditions,
+          actions,
+          actionMatch,
+          frequency,
+        },
+      });
+    },
+  });
+}

static/app/views/projectInstall/createProject.tsx

@@ -19,6 +19,7 @@ import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
 import {SupportedLanguages} from 'sentry/components/onboarding/frameworkSuggestionModal';
 import {useCreateProject} from 'sentry/components/onboarding/useCreateProject';
+import {useCreateProjectRules} from 'sentry/components/onboarding/useCreateProjectRules';
 import type {Platform} from 'sentry/components/platformPicker';
 import PlatformPicker from 'sentry/components/platformPicker';
 import TeamSelector from 'sentry/components/teamSelector';
@@ -140,6 +141,7 @@ export function CreateProject() {
   const {createNotificationAction, notificationProps} = useCreateNotificationAction();
   const canUserCreateProject = useCanCreateProject();
   const createProject = useCreateProject();
+  const createProjectRules = useCreateProjectRules();
   const {teams} = useTeams();
   const accessTeams = teams.filter((team: Team) => team.access.includes('team:admin'));
   const referrer = decodeScalar(location.query.referrer);
@@ -157,19 +159,14 @@ export function CreateProject() {
       const ruleIds = [];
 
       if (alertRuleConfig?.shouldCreateCustomRule) {
-        const ruleData = await api.requestPromise(
-          `/projects/${organization.slug}/${project.slug}/rules/`,
-          {
-            method: 'POST',
-            data: {
-              name: project.name,
-              conditions: alertRuleConfig?.conditions,
-              actions: alertRuleConfig?.actions,
-              actionMatch: alertRuleConfig?.actionMatch,
-              frequency: alertRuleConfig?.frequency,
-            },
-          }
-        );
+        const ruleData = await createProjectRules.mutateAsync({
+          projectSlug: project.slug,
+          name: project.name,
+          conditions: alertRuleConfig?.conditions,
+          actions: alertRuleConfig?.actions,
+          actionMatch: alertRuleConfig?.actionMatch,
+          frequency: alertRuleConfig?.frequency,
+        });
 
         ruleIds.push(ruleData.id);
       }
@@ -189,7 +186,7 @@ export function CreateProject() {
 
       return ruleIds;
     },
-    [organization, api, createNotificationAction]
+    [createNotificationAction, createProjectRules]
   );
 
   const autoFill = useMemo(() => {

static/app/views/projectInstall/issueAlertNotificationOptions.tsx

@@ -2,13 +2,13 @@ import {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
 import MultipleCheckbox from 'sentry/components/forms/controls/multipleCheckbox';
+import {useCreateProjectRules} from 'sentry/components/onboarding/useCreateProjectRules';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {type IntegrationAction, IssueAlertActionType} from 'sentry/types/alerts';
 import type {OrganizationIntegration} from 'sentry/types/integrations';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
-import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import SetupMessagingIntegrationButton, {
   MessagingIntegrationAnalyticsView,
@@ -77,8 +77,8 @@ export type IssueAlertNotificationProps = {
 };
 
 export function useCreateNotificationAction() {
-  const api = useApi();
   const organization = useOrganization();
+  const createProjectRules = useCreateProjectRules();
 
   const messagingIntegrationsQuery = useApiQuery<OrganizationIntegration[]>(
     [`/organizations/${organization.slug}/integrations/?integrationType=messaging`],
@@ -174,18 +174,16 @@ export function useCreateNotificationAction() {
           return undefined;
       }
 
-      return api.requestPromise(`/projects/${organization.slug}/${projectSlug}/rules/`, {
-        method: 'POST',
-        data: {
-          name,
-          conditions,
-          actions: [integrationAction],
-          actionMatch,
-          frequency,
-        },
+      return createProjectRules.mutateAsync({
+        projectSlug,
+        name,
+        conditions,
+        actions: [integrationAction],
+        actionMatch,
+        frequency,
       });
     },
-    [actions, api, provider, integration, channel, organization.slug]
+    [actions, provider, integration, channel, createProjectRules]
   );
 
   return {