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/en/views.json

@@ -458,6 +458,18 @@
     "generalTab": "General",
     "keysTab": "Keys and Tokens"
   },
+  "project": {
+    "importProjectValidation": {
+      "nameMax": "Name must be no longer than 100 characters",
+      "nameRegex": "Organization name must contain only letters, numbers, and the characters: - _ .",
+      "nameNoSpaces": "Name cannot contain spaces",
+      "descriptionMax": "Description must be no longer than 1024 characters",
+      "organizationNameMax": "Organization name must be no longer than 100 characters",
+      "noSpaces": "Organization name cannot contain spaces",
+      "hostUrlRequired": "Repository URL is required",
+      "hostUrlInvalid": "Invalid URL"
+    }
+  },
   "forms": {
     "selectMember": "Select member",
     "selectRole": "Select role",
@@ -520,4 +532,4 @@
   "secrets": {
     "secretsTitle": "Secrets"
   }
-}
+}

packages/ui/locales/es/views.json

@@ -449,6 +449,18 @@
     "generalTab": "General",
     "keysTab": "Claves y Tokens"
   },
+  "project": {
+    "importProjectValidation": {
+      "nameMax": "El nombre no debe superar los 100 caracteres",
+      "nameRegex": "El nombre de la organización debe contener solo letras, números y los caracteres: - _ .",
+      "nameNoSpaces": "El nombre no puede contener espacios",
+      "descriptionMax": "La descripción no debe superar los 1024 caracteres",
+      "organizationNameMax": "El nombre de la organización no debe superar los 100 caracteres",
+      "noSpaces": "El nombre de la organización no puede contener espacios",
+      "hostUrlRequired": "La URL del repositorio es obligatoria",
+      "hostUrlInvalid": "URL inválida"
+    }
+  },
   "forms": {
     "selectMember": "",
     "selectRole": "",
@@ -509,4 +521,4 @@
   "secrets": {
     "secretsTitle": "Secrets"
   }
-}
+}

packages/ui/locales/fr/views.json

@@ -454,6 +454,18 @@
     "generalTab": "Général",
     "keysTab": "Clés et Jetons"
   },
+  "project": {
+    "importProjectValidation": {
+      "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"
+    }
+  },
   "forms": {
     "selectMember": "",
     "selectRole": "",
@@ -514,4 +526,4 @@
   "secrets": {
     "secretsTitle": "Secrets"
   }
-}
+}

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>
@@ -143,7 +143,7 @@ export const ButtonWithOptions = <T extends string>({
                   onClick={() => handleOptionChange(option.value)}
                 >
                   <span className="flex flex-col gap-y-1.5">
-                    <span className="leading-none text-foreground-8">{option.label}</span>
+                    <span className="text-foreground-8 leading-none">{option.label}</span>
                     {option?.description && <span className="text-foreground-4">{option.description}</span>}
                   </span>
                 </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

@@ -175,17 +175,17 @@ export const GitCommitDialog: FC<GitCommitDialogProps> = ({
                     Commit directly to the
                     <span
                       className="
-                        relative mx-1.5 inline-flex gap-1 px-2.5 text-foreground-8
-                        before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded before:bg-background-8
+                        text-foreground-8 before:bg-background-8 relative mx-1.5 inline-flex gap-1
+                        px-2.5 before:absolute before:-top-1 before:left-0 before:z-[-1] before:h-6 before:w-full before:rounded
                       "
                     >
-                      <Icon className="translate-y-0.5 text-icons-9" name="branch" size={14} />
+                      <Icon className="text-icons-9 translate-y-0.5" name="branch" size={14} />
                       {currentBranch}
                     </span>
                     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'
@@ -9,12 +9,12 @@ export interface BaseInputProps
     VariantProps<typeof inputVariants> {}
 
 const inputVariants = cva(
-  'bg-input-background px-3 py-1 text-foreground-1 disabled:cursor-not-allowed disabled:bg-background-3 disabled:text-foreground-7',
+  'bg-input-background text-foreground-1 disabled:bg-background-3 disabled:text-foreground-7 px-3 py-1 disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
         default:
-          'flex w-full rounded border text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-4 focus-visible:rounded focus-visible:outline-none',
+          'placeholder:text-foreground-4 flex w-full rounded border text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:rounded focus-visible:outline-none',
         extended: 'grow border-none focus-visible:outline-none'
       },
       size: {
@@ -114,10 +114,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     },
     ref
   ) => {
-    const isControlGroup = !!error || !!caption || !!label || !!wrapperClassName
-    const InputWrapper = isControlGroup ? ControlGroup : Fragment
-    const inputWrapperProps = isControlGroup ? { className: wrapperClassName } : {}
-
     const InputComponent = customContent ? BaseInputWithWrapper : BaseInput
 
     const baseInputComp = (
@@ -154,7 +150,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
       return inputIconName ? (
         <span className="relative">
-          <Icon className="absolute left-3 top-1/2 -translate-y-1/2 text-icons-9" name={inputIconName} size={14} />
+          <Icon className="text-icons-9 absolute left-3 top-1/2 -translate-y-1/2" name={inputIconName} size={14} />
           {baseInputComp}
         </span>
       ) : (
@@ -163,7 +159,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     }
 
     return (
-      <InputWrapper {...inputWrapperProps}>
+      <ControlGroup className={wrapperClassName}>
         {!!label && (
           <Label className="mb-2.5" color={disabled ? 'disabled-dark' : 'secondary'} optional={optional} htmlFor={id}>
             {label}
@@ -179,7 +175,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
 
         {caption && <Caption className={cn({ 'text-foreground-9': disabled })}>{caption}</Caption>}
-      </InputWrapper>
+      </ControlGroup>
     )
   }
 )

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="text-foreground-4 ml-2.5 mt-1.5 text-sm leading-snug tracking-tight"
             id={`${id}-description`}
             role="note"
           >
             {description}
-          </Text>
+          </p>
         )}
       </div>
     </div>