fix for custom tag

Author: shivani170

src/components/charts/AdvancedConfig.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { showError, Progressing, VisibleModal, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, VisibleModal, useAsync, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
 import { Select, mapByKey, useKeyDown, Info, Pencil } from '../common'
 import CodeEditor from '../CodeEditor/CodeEditor'
 import { getEnvironmentListMin } from '../../services/service'
@@ -11,6 +11,7 @@ import { ReactComponent as LockIcon } from '../../assets/icons/ic-locked.svg'
 import { ReactComponent as WarningIcon } from '../../assets/icons/ic-alert-triangle.svg';
 import { useHistory } from 'react-router'
 import { getSavedValuesListURL } from './charts.helper'
+import { renderAdditionalErrorInfo } from './charts.util'
 
 interface AdvancedConfig extends AdvancedConfigHelpers {
     chart: ChartGroupEntry;
@@ -141,14 +142,18 @@ const AdvancedConfig: React.FC<AdvancedConfig> = ({ chart, index, fetchChartValu
             <div className="advanced-config flex">
                 <form action="" className="advanced-config__form">
                     <h1 className="form__title form__title--mb-24" data-testid="advanced-option-heading">{chartName}</h1>
-                    {handleNameChange && <div className="flex column left top mb-16">
-                        <label htmlFor="" className="form__label" data-testid="advanced-option-app-name">App name*</label>
-                        <input type="text" autoComplete="off" className={`form__input ${appName?.error ? 'form__input--error' : ''}`} value={appName.value} onChange={e => handleNameChange(index, e.target.value)} data-testid="advanced-option-app-name-box"/>
-                        {appName?.error &&
-                            <span className="form__error flex left">
-                                <WarningIcon className="mr-5 icon-dim-16" />{appName?.error || ""}
-                                {appName.suggestedName && <span>. Suggested name: <span className="anchor pointer" onClick={e => handleNameChange(index, appName.suggestedName)}>{appName.suggestedName}</span></span>}
-                            </span>}
+                    {handleNameChange && <div className="mb-16">
+                          <CustomInput
+                                name="appName"
+                                label="App name"
+                                rootClassName={`${appName?.error ? 'form__input--error' : ''}`}
+                                value={appName.value}
+                                onChange={(e) => handleNameChange(index, e.target.value)}
+                                data-testid="advanced-option-app-name-box"
+                                isRequiredField={true}
+                                error={appName?.error}
+                                additionalErrorInfo={appName?.error && appName?.suggestedName && renderAdditionalErrorInfo(handleNameChange, appName.suggestedName, index)}
+                            />
                     </div>}
                     {handleEnvironmentChange && <div className="flex top mb-16">
                         <div className="flex column half left top">

src/components/charts/charts.util.tsx

@@ -99,4 +99,18 @@ export const QueryParams = {
 export const PaginationParams = {
     pageOffset: 0,
     pageSize: 20
-}
+}
+
+export const renderAdditionalErrorInfo = (handleNameChange, suggestedName, index) => {
+    return (
+        suggestedName && (
+            <>
+                . Suggested Name:
+                <span className="anchor pointer" onClick={(e) => handleNameChange(index, suggestedName)}>
+                    {suggestedName}
+                    {console.log(suggestedName)}
+                </span>
+            </>
+        )
+    )
+}

src/components/charts/modal/ChartGroupBasicDeploy.tsx

@@ -3,12 +3,11 @@ import { CustomInput, DialogForm, DialogFormSubmit, showError } from '@devtron-l
 import { ProjectType, ChartGroupEntry, EnvironmentType } from '../charts.types';
 import { ReactComponent as Edit } from '../../../assets/icons/ic-edit.svg';
 import { ReactComponent as Error } from '../../../assets/icons/ic-warning.svg';
-import { styles, smallMenuList, menuList, DropdownIndicator } from '../charts.util';
+import { styles, smallMenuList, menuList, DropdownIndicator, renderAdditionalErrorInfo } from '../charts.util';
 import { Option } from '../../v2/common/ReactSelect.utils';
 import placeHolder from '../../../assets/icons/ic-plc-chart.svg';
 import ReactSelect from 'react-select';
 import { getEnvironmentListMin } from '../../../services/service';
-import { render } from 'react-dom';
 
 interface ChartGroupBasicDeployProps {
     projects: ProjectType[];
@@ -197,19 +196,6 @@ function ApplicationNameList({ charts, handleNameChange, showAppNames }) {
         listClassNames = `${listClassNames} show`
     }
 
-    const renderAdditionalErrorInfo = (suggestedName: string, index: number) => {
-       if (suggestedName) {
-           return (
-               <>
-                   . Suggested Name:
-                   <span className="anchor pointer" onClick={(e) => handleNameChange(index, suggestedName)}>
-                       {suggestedName}
-                   </span>
-               </>
-           )
-       }
-    }
-
     return (
         <div
             className={listClassNames}>
@@ -235,7 +221,8 @@ function ApplicationNameList({ charts, handleNameChange, showAppNames }) {
                                     handleNameChange(index, event.target.value)
                                 }}
                                 error={chart.name.error}
-                                additionalErrorInfo={renderAdditionalErrorInfo(chart.name.suggestedName, index)}
+                                isRequiredField={true}
+                                additionalErrorInfo={renderAdditionalErrorInfo(handleNameChange, chart.name.suggestedNam, index)}
                             />
                         </div>
                     </div>