1-3122: refetch CR notifs on actions (#8767)

Refetch actionable change requests whenever you perform an action on a
change request. This ensures that the change request notifications are
up-to-date for you. Of course, it can still get out of sync if someone
else performs an action on the change request, but that's more of an
edge case.

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx

@@ -33,6 +33,7 @@ import {
 import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog';
 import type { PlausibleChangeRequestState } from '../changeRequest.types';
 import { useNavigate } from 'react-router-dom';
+import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests';
 
 const StyledAsideBox = styled(Box)(({ theme }) => ({
     width: '30%',
@@ -89,6 +90,8 @@ export const ChangeRequestOverview: FC = () => {
     const { user } = useAuthUser();
     const { isAdmin } = useContext(AccessContext);
     const [commentText, setCommentText] = useState('');
+    const { refetch: refetchActionableChangeRequests } =
+        useActionableChangeRequests(projectId);
 
     const id = useRequiredPathParam('id');
     const { data: changeRequest, refetchChangeRequest } = useChangeRequest(
@@ -130,6 +133,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowApplyScheduledDialog(false);
             await refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -152,6 +156,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowScheduleChangeDialog(false);
             refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -191,6 +196,7 @@ export const ChangeRequestOverview: FC = () => {
             setShowCancelDialog(false);
             await refetchChangeRequest();
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
             setToastData({
                 type: 'success',
                 title: 'Success',
@@ -219,6 +225,7 @@ export const ChangeRequestOverview: FC = () => {
                 text: 'Changes rejected',
             });
             refetchChangeRequestOpen();
+            refetchActionableChangeRequests();
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         } finally {
@@ -233,6 +240,7 @@ export const ChangeRequestOverview: FC = () => {
                 state: 'Approved',
             });
             await refetchChangeRequest();
+            refetchActionableChangeRequests();
             refetchChangeRequestOpen();
             setToastData({
                 type: 'success',

frontend/src/hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests.ts

@@ -5,12 +5,13 @@ import { useEnterpriseSWR } from '../useEnterpriseSWR/useEnterpriseSWR';
 
 interface IUseActionableChangeRequestsOutput {
     total?: number;
+    refetch: () => void;
 }
 
 export const useActionableChangeRequests = (
     projectId: string,
 ): IUseActionableChangeRequestsOutput => {
-    const { data } = useEnterpriseSWR<ActionableChangeRequestsSchema>(
+    const { data, mutate } = useEnterpriseSWR<ActionableChangeRequestsSchema>(
         { total: 0 },
         formatApiPath(
             `api/admin/projects/${projectId}/change-requests/actionable`,
@@ -20,6 +21,7 @@ export const useActionableChangeRequests = (
 
     return {
         total: data?.total,
+        refetch: mutate,
     };
 };