Skip to content

Commit 1b0853b

Browse files
eshankvaisheshankvaish
authored
Merge pull request #2587 from devtron-labs/feat/select-picker-enhancements
feat: enhancements for select picker
2 parents 92b3356 + f4fa949 commit 1b0853b

File tree

15 files changed

+206
-155
lines changed

15 files changed

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

‎src/components/CIPipelineN/TaskTypeDetailComponent.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -209,12 +209,6 @@ export const TaskTypeDetailComponent = () => {
209209
}
210210
}
211211

212-
const renderMenuListFooter = () => (
213-
<div className="cn-5 pl-12 pt-4 pb-4 dc__italic-font-style">
214-
Type to enter a custom value. Press Enter to accept.
215-
</div>
216-
)
217-
218212
const renderContainerScript = () => {
219213
const errorObj = formDataErrorObj[activeStageName].steps[selectedTaskIndex].inlineStepDetail
220214

@@ -237,7 +231,10 @@ export const TaskTypeDetailComponent = () => {
237231
onBlur={handleCreatableBlur}
238232
onKeyDown={handleKeyDown}
239233
isCreatable
240-
renderMenuListFooter={renderMenuListFooter}
234+
menuListFooterConfig={{
235+
type: 'text',
236+
value: 'Type to enter a custom value. Press Enter to accept.',
237+
}}
241238
/>
242239
{selectedContainerImage?.label && (
243240
<div className="flex icon-dim-32 dc__position-abs dc__top-0 dc__right-20">

‎src/components/ResourceBrowser/ResourceList/ColumnSelector.tsx

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,7 @@
1616

1717
import { useState, useMemo, useRef } from 'react'
1818
import { MultiValue, SelectInstance } from 'react-select'
19-
import {
20-
Button,
21-
ButtonVariantType,
22-
Icon,
23-
SelectPicker,
24-
SelectPickerOptionType,
25-
} from '@devtron-labs/devtron-fe-common-lib'
19+
import { ButtonVariantType, Icon, SelectPicker, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
2620
import { OPTIONAL_NODE_LIST_HEADERS } from '../Constants'
2721
import { ColumnSelectorType } from '../Types'
2822
import { saveAppliedColumnsInLocalStorage } from './utils'
@@ -68,18 +62,6 @@ const ColumnSelector = ({ setVisibleColumns, visibleColumns }: ColumnSelectorTyp
6862
setVisibleColumns(newVisibleColumns)
6963
}
7064

71-
const renderMenuListFooter = () => (
72-
<div className="bg__primary p-8 dc__border-top-n1 w-100">
73-
<Button
74-
text="Apply"
75-
onClick={handleApplySelectedColumns}
76-
variant={ButtonVariantType.primary}
77-
fullWidth
78-
dataTestId="apply-column-selector"
79-
/>
80-
</div>
81-
)
82-
8365
return (
8466
<SelectPicker
8567
selectRef={selectRef}
@@ -98,7 +80,15 @@ const ColumnSelector = ({ setVisibleColumns, visibleColumns }: ColumnSelectorTyp
9880
placeholder="Column"
9981
options={columnOptions}
10082
value={selectedColumns}
101-
renderMenuListFooter={renderMenuListFooter}
83+
menuListFooterConfig={{
84+
type: 'button',
85+
buttonProps: {
86+
text: 'Apply',
87+
onClick: handleApplySelectedColumns,
88+
variant: ButtonVariantType.primary,
89+
dataTestId: 'apply-column-selector',
90+
},
91+
}}
10292
isClearable={false}
10393
shouldMenuAlignRight
10494
/>

‎src/components/ciConfig/CIContainerRegistryConfig.tsx

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ import {
2525
RegistryIcon,
2626
SelectPicker,
2727
URLS as CommonURLs,
28+
ButtonVariantType,
29+
ButtonComponentType,
2830
} from '@devtron-labs/devtron-fe-common-lib'
2931
import { ReactComponent as ArrowIcon } from '../../assets/icons/ic-arrow-left.svg'
3032
import { ReactComponent as InfoIcon } from '../../assets/icons/info-filled.svg'
31-
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
3233
import { Routes, URLS } from '../../config'
3334
import { _multiSelectStyles } from './CIConfig.utils'
3435
import { CIContainerRegistryConfigProps } from './types'
@@ -118,17 +119,6 @@ export default function CIContainerRegistryConfig({
118119
}
119120
}
120121

121-
const renderContainerRegistryMenuList = (): JSX.Element => (
122-
<NavLink
123-
to={URLS.GLOBAL_CONFIG_DOCKER}
124-
className="flex left dc__gap-8 dc__border-top bg__primary px-8 py-10 cb-5 dc__block fw-6 fs-13 lh-20 anchor cursor dc__no-decor dc__hover-n50"
125-
data-testid="add-container-registry-button"
126-
>
127-
<Add className="icon-dim-20 dc__no-shrink fcb-5" />
128-
<span>Add Container Registry</span>
129-
</NavLink>
130-
)
131-
132122
return (
133123
<div className={isCreateAppView ? '' : 'white-card white-card__docker-config dc__position-rel mb-12'}>
134124
{!isCreateAppView && (
@@ -157,7 +147,23 @@ export default function CIContainerRegistryConfig({
157147
options={getContainerRegistryOptions()}
158148
value={selectedRegistry ? getCustomRegistryOption(selectedRegistry) : null}
159149
required
160-
renderMenuListFooter={configOverrideView ? undefined : renderContainerRegistryMenuList}
150+
menuListFooterConfig={
151+
configOverrideView
152+
? undefined
153+
: {
154+
type: 'button',
155+
buttonProps: {
156+
text: 'Add Container Registry',
157+
variant: ButtonVariantType.borderLess,
158+
component: ButtonComponentType.link,
159+
dataTestId: 'add-container-registry-button',
160+
linkProps: {
161+
to: URLS.GLOBAL_CONFIG_DOCKER,
162+
},
163+
startIcon: <Icon name="ic-add" color={null} />
164+
},
165+
}
166+
}
161167
onChange={handleRegistryChange}
162168
size={ComponentSizeType.large}
163169
/>

‎src/components/ciConfig/TargetPlatformSelector.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,11 @@
1616

1717
import { SelectPicker, SelectPickerProps } from '@devtron-labs/devtron-fe-common-lib'
1818
import { ReactComponent as WarningIcon } from '@Icons/ic-warning.svg'
19-
import { ReactComponent as ICInfoOutlineGrey } from '@Icons/ic-info-outline-grey.svg'
2019
import { DockerConfigOverrideKeys } from '../ciPipeline/types'
2120
import { TARGET_PLATFORM_LIST } from './CIConfig.utils'
2221
import { SelectorMessaging } from './ciConfigConstant'
2322
import { TargetPlatformSelectorType } from './types'
2423

25-
const renderMenuListFooter = () => (
26-
<div className="cn-5 px-12 py-4 dc__italic-font-style flex left dc__gap-6">
27-
<ICInfoOutlineGrey className="icon-dim-16 icon-n6" />
28-
{SelectorMessaging.TARGET_SELECTOR_MENU}
29-
</div>
30-
)
31-
3224
const TargetPlatformSelector = ({
3325
allowOverride,
3426
selectedTargetPlatforms,
@@ -126,7 +118,10 @@ const TargetPlatformSelector = ({
126118
inputId="target-platform__select"
127119
onChange={handlePlatformChange}
128120
hideSelectedOptions={false}
129-
renderMenuListFooter={renderMenuListFooter}
121+
menuListFooterConfig={{
122+
type: 'text',
123+
value: SelectorMessaging.TARGET_SELECTOR_MENU,
124+
}}
130125
onBlur={handleCreatableBlur}
131126
/>
132127
)}

‎src/components/ciPipeline/SourceMaterials.tsx

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import React, { useState } from 'react'
18-
import { useLocation } from 'react-router-dom'
18+
import { Link, useLocation } from 'react-router-dom'
1919
import { SourceTypeMap, URLS } from '../../config'
2020
import git from '../../assets/icons/git/git.svg'
2121
import { ReactComponent as Info } from '../../assets/icons/ic-info-outline-purple.svg'
@@ -28,6 +28,7 @@ import {
2828
ConditionalWrap,
2929
SelectPicker,
3030
ComponentSizeType,
31+
SelectPickerProps,
3132
} from '@devtron-labs/devtron-fe-common-lib'
3233
import Tippy from '@tippyjs/react'
3334

@@ -44,53 +45,57 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = (props) => {
4445
_materials.push(_webhookTypeMaterial)
4546
}
4647

47-
const renderInfoBarForMultiGitWebhook = () => {
48-
return (
49-
<InfoColourBar
50-
message="If you need webhook based CI for apps with multiple code sources,"
51-
classname="info_bar question-bar ml-8 mb-8 mr-8"
52-
Icon={Info}
53-
redirectLink="https://github.com/devtron-labs/devtron/issues"
54-
linkText="Create a github issue"
55-
/>
56-
)
57-
}
48+
const getMenuListFooterConfig = (): SelectPickerProps['menuListFooterConfig'] => {
49+
const _isMultiGit = props.includeWebhookEvents && isMultiGit
50+
const _isSingleGit = props.includeWebhookEvents && !isMultiGit
5851

59-
const renderInfoBarForSingleGitWebhookAndNoHostUrl = () => {
60-
return (
61-
<InfoColourBar
62-
message="Select git host for this git account to view all supported options."
63-
classname="info_bar question-bar ml-8 mb-8 mr-8"
64-
Icon={Info}
65-
redirectLink={URLS.GLOBAL_CONFIG_GIT}
66-
linkText="Select git host"
67-
internalLink
68-
/>
69-
)
70-
}
52+
let value: SelectPickerProps['menuListFooterConfig']['value'] = null
7153

72-
const renderInfoBarForSingleGitWebhook = () => {
73-
return (
74-
<InfoColourBar
75-
message="If you want to trigger CI using any other mechanism,"
76-
classname="info_bar question-bar ml-8 mb-8 mr-8"
77-
Icon={Info}
78-
redirectLink="https://github.com/devtron-labs/devtron/issues"
79-
linkText="Create a github issue"
80-
/>
81-
)
82-
}
54+
if (_isMultiGit) {
55+
value = (
56+
<span>
57+
If you need webhook based CI for apps with multiple code sources,&nbsp;
58+
<a
59+
className="anchor"
60+
rel="noreferrer"
61+
href="https://github.com/devtron-labs/devtron/issues"
62+
target="_blank"
63+
>
64+
Create a GitHub issue
65+
</a>
66+
</span>
67+
)
68+
} else if (_isSingleGit) {
69+
if (!_materials[0].gitHostId) {
70+
value = (
71+
<span>
72+
Select git host for this git account to view all supported options.&nbsp;
73+
<Link className="anchor" to={URLS.GLOBAL_CONFIG_GIT}>
74+
Select git host
75+
</Link>
76+
</span>
77+
)
78+
} else if (_materials[0].gitHostId > 0) {
79+
value = (
80+
<span>
81+
If you want to trigger CI using any other mechanism,&nbsp;
82+
<a
83+
className="anchor"
84+
rel="noreferrer"
85+
href="https://github.com/devtron-labs/devtron/issues"
86+
target="_blank"
87+
>
88+
Create a GitHub issue
89+
</a>
90+
</span>
91+
)
92+
}
93+
}
8394

84-
const renderSourceMaterialDropdownFooter = (): JSX.Element => {
85-
const _isMultiGit = props.includeWebhookEvents && isMultiGit
86-
const _isSingleGit = props.includeWebhookEvents && !isMultiGit
87-
return (
88-
<>
89-
{_isMultiGit && renderInfoBarForMultiGitWebhook()}
90-
{_isSingleGit && !_materials[0].gitHostId && renderInfoBarForSingleGitWebhookAndNoHostUrl()}
91-
{_isSingleGit && _materials[0].gitHostId > 0 && renderInfoBarForSingleGitWebhook()}
92-
</>
93-
)
95+
return {
96+
type: 'text',
97+
value,
98+
}
9499
}
95100

96101
async function onBlur() {
@@ -176,7 +181,7 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = (props) => {
176181
onChange={(selected) =>
177182
props?.selectSourceType(selected, mat.gitMaterialId)
178183
}
179-
renderMenuListFooter={renderSourceMaterialDropdownFooter}
184+
menuListFooterConfig={getMenuListFooterConfig()}
180185
isClearable={false}
181186
size={ComponentSizeType.large}
182187
getOptionValue={(option) => `${option.value}-${option.label}`}

‎src/components/gitProvider/GitProvider.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import {
4040
DeleteConfirmationModal,
4141
Textarea,
4242
PasswordField,
43+
Icon,
4344
} from '@devtron-labs/devtron-fe-common-lib'
4445
import Tippy from '@tippyjs/react'
4546
import {
@@ -628,17 +629,6 @@ const GitForm = ({
628629
toggleCollapse(false)
629630
}
630631

631-
const renderGitHostBottom = () => {
632-
return (
633-
<button
634-
className="flex left dc__gap-8 px-10 py-8 cb-5 cursor bg__primary dc__react-select__bottom dc__border-top dc__transparent fw-6"
635-
onClick={onClickAddGitAccountHandler}
636-
>
637-
<Add className="icon-dim-20 fcb-5 dc__vertical-align-bottom" /> <span>Add Git Host</span>
638-
</button>
639-
)
640-
}
641-
642632
const TippyMessage = {
643633
authMessage: 'Authentication type cannot be switched from HTTPS to SSH or vice versa.',
644634
}
@@ -833,7 +823,16 @@ const GitForm = ({
833823
isSearchable
834824
isClearable={false}
835825
options={hostListOption}
836-
renderMenuListFooter={renderGitHostBottom}
826+
menuListFooterConfig={{
827+
type: 'button',
828+
buttonProps: {
829+
text: 'Add Git Host',
830+
onClick: onClickAddGitAccountHandler,
831+
variant: ButtonVariantType.borderLess,
832+
dataTestId: 'add-git-host',
833+
startIcon: <Icon name="ic-add" color={null} />
834+
},
835+
}}
837836
onChange={(e) => handleGithostChange(e)}
838837
isDisabled={gitHostId}
839838
size={ComponentSizeType.large}

‎src/components/material/MaterialView.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@ import {
3535
DeleteConfirmationModal,
3636
Textarea,
3737
ERROR_STATUS_CODE,
38+
ButtonComponentType,
39+
Icon,
3840
} from '@devtron-labs/devtron-fe-common-lib'
39-
import { NavLink } from 'react-router-dom'
4041
import Tippy from '@tippyjs/react'
4142
import { MaterialViewProps, MaterialViewState } from './material.types'
4243
import { URLS } from '../../config'
@@ -612,16 +613,6 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
612613
this.props.handleProviderChange(selected, this.props.material.url)
613614
}
614615

615-
renderGitProviderOptionsFooter = () => (
616-
<NavLink
617-
to={URLS.GLOBAL_CONFIG_GIT}
618-
className="flex left dc__gap-8 dc__border-top bg__primary px-8 py-10 cb-5 dc__block fw-6 fs-13 lh-20 anchor cursor dc__no-decor dc__hover-n50"
619-
>
620-
<Add className="icon-dim-20 dc__no-shrink fcb-5" data-testid="add-git-account-option" />
621-
<span>Add Git Account</span>
622-
</NavLink>
623-
)
624-
625616
onDelete = async () => {
626617
const deletePayload = {
627618
appId: this.props.appId,
@@ -686,7 +677,19 @@ export class MaterialView extends Component<MaterialViewProps, MaterialViewState
686677
value={selectedGitProviderOption}
687678
required
688679
error={this.props.isError.gitProvider}
689-
renderMenuListFooter={this.renderGitProviderOptionsFooter}
680+
menuListFooterConfig={{
681+
type: 'button',
682+
buttonProps: {
683+
component: ButtonComponentType.link,
684+
variant: ButtonVariantType.borderLess,
685+
linkProps: {
686+
to: URLS.GLOBAL_CONFIG_GIT,
687+
},
688+
text: 'Add Git Account',
689+
startIcon: <Icon name="ic-add" color={null} />,
690+
dataTestId: 'add-git-account-option',
691+
},
692+
}}
690693
onChange={this.handleGitProviderChange}
691694
name="material-view__select-project"
692695
size={ComponentSizeType.large}

0 commit comments

Comments
 (0)