Skip to content

Commit 2321758

Browse files
shivani170shivani170
authored
Merge pull request #2055 from devtron-labs/feat/replace-select-picker-v3
feat: replace select picker v3
2 parents 27be43e + 6bf6b9d commit 2321758

25 files changed

+213
-451
lines changed

‎src/components/ClusterNodes/ClusterTerminal.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ import {
3939
clusterTerminalTypeUpdate,
4040
clusterTerminalUpdate,
4141
} from './clusterNodes.service'
42-
import { GroupHeading, menuComponentForImage, Option } from '../v2/common/ReactSelect.utils'
42+
import { menuComponentForImage, Option } from '../v2/common/ReactSelect.utils'
4343
import { clusterImageDescription, convertToOptionsList } from '../common'
4444
import ClusterManifest, { ManifestPopupMenu } from './ClusterManifest'
4545
import ClusterEvents from './ClusterEvents'
@@ -52,7 +52,6 @@ import {
5252
CLUSTER_TERMINAL_MESSAGING,
5353
ErrorMessageType,
5454
IMAGE_LIST,
55-
nodeSelect,
5655
POD_LINKS,
5756
PRE_FETCH_DATA_MESSAGING,
5857
SELECT_TITLE,
@@ -690,8 +689,6 @@ const ClusterTerminal = ({
690689
)
691690
}
692691

693-
const groupHeading = (props) => <GroupHeading {...props} hideClusterName />
694-
695692
const terminalTabWrapper = (terminalView: () => JSX.Element) => (
696693
<div
697694
className={`cluster-terminal__wrapper ${isFullScreen ? 'full-screen-terminal' : ''}
@@ -875,12 +872,6 @@ node-details-full-screen
875872
defaultValue: selectedNodeName,
876873
value: selectedNodeName,
877874
onChange: onChangeNodes,
878-
styles: nodeSelect,
879-
components: {
880-
IndicatorSeparator: null,
881-
GroupHeading: groupHeading,
882-
Option,
883-
},
884875
},
885876
{
886877
type: TerminalWrapperType.CREATABLE_SELECT,
@@ -931,7 +922,7 @@ node-details-full-screen
931922
customComponent: renderTabs,
932923
},
933924
{
934-
type: TerminalWrapperType.CONNCTION_SWITCH,
925+
type: TerminalWrapperType.CONNECTION_SWITCH,
935926
hideTerminalStripComponent: hideShell,
936927
classNamePrefix: 'cluster-terminal-select-shell',
937928
stopTerminalConnection,

‎src/components/app/ResourceTreeNodes.tsx

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

1717
import React, { useEffect, useState } from 'react'
18-
import { showError, PopupMenu, not, useSearchString, copyToClipboard, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
18+
import { showError, PopupMenu, not, useSearchString, copyToClipboard, ToastManager, ToastVariantType, Nodes, NodeType } from '@devtron-labs/devtron-fe-common-lib'
1919
import { useRouteMatch, useParams, generatePath, useHistory, useLocation, NavLink } from 'react-router-dom'
2020
import Tippy from '@tippyjs/react'
2121
import dots from '../../assets/icons/appstatus/ic-menu-dots.svg'
@@ -25,8 +25,6 @@ import { deleteResource } from './service'
2525
import { ReactComponent as DropDown } from '../../assets/icons/ic-dropdown-filled.svg'
2626
import {
2727
AggregatedNodes,
28-
Nodes,
29-
NodeType,
3028
NodeDetailTabs,
3129
NodeDetailTabsType,
3230
AggregationKeys,
@@ -302,10 +300,10 @@ export const NodeGroup: React.FC<{ title: AggregationKeysType; data: Object; agg
302300
aggregatedNodes,
303301
}) => {
304302
const [collapsed, setCollapsed] = useState(true)
305-
const { url, path } = useRouteMatch()
303+
const { path } = useRouteMatch()
306304
const params = useParams<{ appId: string; envId: string; kind: NodeType; tab?: NodeDetailTabsType }>()
307305
const location = useLocation()
308-
const { searchParams, queryParams } = useSearchString()
306+
const { queryParams } = useSearchString()
309307
const filterStatus = queryParams.has('status') ? queryParams.get('status') : ''
310308

311309
useEffect(() => {

‎src/components/app/details/AboutAppInfoModal.tsx

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

1717
import React, { useEffect, useState } from 'react'
18-
import { showError, Progressing, VisibleModal, InfoColourBar, SelectPicker, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
18+
import { showError, Progressing, VisibleModal, InfoColourBar, SelectPicker, ToastManager, ToastVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
1919
import { ReactComponent as Close } from '../../../assets/icons/ic-cross.svg'
2020
import { ReactComponent as Error } from '../../../assets/icons/ic-warning.svg'
2121
import { AboutAppInfoModalProps, NumberOptionType } from '../types'
@@ -65,12 +65,15 @@ export default function AboutAppInfoModal({
6565
const renderProjectSelect = (): JSX.Element => {
6666
return (
6767
<SelectPicker
68+
label="Project"
69+
required
6870
inputId="overview-project-menu-list"
6971
name="overview-project-menu-list"
7072
classNamePrefix="overview-project-menu-list"
7173
options={projectsOptions}
7274
value={selectedProject}
7375
onChange={handleProjectSelection}
76+
size={ComponentSizeType.large}
7477
/>
7578
)
7679
}
@@ -129,7 +132,6 @@ export default function AboutAppInfoModal({
129132
return (
130133
<>
131134
<div className="cn-7 p-20">
132-
<div className="fs-12 fw-4 lh-20 mb-2">Project</div>
133135
{renderProjectSelect()}
134136
{selectedProject &&
135137
appMetaInfo &&

‎src/components/externalLinks/ExternalLinks.component.tsx

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import {
3333
getMonitoringToolIcon,
3434
getParsedURL,
3535
MONITORING_TOOL_ICONS,
36-
NodeLevelSelectStyles,
3736
onImageLoadError,
3837
} from './ExternalLinks.utils'
3938
import {
@@ -43,6 +42,9 @@ import {
4342
GenericEmptyState,
4443
ConditionalWrap,
4544
GenericFilterEmptyState,
45+
SelectPicker,
46+
SelectPickerVariantType,
47+
getHandleOpenURL,
4648
} from '@devtron-labs/devtron-fe-common-lib'
4749
import './externalLinks.component.scss'
4850
import { EMPTY_STATE_STATUS } from '../../config/constantMessaging'
@@ -148,12 +150,13 @@ export const AppLevelExternalLinks = ({
148150

149151
useEffect(() => {
150152
if (externalLinks.length > 0 && monitoringTools.length > 0) {
151-
const filteredLinks = externalLinks.filter(filterAppLevelExternalLinks)
153+
const filteredLinks: ExternalLink[] = externalLinks.filter(filterAppLevelExternalLinks)
152154
setAppLevelExternalLinks(
153-
filteredLinks.map((link) => ({
155+
filteredLinks.map((link: ExternalLink) => ({
154156
label: link.name,
155157
value: link.url,
156158
icon: getMonitoringToolIcon(monitoringTools, link.monitoringToolId),
159+
startIcon: getExternalLinkIcon(getMonitoringToolIcon(monitoringTools, link.monitoringToolId)),
157160
description: link.description,
158161
})),
159162
)
@@ -182,7 +185,7 @@ export const AppLevelExternalLinks = ({
182185
>
183186
<a
184187
key={linkOption.label}
185-
href={getParsedURL(true, linkOption.value, details)}
188+
href={getParsedURL(true, linkOption.value.toString(), details)}
186189
target="_blank"
187190
className="external-link-chip flex left bc-n50 h-24 br-4 cn-7 dc__no-decor dc__border"
188191
rel="noreferrer"
@@ -229,6 +232,10 @@ export const AppLevelExternalLinks = ({
229232
)
230233
}
231234

235+
export const getExternalLinkIcon = (link) => {
236+
return <img src={link} alt={link} onError={onImageLoadError} />
237+
}
238+
232239
export const NodeLevelExternalLinks = ({
233240
appDetails,
234241
helmAppDetails,
@@ -239,59 +246,22 @@ export const NodeLevelExternalLinks = ({
239246
}: NodeLevelExternalLinksType): JSX.Element | null => {
240247
const details = appDetails || helmAppDetails
241248

242-
const Option = (props: any): JSX.Element => {
243-
if (!details) {
244-
return null
245-
}
246-
247-
const { data } = props
248-
249-
return (
250-
<ConditionalWrap
251-
condition={!!data.description}
252-
wrap={(children) => (
253-
<TippyCustomized
254-
theme={TippyTheme.white}
255-
className="w-300"
256-
placement="left"
257-
iconPath={data.icon}
258-
heading={data.label}
259-
infoText={data.description}
260-
>
261-
<div>{children}</div>
262-
</TippyCustomized>
263-
)}
264-
>
265-
<a
266-
key={data.label}
267-
href={getParsedURL(false, data.value, details, podName, containerName)}
268-
target="_blank"
269-
className="external-link-option h-32 flex left br-4 dc__no-decor cn-9"
270-
rel="noreferrer"
271-
>
272-
<img className="icon-dim-20 mr-12" src={data.icon} alt={data.label} onError={onImageLoadError} />
273-
<span className="dc__ellipsis-right">{data.label}</span>
274-
</a>
275-
</ConditionalWrap>
276-
)
249+
const onClickExternalLink = (link: OptionTypeWithIcon) => {
250+
getHandleOpenURL(getParsedURL(false, link.value.toString(), details, podName, containerName))()
277251
}
278252

279253
return (
280254
nodeLevelExternalLinks.length > 0 && (
281255
<div className={`node-level__external-links flex column${addExtraSpace ? ' mr-4' : ''}`}>
282-
<ReactSelect
283-
placeholder={`${nodeLevelExternalLinks.length} Link${nodeLevelExternalLinks.length > 1 ? 's' : ''}`}
256+
<SelectPicker
257+
inputId={`${podName}-external-links`}
284258
name={`${podName}-external-links`}
259+
placeholder={`${nodeLevelExternalLinks.length} Link${nodeLevelExternalLinks.length > 1 ? 's' : ''}`}
285260
options={nodeLevelExternalLinks}
286-
isMulti={false}
287261
isSearchable={false}
288-
closeMenuOnSelect
289-
components={{
290-
IndicatorSeparator: null,
291-
ClearIndicator: null,
292-
Option,
293-
}}
294-
styles={NodeLevelSelectStyles}
262+
shouldMenuAlignRight
263+
variant={SelectPickerVariantType.BORDER_LESS}
264+
onChange={onClickExternalLink}
295265
/>
296266
</div>
297267
)

‎src/components/externalLinks/ExternalLinks.tsx

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

17-
import React, { Fragment, useEffect, useState } from 'react'
17+
import { Fragment, useEffect, useState } from 'react'
1818
import {
1919
showError,
2020
Progressing,

‎src/components/externalLinks/ExternalLinks.type.ts

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

17-
import React from 'react'
17+
import React, { ReactElement } from 'react'
1818
import { ResponseType } from '@devtron-labs/devtron-fe-common-lib'
1919
import { AppDetails } from '../app/types'
2020
import { ActionResponse } from '../external-apps/ExternalAppService'
@@ -23,10 +23,11 @@ import { UserRoleType } from '../../Pages/GlobalConfigurations/Authorization/con
2323

2424
export interface OptionTypeWithIcon {
2525
label: string
26-
value: any
27-
icon: string
26+
value: number | string
27+
startIcon?: ReactElement
2828
category?: number
2929
description?: string
30+
icon?: string
3031
}
3132

3233
export interface IdentifierOptionType {

‎src/components/gitProvider/GitProvider.tsx

Lines changed: 31 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
ErrorScreenNotAuthorized,
2323
InfoColourBar,
2424
VisibleModal,
25-
multiSelectStyles,
2625
useEffectAfterMount,
2726
stopPropagation,
2827
useAsync,
@@ -32,9 +31,10 @@ import {
3231
DeleteComponent,
3332
ToastVariantType,
3433
ToastManager,
34+
SelectPicker,
35+
ComponentSizeType,
3536
} from '@devtron-labs/devtron-fe-common-lib'
3637
import Tippy from '@tippyjs/react'
37-
import ReactSelect, { components } from 'react-select'
3838
import {
3939
getCertificateAndKeyDependencyError,
4040
getIsTLSDataPresent,
@@ -53,8 +53,6 @@ import { getGitHostList, getGitProviderList } from '../../services/service'
5353
import { saveGitHost, saveGitProviderConfig, updateGitProviderConfig, deleteGitProvider } from './gitProvider.service'
5454
import { List } from '../globalConfigurations/GlobalConfiguration'
5555
import { HEADER_TEXT } from '../../config'
56-
import { DropdownIndicator } from './gitProvider.util'
57-
import { Option } from '../v2/common/ReactSelect.utils'
5856
import './gitProvider.scss'
5957
import { GitHostConfigModal } from './AddGitHostConfigModal'
6058
import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
@@ -618,20 +616,19 @@ const GitForm = ({
618616
onSave()
619617
}
620618

621-
const MenuList = (props) => {
619+
const onClickAddGitAccountHandler = (): void => {
620+
setGitProviderConfigModal(true)
621+
toggleCollapse(false)
622+
}
623+
624+
const renderGitHostBottom = () => {
622625
return (
623-
<components.MenuList {...props}>
624-
{props.children}
625-
<div
626-
className="flex left pl-10 pt-8 pb-8 cb-5 cursor bcn-0 dc__react-select__bottom dc__border-top "
627-
onClick={(selected) => {
628-
setGitProviderConfigModal(true)
629-
toggleCollapse(false)
630-
}}
631-
>
632-
<Add className="icon-dim-20 mr-5 fs-14 fcb-5 mr-12 dc__vertical-align-bottom " /> Add Git Host
633-
</div>
634-
</components.MenuList>
626+
<button
627+
className="flex left dc__gap-8 px-10 py-8 cb-5 cursor bcn-0 dc__react-select__bottom dc__border-top dc__transparent fw-6"
628+
onClick={onClickAddGitAccountHandler}
629+
>
630+
<Add className="icon-dim-20 fcb-5 dc__vertical-align-bottom" /> <span>Add Git Host</span>
631+
</button>
635632
)
636633
}
637634

@@ -806,42 +803,24 @@ const GitForm = ({
806803
isRequiredField
807804
/>
808805
</div>
809-
<div className="form__row form__row--two-third">
806+
<div className="form__row--two-third mb-16">
810807
<div>
811-
<div>
812-
<label className="form__label dc__required-field">Git host</label>
813-
<ReactSelect
814-
name="host"
815-
value={gitHost.value}
816-
className="react-select--height-44 fs-13 bcn-0 mb-12"
817-
classNamePrefix="select-git-account-host"
818-
placeholder="Select git host"
819-
isMulti={false}
820-
isSearchable
821-
isClearable={false}
822-
options={hostListOption}
823-
styles={{
824-
...multiSelectStyles,
825-
menuList: (base) => {
826-
return {
827-
...base,
828-
position: 'relative',
829-
paddingBottom: '0px',
830-
maxHeight: '176px',
831-
}
832-
},
833-
}}
834-
components={{
835-
IndicatorSeparator: null,
836-
DropdownIndicator,
837-
MenuList,
838-
Option,
839-
}}
840-
onChange={(e) => handleGithostChange(e)}
841-
isDisabled={gitHostId}
842-
/>
843-
</div>
844-
808+
<SelectPicker
809+
label="Git host"
810+
required
811+
inputId="git-account-host-select"
812+
name="host"
813+
value={gitHost.value}
814+
classNamePrefix="select-git-account-host"
815+
placeholder="Select git host"
816+
isSearchable
817+
isClearable={false}
818+
options={hostListOption}
819+
renderMenuListFooter={renderGitHostBottom}
820+
onChange={(e) => handleGithostChange(e)}
821+
isDisabled={gitHostId}
822+
size={ComponentSizeType.large}
823+
/>
845824
<div className="cr-5 fs-11">{gitHost.error}</div>
846825
</div>
847826
<CustomInput

0 commit comments

Comments
 (0)