Merge pull request #479 from devtron-labs/refactor/user-permission-select

refactor: replace select picker and button in user permission and permission groups

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.3.7",
+    "version": "1.3.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -15,10 +15,11 @@
  */
 
 import { Link } from 'react-router-dom'
-import Tippy from '@tippyjs/react'
 
 import { URLS } from '@Common/Constants'
 import { getRandomColor } from '@Common/Helper'
+import { ComponentSizeType } from '@Shared/constants'
+import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
 import { UserRoleGroupsTableProps } from './types'
 import { ReactComponent as TrashIcon } from '../../../../../../Assets/Icon/ic-delete-interactive.svg'
 import { UserRoleGroup } from '../../../types'
@@ -77,20 +78,19 @@ const UserRoleGroupTableRow = ({
                     showDropdownBorder={false}
                     breakLinesForTemporaryAccess
                     showTooltipWhenDisabled
+                    size={ComponentSizeType.medium}
                 />
             )}
             {showDelete && (
-                <Tippy className="default-tt" arrow={false} placement="top" content="Delete">
-                    <button
-                        type="button"
-                        className="dc__transparent flex p-4"
-                        data-testid="user-role-groups__delete-button icon-delete"
-                        onClick={_handleDelete}
-                        aria-label="Delete row"
-                    >
-                        <TrashIcon className="scn-6 icon-dim-16 icon-delete" />
-                    </button>
-                </Tippy>
+                <Button
+                    icon={<TrashIcon />}
+                    ariaLabel="Delete"
+                    dataTestId="user-role-groups__delete-button"
+                    onClick={_handleDelete}
+                    size={ComponentSizeType.xs}
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.negativeGrey}
+                />
             )}
         </div>
     )

src/Pages/GlobalConfigurations/Authorization/shared/components/UserRoleGroupsTable/UserRoleGroupTableRow.tsx

@@ -22,7 +22,6 @@ const FilterSelectPicker = ({
     ...props
 }: FilterSelectPickerProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false)
-    const [inputValue, setInputValue] = useState('')
 
     const [selectedOptions, setSelectedOptions] = useState<SelectPickerOptionType[]>(
         structuredClone(appliedFilterOptions ?? []),
@@ -50,7 +49,6 @@ const FilterSelectPicker = ({
     }
 
     const handleSelectOnChange: SelectPickerProps<number | string, true>['onChange'] = (selectedOptionsToUpdate) => {
-        setInputValue(inputValue)
         setSelectedOptions(structuredClone(selectedOptionsToUpdate) as SelectPickerOptionType[])
     }
 
@@ -111,8 +109,6 @@ const FilterSelectPicker = ({
                 isClearable={false}
                 customSelectedOptionsCount={appliedFiltersCount}
                 icon={filterIcon}
-                inputValue={inputValue}
-                onInputChange={setInputValue}
             />
         </div>
     )

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -23,13 +23,14 @@ import {
     Props as ReactSelectProps,
 } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
-import { ReactElement, useCallback, useMemo } from 'react'
+import { ReactElement, useCallback, useMemo, useState } from 'react'
 
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
 import { ComponentSizeType } from '@Shared/constants'
 import { ConditionalWrap } from '@Common/Helper'
 import Tippy from '@tippyjs/react'
+import { isNullOrUndefined } from '@Shared/Helpers'
 import { getCommonSelectStyle, getSelectPickerOptionByValue } from './utils'
 import {
     SelectPickerMultiValueLabel,
@@ -208,16 +209,31 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     fullWidth = false,
     customSelectedOptionsCount = null,
     renderMenuListFooter,
-    inputValue,
-    onInputChange,
     isCreatable = false,
     onCreateOption,
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
+    shouldHideMenu = false,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
-    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
-    const { isGroupHeadingSelectable = false, getIsOptionValid = () => true } = multiSelectProps
+    const [isFocussed, setIsFocussed] = useState(false)
+    const [inputValue, setInputValue] = useState('')
+
+    const {
+        inputId,
+        required,
+        isDisabled,
+        controlShouldRenderValue: _controlShouldRenderValue = true,
+        value,
+        options,
+        getOptionValue,
+    } = props
+    const {
+        isGroupHeadingSelectable = false,
+        getIsOptionValid = () => true,
+        customDisplayText = null,
+    } = multiSelectProps
+    const controlShouldRenderValue = _controlShouldRenderValue && !customDisplayText
 
     // Only large variant is supported for multi select picker
     const selectSize = isMulti && controlShouldRenderValue ? ComponentSizeType.large : size
@@ -265,9 +281,10 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 {...valueContainerProps}
                 showSelectedOptionsCount={showSelectedOptionsCount}
                 customSelectedOptionsCount={customSelectedOptionsCount}
+                isFocussed={isFocussed}
             />
         ),
-        [showSelectedOptionsCount, customSelectedOptionsCount],
+        [showSelectedOptionsCount, customSelectedOptionsCount, isFocussed],
     )
 
     const renderOption = useCallback(
@@ -315,11 +332,40 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         }
     }
 
+    const handleInputChange: ReactSelectProps['onInputChange'] = (updatedInputValue, actionMeta) => {
+        // If onInputChange is provided, then the input state should be controlled externally
+        if (props.onInputChange) {
+            props.onInputChange(updatedInputValue, actionMeta)
+            return
+        }
+        setInputValue(updatedInputValue)
+    }
+
     const handleKeyDown: ReactSelectProps['onKeyDown'] = (e) => {
         // Prevent the option from being selected if meta or control key is pressed
         if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
             e.preventDefault()
         }
+        props.onKeyDown?.(e)
+    }
+
+    const handleFocus: ReactSelectProps['onFocus'] = () => {
+        setIsFocussed(true)
+    }
+
+    const handleBlur: ReactSelectProps['onFocus'] = (e) => {
+        setIsFocussed(false)
+
+        props.onBlur?.(e)
+    }
+
+    const handleChange: ReactSelectProps<SelectPickerOptionType<OptionValue>, IsMulti>['onChange'] = (...params) => {
+        // Retain the input value on selection change
+        if (isMulti && isNullOrUndefined(props.inputValue)) {
+            setInputValue(inputValue)
+        }
+
+        props.onChange?.(...params)
     }
 
     const commonProps = useMemo(
@@ -352,6 +398,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             labelId,
             shouldRenderCustomOptions,
             controlShouldRenderValue,
+            customDisplayText,
         ],
     )
 
@@ -396,18 +443,27 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                 MultiValueRemove: SelectPickerMultiValueRemove,
                                 GroupHeading: renderGroupHeading,
                                 NoOptionsMessage: renderNoOptionsMessage,
+                                ...(shouldHideMenu && {
+                                    Menu: () => null,
+                                    DropdownIndicator: () => null,
+                                }),
                             }}
                             closeMenuOnSelect={!isMulti || closeMenuOnSelect}
                             allowCreateWhileLoading={false}
                             isValidNewOption={isValidNewOption}
                             createOptionPosition="first"
                             onCreateOption={handleCreateOption}
                             renderMenuListFooter={!optionListError && renderMenuListFooter}
-                            inputValue={inputValue}
-                            onInputChange={onInputChange}
+                            inputValue={props.inputValue ?? inputValue}
+                            onInputChange={handleInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
                             onKeyDown={handleKeyDown}
+                            customDisplayText={customDisplayText}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            controlShouldRenderValue={controlShouldRenderValue}
                         />
                     </div>
                 </ConditionalWrap>

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

@@ -30,7 +30,7 @@ import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
-import { ChangeEvent } from 'react'
+import { ChangeEvent, Children } from 'react'
 import { noop } from '@Common/Helper'
 import { CHECKBOX_VALUE } from '@Common/Types'
 import { Checkbox } from '@Common/Checkbox'
@@ -107,18 +107,43 @@ export const SelectPickerControl = <OptionValue,>(props: ControlProps<SelectPick
 export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>({
     showSelectedOptionsCount,
     customSelectedOptionsCount,
+    isFocussed,
     ...props
 }: ValueContainerProps<SelectPickerOptionType<OptionValue>> &
-    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount' | 'customSelectedOptionsCount'>) => {
-    const { getValue } = props
+    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount' | 'customSelectedOptionsCount'> & {
+        isFocussed: boolean
+    }) => {
+    const {
+        getValue,
+        selectProps: { customDisplayText },
+        children,
+    } = props
     const selectedOptionsLength = isNullOrUndefined(customSelectedOptionsCount)
         ? (getValue() ?? []).length
         : customSelectedOptionsCount
+    const childrenLength = Children.count(children)
 
     return (
         <div className="flex left dc__gap-8 flex-grow-1">
-            <div className="flex left">
-                <components.ValueContainer {...props} />
+            <div className="flex left flex-grow-1">
+                <components.ValueContainer {...props}>
+                    {customDisplayText && selectedOptionsLength > 0 && !isFocussed ? (
+                        <>
+                            <p className="m-0 fs-13 fw-4 lh-20 cn-9 dc__truncate">{customDisplayText}</p>
+                            <div className="dc__position-abs">
+                                {Children.map(children, (child, index) => {
+                                    if (index === childrenLength - 1) {
+                                        return child
+                                    }
+
+                                    return null
+                                })}
+                            </div>
+                        </>
+                    ) : (
+                        children
+                    )}
+                </components.ValueContainer>
             </div>
             {/* Size will not work here need to go in details later when prioritized */}
             {showSelectedOptionsCount && selectedOptionsLength > 0 && (
@@ -175,9 +200,13 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                             <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{startIcon}</div>
                         )}
                         <div className="flex-grow-1">
-                            <h4 className={`m-0 fs-13 ${isCreatableOption ? 'cb-5' : 'cn-9'} fw-4 lh-20 dc__truncate`}>
-                                {label}
-                            </h4>
+                            <Tooltip content={label} placement="right">
+                                <h4
+                                    className={`m-0 fs-13 ${isCreatableOption ? 'cb-5' : 'cn-9'} fw-4 lh-20 dc__truncate`}
+                                >
+                                    {label}
+                                </h4>
+                            </Tooltip>
                             {/* Add support for custom ellipsis if required */}
                             {showDescription &&
                                 (typeof description === 'string' ? (
@@ -261,11 +290,11 @@ export const SelectPickerMultiValueLabel = <OptionValue, IsMulti extends boolean
 }
 
 export const SelectPickerMultiValueRemove = (props: MultiValueRemoveProps) => (
-    <components.MultiValueLabel {...props}>
+    <components.MultiValueRemove {...props}>
         <span className="flex dc__no-shrink">
             <ICClose className="icon-dim-12 icon-use-fill-n6" />
         </span>
-    </components.MultiValueLabel>
+    </components.MultiValueRemove>
 )
 
 export const SelectPickerGroupHeading = <OptionValue,>({

src/Shared/Components/SelectPicker/common.tsx

@@ -84,6 +84,12 @@ declare module 'react-select/base' {
          * @default 'true'
          */
         showSelectedOptionIcon?: boolean
+        /**
+         * If provided, the custom display text is shown in the value container
+         *
+         * @default null
+         */
+        customDisplayText?: string
         /** Render function for the footer at the end of the options list. */
         renderOptionsFooter?: () => ReactNode
     }
@@ -241,10 +247,16 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default true
          */
         shouldShowNoOptionsMessage?: boolean
+        /**
+         * If true, the menu list and the dropdown indicator are hidden. Suitable for use cases like multi-inputs
+         *
+         * @default false
+         */
+        shouldHideMenu?: boolean
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean
-              multiSelectProps?: {
+              multiSelectProps?: Partial<Pick<SelectProps<OptionValue, IsMulti>, 'customDisplayText'>> & {
                   /**
                    * If true, the group heading can be selected
                    *