feat: [M3-7526] - Add setHeader to GET /profile endpoint

packages/api-v4/.changeset/pr-9987-added-1702566330400.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+Add setHeaders to GET profile/ endpoint ([#9987](https://github.com/linode/manager/pull/9987))

packages/api-v4/src/profile/profile.ts

@@ -10,6 +10,7 @@ import Request, {
   setData,
   setMethod,
   setParams,
+  setHeaders,
   setURL,
   setXFilter,
 } from '../request';
@@ -24,15 +25,21 @@ import {
   SendPhoneVerificationCodePayload,
   VerifyVerificationCodePayload,
 } from './types';
+import type { RequestOptions } from '../types';
 
 /**
  * getProfile
  *
  * Return the current (logged in) user's profile.
  *
  */
-export const getProfile = () =>
-  Request<Profile>(setURL(`${API_ROOT}/profile`), setMethod('GET'));
+export const getProfile = ({ headers }: RequestOptions = {}) => {
+  return Request<Profile>(
+    setURL(`${API_ROOT}/profile`),
+    setMethod('GET'),
+    setHeaders(headers)
+  );
+};
 
 /**
  * updateProfile

packages/manager/.changeset/pr-9987-upcoming-features-1702333742297.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Add setHeaders to GET profile/ endpoint ([#9987](https://github.com/linode/manager/pull/9987))

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -1,7 +1,6 @@
 import { PaymentMethod } from '@linode/api-v4';
 import { makePayment } from '@linode/api-v4/lib/account';
 import { APIWarning } from '@linode/api-v4/lib/types';
-import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -16,6 +15,7 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { InputAdornment } from 'src/components/InputAdornment';
 import { LinearProgress } from 'src/components/LinearProgress';
 import { Notice } from 'src/components/Notice/Notice';
+import { Stack } from 'src/components/Stack';
 import { SupportLink } from 'src/components/SupportLink';
 import { TextField } from 'src/components/TextField';
 import { TooltipIcon } from 'src/components/TooltipIcon';

packages/manager/src/features/GlobalNotifications/EmailBounce.tsx

@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Unstable_Grid2';
-import { useTheme, Theme } from '@mui/material/styles';
+import { Theme, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -11,6 +11,7 @@ import { Typography } from 'src/components/Typography';
 import { useAccount, useMutateAccount } from 'src/queries/account';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';
 import { useMutateProfile, useProfile } from 'src/queries/profile';
+
 import { StyledGrid } from './EmailBounce.styles';
 
 // =============================================================================

packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx

@@ -4,10 +4,10 @@ import {
 } from '@linode/api-v4/lib/support';
 import { APIError } from '@linode/api-v4/lib/types';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
 import { update } from 'ramda';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
+import { makeStyles } from 'tss-react/mui';
 
 import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';

packages/manager/src/hooks/useInitialRequests.ts

@@ -70,7 +70,7 @@ export const useInitialRequests = () => {
 
       // Username and whether a user is restricted
       queryClient.prefetchQuery({
-        queryFn: getProfile,
+        queryFn: () => getProfile(),
         queryKey: 'profile',
       }),
 

packages/manager/src/queries/profile.ts

@@ -37,13 +37,16 @@ import { Grants } from '../../../api-v4/lib';
 import { queryKey as accountQueryKey } from './account';
 import { queryPresets } from './base';
 
+import type { RequestOptions } from '@linode/api-v4';
+
 export const queryKey = 'profile';
 
-export const useProfile = (givenProfile?: Profile) =>
-  useQuery<Profile, APIError[]>(queryKey, getProfile, {
+export const useProfile = ({ headers }: RequestOptions = {}) => {
+  const key = [queryKey, headers];
+  return useQuery<Profile, APIError[]>(key, () => getProfile({ headers }), {
     ...queryPresets.oneTimeFetch,
-    initialData: givenProfile,
   });
+};
 
 export const useMutateProfile = () => {
   const queryClient = useQueryClient();
@@ -57,24 +60,28 @@ export const updateProfileData = (
   newData: Partial<Profile>,
   queryClient: QueryClient
 ): void => {
-  queryClient.setQueryData(queryKey, (oldData: Profile) => ({
+  queryClient.setQueryData([queryKey, undefined], (oldData: Profile) => ({
     ...oldData,
     ...newData,
   }));
 };
 
 export const useGrants = () => {
   const { data: profile } = useProfile();
-  return useQuery<Grants, APIError[]>([queryKey, 'grants'], listGrants, {
-    ...queryPresets.oneTimeFetch,
-    enabled: Boolean(profile?.restricted),
-  });
+  return useQuery<Grants, APIError[]>(
+    [queryKey, undefined, 'grants'],
+    listGrants,
+    {
+      ...queryPresets.oneTimeFetch,
+      enabled: Boolean(profile?.restricted),
+    }
+  );
 };
 
 export const getProfileData = (queryClient: QueryClient) =>
-  queryClient.getQueryData<Profile>(queryKey);
+  queryClient.getQueryData<Profile>([queryKey, undefined]);
 export const getGrantData = (queryClient: QueryClient) =>
-  queryClient.getQueryData<Grants>([queryKey, 'grants']);
+  queryClient.getQueryData<Grants>([queryKey, undefined, 'grants']);
 
 export const useSMSOptOutMutation = () => {
   const queryClient = useQueryClient();
@@ -101,7 +108,7 @@ export const useSSHKeysQuery = (
   enabled = true
 ) =>
   useQuery(
-    [queryKey, 'ssh-keys', 'paginated', params, filter],
+    [queryKey, {}, 'ssh-keys', 'paginated', params, filter],
     () => getSSHKeys(params, filter),
     {
       enabled,
@@ -115,7 +122,7 @@ export const useCreateSSHKeyMutation = () => {
     createSSHKey,
     {
       onSuccess() {
-        queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+        queryClient.invalidateQueries([queryKey, undefined, 'ssh-keys']);
         // also invalidate the /account/users data because that endpoint returns some SSH key data
         queryClient.invalidateQueries([accountQueryKey, 'users']);
       },
@@ -129,7 +136,7 @@ export const useUpdateSSHKeyMutation = (id: number) => {
     (data) => updateSSHKey(id, data),
     {
       onSuccess() {
-        queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+        queryClient.invalidateQueries([queryKey, undefined, 'ssh-keys']);
         // also invalidate the /account/users data because that endpoint returns some SSH key data
         queryClient.invalidateQueries([accountQueryKey, 'users']);
       },
@@ -141,7 +148,7 @@ export const useDeleteSSHKeyMutation = (id: number) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteSSHKey(id), {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+      queryClient.invalidateQueries([queryKey, undefined, 'ssh-keys']);
       // also invalidate the /account/users data because that endpoint returns some SSH key data
       queryClient.invalidateQueries([accountQueryKey, 'users']);
     },
@@ -152,14 +159,14 @@ export const sshKeyEventHandler = (event: EventWithStore) => {
   // This event handler is a bit agressive and will over-fetch, but UX will
   // be great because this will ensure Cloud has up to date data all the time.
 
-  event.queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+  event.queryClient.invalidateQueries([queryKey, undefined, 'ssh-keys']);
   // also invalidate the /account/users data because that endpoint returns some SSH key data
   event.queryClient.invalidateQueries([accountQueryKey, 'users']);
 };
 
 export const useTrustedDevicesQuery = (params?: Params, filter?: Filter) =>
   useQuery<ResourcePage<TrustedDevice>, APIError[]>(
-    [queryKey, 'trusted-devices', 'paginated', params, filter],
+    [queryKey, {}, 'trusted-devices', 'paginated', params, filter],
     () => getTrustedDevices(params, filter),
     {
       keepPreviousData: true,
@@ -170,7 +177,7 @@ export const useRevokeTrustedDeviceMutation = (id: number) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteTrustedDevice(id), {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey, 'trusted-devices']);
+      queryClient.invalidateQueries([queryKey, undefined, 'trusted-devices']);
     },
   });
 };
@@ -179,7 +186,7 @@ export const useDisableTwoFactorMutation = () => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(disableTwoFactor, {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey]);
+      queryClient.invalidateQueries([queryKey, undefined]);
     },
   });
 };