Merge pull request #532 from devtron-labs/feat/text-area

feat: add and replace text area

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.5.12",
+    "version": "1.5.14",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -106,6 +106,7 @@ export const ResizableTagTextArea = ({
         onFocus?.(event)
     }
 
+    // Textarea component can't be used here
     return (
         <textarea
             {...restProps}

src/Assets/Icon/ic-warning.svg

@@ -29,7 +29,7 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageT
 import { showError, stopPropagation } from './Helper'
 import { setImageTags } from './Common.service'
 import { Progressing } from './Progressing'
-import { InfoIconTippy, ToastManager, ToastVariantType } from '../Shared'
+import { InfoIconTippy, Textarea, ToastManager, ToastVariantType } from '../Shared'
 
 export const ImageTagsContainer = ({
     // Setting it to zero in case of external pipeline
@@ -401,24 +401,16 @@ export const ImageTagsContainer = ({
                             Tags cannot be edited/removed later
                         </div>
                     )}
-                    <div className="cn-7 mt-12">Comment</div>
-                    <div
-                        className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12"
-                        data-testid="add-image-comment-text-area"
-                    >
-                        <textarea
+                    <div className="mt-12">
+                        <Textarea
+                            label="Comment"
                             value={newDescription}
                             onChange={handleDescriptionChange}
-                            className="flex left flex-wrap dc__gap-8 dc__description-textarea fs-13"
-                            style={{ height: '90px !important' }}
+                            placeholder="Enter comment"
+                            name="add-image-comment-text-area"
+                            error={descriptionValidationMessage}
                         />
                     </div>
-                    {descriptionValidationMessage !== '' && (
-                        <div className="flex left">
-                            <Error className="form__icon form__icon--error" />
-                            <div className="form__error">{descriptionValidationMessage}</div>
-                        </div>
-                    )}
                     <div className="w-100 flex right mt-12">
                         <button
                             className="cta flex cancel h-32 lh-32-imp"

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -800,20 +800,6 @@ export interface UseSearchString {
     }
 }
 
-export interface ResizableTextareaProps {
-    minHeight?: number
-    maxHeight?: number
-    value?: string
-    onChange?: (e) => void
-    onBlur?: (e) => void
-    onFocus?: (e) => void
-    className?: string
-    placeholder?: string
-    disabled?: boolean
-    name?: string
-    dataTestId?: string
-}
-
 export interface AsyncState<T> {
     loading: boolean
     result: T

src/Common/ImageTags.tsx

@@ -50,7 +50,6 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
-export * from './ResizableTextarea'
 export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
 // export { default as CodeEditor } from './CodeEditor/CodeEditor'

src/Common/ResizableTextarea.tsx

@@ -15,7 +15,7 @@
  */
 
 import { FormEvent, FunctionComponent } from 'react'
-import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
+import { Textarea } from '@Shared/Components'
 import { BuildInfraMetaConfigTypes, BuildInfraProfileMetaFieldProps } from './types'
 import { BUILD_INFRA_TEXT } from './constants'
 
@@ -39,28 +39,14 @@ const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraProfileMeta
     }
 
     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>
+        <Textarea
+            label={BUILD_INFRA_TEXT.DESCRIPTION_LABEL}
+            name="build-infra-profile-description"
+            placeholder={BUILD_INFRA_TEXT.DESCRIPTION_PLACEHOLDER}
+            value={currentValue}
+            onChange={handleChange}
+            error={error}
+        />
     )
 }
 

src/Common/Types.ts

@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { ComponentSizeType } from '@Shared/constants'
+import { COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP, ComponentSizeType } from '@Shared/constants'
 import { ProgressingProps } from '@Common/Types'
 import { ButtonProps } from './types'
 
 export const BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {
-    [ComponentSizeType.xxs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6 mw-48',
-    [ComponentSizeType.xs]: 'px-9 py-1 fs-12 lh-20 fw-6 dc__gap-6 mw-48',
-    [ComponentSizeType.small]: 'px-9 py-3 fs-12 lh-20 fw-6 dc__gap-8 mw-48',
-    [ComponentSizeType.medium]: 'px-11 py-5 fs-13 lh-20 fw-6 dc__gap-8 mw-48',
-    [ComponentSizeType.large]: 'px-13 py-7 fs-13 lh-20 fw-6 dc__gap-8 mw-64',
-    [ComponentSizeType.xl]: 'px-15 py-9 fs-14 lh-20 fw-6 dc__gap-12 mw-64',
+    [ComponentSizeType.xxs]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xxs]} px-9 fw-6 dc__gap-6 mw-48`,
+    [ComponentSizeType.xs]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xs]} px-9 fw-6 dc__gap-6 mw-48`,
+    [ComponentSizeType.small]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.small]} px-9 fw-6 dc__gap-8 mw-48`,
+    [ComponentSizeType.medium]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.medium]} px-11 fw-6 dc__gap-8 mw-48`,
+    [ComponentSizeType.large]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.large]} px-13 fw-6 dc__gap-8 mw-64`,
+    [ComponentSizeType.xl]: `${COMPONENT_SIZE_TYPE_TO_FONT_AND_BLOCK_PADDING_MAP[ComponentSizeType.xl]} px-15 fw-6 dc__gap-12 mw-64`,
 } as const
 
 export const ICON_BUTTON_SIZE_TO_CLASS_NAME_MAP: Record<ButtonProps['size'], string> = {