chore: creatable changes reverted

shivani170 · shivani170 · commit 225adb9d722b · 2024-10-03T12:05:25.000+05:30
diff --git a/src/components/CIPipelineN/TaskTypeDetailComponent.tsx b/src/components/CIPipelineN/TaskTypeDetailComponent.tsx
@@ -25,8 +25,6 @@ import {
     ScriptType,
     CustomInput,
     ClipboardButton,
-    SelectPicker,
-    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { components } from 'react-select'
 import { TaskFieldDescription, TaskFieldLabel } from '../ciPipeline/types'
@@ -41,6 +39,9 @@ import { OptionType } from '../app/types'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
+import CreatableSelect from 'react-select/creatable'
+import { containerImageSelectStyles } from './ciPipeline.utils'
+import { ValueContainer } from '@Components/app/details/appDetails/utils'
 
 export const TaskTypeDetailComponent = () => {
     const {
@@ -239,17 +240,25 @@ export const TaskTypeDetailComponent = () => {
                     />
 
                     <div className="dc__position-rel">
-                        <SelectPicker
-                            inputId='container-image-select'
-                            isCreatableSingleSelect
+                        <CreatableSelect
+                            tabIndex={1}
                             value={selectedContainerImage}
                             options={containerImageOptions}
                             placeholder="Select container image or input value"
                             onChange={handleContainerImageSelector}
+                            styles={containerImageSelectStyles}
                             classNamePrefix="select"
-                            renderMenuListFooter={renderMenuListFooter}
-                            size={ComponentSizeType.large}
+                            components={{
+                                MenuList: menuList,
+                                Option,
+                                IndicatorSeparator: null,
+                                ValueContainer,
+                            }}
+                            noOptionsMessage={(): string => {
+                                return 'No matching options'
+                            }}
                             onBlur={handleCreatableBlur}
+                            isValidNewOption={() => false}
                             onKeyDown={handleKeyDown}
                         />
                         {selectedContainerImage?.label && (
diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx
@@ -19,8 +19,10 @@ import React from 'react'
 import { components } from 'react-select'
 import { AggregationKeys } from '../../types'
 import { getVersionArr, isVersionLessThanOrEqualToTarget, DayPickerRangeControllerPresets } from '../../../common'
+import { ReactComponent as ArrowDown } from '../../../../assets/icons/ic-chevron-down.svg'
 import { ChartTypes, AppMetricsTabType, StatusType, StatusTypes } from './appDetails.type'
-import { ZERO_TIME_STRING, Nodes, NodeType, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
+import { ZERO_TIME_STRING, Nodes, NodeType } from '@devtron-labs/devtron-fe-common-lib'
+import CreatableSelect from 'react-select/creatable'
 
 export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: boolean): AggregationKeys {
     switch (nodeType) {
@@ -72,6 +74,13 @@ export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: bool
     }
 }
 
+export const DropdownIndicator = (props) => {
+    return (
+        <components.DropdownIndicator {...props}>
+            <ArrowDown className="icon-dim-20 fcn-6" />
+        </components.DropdownIndicator>
+    )
+}
 
 const throughputAndLatencySelectStyle = {
     container: (base, state) => ({
@@ -109,8 +118,8 @@ const throughputAndLatencySelectStyle = {
 
 export const ThroughputSelect = (props) => {
     return (
-        <SelectPicker
-            isCreatableSingleSelect
+        <CreatableSelect
+            className=""
             inputId="throughput-select"
             placeholder="Status Code"
             value={{ label: props.status, value: props.status }}
@@ -124,15 +133,19 @@ export const ThroughputSelect = (props) => {
                 { label: 'Throughput', value: 'Throughput' },
             ]}
             onChange={props.handleStatusChange}
+            styles={throughputAndLatencySelectStyle}
+            components={{
+                IndicatorSeparator: null,
+                DropdownIndicator,
+            }}
         />
     )
 }
 
 export const LatencySelect = (props) => {
     return (
-        <SelectPicker
-            inputId='latency-select'
-            isCreatableSingleSelect
+        <CreatableSelect
+            className=""
             placeholder="Latency"
             value={{ label: props.latency, value: props.latency }}
             options={[
@@ -142,6 +155,12 @@ export const LatencySelect = (props) => {
                 { label: '95', value: '95' },
             ]}
             onChange={props.handleLatencyChange}
+            styles={throughputAndLatencySelectStyle}
+            components={{
+                IndicatorSeparator: null,
+                DropdownIndicator,
+            }}
+            formatCreateLabel={(inputValue) => inputValue}
         />
     )
 }
diff --git a/src/components/ciConfig/CIBuildpackBuildOptions.tsx b/src/components/ciConfig/CIBuildpackBuildOptions.tsx
@@ -16,7 +16,13 @@
 
 import { useEffect, useState } from 'react'
 import { components } from 'react-select'
-import { CIBuildType, ComponentSizeType, CustomInput, InfoIconTippy, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
+import { CIBuildType, ComponentSizeType, CustomInput, InfoIconTippy, SelectPicker, stopPropagation } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    DropdownIndicator,
+    getCommonSelectStyle,
+    getCustomOptionSelectionStyle,
+    Option,
+} from '../v2/common/ReactSelect.utils'
 import { ReactComponent as GitLab } from '../../assets/icons/git/gitlab.svg'
 import { ReactComponent as Git } from '../../assets/icons/git/git.svg'
 import { ReactComponent as GitHub } from '../../assets/icons/git/github.svg'
@@ -41,6 +47,7 @@ import {
     VERSION_DETECT_OPTION,
 } from './ciConfigConstant'
 import { getSelectStartIcon } from './utils'
+import CreatableSelect from 'react-select/creatable'
 
 export const renderOptionIcon = (option: string) => {
     if (!option) {
@@ -70,6 +77,47 @@ const menuListComponent = (props): JSX.Element => {
     )
 }
 
+
+export const repositoryOption = (props): JSX.Element => {
+    props.selectProps.styles.option = getCustomOptionSelectionStyle()
+    return (
+        <components.Option {...props}>
+            {props.data.url && renderOptionIcon(props.data.url)}
+            {props.label}
+        </components.Option>
+    )
+}
+
+export const releaseTagOption = (props): JSX.Element => {
+    props.selectProps.styles.option = getCustomOptionSelectionStyle()
+    return (
+        <components.Option {...props} onClick={stopPropagation}>
+            {props.value}
+        </components.Option>
+    )
+}
+
+export const checkoutPathOption = (props): JSX.Element => {
+    props.selectProps.styles.option = getCustomOptionSelectionStyle()
+    return <components.Option {...props}>{props.value}</components.Option>
+}
+export const repositoryControls = (props): JSX.Element => {
+    let value = ''
+    if (props.hasValue) {
+        value = props.getValue()[0].url
+    }
+    const showGit = value && !value.includes('github') && !value.includes('gitlab') && !value.includes('bitbucket')
+    return (
+        <components.Control {...props}>
+            {value.includes('github') && <GitHub className="icon-dim-20 ml-10" />}
+            {value.includes('gitlab') && <GitLab className="icon-dim-20 ml-10" />}
+            {value.includes('bitbucket') && <BitBucket className="icon-dim-20 ml-10" />}
+            {showGit && <Git className="icon-dim-20 ml-10" />}
+            {props.children}
+        </components.Control>
+    )
+}
+
 const BuildContextLabel = () => {
     return (
         <label htmlFor="" className="form__label flexbox-imp flex-align-center">
@@ -454,14 +502,7 @@ export default function CIBuildpackBuildOptions({
         setBuildEnvArgs(_buildEnvArgs)
     }
 
-    const formatOptionLabel = (option: VersionsOptionType) => {
-        return (
-            <div className="flex left column w-100 dc__ellipsis-right">
-                <span>{option.label}</span>
-                {option.infoText && <small className="cn-6">{option.infoText}</small>}
-            </div>
-        )
-    }
+    const formatCreateLabel = (inputValue: string) => `Use '${inputValue}'`
 
     const projectPathVal = readOnly ? ciBuildConfig.buildPackConfig?.projectPath : projectPath.value
 
@@ -617,17 +658,25 @@ export default function CIBuildpackBuildOptions({
                         <BuilderTippy />
                     </label>
 
-                    <SelectPicker
-                        inputId="build-pack-builder"
-                        isCreatableSingleSelect
+                    <CreatableSelect
                         classNamePrefix="build-pack-select-builder-dropdown"
                         placeholder={CI_BUILDPACK_OPTION_TEXTS.BuilderTippyContent.selectBuilder}
+                        className="m-0"
+                        tabIndex={3}
                         isLoading={!builderLanguageSupportMap?.[buildersAndFrameworks.selectedLanguage?.value]}
                         options={
                             builderLanguageSupportMap?.[buildersAndFrameworks.selectedLanguage?.value]
                                 ?.BuilderLanguageMetadata
                         }
                         value={buildersAndFrameworks.selectedBuilder}
+                        formatCreateLabel={formatCreateLabel}
+                        styles={getCommonSelectStyle(BUILDER_SELECT_STYLES)}
+                        components={{
+                            IndicatorSeparator: null,
+                            DropdownIndicator,
+                            Option,
+                            MenuList: menuListComponent,
+                        }}
                         onChange={handleBuilderSelection}
                     />
                 </div>
