refactor: TabGroup - disabled css class update, useForm - error type changed from string | string | null to string[] | null

Author: RohitRaj011

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/service.ts

@@ -12,6 +12,7 @@ import {
     ResolvedDeploymentTemplateDTO,
     ValuesAndManifestFlagDTO,
 } from './types'
+import { GET_RESOLVED_DEPLOYMENT_TEMPLATE_EMPTY_RESPONSE } from './constants'
 
 export const getDeploymentManifest = async (
     params: GetDeploymentManifestProps,
@@ -60,6 +61,6 @@ export const getResolvedDeploymentTemplate = async (
             showError(error)
             throw error
         }
-        return null
+        return GET_RESOLVED_DEPLOYMENT_TEMPLATE_EMPTY_RESPONSE
     }
 }

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryDiffView.tsx

@@ -87,6 +87,7 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
+            // TODO: Add key from prop
             key={`${sortBy}-${sortOrder}`}
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -101,7 +101,7 @@ const Tab = ({
 
     const renderTabContainer = () => (
         <li
-            className={`tab-group__tab lh-20 ${active ? 'tab-group__tab--active cb-5 fw-6' : 'cn-9 fw-4'} ${alignActiveBorderWithContainer ? 'tab-group__tab--align-active-border' : ''} ${tabType === 'block' ? 'tab-group__tab--block' : ''} ${disabled ? 'cursor-not-allowed dc__opacity-0_5' : 'cursor'}`}
+            className={`tab-group__tab lh-20 ${active ? 'tab-group__tab--active cb-5 fw-6' : 'cn-9 fw-4'} ${alignActiveBorderWithContainer ? 'tab-group__tab--align-active-border' : ''} ${tabType === 'block' ? 'tab-group__tab--block' : ''} ${disabled ? 'dc__disabled' : 'cursor'}`}
         >
             {getTabComponent()}
         </li>

src/Shared/Components/TabGroup/TabGroup.scss

@@ -33,7 +33,7 @@
             bottom: -1px;
         }
 
-        &:hover:not(.tab-group__tab--block):not(.dc__opacity-0_5) {
+        &:hover:not(.tab-group__tab--block):not(.dc__disabled) {
             color: var(--B500);
             @include svg-styles(var(--B500));
         }

src/Shared/Hooks/useForm/useForm.types.ts

@@ -52,9 +52,9 @@ export interface UseFormValidation {
 
 /**
  * Represents the structure for form validation errors.
- * Maps each field to an error message or an array of error messages.
+ * Maps each field to an array of error messages.
  */
-export type UseFormErrors<T> = Partial<Record<keyof T, string | string[]>>
+export type UseFormErrors<T> = Partial<Record<keyof T, string[]>>
 
 /**
  * Represents the fields that have been modified ("dirty") in the form.

src/Shared/Hooks/useForm/useForm.utils.ts

@@ -11,13 +11,13 @@ import { UseFormValidation } from './useForm.types'
 export const checkValidation = <T extends Record<keyof T, any> = {}>(
     value: T[keyof T],
     validation: UseFormValidation,
-): string | string[] | null => {
+): string[] | null => {
     if (
         validation?.required &&
         (typeof validation.required === 'object' ? validation.required.value : validation.required) &&
         (value === null || value === undefined || value === '')
     ) {
-        return typeof validation.required === 'object' ? validation.required.message : 'This is a required field'
+        return [typeof validation.required === 'object' ? validation.required.message : 'This is a required field']
     }
 
     const errors = []
@@ -53,9 +53,5 @@ export const checkValidation = <T extends Record<keyof T, any> = {}>(
         errors.push(custom.message)
     }
 
-    if (!errors.length) {
-        return null
-    }
-
-    return errors.length === 1 ? errors[0] : errors
+    return errors.length ? errors : null
 }