chore: merge main

Author: AbhishekA1509

.env

@@ -24,7 +24,6 @@ HIDE_GITOPS_OR_HELM_OPTION=true
 CONFIGURABLE_TIMEOUT=
 HIDE_APPLICATION_GROUPS=true
 REACT_APP_K8S_CLIENT=false
-USE_V2=false
 CLUSTER_TERMINAL_CONNECTION_POLLING_INTERVAL=7000
 CLUSTER_TERMINAL_CONNECTION_RETRY_COUNT=7
 ENABLE_CHART_SEARCH_IN_HELM_DEPLOY=false

config.md

@@ -15,7 +15,6 @@
 | SENTRY_PERFORMANCE_ENABLED         | false     |  To send persormance sentry      |
 | SENTRY_DSN                         | ''        | SENTRY Data Source Name |
 | SENTRY_TRACES_SAMPLE_RATE          | 0.2       | Rate at which data send to sentry.(min=0 max=1)|
-| USE_V2                             | "true"    | Use the v2 APIs                                 |
 | ENABLE_RESTART_WORKLOAD            | "false"    | Show restart pods option in app details page   |
 | ENABLE_BUILD_CONTEXT               | "true"    | Enable build context in Devtron UI             |
 | FORCE_SECURITY_SCANNING            | "false"   | Force security scanning                         |

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.59-beta-14",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.61",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/assets/icons/ic-docker-with-image.svg

@@ -3,6 +3,7 @@ import {
     Checkbox,
     CHECKBOX_VALUE,
     ConditionalWrap,
+    CustomInput,
     Drawer,
     GenericEmptyState,
     Progressing,
@@ -327,25 +328,17 @@ export default function CreateAppGroup({
         return (
             <div className="p-20 bcn-0 dc__overflow-auto" style={{ height: 'calc(100vh - 128px)' }}>
                 <div className="form__row mb-16">
-                    <span className="form__label dc__required-field">Name</span>
-                    <input
+                    <CustomInput
+                        label="Name"
                         tabIndex={1}
-                        className="form__input"
-                        autoComplete="off"
                         placeholder="Enter filter name"
-                        type="text"
                         value={appGroupName}
                         name="name"
                         onChange={onInputChange}
                         disabled={selectedAppGroup && !!selectedAppGroup.value}
+                        isRequiredField={true}
+                        error={showErrorMsg && nameErrorMessage()}
                     />
-
-                    {showErrorMsg && (
-                        <span className="form__error">
-                            <Error className="form__icon form__icon--error" />
-                            {nameErrorMessage()}
-                        </span>
-                    )}
                 </div>
                 <div className="form__row mb-16">
                     <span className="form__label">Description (Max 50 characters)</span>

src/assets/icons/ic-lines.svg

@@ -1,9 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
-import { ReactComponent as Search } from '../../assets/icons/ic-search.svg'
-import { ReactComponent as Clear } from '../../assets/icons/ic-error.svg'
 import { handleUTCTime } from '../common'
-import { Progressing } from '@devtron-labs/devtron-fe-common-lib'
+import { Progressing, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 import { ClusterDetail } from './types'
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
 import { ReactComponent as Success } from '../../assets/icons/appstatus/healthy.svg'
@@ -73,37 +71,36 @@ export default function ClusterSelectionList({
         setSearchText('')
     }
 
-    const handleFilterKeyPress = (event): void => {
-        const theKeyCode = event.key
-        if (theKeyCode === 'Enter') {
-            handleFilterChanges(event.target.value)
+    const handleFilterKeyPress = (value): void => {
+            handleFilterChanges(value)
             setSearchApplied(true)
-        } else if (theKeyCode === 'Backspace' && searchText.length === 1) {
-            clearSearch()
-        }
+    }
+
+    const handleSearchChange = (value): void => {
+        setSearchText(value.trim())
+    }
+
+    const handleOnBlur = (event): void => {
+        event.stopPropagation()
+        let _searchText = event.target.value
+        _searchText = _searchText?.trim()
+        handleFilterChanges(_searchText)
+        setSearchText(_searchText)
     }
 
     const renderSearch = (): JSX.Element => {
         return (
-            <div className="search dc__position-rel margin-right-0 en-2 bw-1 br-4 h-32">
-                <Search className="search__icon icon-dim-18" />
-                <input
-                    type="text"
-                    placeholder="Search clusters"
-                    value={searchText}
-                    className="search__input"
-                    onChange={(event) => {
-                        setSearchText(event.target.value)
-                    }}
-                    onKeyDown={handleFilterKeyPress}
-                    disabled={clusterListLoader}
-                />
-                {searchApplied && (
-                    <button className="search__clear-button" type="button" onClick={clearSearch}>
-                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
-                    </button>
-                )}
-            </div>
+            <SearchBar
+                initialSearchText={searchText}
+                handleSearchChange={handleSearchChange}
+                handleEnter={handleFilterKeyPress}
+                containerClassName="w-250-imp"
+                inputProps={{
+                    placeholder: 'Search clusters',
+                    autoFocus: true,
+                    disabled: minLoader,
+                }}
+            />
         )
     }
 

src/components/ApplicationGroup/CreateAppGroup.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { ButtonWithLoader } from '../common'
-import { showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
+import { CustomInput, noop, showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as CloseIcon } from '../../assets/icons/ic-close.svg'
 import { uploadChart, validateChart } from './customChart.service'
 import errorImage from '../../assets/img/ic_upload_chart_error.png'
@@ -121,14 +121,14 @@ export default function UploadChartModal({ closeUploadPopup }: UploadChartModalT
                 )}
                 <div>
                     <div>
-                        <span className="fs-13 fw-4 cn-7 dc__required-field">
-                            Chart Name
-                        </span>
-                        <input
-                            type="text"
-                            className="w-100 br-4 en-2 bw-1 mt-6 form__input"
+                        <CustomInput
+                            label="Chart Name"
+                            name="chartName"
+                            onChange={noop}
+                            rootClassName="w-100 br-4 en-2 bw-1 mt-6 form__input"
                             disabled
                             value={chartDetail.chartName}
+                            isRequiredField={true}
                         />
                     </div>
                     <div className="mt-16">