fix(site): allow user to update their name (#13493)

site/src/pages/UserSettingsPage/AccountPage/AccountForm.stories.tsx

@@ -26,6 +26,7 @@ export const Loading: Story = {
     isLoading: true,
   },
 };
+
 export const WithError: Story = {
   args: {
     updateProfileError: mockApiError({
@@ -42,3 +43,9 @@ export const WithError: Story = {
     },
   },
 };
+
+export const Editable: Story = {
+  args: {
+    editable: true,
+  },
+};

site/src/pages/UserSettingsPage/AccountPage/AccountForm.test.tsx

@@ -63,10 +63,6 @@ describe("AccountForm", () => {
       // Then
       const el = await screen.findByLabelText("Username");
       expect(el).toBeDisabled();
-      const btn = await screen.findByRole("button", {
-        name: /Update account/i,
-      });
-      expect(btn).toBeDisabled();
     });
   });
 });

site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx

@@ -21,6 +21,7 @@ export const Language = {
 
 const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
+  name: Yup.string(),
 });
 
 export interface AccountFormProps {
@@ -75,24 +76,17 @@ export const AccountForm: FC<AccountFormProps> = ({
         />
         <TextField
           {...getFieldHelpers("name")}
+          fullWidth
           onBlur={(e) => {
             e.target.value = e.target.value.trim();
             form.handleChange(e);
           }}
-          aria-disabled={!editable}
-          disabled={!editable}
-          fullWidth
           label={Language.nameLabel}
           helperText='The human-readable name is optional and can be accessed in a template via the "data.coder_workspace_owner.me.full_name" property.'
         />
 
         <div>
-          <LoadingButton
-            loading={isLoading}
-            disabled={!editable}
-            type="submit"
-            variant="contained"
-          >
+          <LoadingButton loading={isLoading} type="submit" variant="contained">
             {Language.updateSettings}
           </LoadingButton>
         </div>