🪟 🎉 Add username editing

airbyte-webapp/src/packages/cloud/lib/domain/users/UserService.ts

@@ -24,6 +24,14 @@ export class UserService extends AirbyteRequestService {
     return this.fetch<void>(`${this.url}/update`, params);
   }
 
+  public async changeName(authUserId: string, userId: string, name: string): Promise<void> {
+    return this.fetch<void>(`${this.url}/update`, {
+      authUserId,
+      userId,
+      name,
+    });
+  }
+
   public async changeEmail(email: string): Promise<void> {
     return this.fetch<void>(`${this.url}/update`, {
       email,

airbyte-webapp/src/packages/cloud/lib/domain/users/types.ts

@@ -3,6 +3,7 @@ export type UserStatus = "invited" | "registered" | "disabled";
 export interface User {
   email: string;
   name: string;
+  authUserId: string;
   userId: string;
   status?: UserStatus;
   intercomHash: string;

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -59,10 +59,12 @@
   "settings.accountSettings.firstName": "First name",
   "settings.accountSettings.enterPassword": "Enter current password",
   "settings.accountSettings.firstName.placeholder": "Christopher",
-  "settings.accountSettings.fullName": "Full name",
-  "settings.accountSettings.fullName.placeholder": "Christopher Smith",
+  "settings.accountSettings.name": "Full name",
+  "settings.accountSettings.name.placeholder": "Christopher Smith",
+  "settings.accountSettings.name.empty.error": "Name cannot be empty",
   "settings.accountSettings.lastName": "Last name",
   "settings.accountSettings.lastName.placeholder": "Smith",
+  "settings.accountSettings.updateName": "Update Name",
   "settings.accountSettings.email": "Email",
   "settings.accountSettings.updateEmail": "Update Email",
   "settings.accountSettings.password": "Password",
@@ -75,6 +77,8 @@
   "settings.accountSettings.updatePasswordError": "Password update failed: ",
   "settings.accountSettings.updatePasswordSuccess": "Your password has been updated!",
   "settings.accountSettings.updatePassword": "Update password",
+  "settings.accountSettings.updateNameError": "Name update failed: ",
+  "settings.accountSettings.updateNameSuccess": "Your name has been updated!",
   "settings.userSettings": "User settings",
   "settings.workspaceSettings": "Workspace settings",
   "settings.generalSettings": "General Settings",

airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx

@@ -32,6 +32,7 @@ export type AuthSignUp = (form: {
 }) => Promise<void>;
 
 export type AuthChangeEmail = (email: string, password: string) => Promise<void>;
+export type AuthChangeName = (name: string) => Promise<void>;
 
 export type AuthSendEmailVerification = () => Promise<void>;
 export type AuthVerifyEmail = (code: string) => Promise<void>;
@@ -48,6 +49,7 @@ interface AuthContextApi {
   signUp: AuthSignUp;
   updatePassword: AuthUpdatePassword;
   updateEmail: AuthChangeEmail;
+  updateName: AuthChangeName;
   requirePasswordReset: AuthRequirePasswordReset;
   confirmPasswordReset: AuthConfirmPasswordReset;
   sendEmailVerification: AuthSendEmailVerification;
@@ -58,7 +60,7 @@ interface AuthContextApi {
 export const AuthContext = React.createContext<AuthContextApi | null>(null);
 
 export const AuthenticationProvider: React.FC = ({ children }) => {
-  const [state, { loggedIn, emailVerified, authInited, loggedOut }] = useTypesafeReducer<
+  const [state, { loggedIn, emailVerified, authInited, loggedOut, updateUserName }] = useTypesafeReducer<
     AuthServiceState,
     typeof actions
   >(authStateReducer, initialState, actions);
@@ -113,6 +115,14 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
         queryClient.removeQueries();
         loggedOut();
       },
+      async updateName(name: string): Promise<void> {
+        if (!state.currentUser) {
+          return;
+        }
+        await userService.changeName(state.currentUser.authUserId, state.currentUser.userId, name);
+        await authService.updateProfile(name);
+        updateUserName({ value: name });
+      },
       async updateEmail(email, password): Promise<void> {
         await userService.changeEmail(email);
         return authService.updateEmail(email, password);

airbyte-webapp/src/packages/cloud/services/auth/reducer.ts

@@ -7,6 +7,7 @@ export const actions = {
   loggedIn: createAction("LOGGED_IN")<{ user: User; emailVerified: boolean }>(),
   emailVerified: createAction("EMAIL_VERIFIED")<boolean>(),
   loggedOut: createAction("LOGGED_OUT")<void>(),
+  updateUserName: createAction("UPDATE_USER_NAME")<{ value: string }>(),
 };
 
 type Actions = ActionType<typeof actions>;
@@ -57,4 +58,16 @@ export const authStateReducer = createReducer<AuthServiceState, Actions>(initial
       emailVerified: false,
       loggedOut: true,
     };
+  })
+  .handleAction(actions.updateUserName, (state, action): AuthServiceState => {
+    if (!state.currentUser) {
+      return state;
+    }
+    return {
+      ...state,
+      currentUser: {
+        ...state.currentUser,
+        name: action.payload.value,
+      },
+    };
   });

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/AccountSettingsView.tsx

@@ -1,64 +1,27 @@
-import { Field, FieldProps, Form, Formik } from "formik";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { useMutation } from "react-query";
 import styled from "styled-components";
 
-import { LabeledInput, LoadingButton } from "components";
+import { LoadingButton } from "components";
 
-import { useAuthService, useCurrentUser } from "packages/cloud/services/auth/AuthService";
-import { RowFieldItem } from "packages/cloud/views/auth/components/FormComponents";
-import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
+import { useAuthService } from "packages/cloud/services/auth/AuthService";
+import { SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
 
-import { EmailSection, PasswordSection } from "./components";
+import { EmailSection, PasswordSection, NameSection } from "./components";
 
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
 `;
 
 const AccountSettingsView: React.FC = () => {
-  const { formatMessage } = useIntl();
   const authService = useAuthService();
   const { mutateAsync: logout, isLoading: isLoggingOut } = useMutation(() => authService.logout());
-  const user = useCurrentUser();
 
   return (
     <>
-      <SettingsCard title={<FormattedMessage id="settings.account" />}>
-        <Content>
-          <Formik
-            initialValues={{
-              name: user.name,
-            }}
-            onSubmit={() => {
-              throw new Error("Not implemented");
-            }}
-          >
-            {() => (
-              <Form>
-                <RowFieldItem>
-                  <Field name="name">
-                    {({ field, meta }: FieldProps<string>) => (
-                      <LabeledInput
-                        {...field}
-                        label={<FormattedMessage id="settings.accountSettings.fullName" />}
-                        disabled
-                        placeholder={formatMessage({
-                          id: "settings.accountSettings.fullName.placeholder",
-                        })}
-                        type="text"
-                        error={!!meta.error && meta.touched}
-                        message={meta.touched && meta.error && formatMessage({ id: meta.error })}
-                      />
-                    )}
-                  </Field>
-                </RowFieldItem>
-              </Form>
-            )}
-          </Formik>
-        </Content>
-      </SettingsCard>
+      <NameSection />
       <EmailSection />
       <PasswordSection />
       <SettingsCard

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/NameSection/NameSection.tsx

@@ -0,0 +1,67 @@
+import { Field, FieldProps, Form, Formik } from "formik";
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import * as yup from "yup";
+
+import { LoadingButton } from "components";
+import { LabeledInput } from "components/LabeledInput";
+
+import { useCurrentUser } from "packages/cloud/services/auth/AuthService";
+import { RowFieldItem } from "packages/cloud/views/auth/components/FormComponents";
+import FeedbackBlock from "pages/SettingsPage/components/FeedbackBlock";
+import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents";
+
+import { useChangeName } from "./hooks";
+
+const nameSectionValidationSchema = yup.object({
+  name: yup.string().required("form.empty.error"),
+});
+
+export const NameSection: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const user = useCurrentUser();
+  const { changeName, successMessage, errorMessage } = useChangeName();
+
+  return (
+    <SettingsCard title={<FormattedMessage id="settings.account" />}>
+      <Content>
+        <Formik
+          validateOnBlur
+          validateOnChange
+          validationSchema={nameSectionValidationSchema}
+          initialValues={{
+            name: user.name,
+          }}
+          onSubmit={(values, formikHelpers) =>
+            changeName(values, formikHelpers).then(() => formikHelpers.resetForm({ values }))
+          }
+        >
+          {({ isSubmitting, isValid, dirty }) => (
+            <Form>
+              <RowFieldItem>
+                <Field name="name">
+                  {({ field, meta }: FieldProps<string>) => (
+                    <LabeledInput
+                      {...field}
+                      label={<FormattedMessage id="settings.accountSettings.name" />}
+                      placeholder={formatMessage({
+                        id: "settings.accountSettings.name.placeholder",
+                      })}
+                      type="text"
+                      error={!!meta.error && meta.touched}
+                      message={meta.touched && meta.error && formatMessage({ id: meta.error })}
+                    />
+                  )}
+                </Field>
+              </RowFieldItem>
+              <LoadingButton disabled={!isValid || !dirty} type="submit" isLoading={isSubmitting}>
+                <FormattedMessage id="settings.accountSettings.updateName" />
+              </LoadingButton>
+              <FeedbackBlock errorMessage={errorMessage} successMessage={successMessage} />
+            </Form>
+          )}
+        </Formik>
+      </Content>
+    </SettingsCard>
+  );
+};

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/NameSection/hooks/index.ts

@@ -0,0 +1 @@
+export { useChangeName } from "./useName";

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/NameSection/hooks/useName.ts

@@ -0,0 +1,47 @@
+import { FormikHelpers } from "formik/dist/types";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+
+import { useAuthService } from "packages/cloud/services/auth/AuthService";
+
+import { FormValues } from "../types";
+
+type UseNameHook = () => {
+  successMessage: string;
+  errorMessage: string;
+  changeName: (values: FormValues, { setSubmitting, setFieldValue }: FormikHelpers<FormValues>) => Promise<void>;
+};
+
+export const useChangeName: UseNameHook = () => {
+  const { updateName } = useAuthService();
+  const { formatMessage } = useIntl();
+  const [successMessage, setSuccessMessage] = useState<string>("");
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const changeName = async (values: FormValues, { setSubmitting }: FormikHelpers<FormValues>) => {
+    setSubmitting(true);
+
+    setSuccessMessage("");
+    setErrorMessage("");
+
+    try {
+      await updateName(values.name);
+
+      setSuccessMessage(
+        formatMessage({
+          id: "settings.accountSettings.updateNameSuccess",
+        })
+      );
+    } catch (err) {
+      setErrorMessage(
+        formatMessage({
+          id: "settings.accountSettings.updateNameError",
+        }) + JSON.stringify(err)
+      );
+    }
+
+    setSubmitting(false);
+  };
+
+  return { successMessage, errorMessage, changeName };
+};

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/NameSection/index.ts

@@ -0,0 +1 @@
+export { NameSection } from "./NameSection";

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/NameSection/types.ts

@@ -0,0 +1,3 @@
+export interface FormValues {
+  name: string;
+}

airbyte-webapp/src/packages/cloud/views/users/AccountSettingsView/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./EmailSection";
 export * from "./PasswordSection";
+export * from "./NameSection";