@devtron-labs/devtron-fe-common-lib 0.0.62-beta-3 → 0.0.62-beta-4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.62-beta-3",
+    "version": "0.0.62-beta-4",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-cpu.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M12.5 5.625H7.5M12.5 8.125H7.5M15.625 3.125V16.875C15.625 17.2202 15.3452 17.5 15 17.5H5C4.65482 17.5 4.375 17.2202 4.375 16.875V3.125C4.375 2.77982 4.65482 2.5 5 2.5H15C15.3452 2.5 15.625 2.77982 15.625 3.125Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 15C10.5178 15 10.9375 14.5803 10.9375 14.0625C10.9375 13.5447 10.5178 13.125 10 13.125C9.48223 13.125 9.0625 13.5447 9.0625 14.0625C9.0625 14.5803 9.48223 15 10 15Z" fill="#596168"/>
+</svg>

package/src/Assets/Icon/ic-memory.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M16.25 8.125H18.125M16.25 11.875H18.125M1.875 8.125H3.75M1.875 11.875H3.75M11.875 16.25V18.125M8.125 16.25V18.125M11.875 1.875V3.75M8.125 1.875V3.75M7.8125 7.8125H12.1875V12.1875H7.8125V7.8125ZM4.375 3.75H15.625C15.9702 3.75 16.25 4.02982 16.25 4.375V15.625C16.25 15.9702 15.9702 16.25 15.625 16.25H4.375C4.02982 16.25 3.75 15.9702 3.75 15.625V4.375C3.75 4.02982 4.02982 3.75 4.375 3.75Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-timer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M10 11.0415L13.0936 7.94791M8.125 1.6665H11.875M16.875 11.0415C16.875 14.8385 13.797 17.9165 10 17.9165C6.20304 17.9165 3.125 14.8385 3.125 11.0415C3.125 7.24455 6.20304 4.1665 10 4.1665C13.797 4.1665 16.875 7.24455 16.875 11.0415Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Common/BreadCrumb/Types.ts

@@ -1,4 +1,3 @@
-
 export interface Breadcrumb {
   to: string
   name: string

package/src/Common/Checkbox.tsx

@@ -10,6 +10,7 @@ Valid States of Checkbox:
 5. disabled: false, checked: true,  value: INTERMIDIATE
 6. disabled: false, checked: true,  value: CHECKED
 */
+// TODO: Associate label with input element
 export class Checkbox extends Component<CheckboxProps> {
     render() {
         let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`

package/src/Common/Constants.ts

@@ -25,7 +25,8 @@ export const ROUTES = {
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
     CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
+    INFRA_CONFIG_PROFILE: 'infra-config/profile',
 }
 
 export enum KEY_VALUE {

package/src/Common/CustomInput/CustomInput.tsx

@@ -2,6 +2,7 @@ import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
 
+// TODO: label association with input
 export function CustomInput({
     name,
     value,
@@ -13,7 +14,7 @@ export function CustomInput({
     disabled = false,
     labelClassName = '',
     placeholder = '',
-    tabIndex = 1,
+    tabIndex = 0,
     dataTestid = '',
     isRequiredField = false,
     autoFocus = false,

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -94,8 +94,9 @@ export default function DraggableWrapper({
     }
 
     return (
+        // Since we are using position fixed so we need to disable click on the div so that it does not interfere with the click of other elements
         <div
-            className="dc__position-fixed"
+            className="dc__position-fixed dc__disable-click"
             style={{
                 zIndex,
             }}
@@ -106,6 +107,7 @@ export default function DraggableWrapper({
                     {...childDivProps}
                     style={{
                         zIndex,
+                        pointerEvents: 'auto',
                     }}
                 >
                     {children}

package/src/Common/DraggableWrapper/types.ts

@@ -8,10 +8,7 @@ export enum DraggablePositionVariant {
 
 export interface DraggableWrapperProps {
     children: ReactNode
-    /**
-     * Support for passing the direct value or calc functions as well
-     */
-    zIndex?: number | string
+    zIndex?: number
     positionVariant?: DraggablePositionVariant
     /**
      * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag

package/src/Common/Helper.tsx

@@ -449,13 +449,7 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
     const searchParams = new URLSearchParams()
     Object.keys(params).forEach((key) => {
         if (params[key]) {
-            if (Array.isArray(params[key])) {
-                params[key].forEach((val) => {
-                    searchParams.append(key, val)
-                })
-            } else {
-                searchParams.set(key, params[key])
-            }
+            searchParams.append(key, params[key])
         }
     })
     const queryString = searchParams.toString()

package/src/Common/Hooks/useUrlFilters/index.ts

@@ -1,2 +1,2 @@
 export { default as useUrlFilters } from './useUrlFilters'
-export type { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+export type { UseUrlFiltersProps } from './types'

package/src/Common/Hooks/useUrlFilters/types.ts

@@ -1,26 +1,6 @@
-import { SortingOrder } from '../../Constants'
-
-export interface UseUrlFiltersProps<T, K> {
+export interface UseUrlFiltersProps<T> {
     /**
      * The key on which the sorting should be applied
      */
     initialSortKey?: T
-    /**
-     * Callback function for parsing the search params
-     */
-    parseSearchParams?: (searchParams: URLSearchParams) => K
-}
-
-export type UseUrlFiltersReturnType<T, K = unknown> = K & {
-    pageSize: number
-    changePage: (pageNumber: number) => void
-    changePageSize: (pageSize: number) => void
-    searchKey: string
-    handleSearch: (searchKey: string) => void
-    offset: number
-    sortBy: T
-    sortOrder: SortingOrder
-    handleSorting: (sortBy: T) => void
-    clearFilters: () => void
-    updateSearchParams: (paramsToSerialize: K) => void
 }

package/src/Common/Hooks/useUrlFilters/useUrlFilters.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '../../Constants'
 import { DEFAULT_PAGE_NUMBER, URL_FILTER_KEYS } from './constants'
-import { UseUrlFiltersProps, UseUrlFiltersReturnType } from './types'
+import { UseUrlFiltersProps } from './types'
 
 const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_KEYS
 
@@ -23,15 +23,12 @@ const { PAGE_SIZE, PAGE_NUMBER, SEARCH_KEY, SORT_BY, SORT_ORDER } = URL_FILTER_K
  * ```
  *
  */
-const useUrlFilters = <T = string, K = unknown>({
-    initialSortKey,
-    parseSearchParams,
-}: UseUrlFiltersProps<T, K> = {}): UseUrlFiltersReturnType<T, K> => {
+const useUrlFilters = <T = string>({ initialSortKey }: UseUrlFiltersProps<T> = {}) => {
     const location = useLocation()
     const history = useHistory()
     const searchParams = new URLSearchParams(location.search)
 
-    const { pageSize, pageNumber, searchKey, sortBy, sortOrder, parsedParams } = useMemo(() => {
+    const { pageSize, pageNumber, searchKey, sortBy, sortOrder } = useMemo(() => {
         const _pageSize = searchParams.get(PAGE_SIZE)
         const _pageNumber = searchParams.get(PAGE_NUMBER)
         const _searchKey = searchParams.get(SEARCH_KEY)
@@ -42,8 +39,6 @@ const useUrlFilters = <T = string, K = unknown>({
         // Fallback to ascending order
         const sortByOrder = Object.values(SortingOrder).includes(_sortOrder) ? _sortOrder : SortingOrder.ASC
 
-        const _parsedParams = parseSearchParams ? parseSearchParams(searchParams) : ({} as K)
-
         return {
             pageSize: Number(_pageSize) || DEFAULT_BASE_PAGE_SIZE,
             pageNumber: Number(_pageNumber) || DEFAULT_PAGE_NUMBER,
@@ -51,7 +46,6 @@ const useUrlFilters = <T = string, K = unknown>({
             sortBy: sortByKey,
             // sort order should only be applied if the key is available
             sortOrder: (sortByKey ? sortByOrder : '') as SortingOrder,
-            parsedParams: _parsedParams,
         }
     }, [searchParams])
 
@@ -104,24 +98,10 @@ const useUrlFilters = <T = string, K = unknown>({
     }
 
     const clearFilters = () => {
-        history.replace({ search: '' })
-    }
-
-    const updateSearchParams = (paramsToSerialize: K) => {
-        Object.keys(paramsToSerialize).forEach((key) => {
-            if (paramsToSerialize[key]) {
-                if (Array.isArray(paramsToSerialize[key])) {
-                    searchParams.delete(key)
-                    paramsToSerialize[key].forEach((val) => {
-                        searchParams.append(key, val)
-                    })
-                } else {
-                    searchParams.set(key, paramsToSerialize[key])
-                }
-            }
+        Object.values(URL_FILTER_KEYS).forEach((key) => {
+            searchParams.delete(key)
         })
-        // Not replacing the params as it is being done by _resetPageNumber
-        _resetPageNumber()
+        history.replace({ search: searchParams.toString() })
     }
 
     return {
@@ -135,8 +115,6 @@ const useUrlFilters = <T = string, K = unknown>({
         sortOrder,
         handleSorting,
         clearFilters,
-        ...parsedParams,
-        updateSearchParams,
     }
 }
 

package/src/Common/RJSF/utils.ts

@@ -19,6 +19,7 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             ...base,
             paddingTop: 0,
             paddingBottom: 0,
+            cursor: 'pointer',
         }),
         control: (base, state) => ({
             ...base,
@@ -33,6 +34,7 @@ export const getCommonSelectStyle = (styleOverrides = {}) => {
             color: 'var(--N900)',
             backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
             padding: '10px 12px',
+            cursor: 'pointer',
         }),
         dropdownIndicator: (base, state) => ({
             ...base,

package/src/Common/SearchBar/searchBar.scss

@@ -3,7 +3,7 @@
     &:focus,
     &:focus-within {
         outline: none;
-        border: solid 1px var(--B500);
+        border: solid 1px var(--B500) !important;
     }
 
     &__input {

package/src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -12,5 +12,5 @@ export enum UserStatusDto {
 export enum UserStatus {
     active = 'active',
     inactive = 'inactive',
-    temporary = 'temporaryAccess',
+    temporary = 'temporary',
 }

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx

@@ -0,0 +1,128 @@
+import { FunctionComponent } from 'react'
+import { Progressing } from '../../../Common'
+import BuildInfraFormAction from './BuildInfraFormAction'
+import BuildInfraFormItem from './BuildInfraFormItem'
+import BuildInfraProfileDescriptionField from './BuildInfraDescriptionField'
+import BuildInfraProfileNameField from './BuildInfraProfileNameField'
+import { BUILD_INFRA_FORM_FIELDS, BUILD_INFRA_TEXT } from './constants'
+import { BuildInfraActionType, BuildInfraConfigFormProps, InheritingHeaderProps } from './types'
+
+const InheritingHeader = ({
+    defaultHeading,
+    inheritingData,
+    isInheriting,
+    isDefaultProfile,
+}: InheritingHeaderProps) => {
+    const inheritingDataString = inheritingData.map((data) => `${data.value} ${data.unit ?? ''}`).join(' - ')
+
+    if (isDefaultProfile || !isInheriting) {
+        // For typing issues
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <>{defaultHeading}</>
+    }
+
+    return (
+        <div className="flexbox dc__align-items-center dc__content-space w-100">
+            {defaultHeading}
+
+            <div className="flexbox dc__content-space w-100">
+                <span className="m-0 pt-0 pb-0 pl-4 pr-4 fs-13 lh-20 fw-4 cn-9 dc__ellipsis-right dc__word-break-all flex-grow-1">
+                    {inheritingDataString}
+                </span>
+
+                {/* TODO: Add ellipsis */}
+                <p className="m-0 cn-7 fs-13 fw-4 lh-20 dc__no-shrink">
+                    {BUILD_INFRA_TEXT.INHERITING_HEADING_DESCRIPTION}
+                </p>
+            </div>
+        </div>
+    )
+}
+
+const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps> = ({
+    profileInput,
+    profileInputErrors,
+    handleProfileInputChange,
+    isDefaultProfile,
+    unitsMap,
+    configurationContainerLabel,
+}) => {
+    const currentConfigurations = profileInput?.configurations
+
+    // will get the desired configuration from the currentConfigurations and then check if it is active or not
+    const isInheritingProfileValues = (actions: BuildInfraActionType[]) =>
+        actions.some((action) => !currentConfigurations[action.actionType].active)
+
+    // Had to show loader for an instance due to batching of state updates not working as expected :/
+    if (!currentConfigurations) {
+        return <Progressing pageLoader />
+    }
+
+    return (
+        <div className="flexbox-col dc__mxw-920 dc__gap-16">
+            {!isDefaultProfile && (
+                <div className="flexbox-col dc__gap-12">
+                    <BuildInfraProfileNameField
+                        handleProfileInputChange={handleProfileInputChange}
+                        currentValue={profileInput.name}
+                        error={profileInputErrors.name}
+                    />
+
+                    <BuildInfraProfileDescriptionField
+                        handleProfileInputChange={handleProfileInputChange}
+                        currentValue={profileInput.description}
+                        error={profileInputErrors.description}
+                    />
+                </div>
+            )}
+
+            <div className="flexbox-col dc__gap-12">
+                {configurationContainerLabel}
+
+                <div className="w-100 flexbox-col dc__gap-16 br-4 dc__border-n1 p-16">
+                    {BUILD_INFRA_FORM_FIELDS.map((field, index) => (
+                        <BuildInfraFormItem
+                            key={field.locator}
+                            marker={field.marker}
+                            heading={
+                                <InheritingHeader
+                                    defaultHeading={field.heading}
+                                    inheritingData={field.actions.map(
+                                        (action) => currentConfigurations[action.actionType],
+                                    )}
+                                    isInheriting={isInheritingProfileValues(field.actions)}
+                                    isDefaultProfile={isDefaultProfile}
+                                />
+                            }
+                            showDivider={index !== BUILD_INFRA_FORM_FIELDS.length - 1}
+                            isInheriting={isInheritingProfileValues(field.actions)}
+                            handleProfileInputChange={handleProfileInputChange}
+                            locator={field.locator}
+                            isDefaultProfile={isDefaultProfile}
+                        >
+                            <div className="w-50 flexbox dc__gap-12 w-100 dc__align-start">
+                                {field.actions.map((action) => (
+                                    <BuildInfraFormAction
+                                        key={action.actionType}
+                                        actionType={action.actionType}
+                                        label={action.label}
+                                        placeholder={action.placeholder}
+                                        error={profileInputErrors[action.actionType]}
+                                        // Assumption is for default profiles all input fields are required
+                                        isRequired
+                                        profileUnitsMap={unitsMap[action.actionType]}
+                                        handleProfileInputChange={handleProfileInputChange}
+                                        currentUnitName={currentConfigurations[action.actionType].unit}
+                                        currentValue={currentConfigurations[action.actionType].value}
+                                    />
+                                ))}
+                            </div>
+                        </BuildInfraFormItem>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default BuildInfraConfigForm

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx

@@ -0,0 +1,44 @@
+import { FormEvent, FunctionComponent } from 'react'
+import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
+import { BuildInfraInputFieldComponentProps, BuildInfraMetaConfigTypes } from './types'
+import { BUILD_INFRA_TEXT } from './constants'
+
+const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
+    handleProfileInputChange,
+    currentValue,
+    error,
+}) => {
+    const handleChange = (e: FormEvent<HTMLTextAreaElement>) => {
+        handleProfileInputChange({
+            action: BuildInfraMetaConfigTypes.DESCRIPTION,
+            data: { value: e.currentTarget.value },
+        })
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-4 w-100 dc__align-start">
+            <label htmlFor="build-infra-profile-description" className="m-0 fs-13 fw-4 lh-20 cn-7">
+                {BUILD_INFRA_TEXT.DESCRIPTION_LABEL}
+            </label>
+
+            <textarea
+                data-testid="build-infra-profile-description"
+                name="profile-description"
+                className="form__textarea mxh-140 dc__hover-border-n300"
+                id="build-infra-profile-description"
+                placeholder={BUILD_INFRA_TEXT.DESCRIPTION_PLACEHOLDER}
+                value={currentValue}
+                onChange={handleChange}
+            />
+
+            {error && (
+                <div className="form__error">
+                    <ErrorIcon className="form__icon form__icon--error" />
+                    {error}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default BuildInfraProfileDescriptionField

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx

@@ -0,0 +1,106 @@
+import { FormEvent, FunctionComponent, useMemo } from 'react'
+import ReactSelect from 'react-select'
+import { BuildInfraFormActionProps } from './types'
+import { OptionType } from '../../../Common'
+import { unitSelectorStyles } from './utils'
+import { BUILD_INFRA_INPUT_CONSTRAINTS } from './constants'
+import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
+
+/**
+ * In case need arise for variants break this CustomInput and Select as a separate component
+ */
+const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
+    actionType,
+    label,
+    placeholder,
+    error,
+    isRequired,
+    profileUnitsMap,
+    handleProfileInputChange,
+    currentUnitName,
+    currentValue,
+}) => {
+    const handleUnitChange = (selectedUnit: OptionType) => {
+        const data = {
+            unit: selectedUnit.label,
+            value: currentValue,
+        }
+        handleProfileInputChange({ action: actionType, data })
+    }
+
+    const handleInputChange = (e: FormEvent<HTMLInputElement>) => {
+        const data = {
+            unit: currentUnitName,
+            value: e.currentTarget.value,
+        }
+        handleProfileInputChange({ action: actionType, data })
+    }
+
+    const unitOptions = useMemo(() => {
+        const units =
+            Object.values(profileUnitsMap)?.map((unit) => ({
+                label: unit.name,
+                value: String(unit.conversionFactor),
+            })) ?? []
+        return units.sort((a, b) => Number(a.value) - Number(b.value))
+    }, [profileUnitsMap])
+
+    const currentUnit = useMemo(
+        () => unitOptions.find((unit) => unit.label === currentUnitName),
+        [unitOptions, currentUnitName],
+    )
+
+    return (
+        <div className="flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start">
+            <label
+                htmlFor={`${actionType}-input`}
+                className={`fs-13 fw-4 lh-20 cn-7 ${isRequired ? 'dc__required-field' : ''}`}
+            >
+                {label}
+            </label>
+            <div className="w-100 flexbox dc__align-items-center">
+                <div className="flex-grow-1">
+                    <input
+                        data-testid={`${actionType}-input-field`}
+                        name={actionType}
+                        type="number"
+                        step={BUILD_INFRA_INPUT_CONSTRAINTS.STEP}
+                        min={BUILD_INFRA_INPUT_CONSTRAINTS.MIN}
+                        className="form__input dc__no-right-border dc__no-right-radius"
+                        placeholder={placeholder}
+                        value={currentValue}
+                        onChange={handleInputChange}
+                        required={isRequired}
+                        autoComplete="off"
+                        id={`${actionType}-input`}
+                    />
+                </div>
+
+                {profileUnitsMap && (
+                    <ReactSelect
+                        name={`${actionType}-unit`}
+                        className="bcn-0 dc__mxw-120"
+                        options={unitOptions}
+                        value={currentUnit}
+                        onChange={handleUnitChange}
+                        isSearchable={false}
+                        components={{
+                            IndicatorSeparator: null,
+                            ClearIndicator: null,
+                        }}
+                        styles={unitSelectorStyles()}
+                    />
+                )}
+            </div>
+
+            {error && (
+                <div className="form__error">
+                    <ErrorIcon className="form__icon form__icon--error" />
+                    {error}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default BuildInfraFormAction

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx

@@ -0,0 +1,55 @@
+import { FormEvent, FunctionComponent } from 'react'
+import { BuildInfraFormItemProps, BuildInfraInheritActions } from './types'
+import { CHECKBOX_VALUE, Checkbox } from '../../../Common'
+
+const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps> = ({
+    heading,
+    marker: Marker,
+    children,
+    isInheriting,
+    showDivider,
+    handleProfileInputChange,
+    locator,
+    isDefaultProfile,
+}) => {
+    const handleActivationChange = (e: FormEvent<HTMLInputElement>) => {
+        const { checked } = e.currentTarget
+        const action = (checked ? `activate_${locator}` : `de_activate_${locator}`) as BuildInfraInheritActions
+        handleProfileInputChange({ action })
+    }
+
+    const renderMarker = () => {
+        if (isDefaultProfile) {
+            return <Marker className="icon-dim-20 dc__no-shrink" />
+        }
+
+        return (
+            <Checkbox
+                onChange={handleActivationChange}
+                isChecked={!isInheriting}
+                value={CHECKBOX_VALUE.CHECKED}
+                dataTestId={`${locator}_marker`}
+            />
+        )
+    }
+
+    // If in configuration active is false, means it is inheriting values from other profile
+    return (
+        <>
+            <div className="flexbox-col dc__gap-8 w-100">
+                <div className="flexbox dc__gap-12 dc__align-start w-100">
+                    {renderMarker()}
+
+                    <div className="flexbox-col dc__gap-8 w-100">
+                        {heading}
+                        {!isInheriting && children}
+                    </div>
+                </div>
+            </div>
+
+            {showDivider && <div className="w-100 dc__border-bottom-n1" />}
+        </>
+    )
+}
+
+export default BuildInfraFormItem

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx

@@ -0,0 +1,32 @@
+import { FormEvent, FunctionComponent } from 'react'
+import { BuildInfraMetaConfigTypes, BuildInfraInputFieldComponentProps } from './types'
+import { CustomInput } from '../../../Common'
+import { BUILD_INFRA_TEXT } from './constants'
+
+const BuildInfraProfileNameField: FunctionComponent<BuildInfraInputFieldComponentProps> = ({
+    handleProfileInputChange,
+    currentValue,
+    error,
+}) => {
+    const handleChange = (e: FormEvent<HTMLInputElement>) => {
+        handleProfileInputChange({ action: BuildInfraMetaConfigTypes.NAME, data: { value: e.currentTarget.value } })
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-4 w-100 dc__align-start">
+            <CustomInput
+                name="profile-name"
+                label={BUILD_INFRA_TEXT.PROFILE_LABEL}
+                labelClassName="m-0 dc__required-field fs-13 fw-4 lh-20 cn-7"
+                placeholder={BUILD_INFRA_TEXT.PROFILE_PLACEHOLDER}
+                value={currentValue}
+                onChange={handleChange}
+                error={error}
+                required
+                inputWrapClassName="w-100"
+            />
+        </div>
+    )
+}
+
+export default BuildInfraProfileNameField