Merge pull request #2109 from devtron-labs/fix/select-picker-ui

fix: select picker UI

Author: shivani170

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.4.4",
+        "@devtron-labs/devtron-fe-common-lib": "0.4.5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

@@ -225,7 +225,7 @@ const EnvironmentOverrideRouter = () => {
             const list = []
             envListMinRes?.forEach((env) => {
                 if (env.cluster_name !== 'default_cluster' && env.isClusterCdActive) {
-                    list.push({ id: env.id, clusterName: env.cluster_name, name: env.environment_name })
+                    list.push({ ...env, value: env.id, clusterName: env.cluster_name, label: env.environment_name })
                 }
             })
             setEnvironmentOptions(createClusterEnvGroup(list, 'clusterName'))

src/components/CIPipelineN/TaskTypeDetailComponent.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useContext, useState, useEffect } from 'react'
+import { useContext, useState, useEffect } from 'react'
 import Tippy from '@tippyjs/react'
 import {
     Checkbox,
@@ -25,6 +25,7 @@ import {
     ScriptType,
     CustomInput,
     ClipboardButton,
+    SelectPicker,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { components } from 'react-select'
 import { TaskFieldDescription, TaskFieldLabel } from '../ciPipeline/types'
@@ -39,9 +40,6 @@ import { OptionType } from '../app/types'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
-import CreatableSelect from 'react-select/creatable'
-import { containerImageSelectStyles } from './ciPipeline.utils'
-import { ValueContainerImage as ValueContainer } from '@Components/app/details/appDetails/utils'
 
 export const TaskTypeDetailComponent = () => {
     const {
@@ -211,17 +209,6 @@ export const TaskTypeDetailComponent = () => {
         }
     }
 
-    const menuList = (props) => {
-        return (
-            <components.MenuList {...props}>
-                <div className="cn-5 pl-12 pt-4 pb-4 dc__italic-font-style">
-                    Type to enter a custom value. Press Enter to accept.
-                </div>
-                {props.children}
-            </components.MenuList>
-        )
-    }
-
     const renderMenuListFooter = () => (
         <div className="cn-5 pl-12 pt-4 pb-4 dc__italic-font-style">
             Type to enter a custom value. Press Enter to accept.
@@ -240,26 +227,17 @@ export const TaskTypeDetailComponent = () => {
                     />
 
                     <div className="dc__position-rel">
-                        <CreatableSelect
-                            tabIndex={1}
+                        <SelectPicker
+                            inputId="containerImage"
                             value={selectedContainerImage}
                             options={containerImageOptions}
                             placeholder="Select container image or input value"
                             onChange={handleContainerImageSelector}
-                            styles={containerImageSelectStyles}
                             classNamePrefix="select"
-                            components={{
-                                MenuList: menuList,
-                                Option,
-                                IndicatorSeparator: null,
-                                ValueContainer,
-                            }}
-                            noOptionsMessage={(): string => {
-                                return 'No matching options'
-                            }}
                             onBlur={handleCreatableBlur}
-                            isValidNewOption={() => false}
                             onKeyDown={handleKeyDown}
+                            isCreatable
+                            renderMenuListFooter={renderMenuListFooter}
                         />
                         {selectedContainerImage?.label && (
                             <div className="flex icon-dim-32 dc__position-abs dc__top-0 dc__right-20">

yarn.lock

@@ -1346,10 +1346,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected].4":
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.4.4.tgz#2b2dbe17d82628017334ea0c3292127563dba863"
-  integrity sha512-G8QRY+gHN9IH1NG7L8+1etDjbbdgy2Waw344xOJcebEgFuN8ZBTtIREzgAC+QZp2qUiYmn4wA2fNWf30A1ywhw==
+"@devtron-labs/[email protected].5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-0.4.5.tgz#55d4ff6174a84af9c4a08f6ba73a0178dde56529"
+  integrity sha512-6Rtzxk7UavWoXh2MaJDL+FQXcJN9idv9xfrEhL+vdbjmGwFqYsDmikt8DOxFyMVtjVORqkzhG425GAzm7ZoQFg==
   dependencies:
     "@types/react-dates" "^21.8.6"
     ansi_up "^5.2.1"