btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: polishing of admin dashboard teams module (#64)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-04-04 13:48:02 +05:30
committed by GitHub
parent ea847d7d32
commit e27dc1f7a2
20 changed files with 1097 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -17,32 +17,18 @@ declare module '@vue/runtime-core' {
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default']
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
IconLucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
IconLucideEdit: typeof import('~icons/lucide/edit')['default']
IconLucideFolderTree: typeof import('~icons/lucide/folder-tree')['default']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default']
IconLucideMenu: typeof import('~icons/lucide/menu')['default']
IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default'] IconLucideMoreHorizontal: typeof import('~icons/lucide/more-horizontal')['default']
IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default'] IconLucideUser: typeof import('~icons/lucide/user')['default']
IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default']
IconLucideUsers: typeof import('~icons/lucide/users')['default'] IconLucideUsers: typeof import('~icons/lucide/users')['default']
ProfilePicture: typeof import('./components/profile/Picture.vue')['default'] ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
TeamsDetails: typeof import('./components/teams/Details.vue')['default']
TeamsInvite: typeof import('./components/teams/Invite.vue')['default'] TeamsInvite: typeof import('./components/teams/Invite.vue')['default']
TeamsMembers: typeof import('./components/teams/Members.vue')['default'] TeamsMembers: typeof import('./components/teams/Members.vue')['default']
TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default'] TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']

66
packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
View File

@@ -1,66 +0,0 @@
<template>
<div class="flex justify-between">
<h3 class="mt-10 text-2xl justify-start font-medium text-gray-200">
Members
</h3>
<div class="mt-8 ml-2">
<button
@click="addNewMember"
class="px-4 py-2 justify-right text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Add New
</button>
</div>
</div>
<div>
<div
v-for="(member, i) in members"
:key="i"
class="mt-3 flex justify-center"
>
<input
type="text"
placeholder="Enter email"
v-model="member.name"
class="bg-primaryDark p-2 border-primaryLight w-90 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
/>
<select
v-model="member.role"
class="bg-primaryDark ml-0.5 p-2 pr-3 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
<option value="owner">Owner</option>
<option value="editor">Editor</option>
<option value="viewer">Viewer</option>
</select>
<div
class="bg-primaryDark flex items-center ml-0.5 border-primaryLight px-2 text-red-600 focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
<span class="flex" @click="deleteMemberRow(i)">
<icon-lucide-trash />
</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const members = reactive([
{
name: '',
role: 'owner',
},
]);
const addNewMember = () => {
members.push({
name: '',
role: 'admin',
});
};
const deleteMemberRow = (index: number) => {
members.splice(index, 1);
};
</script>

483
packages/hoppscotch-sh-admin/src/components/teams/Details.vue
View File

@@ -1,483 +0,0 @@
<template>
<div class="sm:px-6 p-4" v-if="team">
<h3 class="text-3xl font-medium text-zinc-800 dark:text-gray-200">
Team Details
</h3>
<div class="mt-5">
<div class="grid gap-4">
<div class="w-full">
<div
class="p-4 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm flex flex-col gap-1"
>
<div class="flex mb-6">
<icon-lucide-user class="text-emerald-400 text-3xl" />
<h4
class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
>
Team Info
</h4>
</div>
<div class="flex text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400">
Team ID:
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.id }}
</div>
</div>
<div class="flex text-xl items-center">
<h4 class="font-semibold text-gray-700 dark:text-gray-400">
Team Name:
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
<div v-if="showRenameInput" class="flex gap-4 items-center">
<input
class="w-full py-1 px-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500 border"
type="text"
v-model="teamName"
placeholder="Team Name"
autofocus
v-focus
/>
<div>
<HoppButtonPrimary
class="py-1"
filled
label="Rename"
@click="renameTeamName()"
/>
</div>
</div>
<div v-else class="flex gap-2">
<span>
{{ teamName }}
</span>
<icon-lucide-edit
class="cursor-pointer"
@click="showRenameInput = true"
/>
</div>
</div>
</div>
<div class="flex text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400">
Number of members:
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.teamMembers.length }}
</div>
</div>
<div class="flex justify-start mt-6">
<HoppButtonSecondary
class="mr-4"
filled
label="Delete"
@click="team && deleteTeam(team.id)"
/>
</div>
</div>
</div>
</div>
</div>
<div class="my-6">
<div class="flex flex-col mb-6">
<div class="flex items-center justify-between flex-1 pt-4 mb-4">
<label for="memberList"> Members </label>
<div class="flex">
<HoppButtonSecondary
:icon="IconUserPlus"
label="Add Members"
filled
@click="showInvite = !showInvite"
/>
</div>
</div>
<div class="border rounded border-divider">
<div
v-if="team?.teamMembers?.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/dark/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
/>
<span class="pb-4 text-center">
No members in this team. Add members to this team to collaborate
</span>
<HoppButtonSecondary
:icon="IconUserPlus"
label="Add Members"
@click="
() => {
showInvite = !showInvite;
}
"
/>
</div>
<div v-else class="divide-y divide-dividerLight">
<div
v-for="(member, index) in membersList"
:key="`member-${index}`"
class="flex divide-x divide-dividerLight"
>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Email"
:name="'param' + index"
:value="member.email"
readonly
/>
<span>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions![index].focus()"
>
<span class="select-wrapper">
<input
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
placeholder="Permissions"
:name="'value' + index"
:value="member.role"
readonly
/>
</span>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
label="OWNER"
:icon="
member.role === 'OWNER' ? IconCircleDot : IconCircle
"
:active="member.role === 'OWNER'"
@click="
() => {
updateMemberRole(
member.userID,
TeamMemberRole.Owner
);
hide();
}
"
/>
<HoppSmartItem
label="EDITOR"
:icon="
member.role === 'EDITOR' ? IconCircleDot : IconCircle
"
:active="member.role === 'EDITOR'"
@click="
() => {
updateMemberRole(
member.userID,
TeamMemberRole.Editor
);
hide();
}
"
/>
<HoppSmartItem
label="VIEWER"
:icon="
member.role === 'VIEWER' ? IconCircleDot : IconCircle
"
:active="member.role === 'VIEWER'"
@click="
() => {
updateMemberRole(
member.userID,
TeamMemberRole.Viewer
);
hide();
}
"
/>
</div>
</template>
</tippy>
</span>
<div class="flex">
<HoppButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
title="Remove"
:icon="IconUserMinus"
color="red"
:loading="isLoadingIndex === index"
@click="removeExistingTeamMember(member.userID, index)"
/>
</div>
</div>
</div>
</div>
<div v-if="!fetching && !team" class="flex flex-col items-center">
<component :is="IconHelpCircle" class="mb-4 svg-icons" />
Something went wrong. Please try again later.
</div>
</div>
<HoppButtonPrimary
label="Save"
:loading="isLoading"
outline
@click="saveTeam"
/>
</div>
<TeamsPendingInvites :editingTeamID="team.id" />
<HoppSmartConfirmModal
:show="confirmDeletion"
:title="`Confirm Deletion of ${team.name} team?`"
@hide-modal="confirmDeletion = false"
@resolve="deleteTeamMutation(deleteTeamUID)"
/>
<TeamsInvite
:show="showInvite"
:editingTeamID="team.id"
@hide-modal="
() => {
showInvite = false;
}
"
/>
</div>
</template>
<script setup lang="ts">
import IconCircleDot from '~icons/lucide/circle-dot';
import IconCircle from '~icons/lucide/circle';
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 { useRoute, useRouter } from 'vue-router';
import { useToast } from '../../composables/toast';
import {
RemoveTeamDocument,
RenameTeamDocument,
TeamInfoDocument,
TeamMemberRole,
UpdateTeamMemberRoleDocument,
RemoveTeamMemberDocument,
TeamInfoQuery,
} from '../../helpers/backend/graphql';
const route = useRoute();
const router = useRouter();
const toast = useToast();
const team = ref<TeamInfoQuery['team'] | null>(null);
const showRenameInput = ref(false);
const showInvite = ref(false);
const teamName = ref('');
const { client } = useClientHandle();
const fetching = ref(true);
const teamDeletion = useMutation(RemoveTeamDocument);
const teamRename = useMutation(RenameTeamDocument);
const confirmDeletion = ref(false);
const deleteTeamUID = ref<string | null>(null);
onMounted(async () => {
await getTeamInfo();
});
const getTeamInfo = async () => {
fetching.value = true;
const result = await client
.query(TeamInfoDocument, { uid: route.params.id.toString() })
.toPromise();
if (result.error) {
return toast.error('Unable to Load Team Info..');
}
if (result.data?.team) {
team.value = result.data.team;
teamName.value = team.value.name;
}
fetching.value = false;
};
const renameTeamName = async () => {
if (!team.value) return;
if (team.value.name === teamName.value) {
showRenameInput.value = false;
return;
}
const variables = { uid: team.value.id, name: teamName.value };
await teamRename.executeMutation(variables).then((result) => {
if (result.error) {
toast.error('Renaming team Failed');
} else {
showRenameInput.value = false;
toast.success('Team Renamed Successfully');
}
});
};
const deleteTeam = (id: string) => {
confirmDeletion.value = true;
deleteTeamUID.value = id;
};
const deleteTeamMutation = async (id: string | null) => {
if (!id) {
confirmDeletion.value = false;
toast.error('User Deletion Failed');
return;
}
const variables = { uid: id };
await teamDeletion.executeMutation(variables).then((result) => {
if (result.error) {
toast.error('User Deletion Failed');
} else {
toast.success('User Deleted Successfully');
}
});
confirmDeletion.value = false;
deleteTeamUID.value = null;
router.push('/teams');
};
const emit = defineEmits<{
(e: 'refetch-teams'): void;
(e: 'invite-team'): void;
}>();
// Template refs
const tippyActions = ref<any | null>(null);
const roleUpdates = ref<
{
userID: string;
role: TeamMemberRole;
}[]
>([]);
watch(
() => team.value,
(teamDetails) => {
const members = teamDetails?.teamMembers ?? [];
// Remove deleted members
roleUpdates.value = roleUpdates.value.filter(
(update) => members.findIndex((y) => y.user.uid === update.userID) !== -1
);
}
);
const updateMemberRole = (userID: string, role: TeamMemberRole) => {
const updateIndex = roleUpdates.value.findIndex(
(item) => item.userID === userID
);
if (updateIndex !== -1) {
// Role Update exists
roleUpdates.value[updateIndex].role = role;
} else {
// Role Update does not exist
roleUpdates.value.push({
userID,
role,
});
}
};
const membersList = computed(() => {
if (!team.value) return [];
const members = (team.value.teamMembers ?? []).map((member) => {
const updatedRole = roleUpdates.value.find(
(update) => update.userID === member.user.uid
);
return {
userID: member.user.uid,
email: member.user.email!,
role: updatedRole?.role ?? member.role,
};
});
return members;
});
const isLoadingIndex = ref<null | number>(null);
const removeExistingTeamMember = async (userID: string, index: number) => {
if (!team.value) return;
isLoadingIndex.value = index;
const removeTeamMemberResult = await removeTeamMember(
userID,
team.value.id
)();
if (removeTeamMemberResult.error) {
toast.error(`Something went wrong`);
} else {
toast.success(`Member removed successfully`);
emit('refetch-teams');
getTeamInfo();
}
isLoadingIndex.value = null;
};
const isLoading = ref(false);
const saveTeam = async () => {
isLoading.value = true;
roleUpdates.value.forEach(async (update) => {
if (!team.value) return;
const updateMemberRoleResult = await updateTeamMemberRole(
update.userID,
team.value.id,
update.role
);
if (updateMemberRoleResult.error) {
toast.error(`Something went wrong`);
} else {
toast.success(`Roles updated successfully`);
}
isLoading.value = false;
});
};
const updateTeamMemberRoleMutation = useMutation(UpdateTeamMemberRoleDocument);
const updateTeamMemberRole = (
userUid: string,
teamID: string,
newRole: TeamMemberRole
) => {
return updateTeamMemberRoleMutation.executeMutation({
userUid,
teamID,
newRole,
});
};
const removeTeamMemberMutation = useMutation(RemoveTeamMemberDocument);
const removeTeamMember = (userUid: string, teamID: string) => {
return () =>
removeTeamMemberMutation.executeMutation({
userUid,
teamID,
});
};
</script>

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

@@ -1,45 +1,7 @@
<template> <template>
<HoppSmartModal v-if="show" dialog title="Add Member" @close="hideModal"> <HoppSmartModal v-if="show" dialog title="Add Member" @close="hideModal">
<template #body> <template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4"> <div v-if="addingUserToTeam" class="flex items-center justify-center p-4">
<div class="flex flex-col items-center justify-center max-w-md">
<icon-lucide-users class="w-6 h-6 text-accent" />
<h3 class="my-2 text-lg text-center">
We have sent you an invite link
</h3>
<p class="text-center">
You can use this link to invite your team members to join your team.
</p>
</div>
<div
class="flex flex-col p-4 mt-8 border rounded space-y-6 border-dividerLight"
>
<div
v-for="(invitee, index) in sendInvitesResult"
:key="`invitee-${index}`"
>
<p class="flex items-center">
<component
:is="
invitee.status === 'error' ? IconAlertTriangle : IconMailCheck
"
class="mr-4 svg-icons"
:class="
invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
"
/>
<span class="truncate">{{ invitee.email }}</span>
</p>
<p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500">
{{ getErrorMessage(invitee.error) }}
</p>
</div>
</div>
</div>
<div
v-else-if="sendingInvites"
class="flex items-center justify-center p-4"
>
<HoppSmartSpinner /> <HoppSmartSpinner />
</div> </div>
<div v-else class="flex flex-col"> <div v-else class="flex flex-col">
@@ -50,21 +12,21 @@
:icon="IconPlus" :icon="IconPlus"
label="Add new" label="Add new"
filled filled
@click="addNewInvitee" @click="addNewMember"
/> />
</div> </div>
</div> </div>
<div class="border rounded divide-y divide-dividerLight border-divider"> <div class="border rounded divide-y divide-dividerLight border-divider">
<div <div
v-for="(invitee, index) in newInvites" v-for="(member, index) in newMembersList"
:key="`new-invitee-${index}`" :key="`new-member-${index}`"
class="flex divide-x divide-dividerLight" class="flex divide-x divide-dividerLight"
> >
<input <input
v-model="invitee.key" v-model="member.key"
class="flex flex-1 px-4 py-2 bg-transparent" class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Email" placeholder="Email"
:name="'invitee' + index" :name="'member' + index"
autofocus autofocus
/> />
<span> <span>
@@ -79,7 +41,7 @@
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer" class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
placeholder="Permissions" placeholder="Permissions"
:name="'value' + index" :name="'value' + index"
:value="invitee.value" :value="member.value"
readonly readonly
/> />
</span> </span>
@@ -93,12 +55,12 @@
<HoppSmartItem <HoppSmartItem
label="OWNER" label="OWNER"
:icon=" :icon="
invitee.value === 'OWNER' ? IconCircleDot : IconCircle member.value === 'OWNER' ? IconCircleDot : IconCircle
" "
:active="invitee.value === 'OWNER'" :active="member.value === 'OWNER'"
@click=" @click="
() => { () => {
updateNewInviteeRole(index, TeamMemberRole.Owner); updateNewMemberRole(index, TeamMemberRole.Owner);
hide(); hide();
} }
" "
@@ -106,12 +68,12 @@
<HoppSmartItem <HoppSmartItem
label="EDITOR" label="EDITOR"
:icon=" :icon="
invitee.value === 'EDITOR' ? IconCircleDot : IconCircle member.value === 'EDITOR' ? IconCircleDot : IconCircle
" "
:active="invitee.value === 'EDITOR'" :active="member.value === 'EDITOR'"
@click=" @click="
() => { () => {
updateNewInviteeRole(index, TeamMemberRole.Editor); updateNewMemberRole(index, TeamMemberRole.Editor);
hide(); hide();
} }
" "
@@ -119,12 +81,12 @@
<HoppSmartItem <HoppSmartItem
label="VIEWER" label="VIEWER"
:icon=" :icon="
invitee.value === 'VIEWER' ? IconCircleDot : IconCircle member.value === 'VIEWER' ? IconCircleDot : IconCircle
" "
:active="invitee.value === 'VIEWER'" :active="member.value === 'VIEWER'"
@click=" @click="
() => { () => {
updateNewInviteeRole(index, TeamMemberRole.Viewer); updateNewMemberRole(index, TeamMemberRole.Viewer);
hide(); hide();
} }
" "
@@ -140,12 +102,12 @@
title="Remove" title="Remove"
:icon="IconTrash" :icon="IconTrash"
color="red" color="red"
@click="removeNewInvitee(index)" @click="removeNewMember(index)"
/> />
</div> </div>
</div> </div>
<div <div
v-if="newInvites.length === 0" v-if="newMembersList.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<img <img
@@ -154,15 +116,11 @@
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
/> />
<span class="pb-4 text-center"> No invites </span> <span class="pb-4 text-center"> No invites </span>
<HoppButtonSecondary <HoppButtonSecondary label="Add new" filled @click="addNewMember" />
label="Add new"
filled
@click="addNewInvitee"
/>
</div> </div>
</div> </div>
<div <div
v-if="newInvites.length" v-if="newMembersList.length"
class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight" class="flex flex-col items-start px-4 py-4 mt-4 border rounded border-dividerLight"
> >
<span <span
@@ -217,34 +175,12 @@
</template> </template>
<template #footer> <template #footer>
<p <span class="flex space-x-2">
v-if="sendInvitesResult.length" <HoppButtonPrimary
class="flex justify-between flex-1 text-secondaryLight" label="Add Member"
> outline
<HoppButtonSecondary @click="addUserasTeamMember"
class="link !p-0"
label="Invite more"
:icon="IconArrowLeft"
@click="
() => {
sendInvitesResult = [];
newInvites = [
{
key: '',
value: TeamMemberRole.Viewer,
},
];
}
"
/> />
<HoppButtonSecondary
class="link !p-0"
label="Dismiss"
@click="hideModal"
/>
</p>
<span v-else class="flex space-x-2">
<HoppButtonPrimary label="Invite" outline @click="sendInvites" />
<HoppButtonSecondary label="Cancel" outline filled @click="hideModal" /> <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
</span> </span>
</template> </template>
@@ -257,22 +193,17 @@ import * as A from 'fp-ts/Array';
import * as O from 'fp-ts/Option'; import * as O from 'fp-ts/Option';
import { pipe } from 'fp-ts/function'; import { pipe } from 'fp-ts/function';
import { import {
AddUserToTeamByAdminDocument,
TeamMemberRole, TeamMemberRole,
CreateTeamInvitationDocument,
} from '../../helpers/backend/graphql'; } from '../../helpers/backend/graphql';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { useMutation } from '@urql/vue';
import { Email, EmailCodec } from '~/helpers/backend/Email';
import IconTrash from '~icons/lucide/trash'; import IconTrash from '~icons/lucide/trash';
import IconPlus from '~icons/lucide/plus'; import IconPlus from '~icons/lucide/plus';
import IconHelpCircle from '~icons/lucide/help-circle'; import IconHelpCircle from '~icons/lucide/help-circle';
import IconAlertTriangle from '~icons/lucide/alert-triangle';
import IconMailCheck from '~icons/lucide/mail-check';
import IconCircleDot from '~icons/lucide/circle-dot'; import IconCircleDot from '~icons/lucide/circle-dot';
import IconCircle from '~icons/lucide/circle'; import IconCircle from '~icons/lucide/circle';
import IconArrowLeft from '~icons/lucide/arrow-left';
import { useMutation } from '@urql/vue';
import { Email, EmailCodec } from '~/helpers/backend/Email';
const toast = useToast(); const toast = useToast();
@@ -286,97 +217,67 @@ const props = defineProps({
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'hide-modal'): void; (e: 'hide-modal'): void;
(e: 'member'): void;
}>(); }>();
const t = (key: string) => key; const newMembersList = ref<Array<{ key: string; value: TeamMemberRole }>>([
const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
{ {
key: '', key: '',
value: TeamMemberRole.Viewer, value: TeamMemberRole.Viewer,
}, },
]); ]);
const addNewInvitee = () => { const addNewMember = () => {
newInvites.value.push({ newMembersList.value.push({
key: '', key: '',
value: TeamMemberRole.Viewer, value: TeamMemberRole.Viewer,
}); });
}; };
const updateNewInviteeRole = (index: number, role: TeamMemberRole) => { const updateNewMemberRole = (index: number, role: TeamMemberRole) => {
newInvites.value[index].value = role; newMembersList.value[index].value = role;
}; };
const removeNewInvitee = (id: number) => { const removeNewMember = (id: number) => {
newInvites.value.splice(id, 1); newMembersList.value.splice(id, 1);
}; };
type SendInvitesErrorType = const addingUserToTeam = ref<boolean>(false);
| {
email: Email;
status: 'error';
error: any;
}
| {
email: Email;
status: 'success';
};
const sendInvitesResult = ref<Array<SendInvitesErrorType>>([]); const addUserasTeamMember = async () => {
addingUserToTeam.value = true;
const sendingInvites = ref<boolean>(false);
const sendInvites = async () => {
sendingInvites.value = true;
const validationResult = pipe( const validationResult = pipe(
newInvites.value, newMembersList.value,
O.fromPredicate( O.fromPredicate(
(invites): invites is Array<{ key: Email; value: TeamMemberRole }> => (
memberInvites
): memberInvites is Array<{ key: Email; value: TeamMemberRole }> =>
pipe( pipe(
invites, memberInvites,
A.every((invitee) => EmailCodec.is(invitee.key)) A.every((member) => EmailCodec.is(member.key))
) )
), ),
O.map( O.map(
A.map((invitee) => A.map((member) =>
createTeamInvitation(invitee.key, invitee.value, props.editingTeamID) addUserToTeam(member.key, member.value, props.editingTeamID)
) )
) )
); );
if (O.isNone(validationResult)) { if (O.isNone(validationResult)) {
// Error handling for no validation // Error handling for no validation
toast.error(`Invalid email address`); toast.error('Invalid User!!');
sendingInvites.value = false; addingUserToTeam.value = false;
return; return;
} }
hideModal(); hideModal();
}; };
const getErrorMessage = (error: SendInvitesErrorType | any) => {
if (error.type === 'network_error') {
return t('error.network_error');
} else {
switch (error.error) {
case 'team/invalid_id':
return t('team.invalid_id');
case 'team/member_not_found':
return t('team.member_not_found');
case 'team_invite/already_member':
return t('team.already_member');
case 'team_invite/member_has_invite':
return t('team.member_has_invite');
}
}
};
const hideModal = () => { const hideModal = () => {
sendingInvites.value = false; addingUserToTeam.value = false;
sendInvitesResult.value = []; newMembersList.value = [
newInvites.value = [
{ {
key: '', key: '',
value: TeamMemberRole.Viewer, value: TeamMemberRole.Viewer,
@@ -385,18 +286,29 @@ const hideModal = () => {
emit('hide-modal'); emit('hide-modal');
}; };
const teamInvitationMutation = useMutation(CreateTeamInvitationDocument); const addUserToTeamMutation = useMutation(AddUserToTeamByAdminDocument);
const createTeamInvitation = async ( const addUserToTeam = async (
inviteeEmail: Email, email: string,
inviteeRole: TeamMemberRole, userRole: TeamMemberRole,
teamID: string teamID: string
) => { ) => {
const res = await teamInvitationMutation.executeMutation({ const variables = { userEmail: email, role: userRole, teamID: teamID };
inviteeEmail,
inviteeRole,
teamID,
});
const res = await addUserToTeamMutation
.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 {
toast.error('Failed to add user to the team!!');
}
} else {
toast.success('User is now a member of the team!!');
emit('member');
}
});
return res; return res;
}; };
</script> </script>

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

@@ -1,229 +1,209 @@
<template> <template>
<div class="flex flex-col"> <div class="my-6">
<div class="relative flex"> <h3 class="text-2xl font-bold text-gray-200">Team Members</h3>
<input <div class="flex flex-col mb-6">
id="selectLabelTeamEdit" <div class="flex items-center justify-end flex-1 pt-4 mb-4">
v-model="name" <div class="flex">
v-focus <HoppButtonPrimary
class="input floating-input" :icon="IconUserPlus"
placeholder=" " label="Add Members"
type="text" filled
autocomplete="off" @click="showInvite = !showInvite"
@keyup.enter="saveTeam"
/>
<label for="selectLabelTeamEdit">
{{ t('action.label') }}
</label>
</div>
<div class="flex items-center justify-between flex-1 pt-4">
<label for="memberList" class="p-4">
{{ t('team.members') }}
</label>
<div class="flex">
<HoppButtonSecondary
:icon="IconUserPlus"
:label="t('team.invite')"
filled
@click="
() => {
emit('invite-team');
}
"
/>
</div>
</div>
<div v-if="teamDetails.loading" class="border rounded border-divider">
<div class="flex items-center justify-center p-4">
<HoppSmartSpinner />
</div>
</div>
<div class="border rounded border-divider">
<div
v-if="teamMembers === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
>
<img
:src="`/images/states/dark/add_group.svg`"
loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
:alt="`${t('empty.members')}`"
/>
<span class="pb-4 text-center">
{{ t('empty.members') }}
</span>
<HoppButtonSecondary
:icon="IconUserPlus"
:label="t('team.invite')"
@click="
() => {
emit('invite-team');
}
"
/>
</div>
<div v-else class="divide-y divide-dividerLight">
<div
v-for="(member, index) in membersList"
:key="`member-${index}`"
class="flex divide-x divide-dividerLight"
>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('team.email')}`"
:name="'param' + index"
:value="member.email"
readonly
/> />
<span> </div>
<tippy </div>
interactive
trigger="click" <div class="border rounded border-divider">
theme="popover" <div
:on-shown="() => tippyActions![index].focus()" v-if="team?.teamMembers?.length === 0"
> class="flex flex-col items-center justify-center p-4 text-secondaryLight"
<span class="select-wrapper"> >
<input <span class="pb-4 text-center">
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer" No members in this team. Add members to this team to collaborate
:placeholder="`${t('team.permissions')}`"
:name="'value' + index"
:value="member.role"
readonly
/>
</span>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
label="OWNER"
:icon="member.role === 'OWNER' ? IconCircleDot : IconCircle"
:active="member.role === 'OWNER'"
@click="
() => {
updateMemberRole(member.userID, TeamMemberRole.Owner);
hide();
}
"
/>
<HoppSmartItem
label="EDITOR"
:icon="
member.role === 'EDITOR' ? IconCircleDot : IconCircle
"
:active="member.role === 'EDITOR'"
@click="
() => {
updateMemberRole(member.userID, TeamMemberRole.Editor);
hide();
}
"
/>
<HoppSmartItem
label="VIEWER"
:icon="
member.role === 'VIEWER' ? IconCircleDot : IconCircle
"
:active="member.role === 'VIEWER'"
@click="
() => {
updateMemberRole(member.userID, TeamMemberRole.Viewer);
hide();
}
"
/>
</div>
</template>
</tippy>
</span> </span>
<div class="flex"> <HoppButtonSecondary
<HoppButtonSecondary :icon="IconUserPlus"
id="member" label="Add Members"
v-tippy="{ theme: 'tooltip' }" @click="
:title="t('action.remove')" () => {
:icon="IconUserMinus" showInvite = !showInvite;
color="red" }
:loading="isLoadingIndex === index" "
@click="removeExistingTeamMember(member.userID, index)" />
</div>
<div v-else class="divide-y divide-dividerLight">
<div
v-for="(member, index) in membersList"
:key="`member-${index}`"
class="flex divide-x divide-dividerLight"
>
<input
class="flex flex-1 px-4 py-2 bg-transparent"
placeholder="Email"
:name="'param' + index"
:value="member.email"
readonly
/> />
<span>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions![index].focus()"
>
<span class="select-wrapper">
<input
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
placeholder="Permissions"
:name="'value' + index"
:value="member.role"
readonly
/>
</span>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.escape="hide()"
>
<HoppSmartItem
label="OWNER"
:icon="
member.role === 'OWNER' ? IconCircleDot : IconCircle
"
:active="member.role === 'OWNER'"
@click="
() => {
updateMemberRole(member.userID, TeamMemberRole.Owner);
hide();
}
"
/>
<HoppSmartItem
label="EDITOR"
:icon="
member.role === 'EDITOR' ? IconCircleDot : IconCircle
"
:active="member.role === 'EDITOR'"
@click="
() => {
updateMemberRole(
member.userID,
TeamMemberRole.Editor
);
hide();
}
"
/>
<HoppSmartItem
label="VIEWER"
:icon="
member.role === 'VIEWER' ? IconCircleDot : IconCircle
"
:active="member.role === 'VIEWER'"
@click="
() => {
updateMemberRole(
member.userID,
TeamMemberRole.Viewer
);
hide();
}
"
/>
</div>
</template>
</tippy>
</span>
<div class="flex">
<HoppButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
title="Remove"
:icon="IconUserMinus"
color="red"
:loading="isLoadingIndex === index"
@click="removeExistingTeamMember(member.userID, index)"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="!fetching && !team" class="flex flex-col items-center">
<component :is="IconHelpCircle" class="mb-4 svg-icons" />
Something went wrong. Please try again later.
</div>
</div> </div>
<div
v-if="!teamDetails.loading && E.isLeft(teamDetails.data)" <HoppButtonPrimary label="Save" outline @click="saveUpdatedTeam" />
class="flex flex-col items-center"
>
<component :is="IconHelpCircle" class="mb-4 svg-icons" />
{{ t('error.something_went_wrong') }}
</div>
</div> </div>
<HoppButtonPrimary <TeamsInvite
:label="t('action.save')" :show="showInvite"
:loading="isLoading" :editingTeamID="route.params.id.toString()"
outline @member="updateMembers"
@click="saveTeam" @hide-modal="
() => {
showInvite = false;
}
"
/> />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, toRef, watch } from 'vue';
import * as E from 'fp-ts/Either';
import {
GetTeamDocument,
GetTeamQuery,
GetTeamQueryVariables,
TeamMemberAddedDocument,
TeamMemberRemovedDocument,
TeamMemberRole,
TeamMemberUpdatedDocument,
RemoveTeamMemberDocument,
} from '~/helpers/backend/graphql';
import {
removeTeamMember,
updateTeamMemberRole,
} from '~/helpers/backend/mutations/Team';
import { useToast } from '~/composables/toast';
import IconCircleDot from '~icons/lucide/circle-dot'; import IconCircleDot from '~icons/lucide/circle-dot';
import IconCircle from '~icons/lucide/circle'; import IconCircle from '~icons/lucide/circle';
import IconUserPlus from '~icons/lucide/user-plus'; import IconUserPlus from '~icons/lucide/user-plus';
import IconUserMinus from '~icons/lucide/user-minus'; import IconUserMinus from '~icons/lucide/user-minus';
import IconHelpCircle from '~icons/lucide/help-circle'; import IconHelpCircle from '~icons/lucide/help-circle';
import { useClientHandle, useMutation } from '@urql/vue';
const t = (key: string) => key; import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const emit = defineEmits<{ import { useToast } from '../../composables/toast';
(e: 'hide-modal'): void; import {
(e: 'refetch-teams'): void; ChangeUserRoleInTeamByAdminDocument,
(e: 'invite-team'): void; TeamInfoDocument,
}>(); TeamMemberRole,
RemoveUserFromTeamByAdminDocument,
// Template refs TeamInfoQuery,
const tippyActions = ref<any | null>(null); } from '../../helpers/backend/graphql';
import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
const props = defineProps<{
show: boolean;
editingTeam: {
name: string;
};
editingTeamID: string;
teamMembers: any;
}>();
const toast = useToast(); const toast = useToast();
const name = toRef(props.editingTeam, 'name'); // Used to Invoke the Invite Members Modal
const showInvite = ref(false);
watch( // Get Team Details
() => props.editingTeam.name, const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
(newName: string) => { const fetching = ref(true);
name.value = newName; const route = useRoute();
const { client } = useClientHandle();
const getTeamInfo = async () => {
fetching.value = true;
const result = await client
.query(TeamInfoDocument, { teamID: route.params.id.toString() })
.toPromise();
if (result.error) {
return toast.error('Unable to Load Team Info..');
} }
); if (result.data?.admin.teamInfo) {
team.value = result.data.admin.teamInfo;
}
fetching.value = false;
};
onMounted(async () => {
await getTeamInfo();
});
// Update members tab after a change in the members list or member roles
const updateMembers = () => getTeamInfo();
// Template refs
const tippyActions = ref<any | null>(null);
const roleUpdates = ref< const roleUpdates = ref<
{ {
@@ -233,24 +213,21 @@ const roleUpdates = ref<
>([]); >([]);
watch( watch(
() => teamDetails, () => team.value,
() => { (teamDetails) => {
if (teamDetails.loading) return; const members = teamDetails?.teamMembers ?? [];
const data = teamDetails.data; // Remove deleted members
roleUpdates.value = roleUpdates.value.filter(
if (E.isRight(data)) { (update) =>
const members = data.right.team?.teamMembers ?? []; members.findIndex(
(y: { user: { uid: string } }) => y.user.uid === update.userID
// Remove deleted members ) !== -1
roleUpdates.value = roleUpdates.value.filter( );
(update) =>
members.findIndex((y) => y.user.uid === update.userID) !== -1
);
}
} }
); );
// Update the role of the member selected in the UI
const updateMemberRole = (userID: string, role: TeamMemberRole) => { const updateMemberRole = (userID: string, role: TeamMemberRole) => {
const updateIndex = roleUpdates.value.findIndex( const updateIndex = roleUpdates.value.findIndex(
(item) => item.userID === userID (item) => item.userID === userID
@@ -267,8 +244,10 @@ const updateMemberRole = (userID: string, role: TeamMemberRole) => {
} }
}; };
// Obtain the list of members in the team
const membersList = computed(() => { const membersList = computed(() => {
const members = (props.teamMembers ?? []).map((member) => { if (!team.value) return [];
const members = (team.value.teamMembers ?? []).map((member) => {
const updatedRole = roleUpdates.value.find( const updatedRole = roleUpdates.value.find(
(update) => update.userID === member.user.uid (update) => update.userID === member.user.uid
); );
@@ -283,47 +262,73 @@ const membersList = computed(() => {
return members; return members;
}); });
// Change the role of the selected user in the team
const changeUserRoleInTeamMutation = useMutation(
ChangeUserRoleInTeamByAdminDocument
);
const changeUserRoleInTeam = (
userUID: string,
teamID: string,
newRole: TeamMemberRole
) => {
return changeUserRoleInTeamMutation.executeMutation({
userUID,
teamID,
newRole,
});
};
// Save the updates done to the team
const isLoading = ref(false);
const saveUpdatedTeam = async () => {
isLoading.value = true;
roleUpdates.value.forEach(async (update) => {
if (!team.value) return;
const updateMemberRoleResult = await changeUserRoleInTeam(
update.userID,
team.value.id,
update.role
);
if (updateMemberRoleResult.error) {
toast.error('Role updation has failed!!');
} else {
toast.success('Roles updated successfully!!');
}
isLoading.value = false;
});
};
// Remove user from the team mutation
const removeUserFromTeamMutation = useMutation(
RemoveUserFromTeamByAdminDocument
);
const removeUserFromTeam = (userUid: string, teamID: string) => {
return () =>
removeUserFromTeamMutation.executeMutation({
userUid,
teamID,
});
};
// Remove a team member from the team
const isLoadingIndex = ref<null | number>(null); const isLoadingIndex = ref<null | number>(null);
const removeExistingTeamMember = async (userID: string, index: number) => { const removeExistingTeamMember = async (userID: string, index: number) => {
if (!team.value) return;
isLoadingIndex.value = index; isLoadingIndex.value = index;
const removeTeamMemberResult = await removeTeamMember( const removeTeamMemberResult = await removeUserFromTeam(
userID, userID,
props.editingTeamID team.value.id
)(); )();
if (E.isLeft(removeTeamMemberResult)) { if (removeTeamMemberResult.error) {
toast.error(`${t('error.something_went_wrong')}`); toast.error(`Member couldn't be removed!!`);
} else { } else {
toast.success(`${t('team.member_removed')}`); team.value.teamMembers = team.value.teamMembers?.filter(
emit('refetch-teams'); (member: any) => member.user.uid !== userID
teamDetails.execute({ teamID: props.editingTeamID }); );
toast.success('Member removed successfully!!');
} }
isLoadingIndex.value = null; isLoadingIndex.value = null;
}; };
const isLoading = ref(false);
const saveTeam = async () => {
isLoading.value = true;
roleUpdates.value.forEach(async (update) => {
const updateMemberRoleResult = await updateTeamMemberRole(
update.userID,
props.editingTeamID,
update.role
)();
if (E.isLeft(updateMemberRoleResult)) {
toast.error(`${t('error.something_went_wrong')}`);
console.error(updateMemberRoleResult.left.error);
}
});
hideModal();
toast.success(`${t('team.saved')}`);
isLoading.value = false;
};
const hideModal = () => {
emit('hide-modal');
};
</script> </script>

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

@@ -1,15 +1,14 @@
<template> <template>
<div class="flex items-center justify-between flex-1"> <h3 class="text-2xl font-bold text-gray-200 mb-5">Pending Invites</h3>
<label for="memberList" class="pb-4"> Pending Invites </label>
</div>
<div class="border rounded divide-y divide-dividerLight border-divider"> <div class="border rounded divide-y divide-dividerLight border-divider">
<div v-if="fetching" class="flex items-center justify-center p-4"> <div v-if="fetching" class="flex items-center justify-center p-4">
<HoppSmartSpinner /> <HoppSmartSpinner />
</div> </div>
<div v-else> <div v-else>
<div v-if="data" class="divide-y divide-dividerLight"> <div v-if="team" class="divide-y divide-dividerLight">
<div <div
v-for="(invitee, index) in data?.team?.teamInvitations" v-for="(invitee, index) in pendingInvites"
:key="`invitee-${index}`" :key="`invitee-${index}`"
class="flex divide-x divide-dividerLight" class="flex divide-x divide-dividerLight"
> >
@@ -41,7 +40,7 @@
</div> </div>
</div> </div>
<div <div
v-if="data && data?.team?.teamInvitations.length === 0" v-if="team && pendingInvites?.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
> >
<span class="text-center"> No pending invites </span> <span class="text-center"> No pending invites </span>
@@ -57,43 +56,72 @@
<script setup lang="ts"> <script setup lang="ts">
import IconTrash from '~icons/lucide/trash'; import IconTrash from '~icons/lucide/trash';
import IconHelpCircle from '~icons/lucide/help-circle'; import IconHelpCircle from '~icons/lucide/help-circle';
import { useMutation, useQuery } from '@urql/vue'; import { useMutation, useClientHandle } from '@urql/vue';
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import { import {
GetPendingInvitesDocument,
RevokeTeamInvitationDocument, RevokeTeamInvitationDocument,
TeamInfoDocument,
TeamInfoQuery,
} from '~/helpers/backend/graphql'; } from '~/helpers/backend/graphql';
import { useToast } from '~/composables/toast'; import { useToast } from '~/composables/toast';
import { useRoute } from 'vue-router';
const props = defineProps({
editingTeamID: { type: String, default: null },
});
const toast = useToast(); const toast = useToast();
const isLoadingIndex = ref<null | number>(null);
const { fetching, data, error } = useQuery({ // Get details of the team
query: GetPendingInvitesDocument, const fetching = ref(true);
variables: { const error = ref(false);
teamID: props.editingTeamID, const { client } = useClientHandle();
}, const route = useRoute();
const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
const pendingInvites = ref<
TeamInfoQuery['admin']['teamInfo']['teamInvitations'] | undefined
>();
const getTeamInfo = async () => {
fetching.value = true;
const result = await client
.query(TeamInfoDocument, { teamID: route.params.id.toString() })
.toPromise();
if (result.error) {
error.value = true;
return toast.error('Unable to load team details..');
}
if (result.data?.admin.teamInfo) {
team.value = result.data.admin.teamInfo;
pendingInvites.value = team.value.teamInvitations;
}
fetching.value = false;
};
onMounted(async () => {
await getTeamInfo();
}); });
console.log(data); // Remove Invitation
const isLoadingIndex = ref<null | number>(null);
const revokeInvitationMutation = useMutation(RevokeTeamInvitationDocument);
const revokeTeamInvitation = (inviteID: string) =>
revokeInvitationMutation.executeMutation({ inviteID });
const removeInvitee = async (id: string, index: number) => { const removeInvitee = async (id: string, index: number) => {
isLoadingIndex.value = index; isLoadingIndex.value = index;
const result = await revokeTeamInvitation(id); const result = await revokeTeamInvitation(id);
if (result.error) { if (result.error) {
toast.error(`Member could not be removed`); toast.error('Removal of invitee failed!!');
} else { } else {
toast.success(`Member removed successfully`); if (pendingInvites.value) {
pendingInvites.value = pendingInvites.value.filter(
(invite: { id: string }) => {
return invite.id !== id;
}
);
toast.success('Removal of invitee is successfull!!');
}
} }
isLoadingIndex.value = null; isLoadingIndex.value = null;
}; };
const revokeInvitationMutation = useMutation(RevokeTeamInvitationDocument);
function revokeTeamInvitation(inviteID: string) {
return revokeInvitationMutation.executeMutation({ inviteID });
}
</script> </script>

13
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/AddUserToTeamByAdmin.graphql Normal file
View File

@@ -0,0 +1,13 @@
mutation AddUserToTeamByAdmin(
$userEmail: String!
$role: TeamMemberRole!
$teamID: ID!
) {
addUserToTeamByAdmin(role: $role, userEmail: $userEmail, teamID: $teamID) {
membershipID
role
user {
uid
}
}
}

14
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/ChangeUserRoleInTeamByAdmin.graphql Normal file
View File

@@ -0,0 +1,14 @@
mutation ChangeUserRoleInTeamByAdmin(
$userUID: ID!
$teamID: ID!
$newRole: TeamMemberRole!
) {
changeUserRoleInTeamByAdmin(
userUID: $userUID
teamID: $teamID
newRole: $newRole
) {
membershipID
role
}
}

1
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/CreateTeam.graphql
View File

@@ -12,7 +12,6 @@ mutation CreateTeam($userUid: ID!, $name: String!) {
photoURL photoURL
} }
} }
myRole
ownersCount ownersCount
editorsCount editorsCount
viewersCount viewersCount

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveTeamMember.graphql
View File

@@ -1,3 +0,0 @@
mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
removeTeamMember(userUid: $userUid, teamID: $teamID)
}

3
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/RemoveUserFromTeamByAdmin.graphql Normal file
View File

@@ -0,0 +1,3 @@
mutation RemoveUserFromTeamByAdmin($userUid: ID!, $teamID: ID!) {
removeUserFromTeamByAdmin(userUid: $userUid, teamID: $teamID)
}

10
packages/hoppscotch-sh-admin/src/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
View File

@@ -1,10 +0,0 @@
mutation UpdateTeamMemberRole(
$newRole: TeamMemberRole!
$userUid: ID!
$teamID: ID!
) {
updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
membershipID
role
}
}

51
packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamInfo.graphql
View File

@@ -1,30 +1,31 @@
query TeamInfo($uid: ID!) { query TeamInfo($teamID: ID!) {
team(teamID: $uid) { admin {
id teamInfo(teamID: $teamID) {
name
teamMembers {
membershipID
role
user {
uid
displayName
email
photoURL
}
}
teamInvitations {
id
inviteeEmail
inviteeRole
}
teamEnvironments {
id id
name name
teamMembers {
membershipID
role
user {
uid
displayName
email
photoURL
}
}
teamInvitations {
id
inviteeEmail
inviteeRole
}
teamEnvironments {
id
name
}
ownersCount
editorsCount
viewersCount
} }
myRole
ownersCount
editorsCount
viewersCount
} }
} }

4
packages/hoppscotch-sh-admin/src/helpers/backend/gql/queries/TeamList.graphql
View File

@@ -1,6 +1,6 @@
query TeamList($cursor: ID) { query TeamList($cursor: ID, $take: Int) {
admin { admin {
allTeams(cursor: $cursor) { allTeams(cursor: $cursor, take: $take) {
id id
name name
members { members {

80
packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
View File

@@ -1,80 +0,0 @@
<template>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
<div>
<div>
<div class="px-6 rounded-md">
<div>
<div class="flex mt-4">
<div>
<label class="text-gray-200 mr-5 text-lg" for="username"
>Name:
</label>
<input
class="w-96 p-2 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
type="text"
v-model="name"
placeholder="Enter Name"
/>
</div>
</div>
</div>
<div class="mt-6"></div>
<div>
<HoppButtonPrimary :loading="loading" label="Save" @click="addTeam" />
</div>
<div class="mt-8"></div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useMutation } from '@urql/vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useReadonlyStream } from '~/composables/stream';
import { auth } from '~/helpers/auth';
import { CreateTeamDocument } from '../../helpers/backend/graphql';
const router = useRouter();
const name = ref('');
const loading = ref(false);
const addTeamMutation = useMutation(CreateTeamDocument);
const currentUser = useReadonlyStream(
auth.getProbableUserStream(),
auth.getProbableUser()
);
const addTeam = async () => {
loading.value = true;
let payload = {
name: name.value.trim(),
userUid: '',
};
if (currentUser.value) {
payload['userUid'] = currentUser.value.uid;
}
const { data, error } = await addTeamMutation.executeMutation(payload);
loading.value = false;
if (data) {
name.value = '';
goToTeamDetailsPage(data.createTeamByAdmin.id);
}
if (error) {
console.log(error);
}
};
const goToTeamDetailsPage = (teamId: string) => {
router.push('/teams/' + teamId);
};
</script>

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

@@ -1,3 +1,277 @@
<template> <template>
<TeamsDetails /> <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
<div v-if="team">
<div class="flex">
<button
class="p-2 mb-2 mr-5 rounded-3xl bg-zinc-800"
@click="router.push('/teams')"
>
<icon-lucide-arrow-left class="text-xl" />
</button>
<div class="">
<h3 class="mx-auto text-3xl font-bold text-gray-200 mt-1">
{{ team.name }}
</h3>
</div>
</div>
<div v-if="team" class="flex !rounded-none justify-center mb-5 sm:px-6 p-4">
<HoppButtonSecondary
class="!rounded-none"
:class="{ '!bg-primaryDark': showTeamDetails }"
filled
outline
label="Details"
@click="switchToTeamDetailsTab"
/>
<HoppButtonSecondary
class="!rounded-none"
:class="{ '!bg-primaryDark': showMembers }"
filled
outline
label="Members"
@click="switchToMembersTab"
/>
<HoppButtonSecondary
class="!rounded-none"
:class="{ '!bg-primaryDark': showPendingInvites }"
filled
outline
label="Invites"
@click="switchToPendingInvitesTab"
/>
</div>
<div v-if="team && showTeamDetails">
<h3 class="sm:px-6 px-4 text-2xl font-bold text-gray-200">
Team Details
</h3>
<div class="px-6 rounded-md mt-5">
<div class="grid gap-6">
<div v-if="team.id">
<label class="text-gray-200" for="username">Team ID</label>
<div
class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ team.id }}
</div>
</div>
<div>
<label class="text-gray-200" for="username">Team Name</label>
<div v-if="!showRenameInput" class="flex">
<div
class="flex-1 w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ teamName }}
</div>
<HoppButtonPrimary
class="cursor-pointer mt-2 ml-2"
filled
:icon="IconEdit"
label="Edit"
@click="showRenameInput = true"
/>
</div>
<div v-else class="flex">
<input
class="flex-1 w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
type="text"
v-model="teamName"
placeholder="Team Name"
autofocus
v-focus
/>
<div>
<HoppButtonPrimary
class="cursor-pointer mt-2 ml-2 min-h-11"
:icon="IconSave"
filled
label="Rename"
@click="renameTeamName()"
/>
</div>
</div>
</div>
<div v-if="team.teamMembers.length">
<label class="text-gray-200" for="username"
>Number of Members</label
>
<div
class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ team.teamMembers.length }}
</div>
</div>
</div>
<div class="flex justify-start mt-8">
<HoppButtonSecondary
class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
filled
label="Delete Team"
@click="team && deleteTeam(team.id)"
/>
</div>
</div>
</div>
</div>
<div v-if="team" class="sm:px-6 px-4">
<TeamsMembers v-if="showMembers" />
<TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
<HoppSmartConfirmModal
:show="confirmDeletion"
:title="`Confirm Deletion of ${team.name} team?`"
@hide-modal="confirmDeletion = false"
@resolve="deleteTeamMutation(deleteTeamUID)"
/>
</div>
</template> </template>
<script setup lang="ts">
import { useClientHandle, useMutation } from '@urql/vue';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useToast } from '../../composables/toast';
import {
RemoveTeamDocument,
RenameTeamDocument,
TeamInfoDocument,
TeamMemberRole,
TeamInfoQuery,
} from '../../helpers/backend/graphql';
import IconEdit from '~icons/lucide/edit';
import IconSave from '~icons/lucide/save';
const toast = useToast();
// Switch between team details, members and invites tab
const showMembers = ref(false);
const showPendingInvites = ref(false);
const showTeamDetails = ref(true);
const switchToMembersTab = () => {
showMembers.value = true;
showTeamDetails.value = false;
showPendingInvites.value = false;
};
const switchToPendingInvitesTab = () => {
showTeamDetails.value = false;
showMembers.value = false;
showPendingInvites.value = true;
};
const switchToTeamDetailsTab = () => {
showTeamDetails.value = true;
showMembers.value = false;
showPendingInvites.value = false;
};
// Get the details of the team
const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
const teamName = ref('');
const route = useRoute();
const fetching = ref(true);
const { client } = useClientHandle();
const getTeamInfo = async () => {
fetching.value = true;
const result = await client
.query(TeamInfoDocument, { teamID: route.params.id.toString() })
.toPromise();
if (result.error) {
return toast.error('Unable to load team info..');
}
if (result.data?.admin.teamInfo) {
team.value = result.data.admin.teamInfo;
teamName.value = team.value.name;
}
fetching.value = false;
};
onMounted(async () => {
await getTeamInfo();
});
// Rename the team name
const showRenameInput = ref(false);
const teamRename = useMutation(RenameTeamDocument);
const renameTeamName = async () => {
if (!team.value) return;
if (team.value.name === teamName.value) {
showRenameInput.value = false;
return;
}
const variables = { uid: team.value.id, name: teamName.value };
await teamRename.executeMutation(variables).then((result) => {
if (result.error) {
toast.error('Failed to rename team!!');
} else {
showRenameInput.value = false;
if (team.value) {
team.value.name = teamName.value;
toast.success('Team renamed successfully!!');
}
}
});
};
// Delete team from the infra
const router = useRouter();
const confirmDeletion = ref(false);
const teamDeletion = useMutation(RemoveTeamDocument);
const deleteTeamUID = ref<string | null>(null);
const deleteTeam = (id: string) => {
confirmDeletion.value = true;
deleteTeamUID.value = id;
};
const deleteTeamMutation = async (id: string | null) => {
if (!id) {
confirmDeletion.value = false;
toast.error('Team deletion failed!!');
return;
}
const variables = { uid: id };
await teamDeletion.executeMutation(variables).then((result) => {
if (result.error) {
toast.error('Team deletion failed!!');
} else {
toast.success('Team deleted successfully!!');
}
});
confirmDeletion.value = false;
deleteTeamUID.value = null;
router.push('/teams');
};
// Update Roles of Members
const roleUpdates = ref<
{
userID: string;
role: TeamMemberRole;
}[]
>([]);
watch(
() => team.value,
(teamDetails) => {
const members = teamDetails?.teamMembers ?? [];
// Remove deleted members
roleUpdates.value = roleUpdates.value.filter(
(update) =>
members.findIndex(
(y: { user: { uid: string } }) => y.user.uid === update.userID
) !== -1
);
}
);
</script>

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

@@ -1,139 +1,123 @@
<template> <template>
<div> <div>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3> <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Teams</h3>
<div class="flex flex-col" v-if="!fetching"> <div class="flex flex-col">
<div class="py-2 overflow-x-auto"> <div class="py-2 overflow-x-auto">
<div class="inline-block min-w-full overflow-hidden align-middle"> <div class="inline-block min-w-full overflow-hidden align-middle">
<div class="sm:px-7 p-4"> <div class="sm:px-7 p-4">
<div class="flex w-full items-center mb-7"> <div class="flex w-full items-center mb-7">
<button <HoppButtonPrimary
class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0" class="mr-4"
> label="Create Team"
Last 30 days @click="showCreateTeamModal = true"
<icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" /> />
</button>
<button
class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
>
Filter by
<icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
</button>
<router-link to="/teams/addteam">
<button
class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Create Team
</button>
</router-link>
<div
class="ml-auto text-gray-400 text-xs sm:inline-flex hidden items-center"
>
<span class="mr-3">Page 2 of 4</span>
<button
class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
>
<icon-lucide-chevron-left class="text-xl" />
</button>
<button
class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
>
<icon-lucide-chevron-right class="text-xl" />
</button>
</div>
</div> </div>
<div> <div>
<table class="w-full text-left"> <div
v-if="fetching && !error && !(teamList.length >= 1)"
class="flex justify-center"
>
<HoppSmartSpinner />
</div>
<div v-else-if="error">Unable to Load Teams List..</div>
<table v-if="teamList.length >= 1" class="w-full text-left">
<thead> <thead>
<tr class="text-gray-200 border-b border-gray-600 text-sm"> <tr
<th class="font-normal px-3 pt-0 pb-3"></th> class="text-gray-200 border-b border-dividerDark text-sm font-bold"
<th class="font-normal px-3 pt-0 pb-3">Team Name</th> >
<th class="font-normal px-3 pt-0 pb-3">Team ID</th> <th class="px-3 pt-0 pb-3">Team ID</th>
<th class="font-normal px-3 pt-0 pb-3 md:table-cell"> <th class="px-3 pt-0 pb-3">Team Name</th>
Number of Members <th class="px-3 pt-0 pb-3">Number of Members</th>
</th> <th class="px-3 pt-0 pb-3"></th>
<th class="font-normal px-3 pt-0 pb-3">Action</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-300"> <tbody class="text-gray-300">
<!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
<tr <tr
v-for="(team, index) in teamList" v-for="team in teamList"
:key="team.id" :key="team.id"
class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl" class="border-b border-divider hover:bg-zinc-800 hover:cursor-pointer rounded-xl p-3"
> >
<td> <td
<label> @click="goToTeamDetails(team.id)"
<input class="sm:p-3 py-5 px-1 min-w-30 max-w-50"
type="checkbox" >
class="appearance-none bg-gray-600 checked:bg-emerald-600 rounded-md ml-3 w-5 h-5" <div class="flex">
name="radio" <span class="ml-3 truncate">
/> {{ team.id }}
</label> </span>
</div>
</td> </td>
<td <td
class="sm:p-3 py-2 px-1 md:table-cell text-sky-300" @click="goToTeamDetails(team.id)"
@click="goToTeam(team.id)" class="sm:p-3 py-5 px-1 min-w-80"
> >
<span class="hover:underline cursor-pointer"> <span
v-if="team.name"
class="flex items-center ml-4 truncate"
>
{{ team.name }} {{ team.name }}
</span> </span>
</td> <span v-else class="flex items-center ml-4">
(Unnamed team)
<td @click="goToTeam(team.id)" class="sm:p-3 py-2 px-1">
<span class="hover:underline cursor-pointer">
{{ team.id }}
</span> </span>
</td> </td>
<td class="sm:p-3 py-2 px-1 justify-center"> <td
{{ team.members?.length }} @click="goToTeamDetails(team.id)"
class="sm:p-3 py-5 px-1"
>
<span class="ml-7">
{{ team.members?.length }}
</span>
</td> </td>
<td> <td>
<tippy <div class="relative">
interactive <tippy
trigger="click" interactive
theme="popover" trigger="click"
:on-shown="() => tippyActions![index].focus()" theme="popover"
> :on-shown="() => tippyActions!.focus()"
<span class="cursor-pointer"> >
<icon-lucide-more-horizontal /> <HoppButtonSecondary
</span> v-tippy="{ theme: 'tooltip' }"
<template #content="{ hide }"> :icon="IconMoreHorizontal"
<div />
ref="tippyActions" <template #content="{ hide }">
class="flex flex-col focus:outline-none" <div
tabindex="0" ref="tippyActions"
@keyup.escape="hide()" class="flex flex-col focus:outline-none"
> tabindex="0"
<HoppSmartItem @keyup.escape="hide()"
label="Delete" >
@click=" <HoppSmartItem
() => { :icon="IconTrash"
deleteTeam(team.id); :label="'Delete Team'"
hide(); class="!hover:bg-red-600 w-full"
} @click="deleteTeam(team.id)"
" />
/> </div>
</div> </template>
</template> </tippy>
</tippy> </div>
</td> </td>
</tr> </tr>
<!-- </router-link> -->
</tbody> </tbody>
</table> </table>
</div> <div
v-if="hasNextPage"
<div v-if="teamList.length >= 20" class="text-center"> class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
<button
@click="fetchNextTeams" @click="fetchNextTeams"
class="mt-5 p-2 rounded-3xl bg-gray-700"
> >
<icon-lucide-chevron-down class="text-xl" /> <span>Show more </span>
</button> <icon-lucide-chevron-down class="ml-2 text-lg" />
</div>
<div v-else class="mb-12 p-2"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -141,6 +125,58 @@
</div> </div>
</div> </div>
<HoppSmartModal
v-if="showCreateTeamModal"
dialog
title="Create Team"
@close="showCreateTeamModal = false"
>
<template #body>
<div>
<div>
<div class="px-6 rounded-md">
<div>
<div class="my-4">
<div>
<label class="text-gray-200" for="emailAddress">
Enter Team Name
</label>
<input
class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
v-model="teamName"
placeholder="Team Name"
/>
</div>
</div>
<div class="my-6">
<div>
<label class="text-gray-200" for="emailAddress">
Enter Email Address of Team Owner
</label>
<HoppSmartAutoComplete
placeholder="Enter Email"
:source="allUsersEmail"
:spellcheck="true"
styles="
w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500
"
class="flex-1 !flex"
@input="(email: string) => getOwnerEmail(email)"
/>
</div>
</div>
<div class="flex justify-end my-2 pt-3">
<HoppButtonPrimary label="Create Team" @click="createTeam" />
</div>
</div>
</div>
</div>
</div>
</template>
</HoppSmartModal>
<HoppSmartConfirmModal <HoppSmartConfirmModal
:show="confirmDeletion" :show="confirmDeletion"
:title="`Confirm Deletion of the team?`" :title="`Confirm Deletion of the team?`"
@@ -150,56 +186,100 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { import {
CreateTeamDocument,
MetricsDocument,
RemoveTeamDocument, RemoveTeamDocument,
TeamListDocument, TeamListDocument,
UsersListDocument,
} from '../../helpers/backend/graphql'; } from '../../helpers/backend/graphql';
import { usePagedQuery } from '../../composables/usePagedQuery'; import { usePagedQuery } from '../../composables/usePagedQuery';
import { ref, watch, computed } from 'vue';
import { onMounted, onBeforeUnmount, ref } from 'vue'; import { useMutation, useQuery } from '@urql/vue';
import { useMutation } from '@urql/vue';
import { useToast } from '../../composables/toast'; import { useToast } from '../../composables/toast';
import { TippyComponent } from 'vue-tippy';
import IconTrash from '~icons/lucide/trash';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
const toast = useToast(); const toast = useToast();
// Template refs
const tippyActions = ref<TippyComponent | null>(null);
const router = useRouter(); // 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));
// Get Paginated Results of all the teams in the infra
const teamsPerPage = 20;
const { const {
fetching, fetching,
error,
goToNextPage: fetchNextTeams, goToNextPage: fetchNextTeams,
refetch, refetch,
list: teamList, list: teamList,
hasNextPage,
} = usePagedQuery( } = usePagedQuery(
TeamListDocument, TeamListDocument,
(x) => x.admin.allTeams, (x) => x.admin.allTeams,
(x) => x.id, (x) => x.id,
10, teamsPerPage,
{ cursor: undefined, take: 10 } { cursor: undefined, take: teamsPerPage }
); );
const goToTeam = (teamId: string) => { // Create Team
const teamName = ref('');
const ownerEmail = ref('');
const createTeamMutation = useMutation(CreateTeamDocument);
const showCreateTeamModal = ref(false);
const getOwnerEmail = (email: string) => (ownerEmail.value = email);
const createTeam = async () => {
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!!');
}
} else {
toast.success('Team created successfully!!');
showCreateTeamModal.value = false;
refetch();
}
});
};
// Go To Individual Team Details Page
const router = useRouter();
const goToTeamDetails = (teamId: string) => {
router.push('/teams/' + teamId); router.push('/teams/' + teamId);
}; };
// Open the side menu dropdown of only the selected user // Reload Teams Page when routed back to the teams page
const activeTeamId = ref<null | String>(null); const route = useRoute();
watch(
() => route.params.id,
() => window.location.reload()
);
// Template refs // Team Deletion
const tippyActions = ref<any | null>(null);
// Hide dropdown when user clicks elsewhere
const close = (e: any) => {
if (!e.target.closest('.dropdown')) {
activeTeamId.value = null;
}
};
onMounted(() => document.addEventListener('click', close));
onBeforeUnmount(() => document.removeEventListener('click', close));
// User Deletion
const teamDeletion = useMutation(RemoveTeamDocument); const teamDeletion = useMutation(RemoveTeamDocument);
const confirmDeletion = ref(false); const confirmDeletion = ref(false);
const deleteTeamID = ref<string | null>(null); const deleteTeamID = ref<string | null>(null);
@@ -212,16 +292,16 @@ const deleteTeam = (id: string) => {
const deleteTeamMutation = async (id: string | null) => { const deleteTeamMutation = async (id: string | null) => {
if (!id) { if (!id) {
confirmDeletion.value = false; confirmDeletion.value = false;
toast.error('Team Deletion Failed'); toast.error('Team deletion failed!!');
return; return;
} }
const variables = { uid: id }; const variables = { uid: id };
await teamDeletion.executeMutation(variables).then((result) => { await teamDeletion.executeMutation(variables).then((result) => {
if (result.error) { if (result.error) {
toast.error('Team Deletion Failed'); toast.error('Team deletion failed!!');
} else { } else {
refetch(); teamList.value = teamList.value.filter((team) => team.id !== id);
toast.success('Team Deleted Successfully'); toast.success('Team deleted successfully!!');
} }
}); });
confirmDeletion.value = false; confirmDeletion.value = false;

1
packages/hoppscotch-ui/package.json
View File

@@ -4,6 +4,7 @@
"version": "0.0.1", "version": "0.0.1",
"type": "module", "type": "module",
"scripts": { "scripts": {
"watch": "vite build --watch",
"build": "vite build", "build": "vite build",
"story:dev": "histoire dev", "story:dev": "histoire dev",
"story:build": "histoire build", "story:build": "histoire build",

303
packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
View File

@@ -1,13 +1,9 @@
<template> <template>
<div class="autocomplete-wrapper"> <div class="autocomplete-wrapper">
<input ref="acInput" :value="text" type="text" autocomplete="off" :placeholder="placeholder" :spellcheck="spellcheck" <input ref="acInput" v-model="text" type="text" autocomplete="off" :placeholder="placeholder" :spellcheck="spellcheck"
:autocapitalize="autocapitalize" :class="styles" @input.stop=" :autocapitalize="autocapitalize" :class="styles" @input.stop="onInput" @keyup="updateSuggestions"
(e) => { @click="updateSuggestions" @keydown="handleKeystroke" @change="emit('change', $event)" />
$emit('input', e.target.value)
updateSuggestions(e)
}
" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke"
@change="$emit('change', $event)" />
<ul v-if="suggestions.length > 0 && suggestionsVisible" class="suggestions" <ul v-if="suggestions.length > 0 && suggestionsVisible" class="suggestions"
:style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"> :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
<li v-for="(suggestion, index) in suggestions" :key="`suggestion-${index}`" <li v-for="(suggestion, index) in suggestions" :key="`suggestion-${index}`"
@@ -18,169 +14,162 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { defineComponent } from "vue" import { onMounted, ref, computed } from "vue"
export default defineComponent({ const acInput = ref<HTMLInputElement>()
props: {
spellcheck: {
type: Boolean,
default: true,
required: false,
},
autocapitalize: { const props = defineProps({
type: String, spellcheck: {
default: "off", type: Boolean,
required: false, default: true,
}, required: false,
placeholder: {
type: String,
default: "",
required: false,
},
source: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
},
emits: ["input", "change"],
data() {
return {
text: this.value,
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false,
}
}, },
computed: { autocapitalize: {
/** type: String,
* Gets the suggestions list to be displayed under the input box. default: "off",
* required: false,
* @returns {default.props.source|{type, required}} },
*/
suggestions() {
const input = this.text.substring(0, this.selectionStart)
return ( placeholder: {
this.source type: String,
.filter( default: "",
(entry) => required: false,
entry.toLowerCase().startsWith(input.toLowerCase()) && },
input.toLowerCase() !== entry.toLowerCase()
) source: {
// Cut off the part that's already been typed. type: Array<string>,
.map((entry) => entry.substring(this.selectionStart)) required: true,
// We only want the top 10 suggestions. },
.slice(0, 10)
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
})
const emit = defineEmits<{
(e: "input", v: string): void
(e: "change", v: Event): void
}>()
const text = ref(props.value)
const selectionStart = ref(0)
const suggestionsOffsetLeft = ref(0)
const currentSuggestionIndex = ref(-1)
const suggestionsVisible = ref(false)
onMounted(() => {
updateSuggestions({
target: acInput,
})
})
const suggestions = computed(() => {
const input = text.value.substring(0, selectionStart.value)
return (
props.source
.filter(
(entry) =>
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
) )
}, // Cut off the part that's already been typed.
}, .map((entry) => entry.substring(selectionStart.value))
// We only want the top 10 suggestions.
.slice(0, 10)
)
})
watch: {
value(newValue) {
this.text = newValue
},
},
mounted() { function updateSuggestions(event: any) {
this.updateSuggestions({ // Hide suggestions if ESC pressed.
target: this.$refs.acInput, if (event.code && event.code === "Escape") {
}) event.preventDefault()
}, suggestionsVisible.value = false
currentSuggestionIndex.value = -1
return
}
methods: { // As suggestions is a reactive property, this implicitly
updateSuggestions(event) { // causes suggestions to update.
// Hide suggestions if ESC pressed. selectionStart.value = acInput.value?.selectionStart ?? -1
if (event.code && event.code === "Escape") { suggestionsOffsetLeft.value = 12 * selectionStart.value
event.preventDefault() suggestionsVisible.value = true
this.suggestionsVisible = false }
this.currentSuggestionIndex = -1
const onInput = (e: Event) => {
emit('input', (e.target as HTMLInputElement).value)
updateSuggestions(e)
}
function forceSuggestion(str: string) {
const input = text.value.substring(0, selectionStart.value)
text.value = input + str
selectionStart.value = text.value.length
suggestionsVisible.value = true
currentSuggestionIndex.value = -1
emit("input", text.value)
}
function handleKeystroke(event: any) {
switch (event.code) {
case "Enter":
event.preventDefault()
if (currentSuggestionIndex.value > -1)
forceSuggestion(
suggestions.value.find(
(_item, index) => index === currentSuggestionIndex.value
)!
)
break
case "ArrowUp":
event.preventDefault()
currentSuggestionIndex.value =
currentSuggestionIndex.value - 1 >= 0
? currentSuggestionIndex.value - 1
: 0
break
case "ArrowDown":
event.preventDefault()
currentSuggestionIndex.value =
currentSuggestionIndex.value < suggestions.value.length - 1
? currentSuggestionIndex.value + 1
: suggestions.value.length - 1
break
case "Tab": {
const activeSuggestion =
suggestions.value[
currentSuggestionIndex.value >= 0 ? currentSuggestionIndex.value : 0
]
if (!activeSuggestion) {
return return
} }
// As suggestions is a reactive property, this implicitly event.preventDefault()
// causes suggestions to update. const input = text.value.substring(0, selectionStart.value)
this.selectionStart = this.$refs.acInput.selectionStart text.value = input + activeSuggestion
this.suggestionsOffsetLeft = 12 * this.selectionStart break
this.suggestionsVisible = true }
}, }
}
forceSuggestion(text) {
const input = this.text.substring(0, this.selectionStart)
this.text = input + text
this.selectionStart = this.text.length
this.suggestionsVisible = true
this.currentSuggestionIndex = -1
this.$emit("input", this.text)
},
handleKeystroke(event) {
switch (event.code) {
case "Enter":
event.preventDefault()
if (this.currentSuggestionIndex > -1)
this.forceSuggestion(
this.suggestions.find(
(_item, index) => index === this.currentSuggestionIndex
)
)
break
case "ArrowUp":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0
break
case "ArrowDown":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1
break
case "Tab": {
const activeSuggestion =
this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
]
if (!activeSuggestion) {
return
}
event.preventDefault()
const input = this.text.substring(0, this.selectionStart)
this.text = input + activeSuggestion
break
}
}
},
},
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.autocomplete-wrapper { .autocomplete-wrapper {
@apply relative; @apply relative;

59
pnpm-lock.yaml generated
View File

@@ -9164,6 +9164,14 @@ packages:
dependencies: dependencies:
acorn: 8.8.0 acorn: 8.8.0
/acorn-jsx@5.3.2(acorn@8.8.2):
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies:
acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies:
acorn: 8.8.2
dev: true
/acorn-loose@6.1.0: /acorn-loose@6.1.0:
resolution: {integrity: sha512-FHhXoiF0Uch3IqsrnPpWwCtiv5PYvipTpT1k9lDMgQVVYc9iDuSl5zdJV358aI8twfHCYMFBRVYvAVki9wC/ng==} resolution: {integrity: sha512-FHhXoiF0Uch3IqsrnPpWwCtiv5PYvipTpT1k9lDMgQVVYc9iDuSl5zdJV358aI8twfHCYMFBRVYvAVki9wC/ng==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
@@ -9207,7 +9215,7 @@ packages:
hasBin: true hasBin: true
/after@0.8.2: /after@0.8.2:
resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=} resolution: {integrity: sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==}
dev: false dev: false
/agent-base@6.0.2: /agent-base@6.0.2:
@@ -9819,7 +9827,7 @@ packages:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
/base64-arraybuffer@0.1.4: /base64-arraybuffer@0.1.4:
resolution: {integrity: sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=} resolution: {integrity: sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==}
engines: {node: '>= 0.6.0'} engines: {node: '>= 0.6.0'}
dev: false dev: false
@@ -10465,14 +10473,14 @@ packages:
dev: true dev: true
/component-bind@1.0.0: /component-bind@1.0.0:
resolution: {integrity: sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=} resolution: {integrity: sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==}
dev: false dev: false
/component-emitter@1.3.0: /component-emitter@1.3.0:
resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==} resolution: {integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==}
/component-inherit@0.0.3: /component-inherit@0.0.3:
resolution: {integrity: sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=} resolution: {integrity: sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==}
dev: false dev: false
/concat-map@0.0.1: /concat-map@0.0.1:
@@ -12475,8 +12483,8 @@ packages:
resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==} resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
acorn: 8.8.0 acorn: 8.8.2
acorn-jsx: 5.3.2(acorn@8.8.0) acorn-jsx: 5.3.2(acorn@8.8.2)
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: true dev: true
@@ -13718,7 +13726,7 @@ packages:
dev: false dev: false
/has-cors@1.1.0: /has-cors@1.1.0:
resolution: {integrity: sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=} resolution: {integrity: sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==}
dev: false dev: false
/has-flag@3.0.0: /has-flag@3.0.0:
@@ -14111,7 +14119,7 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
/indexof@0.0.1: /indexof@0.0.1:
resolution: {integrity: sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=} resolution: {integrity: sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==}
dev: false dev: false
/inflight@1.0.6: /inflight@1.0.6:
@@ -15433,7 +15441,7 @@ packages:
jest-util: 27.5.1 jest-util: 27.5.1
natural-compare: 1.4.0 natural-compare: 1.4.0
pretty-format: 27.5.1 pretty-format: 27.5.1
semver: 7.3.7 semver: 7.3.8
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@@ -17013,15 +17021,6 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
hasBin: true hasBin: true
/mlly@1.1.0:
resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
dependencies:
acorn: 8.8.2
pathe: 1.1.0
pkg-types: 1.0.1
ufo: 1.0.1
dev: true
/mlly@1.2.0: /mlly@1.2.0:
resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==} resolution: {integrity: sha512-+c7A3CV0KGdKcylsI6khWyts/CYrGTrRVo4R/I7u/cUsy0Conxa6LUhiEzVKIw14lc2L5aiO4+SeVe4TeGRKww==}
dependencies: dependencies:
@@ -17832,14 +17831,6 @@ packages:
find-up: 4.1.0 find-up: 4.1.0
dev: true dev: true
/pkg-types@1.0.1:
resolution: {integrity: sha512-jHv9HB+Ho7dj6ItwppRDDl0iZRYBD0jsakHXtFgoLr+cHSF6xC+QL54sJmWxyGxOLYSHm0afhXhXcQDQqH9z8g==}
dependencies:
jsonc-parser: 3.2.0
mlly: 1.1.0
pathe: 1.1.0
dev: true
/pkg-types@1.0.2: /pkg-types@1.0.2:
resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==} resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
dependencies: dependencies:
@@ -19822,7 +19813,7 @@ packages:
dev: true dev: true
/to-array@0.1.4: /to-array@0.1.4:
resolution: {integrity: sha1-F+bBH3PdTz10zaek/zI46a2b+JA=} resolution: {integrity: sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==}
dev: false dev: false
/to-fast-properties@2.0.0: /to-fast-properties@2.0.0:
@@ -20334,10 +20325,6 @@ packages:
resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==} resolution: {integrity: sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==}
dev: true dev: true
/ufo@1.0.1:
resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
dev: true
/ufo@1.1.1: /ufo@1.1.1:
resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==} resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
dev: true dev: true
@@ -20543,7 +20530,7 @@ packages:
webpack: webpack:
optional: true optional: true
dependencies: dependencies:
acorn: 8.8.0 acorn: 8.8.2
chokidar: 3.5.3 chokidar: 3.5.3
esbuild: 0.15.15 esbuild: 0.15.15
rollup: 2.79.1 rollup: 2.79.1
@@ -20569,7 +20556,7 @@ packages:
webpack: webpack:
optional: true optional: true
dependencies: dependencies:
acorn: 8.8.0 acorn: 8.8.2
chokidar: 3.5.3 chokidar: 3.5.3
esbuild: 0.15.15 esbuild: 0.15.15
rollup: 2.79.1 rollup: 2.79.1
@@ -20742,7 +20729,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
debug: 4.3.4(supports-color@9.2.2) debug: 4.3.4(supports-color@9.2.2)
mlly: 1.1.0 mlly: 1.2.0
pathe: 0.2.0 pathe: 0.2.0
source-map: 0.6.1 source-map: 0.6.1
source-map-support: 0.5.21 source-map-support: 0.5.21
@@ -20764,7 +20751,7 @@ packages:
dependencies: dependencies:
cac: 6.7.14 cac: 6.7.14
debug: 4.3.4(supports-color@9.2.2) debug: 4.3.4(supports-color@9.2.2)
mlly: 1.1.0 mlly: 1.2.0
pathe: 1.1.0 pathe: 1.1.0
picocolors: 1.0.0 picocolors: 1.0.0
vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1) vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
@@ -22417,7 +22404,7 @@ packages:
dev: false dev: false
/yeast@0.1.2: /yeast@0.1.2:
resolution: {integrity: sha1-AI4G2AlDIMNy28L47XagymyKxBk=} resolution: {integrity: sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==}
dev: false dev: false
/yn@3.1.1: /yn@3.1.1: