feat: added mutation and function to platform for updating user profile name (#3929)

Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>
Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/locales/en.json

@@ -315,6 +315,7 @@
     "danger_zone": "Danger zone",
     "delete_account": "Your account is currently an owner in these workspaces:",
     "delete_account_description": "You must either remove yourself, transfer ownership, or delete these workspaces before you can delete your account.",
+    "empty_profile_name": "Profile name cannot be empty",
     "empty_req_name": "Empty Request Name",
     "f12_details": "(F12 for details)",
     "gql_prettify_invalid_query": "Couldn't prettify an invalid query, solve query syntax errors and try again",
@@ -334,6 +335,7 @@
     "page_not_found": "This page could not be found",
     "please_install_extension": "Please install the extension and add origin to the extension.",
     "proxy_error": "Proxy error",
+    "same_profile_name": "Updated profile name is same as the current profile name",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script",

packages/hoppscotch-common/src/components/teams/Team.vue

@@ -20,7 +20,7 @@
           : ''
       "
     >
-      <div class="p-4">
+      <div class="p-4 truncate">
         <label
           class="font-semibold text-secondaryDark"
           :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"

packages/hoppscotch-common/src/pages/profile.vue

@@ -210,6 +210,8 @@ import { toggleSetting } from "~/newstore/settings"
 import IconVerified from "~icons/lucide/verified"
 import IconSettings from "~icons/lucide/settings"
 
+import * as E from "fp-ts/Either"
+
 type ProfileTabs = "sync" | "teams"
 
 const selectedProfileTab = ref<ProfileTabs>("sync")
@@ -244,19 +246,28 @@ const displayName = ref(currentUser.value?.displayName || "")
 const updatingDisplayName = ref(false)
 watchEffect(() => (displayName.value = currentUser.value?.displayName || ""))
 
-const updateDisplayName = () => {
+const updateDisplayName = async () => {
+  if (!displayName.value) {
+    toast.error(`${t("error.empty_profile_name")}`)
+    return
+  }
+
+  if (currentUser.value?.displayName === displayName.value) {
+    toast.error(`${t("error.same_profile_name")}`)
+    return
+  }
+
   updatingDisplayName.value = true
-  platform.auth
-    .setDisplayName(displayName.value as string)
-    .then(() => {
-      toast.success(`${t("profile.updated")}`)
-    })
-    .catch(() => {
-      toast.error(`${t("error.something_went_wrong")}`)
-    })
-    .finally(() => {
-      updatingDisplayName.value = false
-    })
+
+  const res = await platform.auth.setDisplayName(displayName.value)
+
+  if (E.isLeft(res)) {
+    toast.error(t("error.something_went_wrong"))
+  } else if (E.isRight(res)) {
+    toast.success(`${t("profile.updated")}`)
+  }
+
+  updatingDisplayName.value = false
 }
 
 const emailAddress = ref(currentUser.value?.email || "")

packages/hoppscotch-common/src/platform/auth.ts

@@ -4,6 +4,7 @@ import { Component } from "vue"
 import { getI18n } from "~/modules/i18n"
 import * as E from "fp-ts/Either"
 import { AxiosRequestConfig } from "axios"
+import { GQLError } from "~/helpers/backend/GQLClient"
 
 /**
  * A common (and required) set of fields that describe a user.
@@ -229,9 +230,11 @@ export type AuthPlatformDef = {
   /**
    * Updates the display name of the user
    * @param name The new name to set this to.
-   * @returns An empty promise that is resolved when the operation is complete
+   * @returns A promise that resolves with the display name update status when the operation is complete
    */
-  setDisplayName: (name: string) => Promise<void>
+  setDisplayName: (
+    name: string
+  ) => Promise<E.Either<GQLError<string>, undefined>>
 
   /**
    * Returns the list of allowed auth providers for the platform ( the currently supported ones are GOOGLE, GITHUB, EMAIL, MICROSOFT, SAML )

packages/hoppscotch-selfhost-web/src/api/mutations/UpdateUserDisplayName.graphql

@@ -0,0 +1,5 @@
+mutation UpdateUserDisplayName($updatedDisplayName: String!) {
+  updateDisplayName(updatedDisplayName: $updatedDisplayName) {
+    displayName
+  }
+}

packages/hoppscotch-selfhost-web/src/platform/auth/auth.api.ts

@@ -1,6 +1,12 @@
+import { runMutation } from "@hoppscotch/common/helpers/backend/GQLClient"
 import axios from "axios"
 import * as E from "fp-ts/Either"
 import { z } from "zod"
+import {
+  UpdateUserDisplayNameDocument,
+  UpdateUserDisplayNameMutation,
+  UpdateUserDisplayNameMutationVariables,
+} from "../../api/generated/graphql"
 
 const expectedAllowedProvidersSchema = z.object({
   // currently supported values are "GOOGLE", "GITHUB", "EMAIL", "MICROSOFT", "SAML"
@@ -28,3 +34,12 @@ export const getAllowedAuthProviders = async () => {
     return E.left("SOMETHING_WENT_WRONG")
   }
 }
+
+export const updateUserDisplayName = (updatedDisplayName: string) =>
+  runMutation<
+    UpdateUserDisplayNameMutation,
+    UpdateUserDisplayNameMutationVariables,
+    ""
+  >(UpdateUserDisplayNameDocument, {
+    updatedDisplayName,
+  })()

packages/hoppscotch-selfhost-web/src/platform/auth/auth.platform.ts

@@ -8,7 +8,8 @@ import { PersistenceService } from "@hoppscotch/common/services/persistence"
 import axios from "axios"
 import { BehaviorSubject, Subject } from "rxjs"
 import { Ref, ref, watch } from "vue"
-import { getAllowedAuthProviders } from "./auth.api"
+import { getAllowedAuthProviders, updateUserDisplayName } from "./auth.api"
+import * as E from "fp-ts/Either"
 
 export const authEvents$ = new Subject<AuthEvent | { event: "token_refresh" }>()
 const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
@@ -317,9 +318,22 @@ export const def: AuthPlatformDef = {
   async setEmailAddress(_email: string) {
     return
   },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   async setDisplayName(name: string) {
-    return
+    if (!name) return E.left("USER_NAME_CANNOT_BE_EMPTY")
+    if (!currentUser$.value) return E.left("NO_USER_LOGGED_IN")
+
+    const res = await updateUserDisplayName(name)
+
+    if (E.isRight(res)) {
+      setUser({
+        ...currentUser$.value,
+        displayName: res.right.updateDisplayName.displayName ?? null,
+      })
+
+      return E.right(undefined)
+    }
+    return E.left(res.left)
   },
 
   async signOutUser() {