M-029 Pass 1 batch 4: migrate 5 more 3-mutation pages to useTrackedMutation

Drains 15 more useMutation sites (33 -> 18). All five pages follow the same

create/update/delete CRUD shape — invalidates the page's primary list query.

Pages migrated:

  - OwnersPage.tsx           CRUD invalidates [['owners']]

                              (queryClient kept — modal onSuccess props use it)

  - PoliciesPage.tsx         toggle/delete/create invalidates [['policies']]

                              (queryClient kept — modal onSuccess prop uses it)

  - ProfilesPage.tsx         CRUD invalidates [['profiles']]

                              (queryClient kept — modal onSuccess prop uses it)

  - RenewalPoliciesPage.tsx  CRUD invalidates [['renewal-policies']]

                              (queryClient + useQueryClient dropped)

  - TeamsPage.tsx            CRUD invalidates [['teams']]

                              (queryClient kept — modal onSuccess props use it)

Verification:

  legacy useMutation count   33 -> 18 (-15)

  useTrackedMutation count   23 -> 38 (+15)

Closes 38 of 56 sites toward M-029 Pass 1 completion (68%).
This commit is contained in:
Shankar
2026-04-27 02:48:35 +00:00
parent 42726879ab
commit d5541fef60
5 changed files with 40 additions and 36 deletions
+8 -8
View File
@@ -1,5 +1,6 @@
import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useQuery } from '@tanstack/react-query';
import { useTrackedMutation } from '../hooks/useTrackedMutation';
import {
getRenewalPolicies,
createRenewalPolicy,
@@ -174,7 +175,6 @@ function PolicyFormModal({ title, initial, isOpen, onClose, onSubmit, isSaving,
}
export default function RenewalPoliciesPage() {
const queryClient = useQueryClient();
const [showCreate, setShowCreate] = useState(false);
const [editing, setEditing] = useState<RenewalPolicy | null>(null);
@@ -183,25 +183,25 @@ export default function RenewalPoliciesPage() {
queryFn: () => getRenewalPolicies(),
});
const createMutation = useMutation({
const createMutation = useTrackedMutation({
mutationFn: createRenewalPolicy,
invalidates: [['renewal-policies']],
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['renewal-policies'] });
setShowCreate(false);
},
});
const updateMutation = useMutation({
const updateMutation = useTrackedMutation({
mutationFn: ({ id, data }: { id: string; data: Partial<RenewalPolicy> }) => updateRenewalPolicy(id, data),
invalidates: [['renewal-policies']],
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['renewal-policies'] });
setEditing(null);
},
});
const deleteMutation = useMutation({
const deleteMutation = useTrackedMutation({
mutationFn: deleteRenewalPolicy,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['renewal-policies'] }),
invalidates: [['renewal-policies']],
// Backend surfaces ErrRenewalPolicyInUse as a 409. We surface as an
// alert so the operator sees "this policy is still attached to N
// certificates" and can re-target those certs to another policy