fix: DynamicDataTable - error showing if validation is not passed fix, feat: FileUpload - loading state add, code refactor

Author: RohitRaj011

src/Common/Common.service.ts

@@ -19,7 +19,7 @@ import moment from 'moment'
 import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } from '@Shared/types'
 import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
 import { get, getIsRequestAborted, post } from './Api'
-import { GitProviderType, ROUTES } from './Constants'
+import { API_STATUS_CODES, GitProviderType, ROUTES } from './Constants'
 import { getUrlWithSearchParams, showError, sortCallback } from './Helper'
 import {
     TeamList,
@@ -547,13 +547,16 @@ export const getGlobalVariables = async ({
     abortControllerRef?: MutableRefObject<AbortController>
 }): Promise<GlobalVariableOptionType[]> => {
     try {
-        const { result } = await get<GlobalVariableDTO[]>(`${ROUTES.PLUGIN_GLOBAL_VARIABLES}?appId=${appId}`, {
-            abortControllerRef,
-        })
+        const { result } = await get<GlobalVariableDTO[]>(
+            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_VARIABLES, { appId }),
+            {
+                abortControllerRef,
+            },
+        )
         const variableList = (result ?? [])
             .filter((item) => (isCD ? item.stageType !== 'ci' : item.stageType === 'ci'))
             .map((variable) => {
-                const { name, ...updatedVariable } = { ...variable }
+                const { name, ...updatedVariable } = variable
 
                 return {
                     ...updatedVariable,
@@ -567,7 +570,7 @@ export const getGlobalVariables = async ({
         return variableList
     } catch (err) {
         if (!getIsRequestAborted(err)) {
-            if (err instanceof ServerErrors && err.code === 403) {
+            if (err instanceof ServerErrors && err.code === API_STATUS_CODES.PERMISSION_DENIED) {
                 ToastManager.showToast({
                     variant: ToastVariantType.notAuthorized,
                     description: 'You are not authorized to access global variables',

src/Common/TippyCustomized.tsx

@@ -43,8 +43,8 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
     }
 
     const closeTippy = (e) => {
-        stopPropagation(e)
         if (!props.disableClose) {
+            stopPropagation(e)
             if (tippyRef.current?.hide) {
                 tippyRef.current.hide()
                 tippyRef.current = null

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -254,6 +254,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
 
     const renderCell = (row: DynamicDataTableRowType<K, CustomStateType>, key: K, index: number) => {
         const isDisabled = readOnly || row.data[key].disabled || false
+        const hasError = !(cellError[row.id]?.[key]?.isValid ?? true)
 
         const cellNode = (
             <Tooltip
@@ -264,7 +265,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 plugins={[followCursor]}
             >
                 <div
-                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && !cellError[row.id]?.[key]?.isValid ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
+                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
                 >
                     {renderCellIcon(row, key, true)}
                     {renderCellContent(row, key)}

src/Shared/Components/FileUpload/FileUpload.tsx

@@ -4,9 +4,17 @@ import { ReactComponent as ICCloudUpload } from '@Icons/ic-cloud-upload.svg'
 import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
 import { Tooltip } from '@Common/Tooltip'
 
+import { Progressing } from '@Common/Progressing'
 import { FileUploadProps } from './types'
 
-export const FileUpload = ({ label, fileName = '', multiple = false, fileTypes = [], onUpload }: FileUploadProps) => {
+export const FileUpload = ({
+    isLoading,
+    label,
+    fileName = '',
+    multiple = false,
+    fileTypes = [],
+    onUpload,
+}: FileUploadProps) => {
     // METHODS
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
         if (event.target.files) {
@@ -24,17 +32,32 @@ export const FileUpload = ({ label, fileName = '', multiple = false, fileTypes =
 
     return (
         <div className="mw-none">
-            {fileName ? (
+            {isLoading || fileName ? (
                 <div className="dc__border br-4 dc__overflow-hidden flexbox">
                     <div className="flexbox dc__align-items-center dc__gap-8 px-8 py-4 mw-none">
-                        <ICCloudUpload className="icon-dim-16 dc__no-shrink" />
-                        <Tooltip content={fileName}>
-                            <span className="fs-12 lh-20 dc__ellipsis-right">{fileName}</span>
-                        </Tooltip>
+                        {isLoading ? (
+                            <>
+                                <Progressing size={16} />
+                                <span className="fs-12 lh-20">Uploading...</span>
+                            </>
+                        ) : (
+                            <>
+                                <ICCloudUpload className="icon-dim-16 dc__no-shrink" />
+                                <Tooltip content={fileName}>
+                                    <span className="fs-12 lh-20 dc__ellipsis-right">{fileName}</span>
+                                </Tooltip>
+                            </>
+                        )}
                     </div>
-                    <button type="button" className="dc__transparent flex p-6 dc__hover-n50" onClick={onClearUpload}>
-                        <ICCross className="icon-dim-16 fcn-6" />
-                    </button>
+                    {!isLoading && (
+                        <button
+                            type="button"
+                            className="dc__transparent flex p-6 dc__hover-n50"
+                            onClick={onClearUpload}
+                        >
+                            <ICCross className="icon-dim-16 fcn-6" />
+                        </button>
+                    )}
                 </div>
             ) : (
                 <div className="dc__position-rel flex">

src/Shared/Components/FileUpload/types.ts

@@ -1,4 +1,5 @@
 export interface FileUploadProps {
+    isLoading?: boolean
     fileName: string
     onUpload: (files: File[]) => void
     multiple?: boolean