Merge branch 'develop' into fix/restart-error-handling

Author: shivani170

src/components/ClusterNodes/ClusterTerminal.tsx

@@ -39,7 +39,7 @@ import {
     clusterTerminalTypeUpdate,
     clusterTerminalUpdate,
 } from './clusterNodes.service'
-import { GroupHeading, menuComponentForImage, Option } from '../v2/common/ReactSelect.utils'
+import { menuComponentForImage, Option } from '../v2/common/ReactSelect.utils'
 import { clusterImageDescription, convertToOptionsList } from '../common'
 import ClusterManifest, { ManifestPopupMenu } from './ClusterManifest'
 import ClusterEvents from './ClusterEvents'
@@ -52,7 +52,6 @@ import {
     CLUSTER_TERMINAL_MESSAGING,
     ErrorMessageType,
     IMAGE_LIST,
-    nodeSelect,
     POD_LINKS,
     PRE_FETCH_DATA_MESSAGING,
     SELECT_TITLE,
@@ -690,8 +689,6 @@ const ClusterTerminal = ({
         )
     }
 
-    const groupHeading = (props) => <GroupHeading {...props} hideClusterName />
-
     const terminalTabWrapper = (terminalView: () => JSX.Element) => (
         <div
             className={`cluster-terminal__wrapper ${isFullScreen ? 'full-screen-terminal' : ''}
@@ -875,12 +872,6 @@ node-details-full-screen
                 defaultValue: selectedNodeName,
                 value: selectedNodeName,
                 onChange: onChangeNodes,
-                styles: nodeSelect,
-                components: {
-                    IndicatorSeparator: null,
-                    GroupHeading: groupHeading,
-                    Option,
-                },
             },
             {
                 type: TerminalWrapperType.CREATABLE_SELECT,
@@ -931,7 +922,7 @@ node-details-full-screen
                 customComponent: renderTabs,
             },
             {
-                type: TerminalWrapperType.CONNCTION_SWITCH,
+                type: TerminalWrapperType.CONNECTION_SWITCH,
                 hideTerminalStripComponent: hideShell,
                 classNamePrefix: 'cluster-terminal-select-shell',
                 stopTerminalConnection,

src/components/app/ResourceTreeNodes.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { showError, PopupMenu, not, useSearchString, copyToClipboard, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, PopupMenu, not, useSearchString, copyToClipboard, ToastManager, ToastVariantType, Nodes, NodeType } from '@devtron-labs/devtron-fe-common-lib'
 import { useRouteMatch, useParams, generatePath, useHistory, useLocation, NavLink } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 import dots from '../../assets/icons/appstatus/ic-menu-dots.svg'
@@ -25,8 +25,6 @@ import { deleteResource } from './service'
 import { ReactComponent as DropDown } from '../../assets/icons/ic-dropdown-filled.svg'
 import {
     AggregatedNodes,
-    Nodes,
-    NodeType,
     NodeDetailTabs,
     NodeDetailTabsType,
     AggregationKeys,
@@ -302,10 +300,10 @@ export const NodeGroup: React.FC<{ title: AggregationKeysType; data: Object; agg
     aggregatedNodes,
 }) => {
     const [collapsed, setCollapsed] = useState(true)
-    const { url, path } = useRouteMatch()
+    const { path } = useRouteMatch()
     const params = useParams<{ appId: string; envId: string; kind: NodeType; tab?: NodeDetailTabsType }>()
     const location = useLocation()
-    const { searchParams, queryParams } = useSearchString()
+    const { queryParams } = useSearchString()
     const filterStatus = queryParams.has('status') ? queryParams.get('status') : ''
 
     useEffect(() => {

src/components/app/details/AboutAppInfoModal.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { showError, Progressing, VisibleModal, InfoColourBar, SelectPicker, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, Progressing, VisibleModal, InfoColourBar, SelectPicker, ToastManager, ToastVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Close } from '../../../assets/icons/ic-cross.svg'
 import { ReactComponent as Error } from '../../../assets/icons/ic-warning.svg'
 import { AboutAppInfoModalProps, NumberOptionType } from '../types'
@@ -65,12 +65,15 @@ export default function AboutAppInfoModal({
     const renderProjectSelect = (): JSX.Element => {
         return (
             <SelectPicker
+                label="Project"
+                required
                 inputId="overview-project-menu-list"
                 name="overview-project-menu-list"
                 classNamePrefix="overview-project-menu-list"
                 options={projectsOptions}
                 value={selectedProject}
                 onChange={handleProjectSelection}
+                size={ComponentSizeType.large}
             />
         )
     }
@@ -129,7 +132,6 @@ export default function AboutAppInfoModal({
         return (
             <>
                 <div className="cn-7 p-20">
-                    <div className="fs-12 fw-4 lh-20 mb-2">Project</div>
                     {renderProjectSelect()}
                     {selectedProject &&
                         appMetaInfo &&

src/components/externalLinks/ExternalLinks.component.tsx

@@ -33,7 +33,6 @@ import {
     getMonitoringToolIcon,
     getParsedURL,
     MONITORING_TOOL_ICONS,
-    NodeLevelSelectStyles,
     onImageLoadError,
 } from './ExternalLinks.utils'
 import {
@@ -43,6 +42,9 @@ import {
     GenericEmptyState,
     ConditionalWrap,
     GenericFilterEmptyState,
+    SelectPicker,
+    SelectPickerVariantType,
+    getHandleOpenURL,
 } from '@devtron-labs/devtron-fe-common-lib'
 import './externalLinks.component.scss'
 import { EMPTY_STATE_STATUS } from '../../config/constantMessaging'
@@ -148,12 +150,13 @@ export const AppLevelExternalLinks = ({
 
     useEffect(() => {
         if (externalLinks.length > 0 && monitoringTools.length > 0) {
-            const filteredLinks = externalLinks.filter(filterAppLevelExternalLinks)
+            const filteredLinks: ExternalLink[] = externalLinks.filter(filterAppLevelExternalLinks)
             setAppLevelExternalLinks(
-                filteredLinks.map((link) => ({
+                filteredLinks.map((link: ExternalLink) => ({
                     label: link.name,
                     value: link.url,
                     icon: getMonitoringToolIcon(monitoringTools, link.monitoringToolId),
+                    startIcon: getExternalLinkIcon(getMonitoringToolIcon(monitoringTools, link.monitoringToolId)),
                     description: link.description,
                 })),
             )
@@ -182,7 +185,7 @@ export const AppLevelExternalLinks = ({
             >
                 <a
                     key={linkOption.label}
-                    href={getParsedURL(true, linkOption.value, details)}
+                    href={getParsedURL(true, linkOption.value.toString(), details)}
                     target="_blank"
                     className="external-link-chip flex left bc-n50 h-24 br-4 cn-7 dc__no-decor dc__border"
                     rel="noreferrer"
@@ -229,6 +232,10 @@ export const AppLevelExternalLinks = ({
     )
 }
 
+export const getExternalLinkIcon = (link) => {
+    return <img src={link} alt={link} onError={onImageLoadError} />
+}
+
 export const NodeLevelExternalLinks = ({
     appDetails,
     helmAppDetails,
@@ -239,59 +246,22 @@ export const NodeLevelExternalLinks = ({
 }: NodeLevelExternalLinksType): JSX.Element | null => {
     const details = appDetails || helmAppDetails
 
-    const Option = (props: any): JSX.Element => {
-        if (!details) {
-            return null
-        }
-
-        const { data } = props
-
-        return (
-            <ConditionalWrap
-                condition={!!data.description}
-                wrap={(children) => (
-                    <TippyCustomized
-                        theme={TippyTheme.white}
-                        className="w-300"
-                        placement="left"
-                        iconPath={data.icon}
-                        heading={data.label}
-                        infoText={data.description}
-                    >
-                        <div>{children}</div>
-                    </TippyCustomized>
-                )}
-            >
-                <a
-                    key={data.label}
-                    href={getParsedURL(false, data.value, details, podName, containerName)}
-                    target="_blank"
-                    className="external-link-option h-32 flex left br-4 dc__no-decor cn-9"
-                    rel="noreferrer"
-                >
-                    <img className="icon-dim-20 mr-12" src={data.icon} alt={data.label} onError={onImageLoadError} />
-                    <span className="dc__ellipsis-right">{data.label}</span>
-                </a>
-            </ConditionalWrap>
-        )
+    const onClickExternalLink = (link: OptionTypeWithIcon) => {
+        getHandleOpenURL(getParsedURL(false, link.value.toString(), details, podName, containerName))()
     }
 
     return (
         nodeLevelExternalLinks.length > 0 && (
             <div className={`node-level__external-links flex column${addExtraSpace ? ' mr-4' : ''}`}>
-                <ReactSelect
-                    placeholder={`${nodeLevelExternalLinks.length} Link${nodeLevelExternalLinks.length > 1 ? 's' : ''}`}
+                <SelectPicker
+                    inputId={`${podName}-external-links`}
                     name={`${podName}-external-links`}
+                    placeholder={`${nodeLevelExternalLinks.length} Link${nodeLevelExternalLinks.length > 1 ? 's' : ''}`}
                     options={nodeLevelExternalLinks}
-                    isMulti={false}
                     isSearchable={false}
-                    closeMenuOnSelect
-                    components={{
-                        IndicatorSeparator: null,
-                        ClearIndicator: null,
-                        Option,
-                    }}
-                    styles={NodeLevelSelectStyles}
+                    shouldMenuAlignRight
+                    variant={SelectPickerVariantType.BORDER_LESS}
+                    onChange={onClickExternalLink}
                 />
             </div>
         )

src/components/externalLinks/ExternalLinks.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 import {
     showError,
     Progressing,

src/components/externalLinks/ExternalLinks.type.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { ResponseType } from '@devtron-labs/devtron-fe-common-lib'
 import { AppDetails } from '../app/types'
 import { ActionResponse } from '../external-apps/ExternalAppService'
@@ -23,10 +23,11 @@ import { UserRoleType } from '../../Pages/GlobalConfigurations/Authorization/con
 
 export interface OptionTypeWithIcon {
     label: string
-    value: any
-    icon: string
+    value: number | string
+    startIcon?: ReactElement
     category?: number
     description?: string
+    icon?: string
 }
 
 export interface IdentifierOptionType {

src/components/gitProvider/GitProvider.tsx

@@ -22,7 +22,6 @@ import {
     ErrorScreenNotAuthorized,
     InfoColourBar,
     VisibleModal,
-    multiSelectStyles,
     useEffectAfterMount,
     stopPropagation,
     useAsync,
@@ -32,9 +31,10 @@ import {
     DeleteComponent,
     ToastVariantType,
     ToastManager,
+    SelectPicker,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
-import ReactSelect, { components } from 'react-select'
 import {
     getCertificateAndKeyDependencyError,
     getIsTLSDataPresent,
@@ -53,8 +53,6 @@ import { getGitHostList, getGitProviderList } from '../../services/service'
 import { saveGitHost, saveGitProviderConfig, updateGitProviderConfig, deleteGitProvider } from './gitProvider.service'
 import { List } from '../globalConfigurations/GlobalConfiguration'
 import { HEADER_TEXT } from '../../config'
-import { DropdownIndicator } from './gitProvider.util'
-import { Option } from '../v2/common/ReactSelect.utils'
 import './gitProvider.scss'
 import { GitHostConfigModal } from './AddGitHostConfigModal'
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
@@ -618,20 +616,19 @@ const GitForm = ({
         onSave()
     }
 
-    const MenuList = (props) => {
+    const onClickAddGitAccountHandler = (): void => {
+        setGitProviderConfigModal(true)
+        toggleCollapse(false)
+    }
+
+    const renderGitHostBottom = () => {
         return (
-            <components.MenuList {...props}>
-                {props.children}
-                <div
-                    className="flex left pl-10 pt-8 pb-8 cb-5 cursor bcn-0 dc__react-select__bottom dc__border-top "
-                    onClick={(selected) => {
-                        setGitProviderConfigModal(true)
-                        toggleCollapse(false)
-                    }}
-                >
-                    <Add className="icon-dim-20 mr-5 fs-14 fcb-5 mr-12 dc__vertical-align-bottom  " /> Add Git Host
-                </div>
-            </components.MenuList>
+            <button
+                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"
+                onClick={onClickAddGitAccountHandler}
+            >
+                <Add className="icon-dim-20 fcb-5 dc__vertical-align-bottom" /> <span>Add Git Host</span>
+            </button>
         )
     }
 
@@ -806,42 +803,24 @@ const GitForm = ({
                     isRequiredField
                 />
             </div>
-            <div className="form__row form__row--two-third">
+            <div className="form__row--two-third mb-16">
                 <div>
-                    <div>
-                        <label className="form__label dc__required-field">Git host</label>
-                        <ReactSelect
-                            name="host"
-                            value={gitHost.value}
-                            className="react-select--height-44 fs-13 bcn-0 mb-12"
-                            classNamePrefix="select-git-account-host"
-                            placeholder="Select git host"
-                            isMulti={false}
-                            isSearchable
-                            isClearable={false}
-                            options={hostListOption}
-                            styles={{
-                                ...multiSelectStyles,
-                                menuList: (base) => {
-                                    return {
-                                        ...base,
-                                        position: 'relative',
-                                        paddingBottom: '0px',
-                                        maxHeight: '176px',
-                                    }
-                                },
-                            }}
-                            components={{
-                                IndicatorSeparator: null,
-                                DropdownIndicator,
-                                MenuList,
-                                Option,
-                            }}
-                            onChange={(e) => handleGithostChange(e)}
-                            isDisabled={gitHostId}
-                        />
-                    </div>
-
+                    <SelectPicker
+                        label="Git host"
+                        required
+                        inputId="git-account-host-select"
+                        name="host"
+                        value={gitHost.value}
+                        classNamePrefix="select-git-account-host"
+                        placeholder="Select git host"
+                        isSearchable
+                        isClearable={false}
+                        options={hostListOption}
+                        renderMenuListFooter={renderGitHostBottom}
+                        onChange={(e) => handleGithostChange(e)}
+                        isDisabled={gitHostId}
+                        size={ComponentSizeType.large}
+                    />
                     <div className="cr-5 fs-11">{gitHost.error}</div>
                 </div>
                 <CustomInput