From 6c64ffe833fa1da8ccf18fadd8291c2c17849042 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Thu, 21 Oct 2021 18:17:32 +0530 Subject: [PATCH] feat: invite system error states and user prompts --- .../hoppscotch-app/assets/scss/styles.scss | 5 +- .../components/firebase/Logout.vue | 7 ++ .../components/teams/Invite.vue | 81 +++++++++++++------ .../helpers/backend/GQLClient.ts | 11 ++- packages/hoppscotch-app/locales/en.json | 16 +++- packages/hoppscotch-app/pages/join-team.vue | 59 +++++++++++--- 6 files changed, 139 insertions(+), 40 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss index 6eedb1439..4e0517282 100644 --- a/packages/hoppscotch-app/assets/scss/styles.scss +++ b/packages/hoppscotch-app/assets/scss/styles.scss @@ -96,12 +96,15 @@ body { } .material-icons { + @apply flex-shrink-0; + font-size: var(--body-line-height) !important; width: var(--body-line-height); - overflow: hidden; } .svg-icons { + @apply flex-shrink-0; + height: var(--body-line-height); width: var(--body-line-height); } diff --git a/packages/hoppscotch-app/components/firebase/Logout.vue b/packages/hoppscotch-app/components/firebase/Logout.vue index 280e6177b..787b2b5bb 100644 --- a/packages/hoppscotch-app/components/firebase/Logout.vue +++ b/packages/hoppscotch-app/components/firebase/Logout.vue @@ -3,6 +3,7 @@ -
+
- - {{ invitee.status === "error" ? "error" : "check_circle" }} - - {{ invitee.email }} +

+ + {{ + invitee.status === "error" + ? "error_outline" + : "mark_email_read" + }} + + {{ invitee.email }} +

+

+ {{ getErrorMessage(invitee.error) }} +

@@ -375,18 +393,18 @@ const removeNewInvitee = (id: number) => { newInvites.value.splice(id, 1) } -type SendInvitesErrorType = { - email: Email - status: "error" - error: GQLError -} | { - email: Email - status: "success" -} +type SendInvitesErrorType = + | { + email: Email + status: "error" + error: GQLError + } + | { + email: Email + status: "success" + } -const sendInvitesResult = ref< - Array ->([]) +const sendInvitesResult = ref>([]) const sendingInvites = ref(false) @@ -428,7 +446,7 @@ const sendInvites = async () => { (err) => ({ status: "error" as const, email: newInvites.value[i].key as Email, - error: err + error: err, }), () => ({ status: "success" as const, @@ -445,6 +463,23 @@ const sendInvites = async () => { sendingInvites.value = false } +const getErrorMessage = (error: SendInvitesErrorType) => { + 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 = () => { sendingInvites.value = false sendInvitesResult.value = [] diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts index 5af67c7d2..79c6eeae0 100644 --- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts +++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts @@ -201,7 +201,9 @@ export const useGQLQuery = ( (gqlErr) => >{ type: "gql_error", - error: parseGQLErrorString(gqlErr ?? "") as DocErrorType, + error: parseGQLErrorString( + gqlErr ?? "" + ) as DocErrorType, }, // The right case (it was a GraphQL Error) (networkErr) => @@ -244,7 +246,8 @@ export const useGQLQuery = ( return response } -const parseGQLErrorString = (s: string) => s.startsWith("[GraphQL] ") ? s.split("[GraphQL] ")[1] : s +const parseGQLErrorString = (s: string) => + s.startsWith("[GraphQL] ") ? s.split("[GraphQL] ")[1] : s export const runMutation = < DocType, @@ -273,13 +276,13 @@ export const runMutation = < // Result is null pipe( result.error?.networkError, - E.fromNullable(result.error?.name), + E.fromNullable(result.error?.message), E.match( // The left case (network error was null) (gqlErr) => >{ type: "gql_error", - error: gqlErr, + error: parseGQLErrorString(gqlErr ?? ""), }, // The right case (it was a network error) (networkErr) => diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json index 4a7cc91d4..3f8f26633 100644 --- a/packages/hoppscotch-app/locales/en.json +++ b/packages/hoppscotch-app/locales/en.json @@ -170,6 +170,7 @@ "gql_prettify_invalid_query": "Couldn't prettify an invalid query, solve query syntax errors and try again", "incorrect_email": "Incorrect email", "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again", + "network_error": "There seems to be a network error. Please try again.", "network_fail": "Could not send request", "no_duration": "No duration", "something_went_wrong": "Something went wrong" @@ -470,19 +471,21 @@ "websocket": "WebSocket" }, "team": { + "already_member": "You are already a member of this team. Contact your team owner.", "create_new": "Create new team", "deleted": "Team deleted", "edit": "Edit Team", "email": "E-mail", + "email_do_not_match": "Email doesn't match with your account details. Contact your team owner.", "exit": "Exit Team", "exit_disabled": "Only owner cannot exit the team", "invalid_email_format": "Email format is invalid", - "invalid_member_permission": "Please provide a valid permission to the team member", + "invalid_id": "Invalid team ID. Contact your team owner.", "invalid_invite_link": "Invalid invite link", "invalid_invite_link_description": "The link you followed is invalid. Contact your team owner.", + "invalid_member_permission": "Please provide a valid permission to the team member", "invite": "Invite", - "login_to_continue": "Login to continue", - "login_to_continue_description": "You need to be logged in to join a team.", + "logout_and_try_again": "Logout and sign in with another account", "invite_more": "Invite more", "invite_tooltip": "Invite people to this workspace", "invited_to_team": "{owner} invited you to join {team}", @@ -490,6 +493,10 @@ "join_beta": "Join the beta program to access teams.", "join_team": "Join {team}", "left": "You left the team", + "login_to_continue": "Login to continue", + "login_to_continue_description": "You need to be logged in to join a team.", + "member_has_invite": "This email ID already has an invite. Contact your team owner.", + "member_not_found": "Member not found. Contact your team owner.", "member_removed": "User removed", "member_role_updated": "User roles updated", "members": "Members", @@ -498,6 +505,9 @@ "new_created": "New team created", "new_name": "My New Team", "no_access": "You do not have edit access to these collections", + "no_invite_found": "Invitation not found. Contact your team owner.", + "not_invitee": "Invite link doesn't match with your account details. Contact your team owner.", + "not_valid_viewer": "You are not a valid viewer. Contact your team owner.", "pending_invites": "Pending invites", "permissions": "Permissions", "saved": "Team saved", diff --git a/packages/hoppscotch-app/pages/join-team.vue b/packages/hoppscotch-app/pages/join-team.vue index 8f4fc450a..012fbd0ac 100644 --- a/packages/hoppscotch-app/pages/join-team.vue +++ b/packages/hoppscotch-app/pages/join-team.vue @@ -4,11 +4,11 @@ v-if="invalidLink" class="flex flex-1 items-center justify-center flex-col" > - report + error_outline

{{ $t("team.invalid_invite_link") }}

-

+

{{ $t("team.invalid_invite_link_description") }}

@@ -36,8 +36,31 @@ v-if="!inviteDetails.loading && E.isLeft(inviteDetails.data)" class="flex flex-col p-4 items-center" > - help_outline - {{ $t("error.something_went_wrong") }} + error_outline +

+ {{ getErrorMessage(inviteDetails.data.left.error) }} +

+

+ + {{ $t("team.logout_and_try_again") }} + + + + +

{ - console.log("loog aayi") - if (typeof route.value.query.id === "string") { - console.log("query run aayi", route.value.query.id) - inviteDetails.execute({ inviteID: route.value.query.id, }) @@ -180,6 +199,28 @@ export default defineComponent({ ) )() }, + getErrorMessage(error: GQLError) { + if (error.type === "network_error") { + return this.$t("error.network_error") + } else { + switch (error) { + case "team_invite/not_valid_viewer": + return this.$t("team.not_valid_viewer") + case "team_invite/not_found": + return this.$t("team.not_found") + case "team_invite/no_invite_found": + return this.$t("team.no_invite_found") + case "team_invite/not_invitee": + return this.$t("team.not_invitee") + case "team_invite/already_member": + return this.$t("team.already_member") + case "team_invite/email_do_not_match": + return this.$t("team.email_do_not_match") + default: + return this.$t("error.something_went_wrong") + } + } + }, }, })