feat: add isUserIdentifier in SelectPicker and add abortSignal in getClusterOptions

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -34,6 +34,7 @@ const FilterSelectPicker = ({
     options,
     menuIsOpen = false,
     onMenuClose,
+    isUserIdentifier,
     ...props
 }: FilterSelectPickerProps) => {
     const selectRef = useRef<SelectPickerProps<string | number, true>['selectRef']['current']>()
@@ -110,6 +111,7 @@ const FilterSelectPicker = ({
         <div className="dc__mxw-250">
             <SelectPicker<string | number, true>
                 {...props}
+                isUserIdentifier={isUserIdentifier}
                 selectRef={selectRef}
                 options={options}
                 value={selectedOptions}

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -199,6 +199,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     menuPosition = 'fixed',
     variant = SelectPickerVariantType.DEFAULT,
     disableDescriptionEllipsis = false,
+    isUserIdentifier = false,
     multiSelectProps = {},
     isMulti,
     name,
@@ -302,9 +303,13 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
 
     const renderOption = useCallback(
         (optionProps: OptionProps<SelectPickerOptionType<OptionValue>>) => (
-            <SelectPickerOption {...optionProps} disableDescriptionEllipsis={disableDescriptionEllipsis} />
+            <SelectPickerOption
+                {...optionProps}
+                isUserIdentifier={isUserIdentifier}
+                disableDescriptionEllipsis={disableDescriptionEllipsis}
+            />
         ),
-        [disableDescriptionEllipsis],
+        [disableDescriptionEllipsis, isUserIdentifier],
     )
 
     const renderMultiValue = (multiValueProps: MultiValueProps<SelectPickerOptionType<OptionValue>, true>) => (

src/Shared/Components/SelectPicker/common.tsx

@@ -32,11 +32,11 @@ import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { Checkbox } from '@Common/Checkbox'
 import { ReactSelectInputAction } from '@Common/Constants'
-import { noop } from '@Common/Helper'
+import { getAlphabetIcon, noop } from '@Common/Helper'
 import { Progressing } from '@Common/Progressing'
 import { Tooltip, TooltipProps } from '@Common/Tooltip'
 import { CHECKBOX_VALUE } from '@Common/Types'
-import { ComponentSizeType } from '@Shared/constants'
+import { API_TOKEN_PREFIX, ComponentSizeType } from '@Shared/constants'
 import { isNullOrUndefined } from '@Shared/Helpers'
 
 import { Button, ButtonProps, ButtonVariantType } from '../Button'
@@ -191,9 +191,10 @@ export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>
 
 export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
     disableDescriptionEllipsis,
+    isUserIdentifier,
     ...props
 }: OptionProps<SelectPickerOptionType<OptionValue>> &
-    Pick<SelectPickerProps<OptionValue, IsMulti>, 'disableDescriptionEllipsis'>) => {
+    Pick<SelectPickerProps<OptionValue, IsMulti>, 'disableDescriptionEllipsis' | 'isUserIdentifier'>) => {
     const {
         label,
         data,
@@ -215,17 +216,47 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
 
     const iconBaseClass = 'dc__no-shrink icon-dim-16 flex dc__fill-available-space'
 
+    const showUserAvatar = isUserIdentifier && !isSelected && typeof label === 'string'
+
+    const renderLabelText = () => {
+        if (showUserAvatar && label.startsWith(API_TOKEN_PREFIX)) {
+            return label.split(':')?.[1] || '-'
+        }
+
+        return label
+    }
+
+    const renderAvatar = () => {
+        if (!showUserAvatar) {
+            return null
+        }
+
+        return (
+            <div className="flex dc__no-shrink dc__visible-hover--hide-child icon-dim-20">
+                {label.startsWith(API_TOKEN_PREFIX) ? (
+                    <Icon name="ic-key" color="N700" size={20} />
+                ) : (
+                    getAlphabetIcon(label, 'dc__no-shrink m-0-imp')
+                )}
+            </div>
+        )
+    }
+
     return (
-        <components.Option {...props}>
+        <components.Option
+            {...props}
+            className={`${props.className || ''} ${showUserAvatar ? 'dc__visible-hover dc__visible-hover--parent' : ''}`}
+        >
             <Tooltip {...getTooltipProps(tooltipProps)}>
                 <div className="flexbox dc__align-items-center dc__gap-8">
+                    {showUserAvatar && renderAvatar()}
                     {isMulti && showCheckboxForMultiSelect && !isCreatableOption && (
                         <Checkbox
                             onChange={noop}
                             onClick={handleChange}
                             isChecked={isSelected || false}
                             value={CHECKBOX_VALUE.CHECKED}
-                            rootClassName="mb-0 w-20 p-2 dc__align-self-start dc__no-shrink"
+                            rootClassName={`mb-0 w-20 p-2 dc__align-self-start dc__no-shrink ${showUserAvatar ? 'dc__visible-hover--child' : ''}`}
                             disabled={isDisabled}
                         />
                     )}
@@ -243,7 +274,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                                 <h4
                                     className={`m-0 fs-13 ${isCreatableOption ? 'cb-5' : 'cn-9'} fw-4 lh-20 dc__truncate`}
                                 >
-                                    {label}
+                                    {renderLabelText()}
                                 </h4>
                             </Tooltip>
                             {/* Add support for custom ellipsis if required */}

src/Shared/Components/SelectPicker/type.ts

@@ -310,6 +310,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean
+              isUserIdentifier?: boolean
               multiSelectProps?: Partial<Pick<SelectProps<OptionValue, IsMulti>, 'customDisplayText'>> & {
                   /**
                    * If true, the group heading can be selected
@@ -328,6 +329,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
         : {
               isMulti?: never
               multiSelectProps?: never
+              isUserIdentifier?: never
           })
 
 // Doing like this, because of global export error GroupHeadingPropsDefinedProps
@@ -353,6 +355,7 @@ export interface FilterSelectPickerProps
             | 'onMenuClose'
             | 'menuIsOpen'
             | 'onKeyDown'
+            | 'isUserIdentifier'
         > {
     appliedFilterOptions: SelectPickerOptionType[]
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void

src/Shared/Services/common.service.ts

@@ -47,8 +47,8 @@ export const saveCDPipeline = (request, { isTemplateView }: Required<Pick<AppCon
 
 export const getEnvironmentData = () => get<EnvironmentDataValuesDTO>(ROUTES.ENVIRONMENT_DATA)
 
-export const getClusterOptions = async (): Promise<ClusterType[]> => {
-    const { result } = await get<ClusterMinDTO[]>(ROUTES.CLUSTER_LIST_MIN)
+export const getClusterOptions = async (signal?: AbortSignal): Promise<ClusterType[]> => {
+    const { result } = await get<ClusterMinDTO[]>(ROUTES.CLUSTER_LIST_MIN, { signal })
 
     if (!result) {
         return []