feat(sh-admin): enhanced user management in admin dashboard (#3814)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-sh-admin/src/components/users/Details.vue

@@ -24,11 +24,40 @@
       </div>
 
       <template v-for="(info, key) in userInfo" :key="key">
-        <div v-if="info.condition">
-          <label class="text-secondaryDark" :for="key">{{ info.label }}</label>
+        <div v-if="key === 'displayName'" class="flex flex-col space-y-3">
+          <label class="text-accentContrast" for="teamname"
+            >{{ t('users.name') }}
+          </label>
           <div
-            class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+            class="flex bg-divider rounded-md items-stretch flex-1 border border-divider"
+            :class="{
+              '!border-accent': isNameBeingEdited,
+            }"
           >
+            <HoppSmartInput
+              v-model="updatedUserName"
+              styles="bg-transparent flex-1 rounded-md !rounded-r-none disabled:select-none border-r-0 disabled:cursor-default disabled:opacity-50"
+              :placeholder="t('users.name')"
+              :disabled="!isNameBeingEdited"
+            >
+              <template #button>
+                <HoppButtonPrimary
+                  class="!rounded-l-none"
+                  filled
+                  :icon="isNameBeingEdited ? IconSave : IconEdit"
+                  :label="
+                    isNameBeingEdited ? t('users.rename') : t('users.edit')
+                  "
+                  @click="handleNameEdit"
+                />
+              </template>
+            </HoppSmartInput>
+          </div>
+        </div>
+
+        <div v-else-if="info.condition">
+          <label class="text-secondaryDark" :for="key">{{ info.label }}</label>
+          <div class="w-full p-3 mt-2 bg-divider border-gray-600 rounded-md">
             <span>{{ info.value }}</span>
           </div>
         </div>
@@ -70,10 +99,17 @@
 </template>
 
 <script setup lang="ts">
+import { useMutation } from '@urql/vue';
 import { format } from 'date-fns';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from '~/composables/i18n';
 import { useToast } from '~/composables/toast';
-import { UserInfoQuery } from '~/helpers/backend/graphql';
+import {
+  UpdateUserDisplayNameByAdminDocument,
+  UserInfoQuery,
+} from '~/helpers/backend/graphql';
+import IconEdit from '~icons/lucide/edit';
+import IconSave from '~icons/lucide/save';
 import IconTrash from '~icons/lucide/trash';
 import IconUserCheck from '~icons/lucide/user-check';
 import IconUserMinus from '~icons/lucide/user-minus';
@@ -89,6 +125,7 @@ const emit = defineEmits<{
   (event: 'delete-user', userID: string): void;
   (event: 'make-admin', userID: string): void;
   (event: 'remove-admin', userID: string): void;
+  (event: 'update-user-name', newName: string): void;
 }>();
 
 // Get Proper Date Formats
@@ -120,4 +157,62 @@ const userInfo = {
     value: getCreatedDateAndTime(createdOn),
   },
 };
+
+// Contains the actual user name
+const userName = computed({
+  get: () => props.user.displayName,
+  set: (value) => {
+    return value;
+  },
+});
+
+// Contains the stored user name from the actual name before being edited
+const currentUserName = ref('');
+
+// Set the current user name to the actual user name
+onMounted(() => {
+  if (displayName) currentUserName.value = displayName;
+});
+
+// Contains the user name that is being edited
+const updatedUserName = computed({
+  get: () => currentUserName.value,
+  set: (value) => {
+    currentUserName.value = value;
+  },
+});
+
+// Rename the user
+const isNameBeingEdited = ref(false);
+const userRename = useMutation(UpdateUserDisplayNameByAdminDocument);
+
+const handleNameEdit = () => {
+  if (isNameBeingEdited.value) {
+    // If the name is not changed, then return control
+    if (userName.value !== updatedUserName.value) {
+      renameUserName();
+    } else isNameBeingEdited.value = false;
+  } else {
+    isNameBeingEdited.value = true;
+  }
+};
+
+const renameUserName = async () => {
+  if (updatedUserName.value?.trim() === '') {
+    toast.error(t('users.empty_name'));
+    return;
+  }
+
+  const variables = { userUID: uid, name: updatedUserName.value as string };
+  const result = await userRename.executeMutation(variables);
+
+  if (result.error) {
+    toast.error(t('state.rename_user_failure'));
+  } else {
+    isNameBeingEdited.value = false;
+    toast.success(t('state.rename_user_success'));
+    emit('update-user-name', updatedUserName.value as string);
+    userName.value = updatedUserName.value;
+  }
+};
 </script>