Skip to content

Commit a1ce16e

Browse files
shivani170shivani170
authored
Merge pull request #2061 from devtron-labs/feat/replace-select-v4
feat: replace select v4
2 parents 9a4474d + 15a4354 commit a1ce16e

38 files changed

+510
-628
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "4.0.1",
7+
"@devtron-labs/devtron-fe-common-lib": "4.0.2",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx‎

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { useEffect, useState } from 'react'
22
import { useRouteMatch, useLocation, NavLink, useHistory } from 'react-router-dom'
33
import Tippy from '@tippyjs/react'
4-
import ReactSelect from 'react-select'
54

6-
import { CollapsibleList, CollapsibleListConfig, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
5+
import {
6+
CollapsibleList,
7+
CollapsibleListConfig,
8+
EnvResourceType,
9+
SelectPicker,
10+
SelectPickerOptionType,
11+
SelectPickerVariantType,
12+
} from '@devtron-labs/devtron-fe-common-lib'
713

814
import { ReactComponent as ICBack } from '@Icons/ic-caret-left-small.svg'
915
import { ReactComponent as ICAdd } from '@Icons/ic-add.svg'
@@ -16,7 +22,6 @@ import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.typ
1622
import { BASE_CONFIGURATIONS } from '../AppConfig.constants'
1723
import { EnvConfigRouteParams, EnvConfigurationsNavProps, EnvConfigObjectKey } from '../AppConfig.types'
1824
import { getEnvConfiguration, getNavigationPath, resourceTypeBasedOnPath } from './Navigation.helper'
19-
import { EnvSelectDropdownIndicator, envSelectStyles, EnvSelectOption } from './EnvSelect.utils'
2025

2126
const CompareWithButton = importComponentFromFELibrary('CompareWithButton', null, 'function')
2227

@@ -59,15 +64,26 @@ export const EnvConfigurationsNav = ({
5964
// CONSTANTS
6065
const { isLoading, config } = envConfig
6166
/** Current Environment Data. */
62-
const environmentData =
63-
environments.find((environment) => environment.id === +params[paramToCheck]) ||
64-
(showBaseConfigurations
65-
? {
66-
name: BASE_CONFIGURATIONS.name,
67-
id: BASE_CONFIGURATIONS.id,
68-
isProtected: isBaseConfigProtected,
69-
}
70-
: null)
67+
const _environmentData =
68+
environments && environments.find((environment) => environment.id === +params[paramToCheck])
69+
const selectedNavEnvironmentOptions = {
70+
..._environmentData,
71+
label: _environmentData?.name || BASE_CONFIGURATIONS.name,
72+
value: _environmentData?.id || BASE_CONFIGURATIONS.id,
73+
isProtected: _environmentData?.isProtected,
74+
}
75+
76+
const selectedEnvironmentWithBaseConfiguration = showBaseConfigurations
77+
? {
78+
label: BASE_CONFIGURATIONS.name,
79+
value: BASE_CONFIGURATIONS.id,
80+
endIcon: isBaseConfigProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />,
81+
isProtected: isBaseConfigProtected,
82+
}
83+
: null
84+
85+
const environmentData = selectedNavEnvironmentOptions || selectedEnvironmentWithBaseConfiguration
86+
7187
const resourceType = resourceTypeBasedOnPath(pathname)
7288
const isCreate = pathname.includes('/create')
7389

@@ -81,7 +97,7 @@ export const EnvConfigurationsNav = ({
8197
..._updatedEnvConfig[envConfigKey],
8298
{
8399
title: 'Unnamed',
84-
href: getNavigationPath(path, params, environmentData.id, resourceType, 'create', paramToCheck),
100+
href: getNavigationPath(path, params, environmentData.value, resourceType, 'create', paramToCheck),
85101
configState: ResourceConfigState.Unnamed,
86102
subtitle: '',
87103
},
@@ -156,7 +172,7 @@ export const EnvConfigurationsNav = ({
156172
return
157173
}
158174
setExpandedIds({ ...expandedIds, [_resourceType]: true })
159-
history.push(getNavigationPath(path, params, environmentData.id, _resourceType, 'create', paramToCheck))
175+
history.push(getNavigationPath(path, params, environmentData.value, _resourceType, 'create', paramToCheck))
160176
}
161177

162178
/** Collapsible List Config. */
@@ -214,26 +230,33 @@ export const EnvConfigurationsNav = ({
214230
]
215231

216232
// REACT SELECT PROPS
217-
const envOptions = [
233+
const getSelectOptions = () =>
234+
[...environments].map((env) => ({
235+
label: env.name,
236+
value: env.id,
237+
endIcon: env.isProtected ? <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" /> : null,
238+
}))
239+
240+
const envOptions: SelectPickerOptionType[] = [
218241
...(showBaseConfigurations
219242
? [
220243
{
221-
name: BASE_CONFIGURATIONS.name,
222-
id: BASE_CONFIGURATIONS.id,
223-
isProtected: isBaseConfigProtected,
244+
label: BASE_CONFIGURATIONS.name,
245+
value: BASE_CONFIGURATIONS.id,
246+
endIcon: isBaseConfigProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />,
224247
},
225248
]
226249
: []),
227-
...environments,
250+
...getSelectOptions(),
228251
]
229252

230-
const onEnvSelect = ({ id }: typeof environmentData) => {
231-
if (environmentData.id === id) {
253+
const onEnvSelect = (_selectedEnv) => {
254+
if (environmentData.value === _selectedEnv.value) {
232255
return
233256
}
234257

235258
const name = pathname.split(`${resourceType}/`)[1]
236-
history.push(getNavigationPath(path, params, id, resourceType, name, paramToCheck))
259+
history.push(getNavigationPath(path, params, _selectedEnv.value, resourceType, name, paramToCheck))
237260
}
238261

239262
const renderEnvSelector = () => (
@@ -243,28 +266,23 @@ export const EnvConfigurationsNav = ({
243266
<ICBack className="icon-dim-16" />
244267
</div>
245268
</NavLink>
246-
<ReactSelect<typeof environmentData>
269+
<SelectPicker
270+
inputId="env-config-selector"
247271
classNamePrefix="env-config-selector"
248272
isClearable={false}
249273
value={environmentData}
250274
options={envOptions}
251-
getOptionLabel={(option) => `${option.name}`}
252-
getOptionValue={(option) => `${option.id}`}
253-
styles={envSelectStyles}
254-
components={{
255-
IndicatorSeparator: null,
256-
Option: EnvSelectOption,
257-
DropdownIndicator: EnvSelectDropdownIndicator,
258-
}}
275+
getOptionLabel={(option) => `${option.label}`}
276+
getOptionValue={(option) => `${option.value}`}
259277
onChange={onEnvSelect}
260278
placeholder="Select Environment"
279+
variant={SelectPickerVariantType.BORDER_LESS}
261280
/>
262-
{environmentData?.isProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />}
263281
</div>
264282
)
265283

266284
const renderCompareWithBtn = () => {
267-
const { name: compareTo } = environmentData
285+
const { label: compareTo } = environmentData
268286

269287
// Determine base path based on pathname
270288
const isOverrideConfig = pathname.includes(URLS.APP_ENV_OVERRIDE_CONFIG)

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

Lines changed: 7 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useState, useEffect, Fragment } from 'react'
17+
import { useState, useEffect, Fragment } from 'react'
1818
import { useParams, useLocation, useRouteMatch, NavLink, Link } from 'react-router-dom'
1919
import {
2020
EnvResourceType,
@@ -27,22 +27,19 @@ import {
2727
getEnvironmentListMinPublic,
2828
ToastVariantType,
2929
ToastManager,
30+
SelectPicker,
3031
} from '@devtron-labs/devtron-fe-common-lib'
31-
import ReactSelect, { ValueContainerProps, components } from 'react-select'
3232
import { URLS, DOCUMENTATION } from '../../../../../../config'
3333
import { usePrevious, createClusterEnvGroup } from '../../../../../../components/common'
3434
import { addJobEnvironment, deleteJobEnvironment, getCIConfig } from '../../../../../../services/service'
3535
import { ReactComponent as Help } from '../../../../../../assets/icons/ic-help.svg'
3636
import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
37-
import { ReactComponent as Search } from '../../../../../../assets/icons/ic-search.svg'
3837
import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
3938
import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
4039
import { ReactComponent as ProtectedIcon } from '../../../../../../assets/icons/ic-shield-protect-fill.svg'
4140
import warn from '../../../../../../assets/icons/ic-warning.svg'
4241
import { JobEnvOverrideRouteProps } from '../AppConfig.types'
43-
import { groupHeading } from '../../../../../../components/CIPipelineN/Constants'
4442
import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
45-
import { groupStyle } from '../../../../../../components/v2/common/ReactSelect.utils'
4643
import { renderNavItem } from './Navigation.helper'
4744
import { useAppConfigurationContext } from '../AppConfiguration.provider'
4845

@@ -207,23 +204,6 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
207204
)
208205
}
209206

210-
const ValueContainer = (props: ValueContainerProps) => {
211-
const { selectProps, children } = props
212-
return (
213-
<components.ValueContainer {...props}>
214-
{!selectProps.inputValue ? (
215-
<>
216-
<Search className="dc__position-abs icon-dim-18 ml-8 mw-18" />
217-
<span className="dc__position-abs dc__left-35 cn-5 ml-2">{selectProps.placeholder}</span>
218-
</>
219-
) : (
220-
<Search className="dc__position-abs icon-dim-18 ml-8 mw-18" />
221-
)}
222-
<span className="dc__position-abs dc__left-30 cn-5 ml-2">{React.cloneElement(children[1])}</span>
223-
</components.ValueContainer>
224-
)
225-
}
226-
227207
const EnvironmentOverrideRouter = () => {
228208
const { pathname } = useLocation()
229209
const { appId } = useParams<{ appId: string }>()
@@ -311,43 +291,19 @@ const EnvironmentOverrideRouter = () => {
311291
}
312292

313293
const renderEnvSelector = (): JSX.Element => (
314-
<ReactSelect
294+
<SelectPicker
295+
inputId="job-pipeline-environment-dropdown"
315296
autoFocus
316297
menuIsOpen
317298
isSearchable
318-
menuPlacement="auto"
319-
closeMenuOnScroll
320299
placeholder="Select Environment"
321300
classNamePrefix="job-pipeline-environment-dropdown"
322301
options={environmentOptions}
323-
value={environmentOptions.find((env) => env.id === -1)}
324-
getOptionLabel={(option) => `${option.name}`}
325-
getOptionValue={(option) => `${option.id}`}
326-
isMulti={false}
302+
value={environmentOptions.find((env) => env.value === -1)}
303+
getOptionLabel={(option) => `${option.label}`}
304+
getOptionValue={(option) => `${option.value}`}
327305
onChange={selectEnvironment}
328306
onBlur={handleAddEnvironment}
329-
components={{
330-
IndicatorSeparator: null,
331-
DropdownIndicator: null,
332-
GroupHeading: groupHeading,
333-
ValueContainer,
334-
}}
335-
styles={{
336-
...groupStyle(),
337-
control: (base) => ({
338-
...base,
339-
border: '1px solid #d6dbdf',
340-
minHeight: '20px',
341-
height: '30px',
342-
marginTop: '4px',
343-
width: '100%',
344-
}),
345-
container: (base) => ({
346-
...base,
347-
paddingRight: '0px',
348-
}),
349-
valueContainer: (base) => ({ ...base, height: '28px', padding: '0px 8px' }),
350-
}}
351307
/>
352308
)
353309

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
CustomNavItemsType,
1414
EnvConfigRouteParams,
1515
EnvConfigType,
16-
EnvironmentOptionType,
1716
ExtendedCollapsibleListItem,
1817
EnvConfigObjectKey,
1918
} from '../AppConfig.types'
@@ -115,7 +114,7 @@ export const getEnvConfiguration = (
115114
envConfig: EnvConfigType,
116115
basePath: string,
117116
params: EnvConfigRouteParams,
118-
{ id, isProtected }: EnvironmentOptionType,
117+
{ value: id, isProtected },
119118
paramToCheck: 'appId' | 'envId' = 'envId',
120119
): {
121120
deploymentTemplate: ExtendedCollapsibleListItem

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

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,30 @@
1515
*/
1616

1717
/* eslint-disable react/prop-types */
18-
import ReactSelect from 'react-select'
1918
import moment from 'moment'
20-
import { InfoColourBar, multiSelectStyles } from '@devtron-labs/devtron-fe-common-lib'
19+
import { InfoColourBar, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
2120
import { MomentDateFormat } from '../../../../config'
2221
import { SingleDatePickerComponent } from '../../../../components/common'
23-
import { DropdownIndicator } from '../../../../components/security/security.util'
2422
import { getOptions, getDateInMilliseconds } from './apiToken.utils'
25-
import { Option } from '../../../../components/v2/common/ReactSelect.utils'
2623
import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
2724

2825
const ExpirationDate = ({ selectedExpirationDate, onChangeSelectFormData, handleDatesChange, customDate }) => (
2926
<div className="w-100">
30-
<span className="form__label dc__required-field">Expiration</span>
31-
<div className="flex left">
32-
<ReactSelect
33-
value={selectedExpirationDate}
34-
options={getOptions(customDate)}
35-
className="select-width w-200"
36-
classNamePrefix="select-token-expiry-duration"
37-
isSearchable={false}
38-
onChange={onChangeSelectFormData}
39-
components={{
40-
IndicatorSeparator: null,
41-
DropdownIndicator,
42-
Option,
43-
}}
44-
styles={{
45-
...multiSelectStyles,
46-
control: (base) => ({
47-
...base,
48-
minHeight: '36px',
49-
fontWeight: '400',
50-
backgroundColor: 'var(--N50)',
51-
cursor: 'pointer',
52-
}),
53-
dropdownIndicator: (base) => ({
54-
...base,
55-
padding: '0 8px',
56-
}),
57-
}}
58-
/>
27+
<div className="flex left bottom dc__gap-16">
28+
<div className="w-200">
29+
<SelectPicker
30+
label="Expiration"
31+
required
32+
inputId="token-expiry-duration"
33+
value={selectedExpirationDate}
34+
options={getOptions(customDate)}
35+
classNamePrefix="select-token-expiry-duration"
36+
onChange={onChangeSelectFormData}
37+
/>
38+
</div>
39+
5940
{selectedExpirationDate.label !== 'Custom' && selectedExpirationDate.label !== 'No expiration' && (
60-
<span className="ml-16 fs-13 fw-4 cn-9">
41+
<span className="fs-13 fw-4 cn-9">
6142
<span>This token will expire on</span>&nbsp;
6243
{moment(getDateInMilliseconds(selectedExpirationDate.value)).format(MomentDateFormat)}
6344
</span>

‎src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -715,12 +715,6 @@ export const ConfigMapSecretForm = React.memo(
715715
return null
716716
}
717717

718-
const trimConfigMapName = (): void => {
719-
dispatch({
720-
type: ConfigMapActionTypes.setConfigName,
721-
payload: { ...state.configName, value: state.configName.value.trim() },
722-
})
723-
}
724718
const renderRollARN = (): JSX.Element => {
725719
if (isHashiOrAWS || isESO) {
726720
return (
@@ -953,7 +947,6 @@ export const ConfigMapSecretForm = React.memo(
953947
value={state.configName.value}
954948
autoFocus
955949
onChange={onConfigNameChange}
956-
onBlur={trimConfigMapName}
957950
placeholder={componentType === CMSecretComponentType.Secret ? 'secret-name' : 'configmap-name'}
958951
isRequiredField
959952
disabled={!!configMapSecretData?.name}

0 commit comments

Comments
 (0)