Skip to content

Commit 5ef4f5b

Browse files
shivani170shivani170
authored
Merge pull request #2013 from devtron-labs/feat/replace-select-picker-v2
feat: replace select picker v2
2 parents 7b9d3d5 + 0ddedb9 commit 5ef4f5b

36 files changed

+299
-541
lines changed

‎.eslintignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ src/components/common/helpers/Helpers.tsx
296296
src/components/common/helpers/compareVersion.ts
297297
src/components/common/helpers/isSubset.ts
298298
src/components/common/helpers/time.ts
299-
src/components/common/helpers/util.ts
299+
src/components/common/helpers/utils.tsx
300300
src/components/common/helpers/workflowURL.ts
301301
src/components/common/hooks/FileReader.ts
302302
src/components/common/hooks/__tests__/FileReader.test.tsx

‎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": "0.3.3",
7+
"@devtron-labs/devtron-fe-common-lib": "0.3.5",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/components/CIPipelineN/ConditionContainer.tsx

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

17-
import React, { useState, useEffect, useContext, Fragment } from 'react'
18-
import { RadioGroup, RadioGroupItem, ConditionType, PluginType, CustomInput, PipelineFormType } from '@devtron-labs/devtron-fe-common-lib'
19-
import ReactSelect, { components } from 'react-select'
17+
import { useState, useEffect, useContext, Fragment } from 'react'
18+
import {
19+
RadioGroup,
20+
RadioGroupItem,
21+
ConditionType,
22+
PluginType,
23+
CustomInput,
24+
PipelineFormType,
25+
SelectPicker,
26+
SelectPickerVariantType,
27+
} from '@devtron-labs/devtron-fe-common-lib'
2028
import { ReactComponent as Dropdown } from '../../assets/icons/ic-chevron-down.svg'
2129
import { ConditionContainerType } from '../ciPipeline/types'
2230
import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
2331
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
24-
import { getCustomOptionSelectionStyle } from '../v2/common/ReactSelect.utils'
25-
import { selectOperatorStyle, selectVariableStyle } from './ciPipeline.utils'
2632
import { OptionType } from '../app/types'
2733
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
2834
import { pipelineContext } from '../workflowEditor/workflowEditor'
@@ -157,7 +163,7 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
157163
setFormData(_formData)
158164
}
159165

160-
const handleConditionOnVariableChange = (selectedValue: { label: string; value: number }, index: number): void => {
166+
const handleConditionOnVariableChange = (index: number) => (selectedValue: OptionType) => {
161167
const _formData = { ...formData }
162168
_formData[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable].conditionDetails[index][
163169
'conditionOnVariable'
@@ -166,7 +172,7 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
166172
setFormData(_formData)
167173
}
168174

169-
const handleConditionOperatorChange = (selectedValue: OptionType, index: number): void => {
175+
const handleConditionOperatorChange = (index: number) => (selectedValue: OptionType): void => {
170176
setSelectedOperator(selectedValue)
171177
const _formData = { ...formData }
172178
_formData[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable].conditionDetails[index][
@@ -175,37 +181,6 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
175181
setFormData(_formData)
176182
}
177183

178-
function formatOptionLabel(option) {
179-
return (
180-
<div className="flexbox justify-space">
181-
<span className="cn-9">{option.label}</span>
182-
<span className="cn-5">{option.description}</span>
183-
</div>
184-
)
185-
}
186-
187-
const ValueContainer = (props) => {
188-
const value = props.getValue()[0]?.label
189-
return (
190-
<components.ValueContainer {...props}>
191-
<>
192-
{!props.selectProps.menuIsOpen && (value || <span className="cn-5">Select variable</span>)}
193-
{React.cloneElement(props.children[1])}
194-
</>
195-
</components.ValueContainer>
196-
)
197-
}
198-
199-
const Option = (_props) => {
200-
const { selectProps, selectOption, data } = _props
201-
selectProps.styles.option = getCustomOptionSelectionStyle({ padding: '4px 10px' })
202-
return (
203-
<div className="flex left">
204-
<components.Option {..._props}>{_props.children}</components.Option>
205-
</div>
206-
)
207-
}
208-
209184
const handleConditionCollapse = (): void => {
210185
setCollapsedSection(!collapsedSection)
211186
if (collapsedSection) {
@@ -269,14 +244,9 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
269244
return (
270245
<div>
271246
<div className="mb-10 flexbox justify-space">
272-
<span
273-
className="fw-6 fs-13 cn-9"
274-
onClick={(event) => {
275-
handleConditionCollapse()
276-
}}
277-
>
247+
<div className="fw-6 fs-13 cn-9" onClick={handleConditionCollapse}>
278248
{type} Condition
279-
</span>
249+
</div>
280250

281251
<Dropdown
282252
className="pointer"
@@ -321,13 +291,15 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
321291
formDataErrorObj[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable]
322292
?.conditionDetails?.[index]
323293
return conditionDetail.conditionType === conditionType ? (
324-
<Fragment key={`condtion__${index}`}>
325-
<div className="condition-container">
326-
<div className="tp-4 fs-13 lh-32 fw-4 dc__uppercase mr-10">
294+
<Fragment key={`condition__${index}`}>
295+
<div className="condition-container dc__gap-8">
296+
<div className="tp-4 fs-13 lh-32 fw-4 dc__uppercase">
327297
{conditionDetail.conditionType} If
328298
</div>
329-
<div className="tp-4 fs-13 fw-4 mr-10">
330-
<ReactSelect
299+
<div className="flex left">
300+
<SelectPicker
301+
inputId="condition-on-variable"
302+
classNamePrefix="condition-on-variable"
331303
autoFocus
332304
value={
333305
conditionDetail.conditionOnVariable
@@ -337,11 +309,8 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
337309
}
338310
: null
339311
}
340-
tabIndex={1}
341312
placeholder="Select variable"
342-
onChange={(selectedValue) => {
343-
handleConditionOnVariableChange(selectedValue, index)
344-
}}
313+
onChange={handleConditionOnVariableChange(index)}
345314
options={formData[activeStageName].steps[selectedTaskIndex][
346315
currentStepTypeVariable
347316
][
@@ -352,40 +321,25 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
352321
?.filter((variable) => variable.name)
353322
.map((variable) => ({ label: variable.name, value: variable.id }))}
354323
isSearchable={false}
355-
styles={selectVariableStyle}
356-
components={{
357-
IndicatorSeparator: null,
358-
Option,
359-
ValueContainer,
360-
}}
324+
variant={SelectPickerVariantType.BORDER_LESS}
361325
/>
362326
</div>
363-
<div className="fw-4 mr-10">
364-
<ReactSelect
365-
defaultValue={
366-
conditionDetail.conditionOperator
367-
? {
368-
label: conditionDetail.conditionOperator,
369-
value: conditionDetail.conditionOperator,
370-
}
371-
: selectedOperator
372-
}
373-
tabIndex={1}
374-
onChange={(selectedValue) => {
375-
handleConditionOperatorChange(selectedValue, index)
376-
}}
377-
options={operatorOptions}
378-
isSearchable={false}
379-
styles={selectOperatorStyle}
380-
formatOptionLabel={formatOptionLabel}
381-
components={{
382-
IndicatorSeparator: null,
383-
Option,
384-
ValueContainer,
385-
}}
386-
/>
387-
</div>
388-
<div className="fs-13 mr-10">
327+
<SelectPicker
328+
inputId="condition-operator"
329+
classNamePrefix="condition-operator"
330+
value={
331+
conditionDetail.conditionOperator
332+
? {
333+
label: conditionDetail.conditionOperator,
334+
value: conditionDetail.conditionOperator,
335+
}
336+
: selectedOperator
337+
}
338+
onChange={handleConditionOperatorChange(index)}
339+
options={operatorOptions}
340+
isSearchable={false}
341+
/>
342+
<div className="fs-13">
389343
<CustomInput
390344
name="conditionalValue"
391345
rootClassName="w-100 en-2 bw-1 pl-10 pr-10 pt-6 pb-6 br-4 h-32"
@@ -405,7 +359,6 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
405359
<div className="flexbox cr-5 mb-8 fw-5 fs-11 flexbox">
406360
{errorObj && !errorObj.isValid && (
407361
<>
408-
{' '}
409362
<AlertTriangle className="icon-dim-14 mr-5 ml-5 mt-2" />
410363
<span>{errorObj.message}</span>
411364
</>

‎src/components/CIPipelineN/CustomImageTags.tsx

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

17-
import React, { useState } from 'react'
17+
import { useState } from 'react'
1818
import Tippy from '@tippyjs/react'
19-
import { OptionType, Toggle } from '@devtron-labs/devtron-fe-common-lib'
20-
import ReactSelect from 'react-select'
19+
import { OptionType, SelectPicker, Toggle } from '@devtron-labs/devtron-fe-common-lib'
2120
import { CustomImageTagsType } from './CustomImageTag.type'
2221
import { ValidationRules } from '../ciPipeline/validationRules'
2322
import { CustomErrorMessage, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
2423
import { ReactComponent as Warning } from '../../assets/icons/ic-warning.svg'
2524
import { ReactComponent as Edit } from '../../assets/icons/ic-pencil.svg'
2625
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
2726
import { ReactComponent as GeneratedImage } from '../../assets/icons/ic-generated-image.svg'
28-
import { Option, DropdownIndicator, getCommonSelectStyle } from '../v2/common/ReactSelect.utils'
2927
import { getCDStageTypeSelectorValue, customTagStageTypeOptions } from './ciPipeline.utils'
3028
import '../ciPipeline/ciPipeline.scss'
3129

@@ -86,30 +84,14 @@ function CustomImageTags({
8684

8785
const renderCustomTagStageOnCD = () => {
8886
return (
89-
<div className="flex left">
90-
<ReactSelect
87+
<div className="flex left ml-8">
88+
<SelectPicker
89+
inputId="custom-image-tag-cd-stage-type"
9190
value={selectedCDStageTypeValue}
9291
options={customTagStageTypeOptions}
93-
className="select-width w-250 p-0"
9492
classNamePrefix="select-custom-image-tag-cd-stage-type"
9593
isSearchable={false}
9694
onChange={handleCustomTagStageOnCD}
97-
components={{
98-
IndicatorSeparator: null,
99-
DropdownIndicator,
100-
Option,
101-
}}
102-
styles={getCommonSelectStyle({
103-
control: (base, state) => ({
104-
...base,
105-
boxShadow: 'none',
106-
backgroundColor: 'var(--N50)',
107-
border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
108-
cursor: 'pointer',
109-
minHeight: '28px',
110-
margin: '0px 8px',
111-
}),
112-
})}
11395
/>
11496
</div>
11597
)

0 commit comments

Comments
 (0)