@devtron-labs/devtron-fe-common-lib 0.0.17-beta-9 → 0.0.17-beta-11

package/dist/Common/Common.service.d.ts

@@ -1,4 +1,4 @@
-import { TeamList, ResponseType, DeploymentNodeType } from './Types';
+import { TeamList, ResponseType } from './Types';
 export declare const getTeamListMin: () => Promise<TeamList>;
 interface UserRole extends ResponseType {
     result?: {
@@ -8,6 +8,4 @@ interface UserRole extends ResponseType {
 }
 export declare function getUserRole(appName?: string): Promise<UserRole>;
 export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
-export declare const getCDMaterials: (cdMaterialId: any, stageType: DeploymentNodeType, abortSignal: AbortSignal, isApprovalNode?: boolean, imageTag?: string) => Promise<any>;
-export declare function extractImage(image: string): string;
 export {};

package/dist/Common/Helper.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { UseSearchString } from './Types';
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;
@@ -41,5 +40,4 @@ export declare function CustomInput({ name, value, error, onChange, onBlur, onFo
     dataTestid?: string;
 }): JSX.Element;
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
-export declare function useSearchString(): UseSearchString;
 export {};

package/dist/Common/ResizableTextarea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ResizableTextareaProps } from './Types';
+export declare const ResizableTextarea: React.FC<ResizableTextareaProps>;

package/dist/Common/Types.d.ts

@@ -332,10 +332,19 @@ export interface RegistryTypeDetailType {
     id: InputDetailType;
     password: InputDetailType;
 }
-export interface UseSearchString {
-    queryParams: URLSearchParams;
-    searchParams: {
-        [key: string]: string;
-    };
+export interface ResizableTextareaProps {
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    className?: string;
+    placeholder?: string;
+    lineHeight?: number;
+    padding?: number;
+    disabled?: boolean;
+    name?: string;
+    dataTestId?: string;
 }
 export {};

package/dist/Common/index.d.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types';
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent';
 export * from './ImageTags';
 export * from './ImageTags.Types';
+export * from './ResizableTextarea';

package/dist/index.js

@@ -2162,6 +2162,7 @@ var AppNotDeployed = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYA
 
 function GenericEmptyState(_a) {
     var title = _a.title, image = _a.image, subTitle = _a.subTitle, isButtonAvailable = _a.isButtonAvailable, classname = _a.classname, styles = _a.styles, heightToDeduct = _a.heightToDeduct, imageType = _a.imageType, renderButton = _a.renderButton, imageClassName = _a.imageClassName, children = _a.children, SvgImage = _a.SvgImage, noImage = _a.noImage;
+    console.log(image);
     return (jsxRuntime.jsxs("div", __assign({ className: "flex column empty-state ".concat(classname ? classname : ''), style: styles, "data-testid": "generic-empty-state" }, (heightToDeduct >= 0 && { style: __assign(__assign({}, styles), { height: "calc(100vh - ".concat(heightToDeduct, "px)") }) }), { children: [!SvgImage ? !noImage && jsxRuntime.jsx("img", { className: imageClassName ? imageClassName : '', src: image || AppNotDeployed, width: imageType === exports.ImageType.Medium ? '200' : '250', height: imageType === exports.ImageType.Medium ? '160' : '200', alt: "empty-state" }) : jsxRuntime.jsx(SvgImage, {}), jsxRuntime.jsx("h4", __assign({ className: "title fw-6 cn-9 mb-8" }, { children: title })), subTitle && jsxRuntime.jsx("p", __assign({ className: "subtitle" }, { children: subTitle })), isButtonAvailable && renderButton(), children] })));
 }
 
@@ -10078,22 +10079,6 @@ function handleUTCTime(ts, isRelativeTime) {
         console.error("Error Parsing Date:", ts);
     }
     return timestamp;
-}
-function useSearchString() {
-    var location = reactRouterDom.useLocation();
-    var queryParams = React.useMemo(function () {
-        var queryParams = new URLSearchParams(location.search);
-        return queryParams;
-    }, [location]);
-    // const searchParams={}
-    // for (let [key, value] of queryParams.entries()){
-    //     searchParams[key]=value
-    // }
-    var searchParams = Array.from(queryParams.entries()).reduce(function (agg, curr, idx) {
-        agg[curr[0]] = curr[1];
-        return agg;
-    }, {});
-    return { queryParams: queryParams, searchParams: searchParams };
 }
 
 function Progressing(_a) {
@@ -22539,82 +22524,11 @@ var getTeamListMin = function () {
         };
     });
 };
-var stageMap = {
-    PRECD: 'PRE',
-    CD: 'DEPLOY',
-    POSTCD: 'POST',
-    APPROVAL: 'APPROVAL',
-};
 function getUserRole(appName) {
     return get("".concat(ROUTES.USER_CHECK_ROLE).concat(appName ? "?appName=".concat(appName) : ''));
 }
 function setImageTags(request, pipelineId, artifactId) {
     return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
-}
-var getCDMaterials = function (cdMaterialId, stageType, abortSignal, isApprovalNode, imageTag) {
-    var URL = (!imageTag) ? "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType]) : "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType], "&search=").concat(imageTag);
-    return get(URL, {
-        signal: abortSignal,
-    }).then(function (response) {
-        var _a;
-        var artifacts = (_a = response.result.ci_artifacts) !== null && _a !== void 0 ? _a : [];
-        if (!response.result) {
-            return {
-                materials: [],
-            };
-        }
-        else {
-            var materials = artifacts.map(function (material, index) {
-                var artifactStatusValue = '';
-                return {
-                    index: index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map(function (mat) {
-                            return {
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                type: material.ciConfigureSourceType || '',
-                            };
-                        })
-                        : [],
-                };
-            });
-            return {
-                materials: materials
-            };
-        }
-    });
-};
-function extractImage(image) {
-    return image ? image.split(':').pop() : '';
 }
 
 /*
@@ -23216,7 +23130,7 @@ var ImageTagsContainer = function (_a) {
         }
         handleSave(tagsToBeCreated);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input fs-13", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
+    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
                                 top: '50%',
                                 fontFamily: 'monospace',
                                 right: '8px',
@@ -23227,7 +23141,7 @@ var ImageTagsContainer = function (_a) {
                         }, onHardDeleteClick: function (e) {
                             stopPropagation(e);
                             handleTagHardDelete(index);
-                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea fs-13", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
+                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 handleCancel();
                             } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
@@ -23271,6 +23185,41 @@ var AddImageButton = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "add-tag-button flex pt-12 pr-12", "data-testid": "add-tags-button", onClick: handleClick }, { children: jsxRuntime.jsxs("div", __assign({ className: "lh-16 flex" }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-16 cn-6" }), jsxRuntime.jsx("span", __assign({ className: "cn-7" }, { children: "Add tags/comment" }))] })) })));
 };
 
+var ResizableTextarea = function (_a) {
+    var minHeight = _a.minHeight, maxHeight = _a.maxHeight, value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? null : _b, _c = _a.onBlur, onBlur = _c === void 0 ? null : _c, _d = _a.onFocus, onFocus = _d === void 0 ? null : _d, _e = _a.className, className = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? 'Enter your text here..' : _f, _g = _a.lineHeight, lineHeight = _g === void 0 ? 14 : _g, _h = _a.padding, padding = _h === void 0 ? 12 : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, dataTestId = _a.dataTestId, props = __rest(_a, ["minHeight", "maxHeight", "value", "onChange", "onBlur", "onFocus", "className", "placeholder", "lineHeight", "padding", "disabled", "dataTestId"]);
+    var _k = __read(React.useState(''), 2), text = _k[0], setText = _k[1];
+    var _textRef = React.useRef(null);
+    React.useEffect(function () {
+        setText(value);
+    }, [value]);
+    function handleChange(e) {
+        e.persist();
+        setText(e.target.value);
+        if (typeof onChange === 'function')
+            onChange(e);
+    }
+    function handleBlur(e) {
+        if (typeof onBlur === 'function')
+            onBlur(e);
+    }
+    function handleFocus(e) {
+        if (typeof onFocus === 'function')
+            onFocus(e);
+    }
+    useThrottledEffect(function () {
+        _textRef.current.style.height = 'auto';
+        var nextHeight = _textRef.current.scrollHeight;
+        if (minHeight && nextHeight < minHeight) {
+            nextHeight = minHeight;
+        }
+        if (maxHeight && nextHeight > maxHeight) {
+            nextHeight = maxHeight;
+        }
+        _textRef.current.style.height = nextHeight + 2 + 'px';
+    }, 500, [text]);
+    return (jsxRuntime.jsx("textarea", __assign({ "data-testid": dataTestId, ref: function (el) { return (_textRef.current = el); }, value: text, placeholder: placeholder, className: "dc__resizable-textarea ".concat(className), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, style: { lineHeight: "".concat(lineHeight, "px"), padding: "".concat(padding, "px") }, spellCheck: false, disabled: disabled }, props)));
+};
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23317,6 +23266,7 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.Reload = Reload;
 exports.RequestTimeout = RequestTimeout;
 exports.ResizableTagTextArea = ResizableTagTextArea;
+exports.ResizableTextarea = ResizableTextarea;
 exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
@@ -23336,10 +23286,8 @@ exports.TriggerTypeMap = TriggerTypeMap;
 exports.URLS = URLS;
 exports.VisibleModal = VisibleModal;
 exports.VisibleModal2 = VisibleModal2;
-exports.extractImage = extractImage;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
-exports.getCDMaterials = getCDMaterials;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;
@@ -23361,5 +23309,4 @@ exports.trash = trash;
 exports.useBreadcrumb = useBreadcrumb;
 exports.useEffectAfterMount = useEffectAfterMount;
 exports.useForm = useForm;
-exports.useSearchString = useSearchString;
 exports.useThrottledEffect = useThrottledEffect;

package/package.json

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

package/src/Common/Common.service.ts

@@ -1,8 +1,7 @@
-import moment from 'moment';
 import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import { TeamList ,ResponseType, DeploymentNodeType } from './Types';
+import { TeamList ,ResponseType } from './Types';
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -30,89 +29,10 @@ interface UserRole extends ResponseType {
     }
 }
 
-let stageMap = {
-    PRECD: 'PRE',
-    CD: 'DEPLOY',
-    POSTCD: 'POST',
-    APPROVAL: 'APPROVAL',
-}
-
 export function getUserRole(appName?: string): Promise<UserRole> {
     return get(`${ROUTES.USER_CHECK_ROLE}${appName ? `?appName=${appName}` : ''}`)
 }
 
 export function setImageTags(request, pipelineId: number, artifactId: number){
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
-}
-
-export const getCDMaterials = (
-    cdMaterialId,
-    stageType: DeploymentNodeType,
-    abortSignal: AbortSignal,
-    isApprovalNode?: boolean,
-    imageTag?: string): Promise<any> => {
-    const URL = (!imageTag) ? `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}` : `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}&search=${imageTag}`
-
-    return get(URL, {
-        signal: abortSignal,
-    }).then((response) => {
-        let artifacts = response.result.ci_artifacts ?? []
-        if (!response.result) {
-            return {
-                materials: [],
-            }
-        }
-        else {
-            const materials = artifacts.map((material, index) => {
-                let artifactStatusValue = ''
-                return {
-                    index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map((mat) => {
-                            return {
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                type: material.ciConfigureSourceType || '',
-                            }
-                        })
-                        : [],
-                }
-            })
-            return {
-                materials: materials
-            }
-        }
-    })
-}
-
-export function extractImage(image: string): string {
-    return image ? image.split(':').pop() : ''
 }

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -19,6 +19,7 @@ function GenericEmptyState({
     SvgImage,
     noImage
 }: GenericEmptyStateType): JSX.Element {
+    console.log(image);
     
     return (
         <div

package/src/Common/Helper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
@@ -6,8 +6,6 @@ import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import moment from 'moment';
-import { UseSearchString } from './Types'
-import { useLocation } from 'react-router-dom'
 
 toast.configure({
     autoClose: 3000,
@@ -348,24 +346,3 @@ export function handleUTCTime(ts: string, isRelativeTime = false) {
   }
   return timestamp;
 }
-
-export function useSearchString(): UseSearchString {
-    const location = useLocation()
-    const queryParams: URLSearchParams = useMemo(() => {
-        const queryParams = new URLSearchParams(location.search)
-        return queryParams
-    }, [location])
-
-    // const searchParams={}
-    // for (let [key, value] of queryParams.entries()){
-    //     searchParams[key]=value
-    // }
-    const searchParams = Array.from(queryParams.entries()).reduce((agg, curr, idx) => {
-        agg[curr[0]] = curr[1]
-        return agg
-    }, {})
-
-    return { queryParams, searchParams }
-}
-
-

package/src/Common/ImageTags.tsx

@@ -352,7 +352,7 @@ export const ImageTagsContainer = ({
                     </div>
                     <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
                         <input
-                            className="form__input fs-13"
+                            className="form__input"
                             value={textInput}
                             onChange={setInputValue}
                             placeholder="Type a tag and press enter"
@@ -420,7 +420,7 @@ export const ImageTagsContainer = ({
                         <textarea
                             value={newDescription}
                             onChange={handleDescriptionChange}
-                            className="flex left flex-wrap dc__gap-8 dc__description-textarea fs-13"
+                            className="flex left flex-wrap dc__gap-8 dc__description-textarea"
                             style={{ height: '90px !important' }}
                         />
                     </div>

package/src/Common/ResizableTextarea.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { useThrottledEffect } from './Helper'
+import { ResizableTextareaProps } from './Types'
+
+export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
+                                                                        minHeight,
+                                                                        maxHeight,
+                                                                        value,
+                                                                        onChange = null,
+                                                                        onBlur = null,
+                                                                        onFocus = null,
+                                                                        className = '',
+                                                                        placeholder = 'Enter your text here..',
+                                                                        lineHeight = 14,
+                                                                        padding = 12,
+                                                                        disabled = false,
+                                                                        dataTestId,
+                                                                        ...props
+                                                                    }) => {
+    const [text, setText] = useState('')
+    const _textRef = useRef(null)
+
+    useEffect(() => {
+        setText(value)
+    }, [value])
+
+    function handleChange(e) {
+        e.persist()
+        setText(e.target.value)
+        if (typeof onChange === 'function') onChange(e)
+    }
+
+    function handleBlur(e) {
+        if (typeof onBlur === 'function') onBlur(e)
+    }
+
+    function handleFocus(e) {
+        if (typeof onFocus === 'function') onFocus(e)
+    }
+
+    useThrottledEffect(
+        () => {
+            _textRef.current.style.height = 'auto'
+            let nextHeight = _textRef.current.scrollHeight
+            if (minHeight && nextHeight < minHeight) {
+                nextHeight = minHeight
+            }
+            if (maxHeight && nextHeight > maxHeight) {
+                nextHeight = maxHeight
+            }
+            _textRef.current.style.height = nextHeight + 2 + 'px'
+        },
+        500,
+        [text],
+    )
+
+    return (
+        <textarea
+            data-testid={dataTestId}
+            ref={(el) => (_textRef.current = el)}
+            value={text}
+            placeholder={placeholder}
+            className={`dc__resizable-textarea ${className}`}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            style={{ lineHeight: `${lineHeight}px`, padding: `${padding}px` }}
+            spellCheck={false}
+            disabled={disabled}
+            {...props}
+        />
+    )
+}

package/src/Common/Types.ts

@@ -366,9 +366,18 @@ export interface RegistryTypeDetailType {
     password: InputDetailType
 }
 
-export interface UseSearchString {
-    queryParams: URLSearchParams
-    searchParams: {
-        [key: string]: string
-    }
+export interface ResizableTextareaProps {
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    className?: string
+    placeholder?: string
+    lineHeight?: number
+    padding?: number
+    disabled?: boolean
+    name?: string
+    dataTestId?: string
 }

package/src/Common/index.ts

@@ -34,3 +34,4 @@ export * from './Policy.Types'
 export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
 export * from './ImageTags'
 export * from './ImageTags.Types'
+export * from './ResizableTextarea'