feat: replace select v4

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "4.0.1",
+        "@devtron-labs/devtron-fe-common-lib": "4.0.1-beta-3",
         "@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/EnvConfigurationsNav.tsx

@@ -1,9 +1,15 @@
 import { useEffect, useState } from 'react'
 import { useRouteMatch, useLocation, NavLink, useHistory } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
-import ReactSelect from 'react-select'
 
-import { CollapsibleList, CollapsibleListConfig, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    CollapsibleList,
+    CollapsibleListConfig,
+    EnvResourceType,
+    SelectPicker,
+    SelectPickerOptionType,
+    SelectPickerVariantType,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
 import { ReactComponent as ICAdd } from '@Icons/ic-add.svg'
@@ -16,7 +22,6 @@ import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.typ
 import { BASE_CONFIGURATIONS } from '../AppConfig.constants'
 import { EnvConfigRouteParams, EnvConfigurationsNavProps, EnvConfigObjectKey } from '../AppConfig.types'
 import { getEnvConfiguration, getNavigationPath, resourceTypeBasedOnPath } from './Navigation.helper'
-import { EnvSelectDropdownIndicator, envSelectStyles, EnvSelectOption } from './EnvSelect.utils'
 
 const CompareWithButton = importComponentFromFELibrary('CompareWithButton', null, 'function')
 
@@ -59,15 +64,26 @@ export const EnvConfigurationsNav = ({
     // CONSTANTS
     const { isLoading, config } = envConfig
     /** Current Environment Data. */
-    const environmentData =
-        environments.find((environment) => environment.id === +params[paramToCheck]) ||
-        (showBaseConfigurations
-            ? {
-                  name: BASE_CONFIGURATIONS.name,
-                  id: BASE_CONFIGURATIONS.id,
-                  isProtected: isBaseConfigProtected,
-              }
-            : null)
+    const _environmentData =
+        environments && environments.find((environment) => environment.id === +params[paramToCheck])
+    const selectedNavEnvironmentOptions = {
+        ..._environmentData,
+        label: _environmentData?.name || BASE_CONFIGURATIONS.name,
+        value: _environmentData?.id || BASE_CONFIGURATIONS.id,
+        isProtected: _environmentData?.isProtected,
+    }
+
+    const selectedEnvironmentWithBaseConfiguration = showBaseConfigurations
+        ? {
+              label: BASE_CONFIGURATIONS.name,
+              value: BASE_CONFIGURATIONS.id,
+              endIcon: isBaseConfigProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />,
+              isProtected: isBaseConfigProtected,
+          }
+        : null
+
+    const environmentData = selectedNavEnvironmentOptions || selectedEnvironmentWithBaseConfiguration
+
     const resourceType = resourceTypeBasedOnPath(pathname)
     const isCreate = pathname.includes('/create')
 
@@ -81,7 +97,7 @@ export const EnvConfigurationsNav = ({
                 ..._updatedEnvConfig[envConfigKey],
                 {
                     title: 'Unnamed',
-                    href: getNavigationPath(path, params, environmentData.id, resourceType, 'create', paramToCheck),
+                    href: getNavigationPath(path, params, environmentData.value, resourceType, 'create', paramToCheck),
                     configState: ResourceConfigState.Unnamed,
                     subtitle: '',
                 },
@@ -156,7 +172,7 @@ export const EnvConfigurationsNav = ({
             return
         }
         setExpandedIds({ ...expandedIds, [_resourceType]: true })
-        history.push(getNavigationPath(path, params, environmentData.id, _resourceType, 'create', paramToCheck))
+        history.push(getNavigationPath(path, params, environmentData.value, _resourceType, 'create', paramToCheck))
     }
 
     /** Collapsible List Config. */
@@ -214,26 +230,33 @@ export const EnvConfigurationsNav = ({
     ]
 
     // REACT SELECT PROPS
-    const envOptions = [
+    const getSelectOptions = () =>
+        [...environments].map((env) => ({
+            label: env.name,
+            value: env.id,
+            endIcon: env.isProtected ? <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" /> : null,
+        }))
+
+    const envOptions: SelectPickerOptionType[] = [
         ...(showBaseConfigurations
             ? [
                   {
-                      name: BASE_CONFIGURATIONS.name,
-                      id: BASE_CONFIGURATIONS.id,
-                      isProtected: isBaseConfigProtected,
+                      label: BASE_CONFIGURATIONS.name,
+                      value: BASE_CONFIGURATIONS.id,
+                      endIcon: isBaseConfigProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />,
                   },
               ]
             : []),
-        ...environments,
+        ...getSelectOptions(),
     ]
 
-    const onEnvSelect = ({ id }: typeof environmentData) => {
-        if (environmentData.id === id) {
+    const onEnvSelect = (_selectedEnv) => {
+        if (environmentData.value === _selectedEnv.value) {
             return
         }
 
         const name = pathname.split(`${resourceType}/`)[1]
-        history.push(getNavigationPath(path, params, id, resourceType, name, paramToCheck))
+        history.push(getNavigationPath(path, params, _selectedEnv.value, resourceType, name, paramToCheck))
     }
 
     const renderEnvSelector = () => (
@@ -243,28 +266,23 @@ export const EnvConfigurationsNav = ({
                     <ICBack className="icon-dim-16" />
                 </div>
             </NavLink>
-            <ReactSelect<typeof environmentData>
+            <SelectPicker
+                inputId="env-config-selector"
                 classNamePrefix="env-config-selector"
                 isClearable={false}
                 value={environmentData}
                 options={envOptions}
-                getOptionLabel={(option) => `${option.name}`}
-                getOptionValue={(option) => `${option.id}`}
-                styles={envSelectStyles}
-                components={{
-                    IndicatorSeparator: null,
-                    Option: EnvSelectOption,
-                    DropdownIndicator: EnvSelectDropdownIndicator,
-                }}
+                getOptionLabel={(option) => `${option.label}`}
+                getOptionValue={(option) => `${option.value}`}
                 onChange={onEnvSelect}
                 placeholder="Select Environment"
+                variant={SelectPickerVariantType.BORDER_LESS}
             />
-            {environmentData?.isProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />}
         </div>
     )
 
     const renderCompareWithBtn = () => {
-        const { name: compareTo } = environmentData
+        const { label: compareTo } = environmentData
 
         // Determine base path based on pathname
         const isOverrideConfig = pathname.includes(URLS.APP_ENV_OVERRIDE_CONFIG)

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect, Fragment } from 'react'
+import { useState, useEffect, Fragment } from 'react'
 import { useParams, useLocation, useRouteMatch, NavLink, Link } from 'react-router-dom'
 import {
     EnvResourceType,
@@ -27,22 +27,19 @@ import {
     getEnvironmentListMinPublic,
     ToastVariantType,
     ToastManager,
+    SelectPicker,
 } from '@devtron-labs/devtron-fe-common-lib'
-import ReactSelect, { ValueContainerProps, components } from 'react-select'
 import { URLS, DOCUMENTATION } from '../../../../../../config'
 import { usePrevious, createClusterEnvGroup } from '../../../../../../components/common'
 import { addJobEnvironment, deleteJobEnvironment, getCIConfig } from '../../../../../../services/service'
 import { ReactComponent as Help } from '../../../../../../assets/icons/ic-help.svg'
 import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
-import { ReactComponent as Search } from '../../../../../../assets/icons/ic-search.svg'
 import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
 import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as ProtectedIcon } from '../../../../../../assets/icons/ic-shield-protect-fill.svg'
 import warn from '../../../../../../assets/icons/ic-warning.svg'
 import { JobEnvOverrideRouteProps } from '../AppConfig.types'
-import { groupHeading } from '../../../../../../components/CIPipelineN/Constants'
 import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
-import { groupStyle } from '../../../../../../components/v2/common/ReactSelect.utils'
 import { renderNavItem } from './Navigation.helper'
 import { useAppConfigurationContext } from '../AppConfiguration.provider'
 
@@ -207,23 +204,6 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
     )
 }
 
-const ValueContainer = (props: ValueContainerProps) => {
-    const { selectProps, children } = props
-    return (
-        <components.ValueContainer {...props}>
-            {!selectProps.inputValue ? (
-                <>
-                    <Search className="dc__position-abs icon-dim-18 ml-8 mw-18" />
-                    <span className="dc__position-abs dc__left-35 cn-5 ml-2">{selectProps.placeholder}</span>
-                </>
-            ) : (
-                <Search className="dc__position-abs icon-dim-18 ml-8 mw-18" />
-            )}
-            <span className="dc__position-abs dc__left-30 cn-5 ml-2">{React.cloneElement(children[1])}</span>
-        </components.ValueContainer>
-    )
-}
-
 const EnvironmentOverrideRouter = () => {
     const { pathname } = useLocation()
     const { appId } = useParams<{ appId: string }>()
@@ -311,43 +291,19 @@ const EnvironmentOverrideRouter = () => {
     }
 
     const renderEnvSelector = (): JSX.Element => (
-        <ReactSelect
+        <SelectPicker
+            inputId="job-pipeline-environment-dropdown"
             autoFocus
             menuIsOpen
             isSearchable
-            menuPlacement="auto"
-            closeMenuOnScroll
             placeholder="Select Environment"
             classNamePrefix="job-pipeline-environment-dropdown"
             options={environmentOptions}
-            value={environmentOptions.find((env) => env.id === -1)}
-            getOptionLabel={(option) => `${option.name}`}
-            getOptionValue={(option) => `${option.id}`}
-            isMulti={false}
+            value={environmentOptions.find((env) => env.value === -1)}
+            getOptionLabel={(option) => `${option.label}`}
+            getOptionValue={(option) => `${option.value}`}
             onChange={selectEnvironment}
             onBlur={handleAddEnvironment}
-            components={{
-                IndicatorSeparator: null,
-                DropdownIndicator: null,
-                GroupHeading: groupHeading,
-                ValueContainer,
-            }}
-            styles={{
-                ...groupStyle(),
-                control: (base) => ({
-                    ...base,
-                    border: '1px solid #d6dbdf',
-                    minHeight: '20px',
-                    height: '30px',
-                    marginTop: '4px',
-                    width: '100%',
-                }),
-                container: (base) => ({
-                    ...base,
-                    paddingRight: '0px',
-                }),
-                valueContainer: (base) => ({ ...base, height: '28px', padding: '0px 8px' }),
-            }}
         />
     )
 

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

@@ -13,7 +13,6 @@ import {
     CustomNavItemsType,
     EnvConfigRouteParams,
     EnvConfigType,
-    EnvironmentOptionType,
     ExtendedCollapsibleListItem,
     EnvConfigObjectKey,
 } from '../AppConfig.types'
@@ -115,7 +114,7 @@ export const getEnvConfiguration = (
     envConfig: EnvConfigType,
     basePath: string,
     params: EnvConfigRouteParams,
-    { id, isProtected }: EnvironmentOptionType,
+    { value: id, isProtected },
     paramToCheck: 'appId' | 'envId' = 'envId',
 ): {
     deploymentTemplate: ExtendedCollapsibleListItem

src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx

@@ -15,49 +15,30 @@
  */
 
 /* eslint-disable react/prop-types */
-import ReactSelect from 'react-select'
 import moment from 'moment'
-import { InfoColourBar, multiSelectStyles } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoColourBar, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
 import { MomentDateFormat } from '../../../../config'
 import { SingleDatePickerComponent } from '../../../../components/common'
-import { DropdownIndicator } from '../../../../components/security/security.util'
 import { getOptions, getDateInMilliseconds } from './apiToken.utils'
-import { Option } from '../../../../components/v2/common/ReactSelect.utils'
 import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
 
 const ExpirationDate = ({ selectedExpirationDate, onChangeSelectFormData, handleDatesChange, customDate }) => (
     <div className="w-100">
-        <span className="form__label dc__required-field">Expiration</span>
-        <div className="flex left">
-            <ReactSelect
-                value={selectedExpirationDate}
-                options={getOptions(customDate)}
-                className="select-width w-200"
-                classNamePrefix="select-token-expiry-duration"
-                isSearchable={false}
-                onChange={onChangeSelectFormData}
-                components={{
-                    IndicatorSeparator: null,
-                    DropdownIndicator,
-                    Option,
-                }}
-                styles={{
-                    ...multiSelectStyles,
-                    control: (base) => ({
-                        ...base,
-                        minHeight: '36px',
-                        fontWeight: '400',
-                        backgroundColor: 'var(--N50)',
-                        cursor: 'pointer',
-                    }),
-                    dropdownIndicator: (base) => ({
-                        ...base,
-                        padding: '0 8px',
-                    }),
-                }}
-            />
+        <div className="flex left bottom dc__gap-16">
+            <div className="w-200">
+                <SelectPicker
+                    label="Expiration"
+                    required
+                    inputId="token-expiry-duration"
+                    value={selectedExpirationDate}
+                    options={getOptions(customDate)}
+                    classNamePrefix="select-token-expiry-duration"
+                    onChange={onChangeSelectFormData}
+                />
+            </div>
+
             {selectedExpirationDate.label !== 'Custom' && selectedExpirationDate.label !== 'No expiration' && (
-                <span className="ml-16 fs-13 fw-4 cn-9">
+                <span className="fs-13 fw-4 cn-9">
                     <span>This token will expire on</span>&nbsp;
                     {moment(getDateInMilliseconds(selectedExpirationDate.value)).format(MomentDateFormat)}
                 </span>

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx

@@ -715,12 +715,6 @@ export const ConfigMapSecretForm = React.memo(
             return null
         }
 
-        const trimConfigMapName = (): void => {
-            dispatch({
-                type: ConfigMapActionTypes.setConfigName,
-                payload: { ...state.configName, value: state.configName.value.trim() },
-            })
-        }
         const renderRollARN = (): JSX.Element => {
             if (isHashiOrAWS || isESO) {
                 return (
@@ -953,7 +947,6 @@ export const ConfigMapSecretForm = React.memo(
                     value={state.configName.value}
                     autoFocus
                     onChange={onConfigNameChange}
-                    onBlur={trimConfigMapName}
                     placeholder={componentType === CMSecretComponentType.Secret ? 'secret-name' : 'configmap-name'}
                     isRequiredField
                     disabled={!!configMapSecretData?.name}