refactor: replace select picker in chart values view

Author: eshankvaish

src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx

@@ -17,7 +17,6 @@
 import { useEffect, useState } from 'react'
 import { GroupBase } from 'react-select'
 import { useParams } from 'react-router-dom'
-import ReactSelect from 'react-select'
 import {
     Progressing,
     DeleteDialog,
@@ -34,16 +33,8 @@ import {
     getSelectPickerOptionByValue,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
-import {
-    DropdownIndicator,
-    EnvFormatOptions,
-    formatHighlightedText,
-    getCommonSelectStyle,
-    GroupHeading,
-    Option,
-} from '../../common/ReactSelect.utils'
 import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
-import { importComponentFromFELibrary, Select } from '../../../common'
+import { importComponentFromFELibrary } from '../../../common'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as EditIcon } from '../../../../assets/icons/ic-pencil.svg'
 import { AUTO_GENERATE_GITOPS_REPO, GITOPS_REPO_REQUIRED, GITOPS_REPO_REQUIRED_FOR_ENV } from './constant'
@@ -76,7 +67,6 @@ import {
 import { DeploymentAppTypeNameMapping, REQUIRED_FIELD_MSG } from '../../../../config/constantMessaging'
 import { ReactComponent as ArgoCD } from '../../../../assets/icons/argo-cd-app.svg'
 import { ReactComponent as Helm } from '../../../../assets/icons/helm-app.svg'
-import { envGroupStyle } from './ChartValuesView.utils'
 import { DELETE_ACTION, repoType } from '../../../../config'
 import UserGitRepo from '../../../gitOps/UserGitRepo'
 import { getChartValuesFiltered } from '@Components/charts/charts.helper'
@@ -92,18 +82,17 @@ export const ChartEnvironmentSelector = ({
     selectedEnvironment,
     handleEnvironmentSelection,
     environments,
-    invalidaEnvironment,
+    invalidEnvironment,
     isVirtualEnvironmentOnSelector,
     isVirtualEnvironment,
 }: ChartEnvironmentSelectorType): JSX.Element => {
-    const singleOption = (props) => {
-        return <EnvFormatOptions {...props} environmentfieldName="label" />
-    }
 
     const renderVirtualEnvironmentInfoText = (): JSX.Element => {
         if (isVirtualEnvironmentOnSelector && VirtualEnvSelectionInfoText) {
             return <VirtualEnvSelectionInfoText />
         }
+
+        return null
     }
 
     const renderVirtualTippy = (): JSX.Element => {
@@ -117,10 +106,6 @@ export const ChartEnvironmentSelector = ({
         }
     }
 
-    const handleFormatHighlightedText = (opt, { inputValue }) => {
-        return formatHighlightedText(opt, inputValue, 'label')
-    }
-
     return !isDeployChartView ? (
         <div className="chart-values__environment-container mb-12">
             <h2
@@ -143,26 +128,17 @@ export const ChartEnvironmentSelector = ({
         </div>
     ) : (
         <div className="form__row form__row--w-100 fw-4">
-            <span className="form__label required-field" data-testid="environment-name-heading">
-                Deploy to environment
-            </span>
-            <ReactSelect
-                components={{
-                    IndicatorSeparator: null,
-                    DropdownIndicator,
-                    SingleValue: singleOption,
-                    GroupHeading,
-                }}
-                classNamePrefix="values-environment-select"
+            <SelectPicker
+                label="Deploy to environment"
+                inputId="values-environment-select"
                 placeholder="Select Environment"
                 value={selectedEnvironment}
-                styles={envGroupStyle}
                 onChange={handleEnvironmentSelection}
                 options={environments}
-                formatOptionLabel={handleFormatHighlightedText}
+                required
+                error={invalidEnvironment ? REQUIRED_FIELD_MSG : null}
+                helperText={renderVirtualEnvironmentInfoText()}
             />
-            {invalidaEnvironment && renderValidationErrorLabel()}
-            {renderVirtualEnvironmentInfoText()}
         </div>
     )
 }
@@ -476,65 +452,50 @@ export const ChartProjectSelector = ({
     invalidProject,
 }: ChartProjectSelectorType): JSX.Element => {
     return (
-        <label className="form__row form__row--w-100 fw-4">
-            <span className="form__label required-field" data-testid="project-name-heading">
-                Project
-            </span>
-            <ReactSelect
-                components={{
-                    IndicatorSeparator: null,
-                    DropdownIndicator,
-                    Option,
-                }}
+        <div className="form__row form__row--w-100">
+            <SelectPicker
+                label="Project"
+                inputId="select-chart-project"
                 placeholder="Select Project"
-                classNamePrefix="select-chart-project"
                 value={selectedProject}
-                styles={getCommonSelectStyle()}
                 onChange={handleProjectSelection}
                 options={projects}
+                required
+                error={invalidProject ? REQUIRED_FIELD_MSG : null}
             />
-            {invalidProject && renderValidationErrorLabel()}
-        </label>
+        </div>
     )
 }
 
 export const ChartVersionSelector = ({
     selectedVersion,
-    chartVersionObj,
     selectedVersionUpdatePage,
     handleVersionSelection,
     chartVersionsData,
 }: ChartVersionSelectorType) => {
+    const selectOptions = chartVersionsData.map(chartVersion => ({
+        value: chartVersion.id,
+        label: chartVersion.version,
+    }))
+
+    const selectedOption = selectOptions.find(
+        (option) => option.value === selectedVersionUpdatePage?.id || option.value === selectedVersion,
+    )
+
     return (
         <div className="w-100 mb-12">
-            <span className="form__label fs-13 fw-4 lh-20 cn-7" data-testid="chart-version-heading">
-                Chart Version
-            </span>
-            <Select
-                tabIndex={4}
-                rootClassName="select-button--default chart-values-selector"
-                onChange={(event) => {
-                    handleVersionSelection(event.target.value, {
-                        id: event.target.value,
-                        version: event.target.innerText,
+            <SelectPicker<number, false>
+                label="Chart Version"
+                inputId="chart-values-selector"
+                options={selectOptions}
+                onChange={(option) =>
+                    handleVersionSelection(option.value, {
+                        id: option.value,
+                        version: option.label as string,
                     })
-                }}
-                value={selectedVersionUpdatePage?.id || selectedVersion}
-                dataTestId="select-chart-version"
-            >
-                <Select.Button dataTestIdDropdown="chart-version-of-preset">
-                    {selectedVersionUpdatePage?.version || chartVersionObj?.version}
-                </Select.Button>
-                {chartVersionsData.map((_chartVersion, index) => (
-                    <Select.Option
-                        key={_chartVersion.id}
-                        value={_chartVersion.id}
-                        dataTestIdMenuList={`chart-select-${index}`}
-                    >
-                        {_chartVersion.version}
-                    </Select.Option>
-                ))}
-            </Select>
+                }
+                value={selectedOption}
+            />
         </div>
     )
 }
@@ -588,7 +549,7 @@ export const ChartValuesSelector = ({
 
         return (
             <button
-                className="dc__transparent fs-13 lh-20 flex left dc__gap-4 cb-5 px-8 py-6"
+                className="dc__transparent fs-13 lh-20 flex left dc__gap-6 cb-5 px-12 py-4"
                 onClick={redirectToChartValues}
                 data-testid="add-preset-values-button-dropdown"
             >

src/components/v2/values/chartValuesDiff/ChartValuesView.tsx

@@ -1680,7 +1680,7 @@ const ChartValuesView = ({
                                 selectedEnvironment={commonState.selectedEnvironment}
                                 handleEnvironmentSelection={handleEnvironmentSelection}
                                 environments={commonState.environments}
-                                invalidaEnvironment={commonState.invalidaEnvironment}
+                                invalidEnvironment={commonState.invalidaEnvironment}
                                 isVirtualEnvironmentOnSelector={isVirtualEnvironmentOnSelector}
                                 isVirtualEnvironment={appDetails?.isVirtualEnvironment}
                             />

src/components/v2/values/chartValuesDiff/ChartValuesView.type.ts

@@ -94,7 +94,7 @@ export interface ChartEnvironmentSelectorType extends ChartSelectorType {
     selectedEnvironment?: ChartEnvironmentOptionType
     handleEnvironmentSelection?: (selected: ChartEnvironmentOptionType) => void
     environments?: ChartEnvironmentOptionType[] | ChartEnvironmentListType[]
-    invalidaEnvironment: boolean
+    invalidEnvironment: boolean
     isVirtualEnvironmentOnSelector?: boolean
     isVirtualEnvironment?: boolean
 }

src/components/v2/values/chartValuesDiff/ChartValuesView.utils.ts

@@ -22,51 +22,6 @@ import {
     ChartDeploymentManifestDetailResponse,
     getDeploymentManifestDetails,
 } from '../../chartDeploymentHistory/chartDeploymentHistory.service'
-import { groupStyle } from '../../common/ReactSelect.utils'
-
-export const getCommonSelectStyle = (styleOverrides = {}) => {
-    return {
-        menuList: (base) => ({
-            ...base,
-            paddingTop: 0,
-            paddingBottom: 0,
-        }),
-        control: (base, state) => ({
-            ...base,
-            minHeight: '32px',
-            boxShadow: 'none',
-            backgroundColor: 'var(--N50)',
-            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
-            cursor: 'pointer',
-        }),
-        option: (base, state) => ({
-            ...base,
-            color: 'var(--N900)',
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-            padding: '10px 12px',
-        }),
-        dropdownIndicator: (base, state) => ({
-            ...base,
-            color: 'var(--N400)',
-            padding: '0 8px',
-            transition: 'all .2s ease',
-            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        }),
-        valueContainer: (base) => ({
-            ...base,
-            padding: '0 8px',
-        }),
-        loadingMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        noOptionsMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        ...styleOverrides,
-    }
-}
 
 export const getCompareValuesSelectStyles = () => {
     return {
@@ -390,20 +345,3 @@ export const convertSchemaJsonToMap = (valuesSchemaJson: string): Map<string, an
     }
     return null
 }
-
-export const envGroupStyle = {
-    ...groupStyle(),
-    control: (base) => ({
-        ...base,
-        border: '1px solid #d6dbdf',
-        background: 'var(--N50)',
-        minHeight: '32px',
-    }),
-    dropdownIndicator: (base, state) => ({
-        ...base,
-        color: 'var(--N400)',
-        padding: '0 8px',
-        transition: 'all .2s ease',
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-    }),
-}