Merge pull request #664 from devtron-labs/feat/async-select-recent-option

feat: async-select-recent-option

Author: shivani170

package-lock.json

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

package.json

@@ -114,6 +114,7 @@ export const ROUTES = {
     ATTRIBUTES_USER: 'attributes/user',
     GET: 'get',
     UPDATE: 'update',
+    PATCH: 'patch',
     ENVIRONMENT_LIST_MIN: 'env/autocomplete',
     CLUSTER: 'cluster',
     API_RESOURCE: 'k8s/api-resources',

src/Common/Constants.ts

@@ -18,5 +18,5 @@ export { default as ConfirmationModal, BaseConfirmationModal } from './Confirmat
 export { DeleteConfirmationModal } from './DeleteConfirmationModal'
 export { ForceDeleteConfirmationModal } from './ForceDeleteConfirmationModal'
 export { CannotDeleteModal } from './CannotDeleteModal'
-export { ConfirmationModalVariantType, type ConfirmationModalProps } from './types'
+export { ConfirmationModalVariantType, type ConfirmationModalProps, type DeleteConfirmationModalProps } from './types'
 export { ConfirmationModalProvider } from './ConfirmationModalContext'

src/Shared/Components/ConfirmationModal/index.tsx

@@ -145,62 +145,3 @@ export const DATE_PICKER_IDS = {
     MONTH: 'month_picker',
     TIME: 'time_picker',
 }
-
-export const reactSelectStyles = {
-    container: (base) => ({
-        ...base,
-        height: '36px',
-    }),
-    control: (base, state) => ({
-        ...base,
-        boxShadow: 'none',
-        minHeight: '36px',
-        cursor: 'pointer',
-        borderColor: 'var(--N200)',
-        backgroundColor: 'var(--bg-secondary)',
-
-        ...(state.isDisabled
-            ? {
-                  borderColor: 'var(--N200)',
-                  backgroundColor: 'var(--N100)',
-                  cursor: 'not-allowed',
-              }
-            : {}),
-
-        '&:hover': {
-            borderColor: 'var(--N400)',
-        },
-        '&:focus, &:focus-within': {
-            borderColor: 'var(--B500)',
-            outline: 'none',
-        },
-    }),
-    valueContainer: (base) => ({
-        ...base,
-        padding: 0,
-        width: '180px',
-    }),
-    input: (base) => ({
-        ...base,
-        padding: 0,
-        margin: 0,
-    }),
-    dropdownIndicator: (base, state) => ({
-        ...base,
-        transition: 'all .2s ease',
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        padding: 0,
-    }),
-    option: (base) => ({
-        ...base,
-        fontSize: '13px',
-        cursor: 'pointer',
-    }),
-    menuList: (base) => ({
-        ...base,
-        position: 'relative',
-        paddingBottom: '0px',
-        maxHeight: '250px',
-        width: '200px',
-    }),
-}

src/Shared/Components/DatePicker/constants.ts

@@ -16,6 +16,7 @@
 
 import { components, DropdownIndicatorProps, StylesConfig } from 'react-select'
 import { ReactComponent as DropDownIcon } from '@Icons/ic-chevron-down.svg'
+import { NO_MATCHING_RESULT, TYPE_3_CHARACTERS_TO_SEE_MATCHING_RESULTS } from '@Shared/constants'
 
 export const CommonGroupedDropdownStyles: StylesConfig = {
     container: (base, state) => ({
@@ -189,9 +190,21 @@ export const AppSelectorDropdownIndicator = (props: DropdownIndicatorProps) => {
     )
 }
 
+/**
+ *
+ * @returns {string}
+ * @description Returns the no matching result text for the select component.
+ */
+export const getNoMatchingResultText = () => NO_MATCHING_RESULT
+
+/**
+ * @param inputObj
+ * @returns {string}
+ * @description Returns the no options message for the select component.
+ */
 export const AppSelectorNoOptionsMessage = (inputObj: { inputValue: string }): string => {
     if (inputObj && (inputObj.inputValue === '' || inputObj.inputValue.length < 3)) {
-        return 'Type 3 chars to see matching results'
+        return TYPE_3_CHARACTERS_TO_SEE_MATCHING_RESULTS
     }
-    return 'No matching results'
+    return getNoMatchingResultText()
 }

src/Shared/Components/ReactSelect/constants.tsx

@@ -18,8 +18,8 @@ import {
     GroupHeadingProps,
     MultiValueProps,
     OptionProps,
-    ValueContainerProps,
     Props as ReactSelectProps,
+    ValueContainerProps,
 } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import { ReactElement, useCallback, useMemo, useRef, useState } from 'react'
@@ -28,23 +28,24 @@ import { ConditionalWrap } from '@Common/Helper'
 import Tippy from '@tippyjs/react'
 import { deriveBorderRadiusAndBorderClassFromConfig, isNullOrUndefined } from '@Shared/Helpers'
 import { getCommonSelectStyle, getSelectPickerOptionByValue } from './utils'
+
+import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
+import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper'
+import { getFormFieldAriaAttributes } from '../FormFieldWrapper'
 import {
-    SelectPickerMultiValueLabel,
-    SelectPickerMultiValueRemove,
+    renderLoadingMessage,
     SelectPickerClearIndicator,
     SelectPickerControl,
     SelectPickerDropdownIndicator,
     SelectPickerGroupHeading,
+    SelectPickerInput,
     SelectPickerMenuList,
+    SelectPickerMultiValueLabel,
+    SelectPickerMultiValueRemove,
     SelectPickerOption,
     SelectPickerValueContainer,
-    SelectPickerInput,
 } from './common'
-import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
-import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper'
-import { getFormFieldAriaAttributes } from '../FormFieldWrapper'
-import './selectPicker.scss'
 
 /**
  * Generic component for select picker
@@ -180,6 +181,7 @@ import './selectPicker.scss'
  * />
  * ```
  */
+
 const SelectPicker = <OptionValue, IsMulti extends boolean>({
     error,
     icon,
@@ -268,6 +270,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     )
 
     // Used to show the create new option for creatable select and the option(s) doesn't have the input value
+
     const isValidNewOption = (_inputValue: string) => {
         const trimmedInput = _inputValue?.trim()
 
@@ -459,6 +462,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             MultiValueRemove: SelectPickerMultiValueRemove,
                             GroupHeading: renderGroupHeading,
                             NoOptionsMessage: renderNoOptionsMessage,
+                            LoadingMessage: renderLoadingMessage,
                             Input: SelectPickerInput,
                             ...(shouldHideMenu && {
                                 Menu: () => null,

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

@@ -20,8 +20,8 @@ import { InputActionMeta, SelectInstance, SingleValue } from 'react-select'
 import { ReactSelectInputAction } from '@Common/Constants'
 import { useThrottledEffect } from '@Common/Helper'
 
-import SelectPicker from './SelectPicker.component'
 import { SelectPickerOptionType, SelectPickerTextAreaProps } from './type'
+import SelectPicker from './SelectPicker.component'
 
 export const SelectPickerTextArea = ({
     value,

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

@@ -75,7 +75,11 @@ export const SelectPickerDropdownIndicator = <OptionValue,>(
 
     return (
         <components.DropdownIndicator {...props}>
-            {isLoading ? <Progressing /> : <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />}
+            {isLoading ? (
+                <Progressing fillColor="var(--N500)" />
+            ) : (
+                <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
+            )}
         </components.DropdownIndicator>
     )
 }
@@ -421,3 +425,7 @@ export const SelectPickerGroupHeading = <OptionValue,>({
         </components.GroupHeading>
     )
 }
+
+export const renderLoadingMessage = () => (
+    <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8 dc__loading-dots">Loading</p>
+)

src/Shared/Components/SelectPicker/common.tsx

@@ -19,3 +19,4 @@ export * from './useGetResourceKindsOptions'
 export * from './UseDownload'
 export * from './useForm'
 export * from './useStickyEvent'
+export * from './useUserPreferences'