Merge pull request #300 from devtron-labs/feat/useForm-hook

feat: useForm - form handling hook

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.11",
+    "version": "0.3.12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -37,7 +37,7 @@ export const CustomInput = ({
     rootClassName = '',
     autoComplete = 'off',
     helperText = '',
-    handleOnBlur,
+    onBlur,
     readOnly = false,
     noTrim = false,
     onKeyPress,
@@ -66,15 +66,15 @@ export const CustomInput = ({
         return error
     }
 
-    const onBlur = (event) => {
+    const handleOnBlur = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
         if (!noTrim) {
             event.stopPropagation()
             event.target.value = event.target.value?.trim()
             onChange(event)
         }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
+        if (typeof onBlur === 'function') {
+            onBlur(event)
         }
     }
 
@@ -127,7 +127,7 @@ export const CustomInput = ({
                     e.persist()
                     onChange(e)
                 }}
-                onBlur={onBlur}
+                onBlur={handleOnBlur}
                 onFocus={onFocus}
                 placeholder={placeholder}
                 value={value}

src/Common/CustomInput/CustomInput.tsx

@@ -34,7 +34,7 @@ export interface CustomInputProps {
     rootClassName?: string
     error?: string[] | string
     helperText?: ReactNode
-    handleOnBlur?: (e) => void
+    onBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
     onKeyPress?: (e) => void

src/Common/CustomInput/Types.ts

@@ -60,7 +60,7 @@ export const TagDetails = ({
             {!hidePropagateTag && (
                 <div
                     className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith('devtron.ai/') ? 'cursor-not-allowed bcn-1' : ''}`}
-                    onClick={propagateTagToResource}
+                    onClick={!tagData?.isPropagateDisabled ? propagateTagToResource : null}
                     data-testid={`propagate-tag-${index}`}
                 >
                     <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />

src/Common/CustomTagSelector/TagDetails.tsx

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import info from '../../Assets/Icon/ic-info-filled.svg'
 import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
+import { showError } from '@Common/Helper'
 
 const DeleteComponent = ({
     setDeleting,
@@ -36,11 +37,13 @@ const DeleteComponent = ({
     configuration = '',
     closeCustomComponent,
 }: DeleteComponentProps) => {
+    const [isDeleting, setIsDeleting] = useState(false)
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
     const { push } = useHistory()
 
     async function handleDelete() {
-        setDeleting(true)
+        setDeleting?.(true)
+        setIsDeleting(true)
         try {
             await deleteComponent(payload)
             ToastManager.showToast({
@@ -59,9 +62,12 @@ const DeleteComponent = ({
         } catch (serverError) {
             if (serverError instanceof ServerErrors && serverError.code === 500) {
                 setCannotDeleteDialogModal(true)
+            } else {
+                showError(serverError)
             }
         } finally {
-            setDeleting(false)
+            setDeleting?.(false)
+            setIsDeleting(false)
         }
     }
 
@@ -92,6 +98,7 @@ const DeleteComponent = ({
             delete={handleDelete}
             closeDelete={() => toggleConfirmation(false)}
             dataTestId="delete-dialog"
+            apiCallInProgress={isDeleting}
         >
             <DeleteDialog.Description>
                 <p>Are you sure you want to delete this {configuration || component}? </p>

src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -15,7 +15,10 @@
  */
 
 export interface DeleteComponentProps {
-    setDeleting: (boolean) => void
+    /**
+     * @deprecated - Delete component internally handles loading for the `Delete Button`.
+     */
+    setDeleting?: (boolean) => void
     toggleConfirmation: any
     deleteComponent: (any) => Promise<any>
     title: string

src/Common/DeleteComponentModal/types.ts

@@ -206,110 +206,6 @@ export function getCookie(sKey) {
     )
 }
 
-export function useForm(stateSchema, validationSchema = {}, callback) {
-    const [state, setState] = useState(stateSchema)
-    const [disable, setDisable] = useState(true)
-    const [isDirty, setIsDirty] = useState(false)
-
-    // Disable button in initial render.
-    useEffect(() => {
-        setDisable(true)
-    }, [])
-
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    useEffect(() => {
-        if (isDirty) {
-            setDisable(validateState(state))
-        }
-    }, [state, isDirty])
-
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    const validateState = useCallback(
-        (state) => {
-            // check errors in all fields
-            const hasErrorInState = Object.keys(validationSchema).some((key) => {
-                const isInputFieldRequired = validationSchema[key].required
-                const stateValue = state[key].value // state value
-                const stateError = state[key].error // state error
-                return (isInputFieldRequired && !stateValue) || stateError
-            })
-            return hasErrorInState
-        },
-        [state, validationSchema],
-    )
-
-    function validateField(name, value): string | string[] {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.'
-            }
-        }
-
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false
-            }
-            return true
-        }
-
-        // single validator
-        const _validator = validationSchema[name].validator
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error
-            }
-        }
-
-        // multiple validators
-        const _validators = validationSchema[name].validators
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            const errors = []
-            _validators.forEach((_validator) => {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors.push(_validator.error)
-                }
-            })
-            if (errors.length > 0) {
-                return errors
-            }
-        }
-
-        return ''
-    }
-
-    const handleOnChange = useCallback(
-        (event) => {
-            setIsDirty(true)
-
-            const { name, value } = event.target
-            const error = validateField(name, value)
-            setState((prevState) => ({
-                ...prevState,
-                [name]: { value, error },
-            }))
-        },
-        [validationSchema],
-    )
-
-    const handleOnSubmit = (event) => {
-        event.preventDefault()
-        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
-            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
-            return agg
-        }, state)
-        if (!validateState(newState)) {
-            callback(state)
-        } else {
-            setState({ ...newState })
-        }
-    }
-    return { state, disable, handleOnChange, handleOnSubmit }
-}
-
 export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {

src/Common/Helper.tsx

@@ -17,3 +17,4 @@
 export * from './UsePrompt'
 export * from './useGetResourceKindsOptions'
 export * from './UseDownload'
+export * from './useForm'

src/Shared/Hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useForm'
+export * from './useForm.types'