Merge branch 'main' into fix/jobs-artifacts

Author: Elessar1802

package-lock.json

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

package.json

@@ -0,0 +1,222 @@
+import ReactSelect, { ControlProps, MenuListProps, ValueContainerProps } from 'react-select'
+import { ReactElement, useCallback, useMemo } 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 { getCommonSelectStyle } from './utils'
+import {
+    SelectPickerClearIndicator,
+    SelectPickerControl,
+    SelectPickerDropdownIndicator,
+    SelectPickerLoadingIndicator,
+    SelectPickerMenuList,
+    SelectPickerOption,
+    SelectPickerValueContainer,
+} from './common'
+import { SelectPickerOptionType, SelectPickerProps } from './type'
+
+/**
+ * Generic component for select picker
+ *
+ * @example With icon in control
+ * ```tsx
+ * <SelectPicker ... icon={<CustomIcon />} />
+ * ```
+ *
+ * @example Medium menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.medium} />
+ * ```
+ *
+ * @example Large menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.large} />
+ * ```
+ *
+ * @example Required label
+ * ```tsx
+ * <SelectPicker ... required label="Label" />
+ * ```
+ *
+ * @example Custom label
+ * ```tsx
+ * <SelectPicker ... label={<div>Label</div>} />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <SelectPicker ... error="Something went wrong" />
+ * ```
+ *
+ * @example Helper text
+ * ```tsx
+ * <SelectPicker ... helperText="Help information" />
+ * ```
+ *
+ * @example Menu list footer
+ * The footer is sticky by default
+ * ```tsx
+ * <SelectPicker
+ *      ...
+ *      renderMenuListFooter={() => (
+ *          <div className="px-8 py-6 dc__border-top bcn-50 cn-6">
+ *              <div>Foot note</div>
+ *          </div>
+ *      )}
+ * />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <SelectPicker ... isLoading />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <SelectPicker ... isDisabled />
+ * ```
+ *
+ * @example Loading & disabled state
+ * ```tsx
+ * <SelectPicker ... isLoading isDisabled />
+ * ```
+ *
+ * @example Hide selected option icon in control
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionIcon={false} />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... isClearable />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionsCount />
+ * ```
+ */
+const SelectPicker = ({
+    error,
+    icon,
+    renderMenuListFooter,
+    helperText,
+    placeholder = 'Select a option',
+    label,
+    showSelectedOptionIcon = true,
+    size = ComponentSizeType.medium,
+    disabledTippyContent,
+    showSelectedOptionsCount = false,
+    menuSize,
+    ...props
+}: SelectPickerProps) => {
+    const { inputId, required, isDisabled } = props
+
+    const labelId = `${inputId}-label`
+    const errorElementId = `${inputId}-error-msg`
+
+    const selectStyles = useMemo(
+        () =>
+            getCommonSelectStyle({
+                error,
+                size,
+                menuSize,
+            }),
+        [error, size, menuSize],
+    )
+
+    const renderControl = useCallback(
+        (controlProps: ControlProps<SelectPickerOptionType>) => (
+            <SelectPickerControl {...controlProps} icon={icon} showSelectedOptionIcon={showSelectedOptionIcon} />
+        ),
+        [icon, showSelectedOptionIcon],
+    )
+
+    const renderMenuList = useCallback(
+        (menuProps: MenuListProps<SelectPickerOptionType>) => (
+            <SelectPickerMenuList {...menuProps} renderMenuListFooter={renderMenuListFooter} />
+        ),
+        [],
+    )
+
+    const renderValueContainer = useCallback(
+        (valueContainerProps: ValueContainerProps<SelectPickerOptionType>) => (
+            <SelectPickerValueContainer {...valueContainerProps} showSelectedOptionsCount={showSelectedOptionsCount} />
+        ),
+        [showSelectedOptionsCount],
+    )
+
+    const renderDisabledTippy = (children: ReactElement) => (
+        <Tippy content={disabledTippyContent} placement="top" className="default-tt" arrow={false}>
+            {children}
+        </Tippy>
+    )
+
+    return (
+        <div className="flex column left top dc__gap-4">
+            {/* Note: Common out for fields */}
+            <div className="flex column left top dc__gap-6 w-100">
+                {label && (
+                    <label
+                        className="fs-13 lh-20 cn-7 fw-4 dc__block mb-0"
+                        htmlFor={inputId}
+                        data-testid={`label-${inputId}`}
+                        id={labelId}
+                    >
+                        {typeof label === 'string' ? (
+                            <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
+                                <span className="dc__truncate">{label}</span>
+                                {required && <span>&nbsp;</span>}
+                            </span>
+                        ) : (
+                            label
+                        )}
+                    </label>
+                )}
+                <ConditionalWrap condition={isDisabled && !!disabledTippyContent} wrap={renderDisabledTippy}>
+                    <div className="w-100">
+                        <ReactSelect<SelectPickerOptionType, boolean>
+                            {...props}
+                            placeholder={placeholder}
+                            components={{
+                                IndicatorSeparator: null,
+                                LoadingIndicator: SelectPickerLoadingIndicator,
+                                DropdownIndicator: SelectPickerDropdownIndicator,
+                                Control: renderControl,
+                                Option: SelectPickerOption,
+                                MenuList: renderMenuList,
+                                ClearIndicator: SelectPickerClearIndicator,
+                                ValueContainer: renderValueContainer,
+                            }}
+                            styles={selectStyles}
+                            menuPlacement="auto"
+                            menuPosition="fixed"
+                            menuShouldScrollIntoView
+                            backspaceRemovesValue={false}
+                            aria-errormessage={errorElementId}
+                            aria-invalid={!!error}
+                            aria-labelledby={labelId}
+                        />
+                    </div>
+                </ConditionalWrap>
+            </div>
+            {error && (
+                <div className="flex left dc__gap-4 cr-5 fs-11 lh-16 fw-4" id={errorElementId}>
+                    <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__no-shrink dc__align-self-start" />
+                    <span className="dc__ellipsis-right__2nd-line">{error}</span>
+                </div>
+            )}
+            {/* Note: Common out for input fields */}
+            {helperText && (
+                <div className="flex left dc__gap-4 fs-11 lh-16 cn-7">
+                    <ICInfoFilledOverride className="icon-dim-16 dc__no-shrink dc__align-self-start" />
+                    <span className="dc__ellipsis-right__2nd-line">{helperText}</span>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default SelectPicker

src/Assets/Icon/ic-caret-down.svg

@@ -0,0 +1,117 @@
+import {
+    components,
+    DropdownIndicatorProps,
+    ControlProps,
+    OptionProps,
+    ClearIndicatorProps,
+    ValueContainerProps,
+    MenuListProps,
+} from 'react-select'
+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 { SelectPickerOptionType, SelectPickerProps } from './type'
+
+export const SelectPickerDropdownIndicator = (props: DropdownIndicatorProps<SelectPickerOptionType>) => {
+    const { isDisabled } = props
+
+    return (
+        <components.DropdownIndicator {...props}>
+            <ICCaretDown className={`icon-dim-16 ${isDisabled ? 'scn-3' : 'scn-6'} dc__no-shrink`} />
+        </components.DropdownIndicator>
+    )
+}
+
+export const SelectPickerClearIndicator = (props: ClearIndicatorProps<SelectPickerOptionType>) => (
+    <components.ClearIndicator {...props}>
+        <ICClose className="icon-dim-16 fcn-6 dc__no-shrink" />
+    </components.ClearIndicator>
+)
+
+export const SelectPickerControl = ({
+    icon,
+    showSelectedOptionIcon,
+    ...props
+}: ControlProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'icon' | 'showSelectedOptionIcon'>) => {
+    const { children, getValue } = props
+    const { startIcon, endIcon } = getValue()?.[0] ?? {}
+
+    let iconToDisplay = icon
+
+    if (showSelectedOptionIcon && (startIcon || endIcon)) {
+        iconToDisplay = startIcon || endIcon
+    }
+
+    return (
+        <components.Control {...props}>
+            {iconToDisplay && (
+                <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{iconToDisplay}</div>
+            )}
+            {children}
+        </components.Control>
+    )
+}
+
+export const SelectPickerValueContainer = ({
+    showSelectedOptionsCount,
+    ...props
+}: ValueContainerProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'showSelectedOptionsCount'>) => {
+    const { getValue } = props
+    const selectedOptionsLength = (getValue() ?? []).length
+
+    return (
+        <div className="flex left dc__gap-8 flex-grow-1">
+            <div className="flex left">
+                <components.ValueContainer {...props} />
+            </div>
+            {showSelectedOptionsCount && selectedOptionsLength > 0 && (
+                <div className="bcb-5 dc__border-radius-4-imp pl-5 pr-5 cn-0 fs-12 fw-6 lh-18 dc__truncate dc__no-shrink">
+                    {selectedOptionsLength}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export const SelectPickerLoadingIndicator = () => <Progressing />
+
+export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {
+    const { label, data } = props
+    const { description, startIcon, endIcon } = data ?? {}
+    const showDescription = !!description
+
+    return (
+        <components.Option {...props}>
+            <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
+                {startIcon && (
+                    <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{startIcon}</div>
+                )}
+                <div className="flex-grow-1">
+                    <h4 className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate">{label}</h4>
+                    {/* Add support for custom ellipsis if required */}
+                    {showDescription && <p className="m-0 fs-12 fw-4 lh-18 cn-7 dc__truncate">{description}</p>}
+                </div>
+                {endIcon && <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{endIcon}</div>}
+            </div>
+        </components.Option>
+    )
+}
+
+export const SelectPickerMenuList = ({
+    renderMenuListFooter,
+    ...props
+}: MenuListProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
+    const { children } = props
+
+    return (
+        <components.MenuList {...props}>
+            <div className="py-4 cursor">{children}</div>
+            {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
+            {renderMenuListFooter && (
+                <div className=" dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0">
+                    {renderMenuListFooter()}
+                </div>
+            )}
+        </components.MenuList>
+    )
+}

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

@@ -0,0 +1,2 @@
+export { default as SelectPicker } from './SelectPicker.component'
+export * from './type'