replace toasts with messages

ankormoreankor · ankormoreankor · commit 3e9540ba601e · 2025-04-03T15:26:13.000+04:00
diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json
@@ -879,4 +879,4 @@
       "deleteUser": "Supprimer l'utilisateur"
     }
   }
-}
+}
diff --git a/packages/ui/src/components/button-group.tsx b/packages/ui/src/components/button-group.tsx
@@ -21,7 +21,10 @@ export function ButtonGroup({
   const verticalAlignClass = verticalAlign ? `items-${verticalAlign}` : ''
 
   return (
-    <div className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}>
+    <div
+      className={cn('flex', direction === 'vertical' ? 'flex-col' : '', gapClass, verticalAlignClass, className)}
+      aria-label="Button control group"
+    >
       {children}
     </div>
   )
diff --git a/packages/ui/src/components/form-primitives/control-group.tsx b/packages/ui/src/components/form-primitives/control-group.tsx
@@ -2,25 +2,16 @@ import { HTMLAttributes } from 'react'
 
 import { cn } from '@utils/cn'
 
-interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
-  type?: 'button' | 'input'
-}
-
 /**
  * A container component that groups form control elements together.
  * @example
  * <ControlGroup type="button">
  *   <Button>Button</Button>
  * </ControlGroup>
  */
-export function ControlGroup({ children, type, className, ...props }: ControlGroupProps) {
+export function ControlGroup({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
   return (
-    <div
-      className={cn('relative flex flex-col', className)}
-      role="group"
-      aria-label={type === 'button' ? 'Button control group' : 'Input control group'}
-      {...props}
-    >
+    <div className={cn('relative flex flex-col', className)} role="group" aria-label="Input control group" {...props}>
       {children}
     </div>
   )
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useMemo } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import { Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select, toast } from '@/components'
+import { Alert, Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
@@ -125,16 +125,6 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
       : `${t('views:profileSettings.createTokenDialog.tokenExpiryDate', 'Token will expire on')} ${calculateExpirationDate(expirationValue)}`
   }
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!error || error?.type !== ApiErrorType.TokenCreate) return
-
-    toast({ title: error.message, variant: 'destructive' })
-  }, [error])
-
   return (
     <Dialog.Root open={open} onOpenChange={handleOpenChange}>
       <Dialog.Content aria-describedby={undefined}>
@@ -209,6 +199,12 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
             )}
           </Fieldset>
 
+          {error?.type === ApiErrorType.TokenCreate && (
+            <Alert.Container variant="destructive">
+              <Alert.Title>{error.message}</Alert.Title>
+            </Alert.Container>
+          )}
+
           <Dialog.Footer className="-mx-5 -mb-5">
             <Button type="button" variant="outline" onClick={handleClose}>
               {createdTokenData
diff --git a/packages/ui/src/views/project/project-general/project-general-page.tsx b/packages/ui/src/views/project/project-general/project-general-page.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   Fieldset,
@@ -11,8 +12,7 @@ import {
   Legend,
   Separator,
   SkeletonForm,
-  Textarea,
-  toast
+  Textarea
 } from '@/components'
 import {
   makeProjectDescriptionSchema,
@@ -90,16 +90,6 @@ export const ProjectSettingsGeneralPage = ({
     reset({ identifier: data?.identifier ?? '', description: data?.description ?? '' })
   }, [data, reset])
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!updateError) return
-
-    toast({ title: updateError, variant: 'destructive' })
-  }, [updateError])
-
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content className="mx-auto max-w-[38.125rem] pt-[3.25rem]">
@@ -134,6 +124,12 @@ export const ProjectSettingsGeneralPage = ({
                   error={errors?.description?.message?.toString()}
                 />
 
+                {updateError && (
+                  <Alert.Container variant="destructive">
+                    <Alert.Title>{updateError}</Alert.Title>
+                  </Alert.Container>
+                )}
+
                 <ButtonGroup spacing="3">
                   {!submitted ? (
                     <>
diff --git a/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx b/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
@@ -1,7 +1,7 @@
 import { FC, forwardRef, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select, toast } from '@/components'
+import { Alert, Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select } from '@/components'
 import { PrincipalType } from '@/types'
 import { InviteMemberDialogProps, InviteMemberFormFields, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -107,16 +107,6 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
     }
   }, [open, reset])
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!error) return
-
-    toast({ title: `${t('views:repos.error', 'Error:')} ${error}`, variant: 'destructive' })
-  }, [error, t])
-
   return (
     <Dialog.Root open={open} onOpenChange={onClose}>
       <Dialog.Content className="max-w-[420px]">
@@ -181,6 +171,14 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
           </Fieldset>
         </FormWrapper>
 
+        {!!error && (
+          <Alert.Container variant="destructive">
+            <Alert.Title>
+              {t('views:repos.error', 'Error:')} {error}
+            </Alert.Title>
+          </Alert.Container>
+        )}
+
         <Dialog.Footer>
           <Button type="button" variant="outline" onClick={onClose} loading={isInvitingMember}>
             {t('views:repos.cancel', 'Cancel')}
diff --git a/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx b/packages/ui/src/views/repo/repo-branch-rules/repo-branch-settings-rules-page.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import { Button, ButtonGroup, FormWrapper, toast } from '@/components'
+import { Alert, Button, ButtonGroup, FormWrapper } from '@/components'
 import { useRouterContext } from '@/context'
 import {
   IProjectRulesStore,
@@ -130,16 +130,6 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
 
   const fieldProps: FieldProps = { register, errors, setValue, watch, t }
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!apiErrorsValue) return
-
-    toast({ title: apiErrorsValue, variant: 'destructive' })
-  }, [apiErrorsValue])
-
   return (
     <SandboxLayout.Content className={cn(`max-w-[570px] px-0`, { 'mx-auto': !projectScope })}>
       <h1 className="text-foreground-1 mb-10 text-2xl font-medium">
@@ -174,6 +164,12 @@ export const RepoBranchSettingsRulesPage: FC<RepoBranchSettingsRulesPageProps> =
           />
         </div>
 
+        {!!apiErrorsValue && (
+          <Alert.Container variant="destructive">
+            <Alert.Title>{apiErrorsValue}</Alert.Title>
+          </Alert.Container>
+        )}
+
         <ButtonGroup className="mt-2">
           <Button type="submit" disabled={isLoading}>
             {!isLoading
diff --git a/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx b/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   Checkbox,
@@ -11,8 +12,7 @@ import {
   FormWrapper,
   Input,
   Option,
-  Select,
-  toast
+  Select
 } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -167,16 +167,6 @@ export function RepoImportMultiplePage({
     }
   }
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!apiErrorsValue) return
-
-    toast({ title: apiErrorsValue, variant: 'destructive' })
-  }, [apiErrorsValue])
-
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content key={providerValue} paddingClassName="w-[570px] mx-auto pt-11 pb-20">
@@ -314,6 +304,12 @@ export function RepoImportMultiplePage({
             />
           </Fieldset>
 
+          {!!apiErrorsValue && (
+            <Alert.Container variant="destructive">
+              <Alert.Title>{apiErrorsValue}</Alert.Title>
+            </Alert.Container>
+          )}
+
           <ButtonGroup className="mt-6">
             <Button type="submit" disabled={isLoading}>
               {!isLoading
diff --git a/packages/ui/src/views/repo/repo-import/repo-import.tsx b/packages/ui/src/views/repo/repo-import/repo-import.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 
 import {
+  Alert,
   Button,
   ButtonGroup,
   Checkbox,
@@ -12,8 +13,7 @@ import {
   Input,
   Option,
   Select,
-  Textarea,
-  toast
+  Textarea
 } from '@/components'
 import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -182,16 +182,6 @@ export function RepoImportPage({
     setValue(fieldName, value, { shouldValidate: true })
   }
 
-  /**
-   * Show an unexpected server error message
-   * Ensure that validation errors are handled by the react-hook-form
-   */
-  useEffect(() => {
-    if (!apiErrorsValue) return
-
-    toast({ title: apiErrorsValue, variant: 'destructive' })
-  }, [apiErrorsValue])
-
   return (
     <SandboxLayout.Main>
       <SandboxLayout.Content paddingClassName="w-[570px] mx-auto pt-11 pb-20">
@@ -349,6 +339,12 @@ export function RepoImportPage({
             optional
           />
 
+          {!!apiErrorsValue && (
+            <Alert.Container variant="destructive">
+              <Alert.Title>{apiErrorsValue}</Alert.Title>
+            </Alert.Container>
+          )}
+
           <ButtonGroup className="mt-6">
             <Button type="submit" disabled={isLoading}>
               {!isLoading

Original file line number	Diff line number	Diff line change
`@@ -879,4 +879,4 @@`
`879`	`879`	`"deleteUser": "Supprimer l'utilisateur"`
`880`	`880`	`}`
`881`	`881`	`}`
`882`		`-}`
	`882`	`+}`