Connected FormGroup, FormInput and TimeoutControl with FormContext

src/common/context/FormContext.ts

@@ -28,6 +28,7 @@ export const getFormContextDefault = (i18nDefault = '') => ({
         smallMode: true,
         watchUnitChange: true,
     },
+    compactFormComponentsView: false,
 })
 
 export const FormContext = createContext<FormContextType>(getFormContextDefault(''))

src/common/context/FormContext.types.ts

@@ -7,6 +7,7 @@ export type FormContextType = {
     updateData: (newData: any) => void
     setFormError?: Dispatch<SetStateAction<any>>
     setFormDirty?: Dispatch<SetStateAction<any>>
+    compactFormComponentsView: boolean
     commonFormGroupProps: Pick<FormGroupProps, 'errorTooltip' | 'fullSize' | 'marginBottom'>
     commonInputProps: Pick<InputProps, 'inlineStyle' | 'align' | 'size'>
     commonTimeoutControlProps: Pick<TimeoutControlProps, 'align' | 'i18n' | 'inlineStyle' | 'size' | 'watchUnitChange' | 'smallMode' | 'errorTooltip'>

src/common/hooks/use-form.ts

@@ -1,23 +1,24 @@
 import { FieldValues } from 'react-hook-form/dist/types'
 import { useForm as useFormLib } from 'react-hook-form'
-import { Dispatch, SetStateAction, useCallback, useEffect } from 'react'
+import { useCallback, useContext, useEffect } from 'react'
 import isFunction from 'lodash/isFunction'
 import cloneDeep from 'lodash/cloneDeep'
 import { zodResolver } from '@hookform/resolvers/zod'
 
 import { setProperty } from '../../components/Atomic/_utils/utils'
+import { FormContext } from '../context/FormContext'
 
 type UseFormOptionsType = {
     defaultFormData: any
     errorKey: string
-    setFormError?: Dispatch<SetStateAction<any>>
-    setFormDirty?: Dispatch<SetStateAction<any>>
     schema?: any
-    updateData: (newData: any) => void
 }
 
 export function useForm<TFieldValues extends FieldValues = FieldValues>(options: UseFormOptionsType) {
-    const { defaultFormData, setFormError, setFormDirty, updateData, errorKey, schema } = options
+    const { defaultFormData, errorKey, schema } = options
+
+    const { setFormDirty, setFormError, updateData } = useContext(FormContext)
+
     const useFormData = useFormLib<TFieldValues>({
         mode: 'all',
         reValidateMode: 'onSubmit',

src/components/Atomic/FormGroup/FormGroup.tsx

@@ -1,12 +1,13 @@
-import React, { Children, cloneElement, FC, isValidElement, ReactElement } from 'react'
+import React, { Children, cloneElement, FC, isValidElement, ReactElement, useContext } from 'react'
 
 import { defaultProps, Props } from './FormGroup.types'
 import * as styles from './FormGroup.styles'
 import Button from '../Button/Button'
 import Tooltip from '../Tooltip/Tooltip'
 import { tooltipVariants } from '../Tooltip'
+import { FormContext } from '../../../common/context/FormContext'
 
-const FormGroup: FC<Props> = (props) => {
+export const FormGroupCore: FC<Props> = (props) => {
     const { children, className, error, errorTooltip, id, inline, fullSize, marginBottom, inlineJustifyContent, renderProps } = { ...defaultProps, ...props }
     const childrenWithProps = Children.map(children as ReactElement[], (child, key) => {
         if (isValidElement(child)) {
@@ -74,6 +75,11 @@ const FormGroup: FC<Props> = (props) => {
     )
 }
 
+const FormGroup: FC<Props> = (props) => {
+    const { commonFormGroupProps, compactFormComponentsView } = useContext(FormContext)
+    return <FormGroupCore {...props} {...(compactFormComponentsView ? commonFormGroupProps : {})} />
+}
+
 FormGroup.displayName = 'FormGroup'
 FormGroup.defaultProps = defaultProps
 

src/components/Atomic/FormInput/FormInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState } from 'react'
+import { forwardRef, useContext, useRef, useState } from 'react'
 import { detect } from 'detect-browser'
 import { mergeRefs } from 'react-merge-refs'
 
@@ -8,8 +8,9 @@ import { convertSize, IconCopy, IconHidePassword, IconShowPassword } from '../Ic
 import { copyToClipboard } from '../../../common/utils'
 import { inputAligns, inputSizes } from './constants'
 import { isEdge } from '../_utils/browser'
+import { FormContext } from '../../../common/context/FormContext'
 
-const FormInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
+export const FormInputCore = forwardRef<HTMLInputElement, Props>((props, ref) => {
     const {
         align,
         ariaInvalid,
@@ -106,6 +107,11 @@ const FormInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
     return inputBase
 })
 
+const FormInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
+    const { commonInputProps, compactFormComponentsView } = useContext(FormContext)
+    return <FormInputCore {...props} ref={ref} {...(compactFormComponentsView ? commonInputProps : {})} />
+})
+
 FormInput.displayName = 'FormInput'
 FormInput.defaultProps = defaultProps
 

src/components/Atomic/TimeoutControl/TimeoutControl.tsx

@@ -1,9 +1,9 @@
-import { ChangeEvent, FC, useMemo, useState } from 'react'
+import { ChangeEvent, FC, useContext, useMemo, useState } from 'react'
 import isFunction from 'lodash/isFunction'
 import startCase from 'lodash/startCase'
 import debounce from 'lodash/debounce'
 
-import { Props } from './TimeoutControl.types'
+import { i18nType, Props } from './TimeoutControl.types'
 import * as styles from './TimeoutControl.styles'
 import FormGroup from '../FormGroup'
 import FormLabel from '../FormLabel'
@@ -12,10 +12,11 @@ import FormSelect, { selectSizes } from '../FormSelect'
 import { commandTimeoutUnits } from './constants'
 import { findClosestUnit, convertAndNormalizeValueFromTo, convertValueToNs, normalizeToFixedFloatValue, hasCommandTimeoutError } from './utils'
 import { inputSizes } from '../FormInput'
+import { FormContext } from '../../../common/context/FormContext'
 
 const { INFINITE, NS } = commandTimeoutUnits
 
-const TimeoutControl: FC<Props> = (props) => {
+export const TimeoutControlCore: FC<Props> = (props) => {
     const {
         align,
         defaultValue,
@@ -179,6 +180,27 @@ const TimeoutControl: FC<Props> = (props) => {
     )
 }
 
+// make i18n optional
+const TimeoutControl: FC<Omit<Props, 'i18n'> & { i18n?: i18nType }> = (props) => {
+    const { commonTimeoutControlProps, compactFormComponentsView } = useContext(FormContext)
+
+    return (
+        <TimeoutControlCore
+            {...props}
+            {...(compactFormComponentsView
+                ? commonTimeoutControlProps
+                : {
+                      i18n: {
+                          default: props.i18n?.default || '',
+                          duration: props.i18n?.duration || '',
+                          unit: props.i18n?.unit || '',
+                          placeholder: props.i18n?.placeholder || '',
+                      },
+                  })}
+        />
+    )
+}
+
 TimeoutControl.displayName = 'TimeoutControl'
 
 export default TimeoutControl

src/components/Atomic/TimeoutControl/TimeoutControl.types.ts

@@ -1,18 +1,20 @@
 import { Props as InputProps } from '../FormInput/FormInput.types'
 import { CSSProperties } from 'react'
 
+export type i18nType = {
+    default: string
+    duration?: string
+    placeholder: string
+    unit?: string
+}
+
 export type Props = {
     defaultTtlValue: number
     defaultValue: number
     disabled?: boolean
     error?: string
     errorTooltip?: boolean
-    i18n: {
-        default: string
-        duration?: string
-        placeholder: string
-        unit?: string
-    }
+    i18n: i18nType
     inlineStyle?: boolean
     isDelete?: boolean
     onBlur?: (v: any) => void

src/components/Organisms/CaPoolModal/utils.tsx

@@ -33,11 +33,7 @@ export const getCommonNameElement = (name: string, activeItem: string, setActive
 export const findInEntries = (entries: any, name: string) => {
     const index = entries.findIndex((item: any) => item[0] === name)
 
-    if (index >= 0) {
-        return entries[index][1]
-    }
-
-    return '-'
+    return index >= 0 ? entries[index][1] : '-'
 }
 
 export const buildCATranslations = (_: any, t: any, g: any) => ({