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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.58-beta-3",
+    "version": "0.0.58-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 {
@@ -242,4 +243,13 @@ export const RepositoryAction = {
     CHART_PUSH: "CHART_PUSH"
 }
 
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    DEPLOYMENT = 'DEPLOYMENT',
+}
 export const MAX_Z_INDEX = 2147483647
+
+export const SELECTED_APPROVAL_TAB_STATE = {
+    APPROVAL: 'approval',
+    PENDING: 'pending',
+}

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,
@@ -28,9 +29,9 @@ export function CustomInput({
     defaultValue,
     onKeyDown,
     required,
-    additionalErrorInfo
+    additionalErrorInfo,
+    inputWrapClassName = '',
 }: CustomInputProps) {
-
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -55,7 +56,7 @@ export function CustomInput({
             <div className="form__error" key={error}>
                 <ErrorIcon className="form__icon form__icon--error" />
                 {error}
-                {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
+                {error && typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
             </div>
         )
     }
@@ -92,7 +93,7 @@ export function CustomInput({
     }
 
     return (
-        <div className="flex column left top">
+        <div className={`flex column left top ${inputWrapClassName}`}>
            {renderInputLabel()}
             <input
                 data-testid={dataTestid}

package/src/Common/CustomInput/Types.ts

@@ -27,4 +27,5 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
+    inputWrapClassName?: string
 }

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/EmptyState/GenericEmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -19,24 +19,56 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = ''
+    contentClassName = '',
+    imageStyles = {},
 }: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
+    const isRowLayout = layout === 'row'
+
+    const getImageSize = () => {
+        switch (imageType) {
+            case ImageType.Large:
+                return { width: '250px', height: '200px' }
+            default:
+                return { width: '200px', height: '160px' }
+        }
+    }
+
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
+                classname ? classname : ''
+            }`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+        >
+            {!SvgImage ? (
+                !noImage && (
+                    <img
+                        className={imageClassName ? imageClassName : ''}
+                        src={image || AppNotDeployed}
+                        style={{
+                            ...imageStyles,
+                            width: `${getImageSize().width}`,
+                            height: `${getImageSize().height}`,
+                        }}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage
+                    style={{
+                        ...imageStyles,
+                        width: `${getImageSize().width}`,
+                        height: `${getImageSize().height}`,
+                    }}
+                />
+            )}
+            <div
+                className={`flex column dc__gap-10 dc__mxw-300 ${
+                    isRowLayout ? 'dc__align-start' : ''
+                } ${contentClassName}`}
+            >
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

package/src/Common/Helper.tsx

@@ -499,27 +499,18 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-
-function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
-    // It recursively removes empty object keys and empty array keys
+function removeEmptyObjectKeysAndNullValues(obj) {
+    // It recursively removes empty object keys and array values that are null
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
+            if (obj[key].length === 0) continue
+            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length !== 0) {
-                obj[key].forEach((element, index) => {
-                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
-                        obj[key].splice(index, 1)
-                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
-                })
-            }
-            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
-                delete obj[key]
+            if (obj[key].length === 0) {
+                delete obj[key] // Delete the key if the array is empty
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (
-                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
-                Object.keys(originaljsonCopy[key]).length !== 0
-            ) {
+            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -529,25 +520,20 @@ function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
-    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
-    
+export function getUnlockedJSON(json, jsonPathArray) {
     const jsonCopy = JSON.parse(JSON.stringify(json))
-    const originaljsonCopy = JSON.parse(JSON.stringify(json))
-    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        //reversing patches to handle correct array index deletion
-        pathsToRemove.reverse()
-        return pathsToRemove.map((result) => {
-            //storing removed patches to have functionality of undo
-            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
-            return { op: 'remove', path: result.pointer }
-        })
+        return pathsToRemove.map((result) =>
+            Array.isArray(result.parent)
+                ? { op: 'replace', path: result.pointer, value: null }
+                : { op: 'remove', path: result.pointer },
+        )
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
-    return { newDocument, removedPatches: removedPatches.reverse() }
+
+    removeEmptyObjectKeysAndNullValues(newDocument)
+    return newDocument
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {

package/src/Common/RJSF/utils.ts

@@ -13,12 +13,14 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
     }
 }
 
+// NOTE: If you are changing this please make sure BuildInfra selects are also working fine
 export const getCommonSelectStyle = (styleOverrides = {}) => {
     return {
         menuList: (base) => ({
             ...base,
             paddingTop: 0,
             paddingBottom: 0,
+            cursor: 'pointer',
         }),
         control: (base, state) => ({
             ...base,
@@ -33,6 +35,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.component.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -55,9 +55,31 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
+    // In most case would reset the state by doing history.push('/')
+    useEffect(() => {
+        inputRef.current.value = initialSearchText
+    }, [initialSearchText])
+
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
+    const clearSearch = () => {
+        inputRef.current.value = ''
+        _applySearch('')
+        setShowClearButton(false)
+    }
+
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
         setShowClearButton(!!value)
+
+        if (!value) {
+            clearSearch()
+            return
+        }
+
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -65,11 +87,6 @@ const SearchBar = ({
         }
     }
 
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
@@ -80,14 +97,9 @@ const SearchBar = ({
         }
     }
 
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-    }
-
     return (
         <div className={containerClassName}>
-            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+            <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
                 <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
                 <input
                     placeholder="Search"
@@ -95,13 +107,14 @@ const SearchBar = ({
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
                 />
+                {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (
                     <button
                         className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"

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/Common/Types.ts

@@ -51,11 +51,12 @@ export interface Teams {
 export enum CHECKBOX_VALUE {
     CHECKED = 'CHECKED',
     INTERMEDIATE = 'INTERMEDIATE',
+    BULK_CHECKED = 'BULK_CHECKED',
 }
 export interface CheckboxProps {
     onChange: (event) => void
     isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
+    value: 'CHECKED' | 'INTERMEDIATE' | 'BULK_CHECKED'
     disabled?: boolean
     tabIndex?: number
     rootClassName?: string
@@ -107,6 +108,7 @@ export interface GenericEmptyStateType {
     imageClassName?: string
     children?: ReactNode
     noImage?: boolean
+    imageStyles?: CSSProperties
     /**
      * @default 'column'
      */

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

@@ -0,0 +1,121 @@
+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}
+
+            <p className="m-0 flexbox pt-0 pb-0 pl-4 pr-4 fs-13 lh-20 fw-4 cn-9">{inheritingDataString}</p>
+
+            <p className="m-0 cn-7 fs-13 fw-4 lh-20">{BUILD_INFRA_TEXT.INHERITING_HEADING_DESCRIPTION}</p>
+        </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={isDefaultProfile}
+                                        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