fix: admin dashboard bugs (#74)

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -25,9 +25,7 @@ declare module '@vue/runtime-core' {
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
     TeamsMembers: typeof import('./components/teams/Members.vue')['default']

packages/hoppscotch-sh-admin/src/components/teams/Invite.vue

@@ -22,12 +22,17 @@
             :key="`new-member-${index}`"
             class="flex divide-x divide-dividerLight"
           >
-            <input
+            <HoppSmartAutoComplete
               v-model="member.key"
-              class="flex flex-1 px-4 py-2 bg-transparent"
               placeholder="Email"
+              :source="allUsersEmail"
               :name="'member' + index"
-              autofocus
+              :spellcheck="true"
+              styles="
+                w-full pl-3 bg-neutral-900 border-gray-600
+              "
+              class="flex-1 !flex"
+              @input="(email: string) => member.key = email"
             />
             <span>
               <tippy
@@ -195,15 +200,33 @@ import { pipe } from 'fp-ts/function';
 import {
   AddUserToTeamByAdminDocument,
   TeamMemberRole,
+  MetricsDocument,
+  UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { useToast } from '~/composables/toast';
-import { useMutation } from '@urql/vue';
+import { useMutation, useQuery } from '@urql/vue';
 import { Email, EmailCodec } from '~/helpers/backend/Email';
 import IconTrash from '~icons/lucide/trash';
 import IconPlus from '~icons/lucide/plus';
 import IconHelpCircle from '~icons/lucide/help-circle';
 import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
+import { computed } from 'vue';
+import { usePagedQuery } from '~/composables/usePagedQuery';
+
+// Get Users List
+const { data } = useQuery({ query: MetricsDocument });
+const usersPerPage = computed(() => data.value?.admin.usersCount || 10000);
+
+const { list: usersList } = usePagedQuery(
+  UsersListDocument,
+  (x) => x.admin.allUsers,
+  (x) => x.uid,
+  usersPerPage.value,
+  { cursor: undefined, take: usersPerPage.value }
+);
+
+const allUsersEmail = computed(() => usersList.value.map((user) => user.email));
 
 const toast = useToast();
 
@@ -298,7 +321,6 @@ const addUserToTeam = async (
     .executeMutation(variables)
     .then((result) => {
       if (result.error) {
-        console.log(result.error);
         if (result.error.toString() == '[GraphQL] user/not_found') {
           toast.error('User not found in the infra!!');
         } else {

packages/hoppscotch-sh-admin/src/components/teams/Members.vue

@@ -157,7 +157,7 @@ import IconUserPlus from '~icons/lucide/user-plus';
 import IconUserMinus from '~icons/lucide/user-minus';
 import IconHelpCircle from '~icons/lucide/help-circle';
 import { useClientHandle, useMutation } from '@urql/vue';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useToast } from '../../composables/toast';
 import {
@@ -195,9 +195,12 @@ const getTeamInfo = async () => {
   fetching.value = false;
 };
 
-onMounted(async () => {
+const emit = defineEmits<{
-  await getTeamInfo();
+  (e: 'update-team'): void;
-});
+}>();
+
+onMounted(async () => await getTeamInfo());
+onUnmounted(() => emit('update-team'));
 
 // Update members tab after a change in the members list or member roles
 const updateMembers = () => getTeamInfo();

packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue

@@ -96,9 +96,7 @@ const getTeamInfo = async () => {
   fetching.value = false;
 };
 
-onMounted(async () => {
+onMounted(async () => await getTeamInfo());
-  await getTeamInfo();
-});
 
 // Remove Invitation
 const isLoadingIndex = ref<null | number>(null);

packages/hoppscotch-sh-admin/src/main.ts

@@ -18,6 +18,7 @@ import { auth } from './helpers/auth';
     urql,
     createClient({
       url: import.meta.env.VITE_BACKEND_GQL_URL,
+      requestPolicy: 'network-only',
       fetchOptions: () => {
         return {
           credentials: 'include',
@@ -33,4 +34,4 @@ import { auth } from './helpers/auth';
   HOPP_MODULES.forEach((mod) => mod.onVueAppInit?.(app));
 
   app.mount('#app');
-})()
+})();

packages/hoppscotch-sh-admin/src/pages/teams/_id.vue

@@ -120,7 +120,7 @@
   </div>
 
   <div v-if="team" class="sm:px-6 px-4">
-    <TeamsMembers v-if="showMembers" />
+    <TeamsMembers v-if="showMembers" @updateTeam="updateTeam()" />
     <TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
     <HoppSmartConfirmModal
       :show="confirmDeletion"
@@ -193,9 +193,8 @@ const getTeamInfo = async () => {
   fetching.value = false;
 };
 
-onMounted(async () => {
+onMounted(async () => await getTeamInfo());
-  await getTeamInfo();
+const updateTeam = async () => await getTeamInfo();
-});
 
 // Rename the team name
 const showRenameInput = ref(false);

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -245,22 +245,31 @@ const showCreateTeamModal = ref(false);
 const getOwnerEmail = (email: string) => (ownerEmail.value = email);
 
 const createTeam = async () => {
+  if (teamName.value.length < 6) {
+    toast.error('Team name should be atleast 6 characters long!!');
+    return;
+  }
+  if (ownerEmail.value.length == 0) {
+    toast.error('Please enter email of team owner!!');
+    return;
+  }
   const userUid =
     usersList.value.find((user) => user.email === ownerEmail.value)?.uid || '';
   const variables = { name: teamName.value.trim(), userUid: userUid };
   await createTeamMutation.executeMutation(variables).then((result) => {
     if (result.error) {
-      if (teamName.value.length < 6) {
-        toast.error('Team name should be atleast 6 characters long!!');
-      }
       if (result.error.toString() == '[GraphQL] user/not_found') {
         toast.error('User not found!!');
       } else {
         toast.error('Failed to create team!!');
       }
+      teamName.value = '';
+      ownerEmail.value = '';
     } else {
       toast.success('Team created successfully!!');
       showCreateTeamModal.value = false;
+      teamName.value = '';
+      ownerEmail.value = '';
       refetch();
     }
   });

packages/hoppscotch-sh-admin/vite.config.ts

@@ -11,9 +11,9 @@ import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  envDir: path.resolve(__dirname, "../../"),
+  envDir: path.resolve(__dirname, '../../'),
   server: {
-    port: 3000,
+    port: 3100,
   },
   resolve: {
     alias: {