Merge pull request #2607 from devtron-labs/feat/select-picker-variants

eshankvaish · web-flow · commit 2b337b72b7d9 · 2025-04-01T13:47:58.000+05:30
feat: add compact &amp; border less variant for select picker
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.10.4",
+        "@devtron-labs/devtron-fe-common-lib": "1.10.5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx
@@ -459,7 +459,7 @@ export const DeploymentConfigCompare = ({
         classNamePrefix: 'compare-with-environment-selector',
         inputId: 'compare-with-environment-selector',
         name: 'compare-with-environment-selector',
-        variant: SelectPickerVariantType.BORDER_LESS,
+        variant: SelectPickerVariantType.COMPACT,
         value: getSelectPickerOptionByValue(compareEnvironmentSelectorOptions, chartRefId || compareWith, {
             label: BASE_CONFIGURATIONS.name,
             value: '',
@@ -497,7 +497,7 @@ export const DeploymentConfigCompare = ({
             classNamePrefix: 'environment-config-type-selector',
             inputId: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
             name: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
-            variant: SelectPickerVariantType.BORDER_LESS,
+            variant: SelectPickerVariantType.COMPACT,
             isSearchable: false,
             disableDescriptionEllipsis: true,
             value: getSelectPickerOptionByValue(
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx
@@ -253,7 +253,7 @@ const DTChartSelector = ({
                     value={selectedOption}
                     onChange={onSelectChartVersion}
                     isSearchable={false}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     size={ComponentSizeType.small}
                     placeholder="Select version"
                     isDisabled={migratedFrom === PipelineMigratedFromType.ARGO_APPLICATION}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx
@@ -78,7 +78,7 @@ const SelectMergeStrategy = ({
                     value={selectedOption}
                     options={options}
                     isDisabled={isDisabled}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     isSearchable={false}
                     size={ComponentSizeType.small}
                     isOptionDisabled={getIsOptionDisabled}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
@@ -404,7 +404,7 @@ export const EnvConfigurationsNav = ({
                 <SelectPicker<number, false>
                     inputId="env-config-selector"
                     classNamePrefix="env-config-selector"
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     isClearable={false}
                     value={getSelectPickerOptionByValue(envOptions, parsedResourceId, baseEnvOption[0])}
                     options={envOptions}
diff --git a/src/components/CIPipelineN/ConditionContainer.tsx b/src/components/CIPipelineN/ConditionContainer.tsx
@@ -322,7 +322,7 @@ export const ConditionContainer = ({ type }: { type: ConditionContainerType }) =
                                                 ?.filter((variable) => variable.name)
                                                 .map((variable) => ({ label: variable.name, value: variable.id }))}
                                             isSearchable={false}
-                                            variant={SelectPickerVariantType.BORDER_LESS}
+                                            variant={SelectPickerVariantType.COMPACT}
                                         />
                                     </div>
                                     <SelectPicker
diff --git a/src/components/CIPipelineN/EnvironmentList.tsx b/src/components/CIPipelineN/EnvironmentList.tsx
@@ -106,7 +106,7 @@ export const EnvironmentList = ({
                     value={getSelectedEnvironment()}
                     onChange={selectEnvironment}
                     size={ComponentSizeType.large}
-                    variant={isBorderLess ? SelectPickerVariantType.BORDER_LESS : SelectPickerVariantType.DEFAULT}
+                    variant={isBorderLess ? SelectPickerVariantType.COMPACT : SelectPickerVariantType.DEFAULT}
                 />
             </div>
         </div>
diff --git a/src/components/CIPipelineN/PluginDetailHeader/PluginVersionSelect.tsx b/src/components/CIPipelineN/PluginDetailHeader/PluginVersionSelect.tsx
@@ -59,7 +59,7 @@ const PluginVersionSelect = ({ handlePluginVersionChange }: PluginVersionSelectP
                     classNamePrefix="plugin-detail-header__version-select"
                     inputId="plugin-detail-header__version-select"
                     placeholder="Version"
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     onChange={handleChange}
                     onKeyDown={stopPropagation}
                 />
diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx
@@ -105,7 +105,7 @@ export const ThroughputSelect = (props) => {
             ]}
             onChange={props.handleStatusChange}
             onCreateOption={onCreateOption}
-            variant={SelectPickerVariantType.BORDER_LESS}
+            variant={SelectPickerVariantType.COMPACT}
             menuPosition="absolute"
         />
     )
@@ -130,7 +130,7 @@ export const LatencySelect = (props) => {
             ]}
             onChange={props.handleLatencyChange}
             onCreateOption={onCreateOption}
-            variant={SelectPickerVariantType.BORDER_LESS}
+            variant={SelectPickerVariantType.COMPACT}
             menuPosition="absolute"
         />
     )
diff --git a/src/components/app/details/triggerView/PipelineConfigDiff/usePipelineDeploymentConfig.ts b/src/components/app/details/triggerView/PipelineConfigDiff/usePipelineDeploymentConfig.ts
@@ -327,7 +327,7 @@ export const usePipelineDeploymentConfig = ({
         classNamePrefix: 'deployment-config-selector',
         inputId: 'deployment-config-selector',
         name: 'deployment-config-selector',
-        variant: SelectPickerVariantType.BORDER_LESS,
+        variant: SelectPickerVariantType.COMPACT,
         isSearchable: false,
         disableDescriptionEllipsis: true,
         value: getSelectPickerOptionByValue(
diff --git a/src/components/bulkEdits/BulkEdits.tsx b/src/components/bulkEdits/BulkEdits.tsx
@@ -440,7 +440,7 @@ export default class BulkEdits extends Component<BulkEditsProps, BulkEditsState>
                         placeholder="Update Deployment Template"
                         options={this.state.updatedTemplate}
                         onChange={() => this.handleUpdateTemplate()}
-                        variant={SelectPickerVariantType.BORDER_LESS}
+                        variant={SelectPickerVariantType.COMPACT}
                         size={ComponentSizeType.medium}
                         menuSize={ComponentSizeType.medium}
                     />
diff --git a/src/components/ciConfig/CIContainerRegistryConfig.tsx b/src/components/ciConfig/CIContainerRegistryConfig.tsx
@@ -53,6 +53,7 @@ export default function CIContainerRegistryConfig({
     isTemplateView,
 }: CIContainerRegistryConfigProps) {
     const [selectedRegistry, setSelectedRegistry] = useState(currentRegistry)
+    const containerRegistryLabel = `Container Repository ${selectedRegistry && REGISTRY_TYPE_MAP[selectedRegistry.registryType]?.desiredFormat}`
 
     const getCustomRegistryOption = (registry) => ({
         ...registry,
@@ -160,7 +161,7 @@ export default function CIContainerRegistryConfig({
                                               linkProps: {
                                                   to: URLS.GLOBAL_CONFIG_DOCKER,
                                               },
-                                              startIcon: <Icon name="ic-add" color={null} />
+                                              startIcon: <Icon name="ic-add" color={null} />,
                                           },
                                       }
                             }
@@ -171,12 +172,13 @@ export default function CIContainerRegistryConfig({
                     {registry.error && <label className="form__error">{registry.error}</label>}
                 </div>
                 <div className={`form__field flex-grow-1 ${configOverrideView ? 'mb-0-imp' : ''}`}>
-                    <label htmlFor="" className="form__label">
-                        Container Repository&nbsp;
-                        {selectedRegistry && REGISTRY_TYPE_MAP[selectedRegistry.registryType]?.desiredFormat}
-                    </label>
                     {configOverrideView && !allowOverride ? (
-                        <span className="fs-14 fw-4 lh-20 cn-9">{ciConfig?.dockerRepository}</span>
+                        <>
+                            <label htmlFor="" className="form__label dc__truncate">
+                                {containerRegistryLabel}
+                            </label>
+                            <span className="fs-14 fw-4 lh-20 cn-9">{ciConfig?.dockerRepository}</span>
+                        </>
                     ) : (
                         <CustomInput
                             placeholder={
@@ -195,6 +197,7 @@ export default function CIContainerRegistryConfig({
                             disabled={configOverrideView && !allowOverride}
                             data-testid="container-repository-textbox"
                             error={repository_name.error}
+                            label={containerRegistryLabel}
                         />
                     )}
                     {!ciConfig && selectedRegistry?.registryType === 'ecr' && (
diff --git a/src/components/ciConfig/CreateDockerFileLanguageOptions.tsx b/src/components/ciConfig/CreateDockerFileLanguageOptions.tsx
@@ -121,7 +121,7 @@ export const CreateDockerFileLanguageOptions: FunctionComponent<CreateDockerFile
                 value={selectedMaterial}
                 onChange={handleGitRepoChange}
                 classNamePrefix="build-config__select-repository-containing-code"
-                variant={SelectPickerVariantType.BORDER_LESS}
+                variant={SelectPickerVariantType.COMPACT}
             />
 
             <div className="h-22 dc__border-right-n1 mr-8 ml-8" />
@@ -134,7 +134,7 @@ export const CreateDockerFileLanguageOptions: FunctionComponent<CreateDockerFile
                 value={selectedLanguage}
                 isSearchable={false}
                 onChange={handleLanguageSelection}
-                variant={SelectPickerVariantType.BORDER_LESS}
+                variant={SelectPickerVariantType.COMPACT}
             />
             {selectedLanguageFrameworks?.[0]?.value && (
                 <>
@@ -148,7 +148,7 @@ export const CreateDockerFileLanguageOptions: FunctionComponent<CreateDockerFile
                         classNamePrefix="build-config__select-framework"
                         isSearchable={false}
                         onChange={handleFrameworkSelection}
-                        variant={SelectPickerVariantType.BORDER_LESS}
+                        variant={SelectPickerVariantType.COMPACT}
                     />
                 </>
             )}
diff --git a/src/components/cluster/UseNameListDropdown.tsx b/src/components/cluster/UseNameListDropdown.tsx
@@ -42,7 +42,7 @@ export default function UserNameDropDownList({ clusterDetail, selectedUserNameOp
             isSearchable={false}
             menuPosition="fixed"
             onChange={handleUserChange}
-            variant={SelectPickerVariantType.BORDER_LESS}
+            variant={SelectPickerVariantType.COMPACT}
         />
     )
 }
diff --git a/src/components/externalLinks/ExternalLinks.component.tsx b/src/components/externalLinks/ExternalLinks.component.tsx
@@ -393,7 +393,7 @@ export const NodeLevelExternalLinks = ({
                     options={nodeLevelExternalLinks}
                     isSearchable={false}
                     shouldMenuAlignRight
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     onChange={onClickExternalLink}
                 />
             </div>
diff --git a/src/components/security/SecurityPolicyEdit.tsx b/src/components/security/SecurityPolicyEdit.tsx
@@ -394,7 +394,7 @@ export class SecurityPolicyEdit extends Component<
                                     : severity.policy.action
                             }`}
                             options={actions}
-                            variant={SelectPickerVariantType.BORDER_LESS}
+                            variant={SelectPickerVariantType.COMPACT}
                             shouldMenuAlignRight
                         />
                     </div>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx
@@ -93,7 +93,7 @@ const reactSelect = (selectData: ReactSelectType) => {
                 options={selectData.options}
                 value={selectData.value}
                 onChange={selectData.onChange}
-                variant={SelectPickerVariantType.BORDER_LESS}
+                variant={SelectPickerVariantType.COMPACT}
                 showSelectedOptionIcon={false}
             />
         </>
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
@@ -101,7 +101,7 @@ const CompareWithDropdown = ({
         <SelectPicker
             inputId="compare-values-select"
             classNamePrefix="compare-values-select"
-            variant={SelectPickerVariantType.BORDER_LESS}
+            variant={SelectPickerVariantType.COMPACT}
             options={groupedOptions}
             isSearchable={false}
             value={selectedVersionForDiff}
diff --git a/src/stories/SelectPicker.stories.tsx b/src/stories/SelectPicker.stories.tsx
@@ -23,11 +23,38 @@ import {
     SelectPicker,
     SelectPickerOptionType,
     SelectPickerProps,
+    SelectPickerVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICEnv } from '@Icons/ic-env.svg'
 
+const SELECT_PICKER_LAYOUT_MAP: Record<SelectPickerProps['layout'], null> = {
+    row: null,
+    column: null,
+}
+
 const meta = {
     component: SelectPicker,
+    argTypes: {
+        variant: {
+            options: Object.values(SelectPickerVariantType),
+            control: { type: 'radio' },
+        },
+        size: {
+            options: Object.values(ComponentSizeType),
+            control: { type: 'select' },
+        },
+        menuSize: {
+            options: Object.values(ComponentSizeType),
+            control: { type: 'select' },
+        },
+        shouldMenuAlignRight: {
+            control: { type: 'boolean' },
+        },
+        layout: {
+            options: Object.keys(SELECT_PICKER_LAYOUT_MAP),
+            control: { type: 'select' },
+        },
+    },
 } satisfies Meta<SelectPickerProps>
 
 export default meta
@@ -50,6 +77,11 @@ export const Default: Story = {
         label: 'Select Picker Label',
         options,
         onChange: action('clicked'),
+        variant: SelectPickerVariantType.DEFAULT,
+        size: ComponentSizeType.medium,
+        menuSize: ComponentSizeType.small,
+        shouldMenuAlignRight: false,
+        layout: 'column',
     },
 }
 
diff --git a/yarn.lock b/yarn.lock
@@ -1105,10 +1105,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.10.4":
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.10.4.tgz#f03a712f2522f11538bb6a1fb1c005838d107e9e"
-  integrity sha512-VvthuPI/9uOt1d2UhWl4whSEt6N6TpTu5JcgzYUuoR30fxv6Lx1pEP5k0Mil5CU+cDfZh1MgE6NYgASbf/4xMw==
+"@devtron-labs/devtron-fe-common-lib@1.10.5":
+  version "1.10.5"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.10.5.tgz#8311e4b12ff2bc06a82136fcd2c26ce324f14111"
+  integrity sha512-Gvm6xmApTBWqxvkpcbRtNjTEgdYcg8aZ+a8Sstq7wcTC4DP9zEbWPWe8JSI5gdlRxw+e426+7b+8plQ38oJAuw==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"
