Skip to content

Commit d1f5f71

Browse files
shivani170shivani170
authored
Merge pull request #328 from devtron-labs/feat/replace-select-picker
feat: replace select picker
2 parents a5616fa + a55a58c commit d1f5f71

File tree

17 files changed

+161
-359
lines changed

17 files changed

+161
-359
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "4.0.1",
3+
"version": "4.0.2",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/ChartVersionAndTypeSelector.tsx

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

17-
import React, { useEffect, useState } from 'react'
18-
import ReactSelect from 'react-select'
17+
import { useEffect, useState } from 'react'
1918
import { fetchChartTemplateVersions } from './Common.service'
2019
import { ChartVersionAndTypeSelectorProps, DeploymentChartVersionType } from './Types'
21-
import { customStyles, getFilteredChartVersions, showError } from './Helper'
20+
import { getFilteredChartVersions, showError } from './Helper'
21+
import { SelectPicker, SelectPickerVariantType } from '@Shared/Components'
2222

2323
// @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
2424
// when the Code Editor is moved to the fe-common-lib
@@ -71,20 +71,23 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
7171
<div className="flex">
7272
<div className="chart-type-options flex" data-testid="chart-type-options">
7373
<span className="cn-7 mr-4">Chart Type</span>
74-
<ReactSelect
74+
<SelectPicker
75+
inputId='chart-type-select'
76+
label='Chart Type'
7577
value={selectedChartType ?? chartTypeOptions[0]}
7678
options={chartTypeOptions}
7779
onChange={handleChartTypeChange}
78-
styles={customStyles}
80+
variant={SelectPickerVariantType.BORDER_LESS}
7981
/>
8082
</div>
8183
<div className="chart-version-options flex" data-testid="chart-version-options">
82-
<span className="cn-7 mr-4">Chart Version</span>
83-
<ReactSelect
84+
<span className="cn-7 mr-4">Chart Version</span>
85+
<SelectPicker
86+
inputId='chart-version-select'
8487
value={selectedChartVersion ?? chartVersionOptions[0]}
8588
options={chartVersionOptions}
8689
onChange={handleChartVersionChange}
87-
styles={customStyles}
90+
variant={SelectPickerVariantType.BORDER_LESS}
8891
/>
8992
</div>
9093
</div>

‎src/Common/RJSF/widgets/Select.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const DropdownIndicator = (props) => (
3535
</components.DropdownIndicator>
3636
)
3737

38-
export const Select = (props: WidgetProps) => {
38+
export const SelectWidget = (props: WidgetProps) => {
3939
const {
4040
id,
4141
multiple = false,

‎src/Common/RJSF/widgets/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
*/
1616

1717
export { Checkbox as CheckboxWidget } from './Checkbox'
18-
export { Select as SelectWidget } from './Select'
18+
export { SelectWidget } from './Select'

‎src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
*/
1616

1717
import { FormEvent, FunctionComponent, useMemo } from 'react'
18-
import ReactSelect from 'react-select'
18+
import { SelectPicker } from '@Shared/Components/SelectPicker'
19+
import { ComponentSizeType } from '@Shared/constants'
1920
import { BuildInfraFormActionProps } from './types'
2021
import { OptionType } from '../../../Common'
21-
import { unitSelectorStyles } from './utils'
2222
import { BUILD_INFRA_INPUT_CONSTRAINTS } from './constants'
2323
import { ReactComponent as ErrorIcon } from '../../../Assets/Icon/ic-warning.svg'
2424

@@ -93,19 +93,16 @@ const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
9393
</div>
9494

9595
{profileUnitsMap && (
96-
<ReactSelect
96+
<SelectPicker
97+
inputId={`${actionType}-unit`}
9798
classNamePrefix="unit-dropdown"
9899
name={`${actionType}-unit`}
99-
className="bcn-0 dc__mxw-120"
100100
options={unitOptions}
101101
value={currentUnit}
102102
onChange={handleUnitChange}
103103
isSearchable={false}
104-
components={{
105-
IndicatorSeparator: null,
106-
ClearIndicator: null,
107-
}}
108-
styles={unitSelectorStyles()}
104+
size={ComponentSizeType.large}
105+
shouldMenuAlignRight
109106
/>
110107
)}
111108
</div>

‎src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryHeader.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,15 @@
1515
*/
1616

1717
import { useEffect, useState } from 'react'
18-
import ReactSelect from 'react-select'
1918
import { useHistory, useRouteMatch, useParams, NavLink } from 'react-router-dom'
2019
import moment from 'moment'
2120
import Tippy from '@tippyjs/react'
21+
import { SelectPicker } from '@Shared/Components/SelectPicker'
2222
import { DATE_TIME_FORMATS, URLS, showError } from '../../../../Common'
2323
import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
2424
import { ReactComponent as LeftIcon } from '../../../../Assets/Icon/ic-arrow-backward.svg'
2525
import { DeploymentTemplateOptions, DeploymentHistoryParamsType, CompareWithBaseConfiguration } from './types'
2626
import { getDeploymentDiffSelector } from '../service'
27-
import { dropdownStyles, Option } from './utils'
2827

2928
const DeploymentHistoryHeader = ({
3029
selectedDeploymentTemplate,
@@ -118,17 +117,13 @@ const DeploymentHistoryHeader = ({
118117
</div>
119118
<div style={{ minWidth: '200px' }}>
120119
{deploymentTemplateOption.length > 0 ? (
121-
<ReactSelect
120+
<SelectPicker
121+
inputId="compare-with-select"
122122
placeholder="Select Timestamp"
123123
classNamePrefix="configuration-compare-with-dropdown"
124124
isSearchable={false}
125-
styles={dropdownStyles}
126125
onChange={onClickTimeStampSelector}
127126
options={deploymentTemplateOption}
128-
components={{
129-
IndicatorSeparator: null,
130-
Option,
131-
}}
132127
value={selectedDeploymentTemplate || deploymentTemplateOption[0]}
133128
/>
134129
) : (

‎src/Shared/Components/CICDHistory/DeploymentHistoryDiff/utils.tsx

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎src/Shared/Components/DatePicker/DateTimePicker.tsx

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,22 @@
1515
*/
1616

1717
import { SingleDatePicker } from 'react-dates'
18-
import ReactSelect, { SelectInstance } from 'react-select'
18+
import { SelectInstance } from 'react-select'
1919
import moment from 'moment'
2020
import CustomizableCalendarDay from 'react-dates/esm/components/CustomizableCalendarDay'
2121
import { useState } from 'react'
22-
import {
23-
DEFAULT_TIME_OPTIONS,
24-
DropdownIndicatorTimePicker,
25-
getTimePickerStyles,
26-
getTimeValue,
27-
updateDate,
28-
updateTime,
29-
} from './utils'
22+
import { ReactComponent as ClockIcon } from '@Icons/ic-clock.svg'
23+
import { ReactComponent as CalendarIcon } from '@Icons/ic-calendar.svg'
24+
import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
25+
import { ComponentSizeType } from '@Shared/constants'
26+
import { DEFAULT_TIME_OPTIONS, getTimeValue, updateDate, updateTime } from './utils'
3027
import { DateTimePickerProps } from './types'
3128
import { DATE_PICKER_IDS, DATE_PICKER_PLACEHOLDER, customDayStyles } from './constants'
3229
import './datePicker.scss'
33-
import { ReactComponent as CalendarIcon } from '../../../Assets/Icon/ic-calendar.svg'
34-
import { ReactComponent as ICWarning } from '../../../Assets/Icon/ic-warning.svg'
3530
import { DATE_TIME_FORMATS } from '../../../Common'
3631
import 'react-dates/initialize'
3732
import 'react-dates/lib/css/_datepicker.css'
38-
39-
const timePickerStyles = getTimePickerStyles()
33+
import { SelectPicker } from '../SelectPicker'
4034

4135
const DateTimePicker = ({
4236
date: dateObject = new Date(),
@@ -66,7 +60,7 @@ const DateTimePicker = ({
6660
}
6761

6862
const handleTimeChange = (option) => {
69-
onChange(updateTime(dateObject, option.value))
63+
onChange(updateTime(dateObject, option.value).value)
7064
}
7165

7266
const today = moment()
@@ -103,23 +97,21 @@ const DateTimePicker = ({
10397
/>
10498
{!hideTimeSelect && (
10599
<div className="dc__no-shrink">
106-
<ReactSelect
100+
<SelectPicker
101+
inputId={DATE_PICKER_IDS.TIME}
107102
placeholder={DATE_PICKER_PLACEHOLDER.DEFAULT_TIME}
108103
options={DEFAULT_TIME_OPTIONS}
109-
menuPlacement="auto"
110-
menuPosition="fixed"
111-
components={{
112-
IndicatorSeparator: null,
113-
ClearIndicator: null,
114-
DropdownIndicator: DropdownIndicatorTimePicker,
115-
}}
104+
icon={<ClockIcon className="icon-dim-20 fcn-6" />}
116105
isSearchable={false}
117-
styles={timePickerStyles}
106+
hideSelectedOptions
118107
isDisabled={disabled}
119108
{...timePickerProps}
120109
value={selectedTimeOption}
121110
onChange={handleTimeChange}
122111
data-testid={dataTestIdForTime}
112+
menuSize={ComponentSizeType.xs}
113+
menuPosition="absolute"
114+
size={ComponentSizeType.large}
123115
/>
124116
</div>
125117
)}

‎src/Shared/Components/DatePicker/MonthlySelect.tsx

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

17-
import ReactSelect from 'react-select'
18-
import { MONTHLY_DATE_OPTIONS, getTimePickerStyles } from './utils'
19-
import { DropdownIndicator } from '../../../Common'
17+
import { MONTHLY_DATE_OPTIONS } from './utils'
2018
import { MonthlySelectProps } from './types'
2119
import { DATE_PICKER_IDS } from './constants'
22-
23-
const timePickerStyles = getTimePickerStyles()
20+
import { SelectPicker } from '../SelectPicker'
2421

2522
export const MonthlySelect = ({
2623
selectedMonthlyDate,
2724
onChange,
2825
dataTestId = DATE_PICKER_IDS.MONTH,
2926
}: MonthlySelectProps) => (
3027
<div className="dc__no-shrink">
31-
<ReactSelect
28+
<SelectPicker
29+
inputId={DATE_PICKER_IDS.MONTH}
3230
placeholder="Day 1"
3331
options={MONTHLY_DATE_OPTIONS}
34-
menuPlacement="auto"
35-
components={{
36-
IndicatorSeparator: null,
37-
ClearIndicator: null,
38-
DropdownIndicator,
39-
}}
4032
isSearchable={false}
41-
styles={timePickerStyles}
4233
value={selectedMonthlyDate}
4334
onChange={onChange}
4435
data-testid={dataTestId}
45-
menuPosition="fixed"
4636
/>
4737
</div>
4838
)

0 commit comments

Comments
 (0)