upcoming: [M3-7530] - Restrict proxy users from updating username/email

packages/manager/.changeset/pr-10103-upcoming-features-1706069199851.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Restrict proxy users from updating username/email ([#10103](https://github.com/linode/manager/pull/10103))

packages/manager/src/components/ActionsPanel/ActionsPanel.tsx

@@ -8,8 +8,8 @@ import { Box, BoxProps } from '../Box';
 
 interface ActionButtonsProps extends ButtonProps {
   'data-node-idx'?: number;
-  'data-testid'?: string;
   'data-qa-form-data-loading'?: boolean;
+  'data-testid'?: string;
   label: string;
 }
 
@@ -78,9 +78,6 @@ const StyledBox = styled(Box)(({ theme: { spacing } }) => ({
   '& > :only-child': {
     marginRight: 0,
   },
-  '& > button': {
-    marginBottom: spacing(1),
-  },
   justifyContent: 'flex-end',
   marginTop: spacing(1),
   paddingBottom: spacing(1),

packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.tsx

@@ -1,5 +1,4 @@
 import { APIError } from '@linode/api-v4/lib/types';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -69,9 +68,11 @@ export const SingleTextFieldForm = React.memo((props: Props) => {
       <Box
         sx={(theme) => ({
           [theme.breakpoints.down('md')]: {
+            alignItems: 'flex-start',
             flexDirection: 'column',
           },
         })}
+        alignItems="flex-end"
         display="flex"
         justifyContent="space-between"
       >
@@ -88,7 +89,6 @@ export const SingleTextFieldForm = React.memo((props: Props) => {
           label={label}
           onBlur={(e) => setValue(e.target.value)}
           onChange={(e) => setValue(e.target.value)}
-          tooltipText={tooltipText ? tooltipText : undefined}
           trimmed={trimmed}
           value={value}
         />
@@ -98,12 +98,17 @@ export const SingleTextFieldForm = React.memo((props: Props) => {
             label: `Update ${label}`,
             loading: submitting,
             onClick: handleSubmit,
-            sx: (theme: Theme) => ({
+            sx: {
+              margin: '0',
               minWidth: 180,
-              [theme.breakpoints.up('md')]: {
-                marginTop: 2,
-              },
-            }),
+            },
+            tooltipText:
+              tooltipText && typeof tooltipText === 'string'
+                ? tooltipText
+                : undefined,
+          }}
+          sx={{
+            padding: 0,
           }}
         />
       </Box>

packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.test.tsx

@@ -0,0 +1,34 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { profileFactory } from 'src/factories/profile';
+import { DisplaySettings } from 'src/features/Profile/DisplaySettings/DisplaySettings';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+const queryMocks = vi.hoisted(() => ({
+  useProfile: vi.fn().mockReturnValue({}),
+}));
+
+vi.mock('src/queries/profile', async () => {
+  const actual = await vi.importActual('src/queries/profile');
+  return {
+    ...actual,
+    useProfile: queryMocks.useProfile,
+  };
+});
+
+describe('DisplaySettings component', () => {
+  it('should disable SingleTextFieldForm components based on isProxyUser', () => {
+    queryMocks.useProfile.mockReturnValue({
+      data: profileFactory.build({ user_type: 'proxy' }),
+    });
+
+    renderWithTheme(<DisplaySettings />);
+
+    const usernameInput = screen.getByLabelText('Username');
+    expect(usernameInput).toHaveAttribute('disabled');
+
+    const emailInput = screen.getByLabelText('Email');
+    expect(emailInput).toHaveAttribute('disabled');
+  });
+});

packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx

@@ -30,6 +30,8 @@ export const DisplaySettings = () => {
   const location = useLocation<{ focusEmail: boolean }>();
   const emailRef = React.createRef<HTMLInputElement>();
 
+  const isProxyUser = profile?.user_type === 'proxy';
+
   React.useEffect(() => {
     if (location.state?.focusEmail && emailRef.current) {
       emailRef.current.focus();
@@ -63,6 +65,8 @@ export const DisplaySettings = () => {
     </>
   );
 
+  const restrictedProxyUserTooltip = 'Proxy users cannot update this field.';
+
   return (
     <Paper>
       <Box
@@ -102,9 +106,11 @@ export const DisplaySettings = () => {
         tooltipText={
           profile?.restricted
             ? 'Restricted users cannot update their username. Please contact an account administrator.'
+            : isProxyUser
+            ? restrictedProxyUserTooltip
             : undefined
         }
-        disabled={profile?.restricted}
+        disabled={profile?.restricted || isProxyUser}
         initialValue={profile?.username}
         key={usernameResetToken}
         label="Username"
@@ -125,11 +131,13 @@ export const DisplaySettings = () => {
             refetch();
           }
         }}
+        disabled={isProxyUser}
         initialValue={profile?.email}
         inputRef={emailRef}
         key={emailResetToken}
         label="Email"
         submitForm={updateEmail}
+        tooltipText={isProxyUser ? restrictedProxyUserTooltip : undefined}
         trimmed
         type="email"
       />

packages/manager/src/features/Profile/DisplaySettings/TimezoneForm.tsx

@@ -1,4 +1,4 @@
-import { Theme, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
@@ -86,7 +86,17 @@ export const TimezoneForm = (props: Props) => {
           </Typography>
         </StyledLoggedInAsCustomerNotice>
       ) : null}
-      <StyledRootContainer display="flex" justifyContent="space-between">
+      <StyledRootContainer
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            alignItems: 'flex-start',
+            flexDirection: 'column',
+          },
+        })}
+        alignItems="flex-end"
+        display="flex"
+        justifyContent="space-between"
+      >
         <Select
           data-qa-tz-select
           defaultValue={defaultTimeZone}
@@ -104,10 +114,13 @@ export const TimezoneForm = (props: Props) => {
             loading: isLoading,
             onClick: onSubmit,
             sx: {
-              marginTop: (theme: Theme) => (theme.breakpoints.up('md') ? 2 : 0),
+              margin: '0',
               minWidth: 180,
             },
           }}
+          sx={{
+            padding: 0,
+          }}
         />
       </StyledRootContainer>
     </>