fix project import validation

Author: ankormoreankor

apps/gitness/src/pages-v2/project/project-import-container.tsx

@@ -4,6 +4,7 @@ import { ImporterProviderType, ImportSpaceRequestBody, useImportSpaceMutation }
 import { ImportProjectFormFields, ImportProjectPage, ProviderOptionsEnum } from '@harnessio/ui/views'
 
 import { useRoutes } from '../../framework/context/NavigationContext'
+import { useTranslationStore } from '../../i18n/stores/i18n-store'
 
 export const ImportProjectContainer = () => {
   const routes = useRoutes()
@@ -53,6 +54,7 @@ export const ImportProjectContainer = () => {
       onFormCancel={onCancel}
       isLoading={isLoading}
       apiErrorsValue={error?.message?.toString()}
+      useTranslationStore={useTranslationStore}
     />
   )
 }

packages/ui/locales/fr/views.json

@@ -469,6 +469,38 @@
       "link": "Se déconnecter"
     }
   },
+  "importProject": {
+    "validation": {
+      "nameMax": "Le nom ne doit pas dépasser 100 caractères",
+      "nameRegex": "Le nom de l'organisation doit contenir uniquement des lettres, des chiffres et les caractères : - _ .",
+      "nameNoSpaces": "Le nom ne peut pas contenir d'espaces",
+      "descriptionMax": "La description ne doit pas dépasser 1024 caractères",
+      "organizationNameMax": "Le nom de l'organisation ne doit pas dépasser 100 caractères",
+      "noSpaces": "Le nom de l'organisation ne peut pas contenir d'espaces",
+      "hostUrlRequired": "L'URL du référentiel est requis",
+      "hostUrlInvalid": "URL invalide"
+    },
+    "title": "Importer un projet",
+    "gitProviderPlaceholder": "Sélectionner un fournisseur",
+    "gitProviderLabel": "Fournisseur Git",
+    "hostUrlLabel": "URL d'hôte",
+    "hostUrlPlaceholder": "Entrer l'URL d'hôte",
+    "tokenLabel": "Jeton",
+    "tokenPlaceholder": "Entrer votre jeton d'accès",
+    "organizationLabel": "Organisation",
+    "organizationPlaceholder": "Entrer le nom de l'organisation",
+    "repositoriesLabel": "Référentiels",
+    "pipelinesLabel": "Importer des pipelines",
+    "projectNameLabel": "Nom",
+    "projectNamePlaceholder": "Entrer le nom du référentiel",
+    "descriptionLabel": "Description",
+    "descriptionPlaceholder": "Entrer une description",
+    "importButton": {
+      "default": "Importer le projet",
+      "importing": "Importation du projet..."
+    },
+    "cancelButton": "Annuler"
+  },
   "forms": {
     "selectMember": "",
     "selectRole": "",

packages/ui/src/components/button-with-options.tsx

@@ -127,7 +127,7 @@ export const ButtonWithOptions = <T extends string>({
                       control={<RadioButton className="mt-px" value={String(option.value)} id={String(option.value)} />}
                       id={String(option.value)}
                       label={option.label}
-                      ariaSelected={selectedValue === option.value}
+                      aria-selected={selectedValue === option.value}
                       description={option?.description}
                     />
                   </DropdownMenu.Item>

packages/ui/src/components/form-primitives/fieldset.tsx

@@ -5,27 +5,31 @@ import { cn } from '@utils/cn'
 interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
   box?: boolean
   shaded?: boolean
+  /**
+   * For better accessibility, the fieldset should start from the legend element
+   */
+  legend?: string
 }
 
 /**
  * A form fieldset component that groups related form elements.
  * @example
- * <Fieldset box shaded>
+ * <Fieldset box shaded legend="Some Information">
  *   <div>Form elements</div>
  * </Fieldset>
  */
-export function Fieldset({ children, box, shaded, className, ...props }: FieldsetProps) {
+export function Fieldset({ children, box, shaded, className, legend, ...props }: FieldsetProps) {
   return (
     <fieldset
       className={cn(
         'flex flex-col gap-y-7',
         { 'rounded-md border px-5 py-3.5 pb-5': box, 'bg-primary/[0.02]': shaded },
         className
       )}
-      role="group"
-      aria-describedby="fieldset-description"
       {...props}
     >
+      <legend className="sr-only">{legend}</legend>
+
       {children}
     </fieldset>
   )

packages/ui/src/components/form-primitives/separator.tsx

@@ -9,13 +9,13 @@ interface FormSeparatorProps {
 /**
  * A horizontal separator component for forms
  * @example
- * // Basic usage
+ * Basic usage
  * <FormSeparator />
  *
- * // With dashed style
+ * With dashed style
  * <FormSeparator dashed />
  *
- * // With custom className
+ * With custom className
  * <FormSeparator className="my-4" />
  */
 export function FormSeparator({ dashed, dotted, className }: FormSeparatorProps) {

packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx

@@ -185,7 +185,7 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                     branch
                   </span>
                 }
-                ariaSelected={commitToGitRefValue === CommitToGitRefOption.DIRECTLY}
+                aria-selected={commitToGitRefValue === CommitToGitRefOption.DIRECTLY}
               />
               <Option
                 control={
@@ -197,7 +197,7 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                 }
                 id={CommitToGitRefOption.NEW_BRANCH}
                 label="Create a new branch for this commit and start a pull request"
-                ariaSelected={commitToGitRefValue === CommitToGitRefOption.NEW_BRANCH}
+                aria-selected={commitToGitRefValue === CommitToGitRefOption.NEW_BRANCH}
                 description={
                   // TODO: Add correct path
                   <StyledLink to="/">Learn more about pull requests</StyledLink>

packages/ui/src/components/input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Fragment, InputHTMLAttributes, ReactNode } from 'react'
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
 
 import { Caption, ControlGroup, Icon, IconProps, Label, Message, MessageTheme } from '@/components'
 import { cn } from '@utils/cn'

packages/ui/src/components/option.tsx

@@ -1,17 +1,16 @@
-import { FC, ReactElement, ReactNode } from 'react'
+import { FC, HTMLAttributes, ReactElement, ReactNode } from 'react'
 
-import { Checkbox, Label, RadioButton, Text } from '@/components'
+import { Checkbox, Label, RadioButton } from '@/components'
 import { cn } from '@utils/cn'
 
 type ControlType = ReactElement<typeof RadioButton> | ReactElement<typeof Checkbox>
 
-interface OptionProps {
+interface OptionProps extends HTMLAttributes<HTMLDivElement> {
   control: ControlType
   id: string
   label?: string | ReactNode
   description?: string | ReactNode
-  className?: string
-  ariaSelected?: boolean
+  disabled?: boolean
 }
 
 /**
@@ -24,30 +23,32 @@ interface OptionProps {
  *   description="Description for Option 1"
  * />
  */
-export const Option: FC<OptionProps> = ({ control, id, label, description, ariaSelected, className }) => {
+export const Option: FC<OptionProps> = ({ control, id, label, description, className, disabled, ...props }) => {
   return (
     <div
       className={cn('flex items-start', className)}
       role="option"
       aria-labelledby={`${id}-label`}
-      aria-selected={ariaSelected}
+      aria-selected={false}
+      {...props}
     >
       {control}
       <div className="flex flex-col gap-0">
-        <Label htmlFor={id} className="cursor-pointer pl-2.5 leading-tight">
+        <Label
+          htmlFor={id}
+          className={cn('cursor-pointer pl-2.5 leading-tight', { 'cursor-default': disabled })}
+          color={disabled ? 'disabled' : 'primary'}
+        >
           {label}
         </Label>
         {description && (
-          <Text
-            className="ml-2.5 mt-1.5 leading-snug tracking-tight"
-            as="p"
-            size={2}
-            color="foreground-4"
+          <p
+            className="ml-2.5 mt-1.5 text-sm leading-snug tracking-tight text-foreground-4"
             id={`${id}-description`}
             role="note"
           >
             {description}
-          </Text>
+          </p>
         )}
       </div>
     </div>