Skip to content

Commit 93dbcdf

Browse files
ankormoreankorankormoreankor
committed
replace toasts with messages
1 parent 50fd0ca commit 93dbcdf

File tree

9 files changed

+55
-83
lines changed

9 files changed

+55
-83
lines changed

‎packages/ui/locales/fr/views.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -863,4 +863,4 @@
863863
"secrets": {
864864
"secretsTitle": "Secrets"
865865
}
866-
}
866+
}

‎packages/ui/src/components/button-group.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ export function ButtonGroup({
2121
const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
2222

2323
return (
24-
<div className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}>
24+
<div
25+
className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}
26+
aria-label="Button control group"
27+
>
2528
{children}
2629
</div>
2730
)

‎packages/ui/src/components/form-primitives/control-group.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,16 @@ import { HTMLAttributes } from 'react'
22

33
import { cn } from '@utils/cn'
44

5-
interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
6-
type?: 'button' | 'input'
7-
}
8-
95
/**
106
* A container component that groups form control elements together.
117
* @example
128
* <ControlGroup type="button">
139
* <Button>Button</Button>
1410
* </ControlGroup>
1511
*/
16-
export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
12+
export function ControlGroup({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
1713
return (
18-
<div
19-
className={cn('relative flex flex-col', className)}
20-
role="group"
21-
aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
22-
{...props}
23-
>
14+
<div className={cn('relative flex flex-col', className)} role="group" aria-label="Input control group" {...props}>
2415
{children}
2516
</div>
2617
)

‎packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useEffect, useMemo } from 'react'
22
import { SubmitHandler, useForm } from 'react-hook-form'
33

4-
import { Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select, toast } from '@/components'
4+
import { Alert, Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
55
import { zodResolver } from '@hookform/resolvers/zod'
66
import { TranslationStore } from '@views/repo'
77
import { z } from 'zod'
@@ -125,16 +125,6 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
125125
: `${t('views:profileSettings.createTokenDialog.tokenExpiryDate', 'Token will expire on')} ${calculateExpirationDate(expirationValue)}`
126126
}
127127

128-
/**
129-
* Show an unexpected server error message
130-
* Ensure that validation errors are handled by the react-hook-form
131-
*/
132-
useEffect(() => {
133-
if (!error || error?.type !== ApiErrorType.TokenCreate) return
134-
135-
toast({ title: error.message, variant: 'destructive' })
136-
}, [error])
137-
138128
return (
139129
<Dialog.Root open={open} onOpenChange={handleOpenChange}>
140130
<Dialog.Content aria-describedby={undefined}>
@@ -209,6 +199,12 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
209199
)}
210200
</Fieldset>
211201

202+
{error?.type === ApiErrorType.TokenCreate && (
203+
<Alert.Container variant="destructive">
204+
<Alert.Title>{error.message}</Alert.Title>
205+
</Alert.Container>
206+
)}
207+
212208
<Dialog.Footer className="-mx-5 -mb-5">
213209
<Button type="button" variant="outline" onClick={handleClose}>
214210
{createdTokenData

‎packages/ui/src/views/project/project-general/project-general-page.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
22
import { useForm } from 'react-hook-form'
33

44
import {
5+
Alert,
56
Button,
67
ButtonGroup,
78
Fieldset,
@@ -11,8 +12,7 @@ import {
1112
Legend,
1213
Separator,
1314
SkeletonForm,
14-
Textarea,
15-
toast
15+
Textarea
1616
} from '@/components'
1717
import {
1818
makeProjectDescriptionSchema,
@@ -90,16 +90,6 @@ export const ProjectSettingsGeneralPage = ({
9090
reset({ identifier: data?.identifier ?? '', description: data?.description ?? '' })
9191
}, [data, reset])
9292

93-
/**
94-
* Show an unexpected server error message
95-
* Ensure that validation errors are handled by the react-hook-form
96-
*/
97-
useEffect(() => {
98-
if (!updateError) return
99-
100-
toast({ title: updateError, variant: 'destructive' })
101-
}, [updateError])
102-
10393
return (
10494
<SandboxLayout.Main>
10595
<SandboxLayout.Content className="mx-auto max-w-[38.125rem] pt-[3.25rem]">
@@ -134,6 +124,12 @@ export const ProjectSettingsGeneralPage = ({
134124
error={errors?.description?.message?.toString()}
135125
/>
136126

127+
{updateError && (
128+
<Alert.Container variant="destructive">
129+
<Alert.Title>{updateError}</Alert.Title>
130+
</Alert.Container>
131+
)}
132+
137133
<ButtonGroup spacing="3">
138134
{!submitted ? (
139135
<>

‎packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, forwardRef, useEffect, useMemo, useState } from 'react'
22
import { useForm } from 'react-hook-form'
33

4-
import { Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select, toast } from '@/components'
4+
import { Alert, Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select } from '@/components'
55
import { PrincipalType } from '@/types'
66
import { InviteMemberDialogProps, InviteMemberFormFields, TranslationStore } from '@/views'
77
import { zodResolver } from '@hookform/resolvers/zod'
@@ -107,16 +107,6 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
107107
}
108108
}, [open, reset])
109109

110-
/**
111-
* Show an unexpected server error message
112-
* Ensure that validation errors are handled by the react-hook-form
113-
*/
114-
useEffect(() => {
115-
if (!error) return
116-
117-
toast({ title: `${t('views:repos.error', 'Error:')} ${error}`, variant: 'destructive' })
118-
}, [error, t])
119-
120110
return (
121111
<Dialog.Root open={open} onOpenChange={onClose}>
122112
<Dialog.Content className="max-w-[420px]">
@@ -181,6 +171,14 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
181171
</Fieldset>
182172
</FormWrapper>
183173

174+
{!!error && (
175+
<Alert.Container variant="destructive">
176+
<Alert.Title>
177+
{t('views:repos.error', 'Error:')} {error}
178+
</Alert.Title>
179+
</Alert.Container>
180+
)}
181+
184182
<Dialog.Footer>
185183
<Button type="button" variant="outline" onClick={onClose} loading={isInvitingMember}>
186184
{t('views:repos.cancel', 'Cancel')}

‎packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, useEffect } from 'react'
22
import { SubmitHandler, useForm } from 'react-hook-form'
33

4-
import { Button, ButtonGroup, FormWrapper, toast } from '@/components'
4+
import { Alert, Button, ButtonGroup, FormWrapper } from '@/components'
55
import { useRouterContext } from '@/context'
66
import {
77
IProjectRulesStore,
@@ -130,16 +130,6 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
130130

131131
const fieldProps: FieldProps = { register, errors, setValue, watch, t }
132132

133-
/**
134-
* Show an unexpected server error message
135-
* Ensure that validation errors are handled by the react-hook-form
136-
*/
137-
useEffect(() => {
138-
if (!apiErrorsValue) return
139-
140-
toast({ title: apiErrorsValue, variant: 'destructive' })
141-
}, [apiErrorsValue])
142-
143133
return (
144134
<SandboxLayout.Content className={cn(`max-w-[570px] px-0`, { 'mx-auto': !projectScope })}>
145135
<h1 className="text-foreground-1 mb-10 text-2xl font-medium">
@@ -174,6 +164,12 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
174164
/>
175165
</div>
176166

167+
{!!apiErrorsValue && (
168+
<Alert.Container variant="destructive">
169+
<Alert.Title>{apiErrorsValue}</Alert.Title>
170+
</Alert.Container>
171+
)}
172+
177173
<ButtonGroup className="mt-2">
178174
<Button type="submit" disabled={isLoading}>
179175
{!isLoading

‎packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { useEffect, useMemo } from 'react'
1+
import { useMemo } from 'react'
22
import { useForm } from 'react-hook-form'
33

44
import {
5+
Alert,
56
Button,
67
ButtonGroup,
78
Checkbox,
@@ -11,8 +12,7 @@ import {
1112
FormWrapper,
1213
Input,
1314
Option,
14-
Select,
15-
toast
15+
Select
1616
} from '@/components'
1717
import { SandboxLayout, TranslationStore } from '@/views'
1818
import { zodResolver } from '@hookform/resolvers/zod'
@@ -167,16 +167,6 @@ export function RepoImportMultiplePage({
167167
}
168168
}
169169

170-
/**
171-
* Show an unexpected server error message
172-
* Ensure that validation errors are handled by the react-hook-form
173-
*/
174-
useEffect(() => {
175-
if (!apiErrorsValue) return
176-
177-
toast({ title: apiErrorsValue, variant: 'destructive' })
178-
}, [apiErrorsValue])
179-
180170
return (
181171
<SandboxLayout.Main>
182172
<SandboxLayout.Content key={providerValue} paddingClassName="w-[570px] mx-auto pt-11 pb-20">
@@ -314,6 +304,12 @@ export function RepoImportMultiplePage({
314304
/>
315305
</Fieldset>
316306

307+
{!!apiErrorsValue && (
308+
<Alert.Container variant="destructive">
309+
<Alert.Title>{apiErrorsValue}</Alert.Title>
310+
</Alert.Container>
311+
)}
312+
317313
<ButtonGroup className="mt-6">
318314
<Button type="submit" disabled={isLoading}>
319315
{!isLoading

‎packages/ui/src/views/repo/repo-import/repo-import.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react'
22
import { useForm } from 'react-hook-form'
33

44
import {
5+
Alert,
56
Button,
67
ButtonGroup,
78
Checkbox,
@@ -12,8 +13,7 @@ import {
1213
Input,
1314
Option,
1415
Select,
15-
Textarea,
16-
toast
16+
Textarea
1717
} from '@/components'
1818
import { SandboxLayout, TranslationStore } from '@/views'
1919
import { zodResolver } from '@hookform/resolvers/zod'
@@ -182,16 +182,6 @@ export function RepoImportPage({
182182
setValue(fieldName, value, { shouldValidate: true })
183183
}
184184

185-
/**
186-
* Show an unexpected server error message
187-
* Ensure that validation errors are handled by the react-hook-form
188-
*/
189-
useEffect(() => {
190-
if (!apiErrorsValue) return
191-
192-
toast({ title: apiErrorsValue, variant: 'destructive' })
193-
}, [apiErrorsValue])
194-
195185
return (
196186
<SandboxLayout.Main>
197187
<SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
@@ -349,6 +339,12 @@ export function RepoImportPage({
349339
optional
350340
/>
351341

342+
{!!apiErrorsValue && (
343+
<Alert.Container variant="destructive">
344+
<Alert.Title>{apiErrorsValue}</Alert.Title>
345+
</Alert.Container>
346+
)}
347+
352348
<ButtonGroup className="mt-6">
353349
<Button type="submit" disabled={isLoading}>
354350
{!isLoading

0 commit comments

Comments
 (0)