WIP: form validation

package.json

@@ -11,7 +11,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "@aleph-front/aleph-core": "^1.3.10",
+    "@aleph-front/aleph-core": "^1.3.13",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@hookform/resolvers": "^3.1.1",
     "@types/node": "18.14.1",

src/components/common/HiddenFileInput/cmp.tsx

@@ -1,73 +1,85 @@
-import React, { ChangeEvent, memo, useCallback, useRef } from 'react'
+import React, {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
+  memo,
+  useCallback,
+  useRef,
+} from 'react'
 import { Button, FormError, Icon } from '@aleph-front/aleph-core'
 import { HiddenFileInputProps } from './types'
 import { StyledHiddenFileInput } from './styles'
 import { ellipseAddress } from '@/helpers/utils'
 
 export const HiddenFileInput = memo(
-  ({ onChange, accept, value, children, error }: HiddenFileInputProps) => {
-    const inputRef = useRef<HTMLInputElement>(null)
+  forwardRef(
+    (
+      { onChange, accept, value, children, error }: HiddenFileInputProps,
+      ref: ForwardedRef<HTMLDivElement>,
+    ) => {
+      const inputRef = useRef<HTMLInputElement>(null)
 
-    const handleClick = useCallback(() => {
-      if (!inputRef.current) return
-      inputRef.current.click()
-    }, [])
+      const handleClick = useCallback(() => {
+        if (!inputRef.current) return
+        inputRef.current.click()
+      }, [])
 
-    const handleRemoveFile = useCallback(() => {
-      onChange(undefined)
-    }, [onChange])
+      const handleRemoveFile = useCallback(() => {
+        onChange(undefined)
+      }, [onChange])
 
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        // This is verbose to avoid a type error on e.target.files[0] being undefined
-        const target = e.target as HTMLInputElement
-        const { files } = target
+      const handleChange = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+          // This is verbose to avoid a type error on e.target.files[0] being undefined
+          const target = e.target as HTMLInputElement
+          const { files } = target
 
-        if (files) {
-          const fileUploaded = files[0]
-          onChange(fileUploaded)
-        }
-      },
-      [onChange],
-    )
+          if (files) {
+            const fileUploaded = files[0]
+            onChange(fileUploaded)
+          }
+        },
+        [onChange],
+      )
 
-    return (
-      <>
-        {value ? (
-          <Button
-            onClick={handleRemoveFile}
-            type="button"
-            color="main2"
-            kind="neon"
-            size="regular"
-            variant="tertiary"
-          >
-            {ellipseAddress(value.name)} <Icon name="trash" tw="ml-5" />
-          </Button>
-        ) : (
-          <Button
-            onClick={handleClick}
-            type="button"
-            color="main0"
-            kind="neon"
-            size="regular"
-            variant="primary"
-          >
-            {children}
-          </Button>
-        )}
+      return (
+        <div tabIndex={-1} ref={ref}>
+          {value ? (
+            <Button
+              onClick={handleRemoveFile}
+              type="button"
+              color="main2"
+              kind="neon"
+              size="regular"
+              variant="tertiary"
+            >
+              {ellipseAddress(value.name)} <Icon name="trash" tw="ml-5" />
+            </Button>
+          ) : (
+            <Button
+              onClick={handleClick}
+              type="button"
+              color="main0"
+              kind="neon"
+              size="regular"
+              variant="primary"
+            >
+              {children}
+            </Button>
+          )}
 
-        {error && <FormError error={error} />}
+          {error && <FormError error={error} />}
 
-        <StyledHiddenFileInput
-          type="file"
-          ref={inputRef}
-          onChange={handleChange}
-          accept={accept}
-        />
-      </>
-    )
-  },
+          <StyledHiddenFileInput
+            type="file"
+            ref={inputRef}
+            onChange={handleChange}
+            accept={accept}
+          />
+        </div>
+      )
+    },
+  ),
 )
 HiddenFileInput.displayName = 'HiddenFileInput'
 

src/components/form/AddDomains/types.ts

@@ -1,3 +1,4 @@
+import { EntityType } from '@/helpers/constants'
 import { Control } from 'react-hook-form'
 
 export type DomainItemProps = {
@@ -10,4 +11,5 @@ export type DomainItemProps = {
 export type AddDomainsProps = {
   control: Control
   name: string
+  entityType: EntityType.Program | EntityType.Instance
 }

src/components/form/AddSSHKeys/cmp.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Icon, TextInput, Button, Checkbox } from '@aleph-front/aleph-core'
+import {
+  Icon,
+  TextInput,
+  Button,
+  Checkbox,
+  FormError,
+} from '@aleph-front/aleph-core'
 import { useAddSSHKeys, useSSHKeyItem } from '@/hooks/form/useAddSSHKeys'
 import { SSHKeyItemProps, AddSSHKeysProps } from './types'
 import NoisyContainer from '@/components/common/NoisyContainer'
@@ -16,47 +22,56 @@ const SSHKeyItem = React.memo((props: SSHKeyItemProps) => {
   } = useSSHKeyItem(props)
 
   return (
-    <div tw="flex gap-6">
-      <div tw="flex items-start pt-11">
-        <Checkbox {...isSelectedCtrl.field} {...isSelectedCtrl.fieldState} />
-      </div>
-      <div tw="flex-auto flex flex-col md:flex-row gap-6">
-        <div tw="flex-auto">
-          <TextInput
-            {...keyCtrl.field}
-            {...keyCtrl.fieldState}
-            label={`Key #${index + 1}`}
-            placeholder="AAAAB3NzaC1yc2EAAAAB ... B3NzaaC1=="
-            disabled={!isNew}
-          />
-        </div>
-        <div tw="md:w-4/12">
-          <TextInput
-            {...labelCtrl.field}
-            {...labelCtrl.fieldState}
-            label={`Label`}
-            placeholder="[email protected]"
-            disabled={!isNew}
+    <>
+      {isSelectedCtrl.fieldState.error && (
+        <FormError error={isSelectedCtrl.fieldState.error} />
+      )}
+      <div tw="flex gap-6">
+        <div tw="flex items-start pt-11">
+          <Checkbox
+            {...isSelectedCtrl.field}
+            {...isSelectedCtrl.fieldState}
+            checked={!!isSelectedCtrl.field.value}
           />
         </div>
-        {allowRemove && (
-          <div tw="w-14 flex items-end md:justify-center pb-2">
-            {isNew && (
-              <Button
-                color="main2"
-                variant="secondary"
-                kind="neon"
-                size="regular"
-                type="button"
-                onClick={handleRemove}
-              >
-                <Icon name="trash" />
-              </Button>
-            )}
+        <div tw="flex-auto flex flex-col md:flex-row gap-6">
+          <div tw="flex-auto">
+            <TextInput
+              {...keyCtrl.field}
+              {...keyCtrl.fieldState}
+              label={`Key #${index + 1}`}
+              placeholder="AAAAB3NzaC1yc2EAAAAB ... B3NzaaC1=="
+              disabled={!isNew}
+            />
+          </div>
+          <div tw="md:w-4/12">
+            <TextInput
+              {...labelCtrl.field}
+              {...labelCtrl.fieldState}
+              label={`Label`}
+              placeholder="[email protected]"
+              disabled={!isNew}
+            />
           </div>
-        )}
+          {allowRemove && (
+            <div tw="w-14 flex items-end md:justify-center pb-2">
+              {isNew && (
+                <Button
+                  color="main2"
+                  variant="secondary"
+                  kind="neon"
+                  size="regular"
+                  type="button"
+                  onClick={handleRemove}
+                >
+                  <Icon name="trash" />
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   )
 })
 SSHKeyItem.displayName = 'SSHKeyItem'

src/components/form/AddVolume/cmp.tsx

@@ -133,6 +133,7 @@ const AddExistingVolume = React.memo((props: AddExistingVolumeProps) => {
           <Checkbox
             {...useLatestCtrl.field}
             {...useLatestCtrl.fieldState}
+            checked={!!useLatestCtrl.field.value}
             label="Always update to the latest version"
           />
         </div>
@@ -144,8 +145,14 @@ const AddExistingVolume = React.memo((props: AddExistingVolumeProps) => {
 AddExistingVolume.displayName = 'AddExistingVolume'
 
 const AddPersistentVolume = React.memo((props: AddPersistentVolumeProps) => {
-  const { nameCtrl, mountPathCtrl, sizeCtrl, volumeSize, handleRemove } =
-    useAddPersistentVolumeProps(props)
+  const {
+    nameCtrl,
+    mountPathCtrl,
+    sizeCtrl,
+    sizeValue,
+    sizeHandleChange,
+    handleRemove,
+  } = useAddPersistentVolumeProps(props)
 
   return (
     <>
@@ -176,9 +183,11 @@ const AddPersistentVolume = React.memo((props: AddPersistentVolumeProps) => {
           <TextInput
             {...sizeCtrl.field}
             {...sizeCtrl.fieldState}
-            value={volumeSize}
+            value={sizeValue}
+            onChange={sizeHandleChange}
+            type="number"
             label="Size (GB)"
-            placeholder="2"
+            placeholder="0"
           />
         </div>
         {handleRemove && <RemoveVolume onRemove={handleRemove} />}