Skip to content

Commit 8728365

Browse files
maciaszczykmmaciaszczykm
authored
fix: Invite view fixes (#1454)
1 parent f644567 commit 8728365

File tree

3 files changed

+79
-85
lines changed

3 files changed

+79
-85
lines changed

‎www/src/components/Invite.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { Button } from '@pluralsh/design-system'
2-
import { GqlError } from 'forge-core'
32

43
import { Div, Flex, Form, P } from 'honorable'
54
import { useState } from 'react'
65
import { useParams } from 'react-router-dom'
76

87
import {
9-
type Invite as InviteT,
10-
type User,
118
useInviteQuery,
129
useRealizeInviteMutation,
1310
useSignupInviteMutation,
11+
InviteFragment,
1412
} from '../generated/graphql'
1513
import { setToken } from '../helpers/authentication'
1614

@@ -19,28 +17,14 @@ import { LoginPortal } from './users/LoginPortal'
1917
import { validatePassword } from './users/PasswordValidation'
2018
import { ConfirmPasswordField, SetPasswordField } from './users/Signup'
2119
import { WelcomeHeader } from './utils/WelcomeHeader'
22-
23-
function InvalidInvite() {
24-
return (
25-
<Flex
26-
width="100vw"
27-
height="100vh"
28-
justifyContent="center"
29-
alignItems="center"
30-
>
31-
This invite code is no longer valid
32-
</Flex>
33-
)
34-
}
20+
import LoadingIndicator from './utils/LoadingIndicator'
21+
import isEmpty from 'lodash/isEmpty'
22+
import { GqlError } from './utils/Alert'
3523

3624
function ExistingInvite({
37-
invite: { account },
38-
id,
39-
user,
25+
invite: { id, account, user },
4026
}: {
41-
invite: InviteT
42-
id: any
43-
user: User
27+
invite: InviteFragment
4428
}) {
4529
const [mutation, { loading, error }] = useRealizeInviteMutation({
4630
variables: { id },
@@ -87,45 +71,63 @@ export default function Invite() {
8771
const [name, setName] = useState('')
8872
const [password, setPassword] = useState('')
8973
const [confirm, setConfirm] = useState('')
74+
9075
const [mutation, { loading, error }] = useSignupInviteMutation({
9176
variables: {
9277
inviteId: inviteId ?? '',
93-
attributes: {
94-
name,
95-
password,
96-
},
78+
attributes: { name, password },
9779
},
9880
onCompleted: ({ signup }) => {
9981
setToken(signup?.jwt)
10082
;(window as Window).location = '/'
10183
},
10284
})
10385

104-
const { data, error: inviteError } = useInviteQuery({
86+
const {
87+
data,
88+
loading: inviteLoading,
89+
error: inviteError,
90+
} = useInviteQuery({
10591
variables: { id: inviteId ?? '' },
10692
})
10793

108-
if (inviteError) return <InvalidInvite />
109-
if (!data) return null
94+
const invite = data?.invite
95+
96+
if (!data && inviteLoading) return <LoadingIndicator />
97+
98+
if (inviteError)
99+
return (
100+
<Flex
101+
grow={1}
102+
alignItems="center"
103+
justifyContent="center"
104+
>
105+
<GqlError
106+
error={error}
107+
header="Could not load invite"
108+
/>
109+
</Flex>
110+
)
111+
112+
if (!invite)
113+
return (
114+
<Flex
115+
grow={1}
116+
alignItems="center"
117+
justifyContent="center"
118+
>
119+
This invite code does not exist or is no longer valid
120+
</Flex>
121+
)
110122

111123
const { disabled: passwordDisabled, error: passwordError } = validatePassword(
112124
password,
113125
confirm
114126
)
115127

116-
const isNameValid = name.length > 0
117-
const submitEnabled = isNameValid && !passwordDisabled
118-
119-
if (data?.invite?.user) {
120-
return (
121-
<ExistingInvite
122-
invite={data?.invite as InviteT}
123-
id={inviteId}
124-
user={data?.invite?.user as User}
125-
/>
126-
)
127-
}
128+
if (invite.user) return <ExistingInvite invite={invite} />
128129

130+
const submitEnabled = !isEmpty(name) && !passwordDisabled
129131
const onSubmit = (e) => {
130132
e.preventDefault()
131133
if (!submitEnabled) {
@@ -140,12 +142,12 @@ export default function Invite() {
140142
<WelcomeHeader
141143
textAlign="left"
142144
marginBottom="xxsmall"
143-
/>{' '}
145+
/>
144146
<P
145147
body1
146148
color="text-xlight"
147149
>
148-
{data.invite?.account?.name} invited you to join their Plural account.
150+
{invite.account?.name} invited you to join their Plural account.
149151
Create an account to join.
150152
</P>
151153
</Div>
@@ -165,7 +167,7 @@ export default function Invite() {
165167
>
166168
<LabelledInput
167169
label="Email"
168-
value={data?.invite?.email}
170+
value={invite.email}
169171
disabled
170172
/>
171173
<LabelledInput

‎www/src/generated/graphql.ts‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5646,21 +5646,21 @@ export type CreateOauthIntegrationMutationVariables = Exact<{
56465646

56475647
export type CreateOauthIntegrationMutation = { __typename?: 'RootMutationType', createOauthIntegration?: { __typename?: 'OauthIntegration', id: string, service: OauthService, insertedAt?: Date | null } | null };
56485648

5649-
export type InviteFragment = { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null };
5649+
export type InviteFragment = { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null };
56505650

56515651
export type InviteQueryVariables = Exact<{
56525652
id: Scalars['String']['input'];
56535653
}>;
56545654

56555655

5656-
export type InviteQuery = { __typename?: 'RootQueryType', invite?: { __typename?: 'Invite', id: string, email?: string | null, existing: boolean, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
5656+
export type InviteQuery = { __typename?: 'RootQueryType', invite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
56575657

56585658
export type CreateInviteMutationVariables = Exact<{
56595659
attributes: InviteAttributes;
56605660
}>;
56615661

56625662

5663-
export type CreateInviteMutation = { __typename?: 'RootMutationType', createInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
5663+
export type CreateInviteMutation = { __typename?: 'RootMutationType', createInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
56645664

56655665
export type SignupInviteMutationVariables = Exact<{
56665666
attributes: UserAttributes;
@@ -5682,7 +5682,7 @@ export type DeleteInviteMutationVariables = Exact<{
56825682
}>;
56835683

56845684

5685-
export type DeleteInviteMutation = { __typename?: 'RootMutationType', deleteInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
5685+
export type DeleteInviteMutation = { __typename?: 'RootMutationType', deleteInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
56865686

56875687
export type KeyBackupUserFragment = { __typename?: 'User', email: string };
56885688

@@ -7306,17 +7306,35 @@ export const ZoomMeetingFragmentDoc = gql`
73067306
password
73077307
}
73087308
`;
7309+
export const AccountFragmentDoc = gql`
7310+
fragment Account on Account {
7311+
id
7312+
name
7313+
billingCustomerId
7314+
backgroundColor
7315+
userCount
7316+
trialed
7317+
}
7318+
`;
73097319
export const InviteFragmentDoc = gql`
73107320
fragment Invite on Invite {
73117321
id
73127322
secureId
73137323
email
7324+
existing
73147325
insertedAt
7326+
account {
7327+
...Account
7328+
}
73157329
user {
73167330
...User
7331+
account {
7332+
...Account
7333+
}
73177334
}
73187335
}
7319-
${UserFragmentDoc}`;
7336+
${AccountFragmentDoc}
7337+
${UserFragmentDoc}`;
73207338
export const KeyBackupUserFragmentDoc = gql`
73217339
fragment KeyBackupUser on User {
73227340
email
@@ -7902,16 +7920,6 @@ export const DeferredUpdateFragmentDoc = gql`
79027920
insertedAt
79037921
}
79047922
`;
7905-
export const AccountFragmentDoc = gql`
7906-
fragment Account on Account {
7907-
id
7908-
name
7909-
billingCustomerId
7910-
backgroundColor
7911-
userCount
7912-
trialed
7913-
}
7914-
`;
79157923
export const GroupMemberFragmentDoc = gql`
79167924
fragment GroupMember on GroupMember {
79177925
id
@@ -9203,22 +9211,10 @@ export type CreateOauthIntegrationMutationOptions = Apollo.BaseMutationOptions<C
92039211
export const InviteDocument = gql`
92049212
query Invite($id: String!) {
92059213
invite(id: $id) {
9206-
id
9207-
email
9208-
existing
9209-
account {
9210-
...Account
9211-
}
9212-
user {
9213-
...User
9214-
account {
9215-
...Account
9216-
}
9217-
}
9214+
...Invite
92189215
}
92199216
}
9220-
${AccountFragmentDoc}
9221-
${UserFragmentDoc}`;
9217+
${InviteFragmentDoc}`;
92229218

92239219
/**
92249220
* __useInviteQuery__

‎www/src/graph/invite.graphql‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@ fragment Invite on Invite {
22
id
33
secureId
44
email
5+
existing
56
insertedAt
7+
account {
8+
...Account
9+
}
610
user {
711
...User
12+
account {
13+
...Account
14+
}
815
}
916
}
1017

1118
query Invite($id: String!) {
1219
invite(id: $id) {
13-
id
14-
email
15-
existing
16-
account {
17-
...Account
18-
}
19-
user {
20-
...User
21-
account {
22-
...Account
23-
}
24-
}
20+
...Invite
2521
}
2622
}
2723

0 commit comments

Comments
 (0)