feat: custom plugin condition details

package.json

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

src/Shared/Components/Plugin/types.ts

@@ -16,7 +16,7 @@
 
 import { MutableRefObject } from 'react'
 
-import { ConsequenceType, ServerErrors, VariableType } from '../../../Common'
+import { ConditionDetails, ConsequenceType, ServerErrors, VariableType } from '../../../Common'
 import { BaseFilterQueryParams } from '../../types'
 import { ImageWithFallbackProps } from '../ImageWithFallback'
 import { getPluginStoreData } from './service'
@@ -50,10 +50,19 @@ interface MinimalPluginVersionDataDTO {
     isLatest: boolean
 }
 
+export interface PluginStepConditionDTO extends Pick<ConditionDetails, 'conditionType' | 'conditionalValue'> {
+    conditionalOperator: ConditionDetails['conditionOperator']
+    id: number
+}
+
+interface PluginVariableType extends VariableType {
+    pluginStepCondition?: PluginStepConditionDTO[]
+}
+
 interface DetailedPluginVersionDTO extends MinimalPluginVersionDataDTO {
     tags: string[]
-    inputVariables: VariableType[]
-    outputVariables: VariableType[]
+    inputVariables: PluginVariableType[]
+    outputVariables: PluginVariableType[]
     /**
      * Present in case of shared plugin
      */
@@ -111,7 +120,7 @@ export interface ParentPluginType
     pluginVersions: MinimalPluginVersionDataDTO[]
 }
 
-interface DetailedPluginVersionType
+export interface DetailedPluginVersionType
     extends Pick<MinimalPluginVersionDataDTO, 'id' | 'description' | 'name' | 'pluginVersion'>,
         Pick<DetailedPluginVersionDTO, 'tags' | 'inputVariables' | 'outputVariables' | 'updatedBy' | 'docLink'>,
         Pick<ParentPluginType, 'icon' | 'type' | 'pluginIdentifier'> {

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

@@ -32,10 +32,12 @@ export const SelectPickerTextArea = ({
     maxHeight,
     refVar,
     dependentRefs,
+    filterOption: filterOptionProp,
     ...props
 }: SelectPickerTextAreaProps) => {
     // STATES
     const [inputValue, setInputValue] = useState((value as SingleValue<SelectPickerOptionType<string>>)?.value || '')
+    const [isInputDirty, setIsInputDirty] = useState(false)
 
     // REFS
     const selectRef = useRef<SelectInstance<SelectPickerOptionType<string>>>(null)
@@ -50,6 +52,7 @@ export const SelectPickerTextArea = ({
     useEffect(() => {
         const selectValue = value as SingleValue<SelectPickerOptionType<string>>
         setInputValue(selectValue?.value || '')
+        setIsInputDirty(false)
     }, [value])
 
     // METHODS
@@ -120,9 +123,23 @@ export const SelectPickerTextArea = ({
         return false
     }
 
+    const filterOption: SelectPickerTextAreaProps['filterOption'] = (...filterOptionArgs) => {
+        if (!isInputDirty) {
+            return true
+        }
+
+        if (filterOptionProp) {
+            return filterOptionProp(...filterOptionArgs)
+        }
+
+        const [option, rawInput] = filterOptionArgs
+        return option.label.toLowerCase().includes(rawInput.toLowerCase())
+    }
+
     const onInputChange = (newValue: string, { action }: InputActionMeta) => {
         if (action === ReactSelectInputAction.inputChange) {
             setInputValue(newValue)
+            setIsInputDirty(true)
 
             if (!newValue) {
                 onChange?.(null, {
@@ -137,6 +154,7 @@ export const SelectPickerTextArea = ({
             const selectValue = value as SingleValue<SelectPickerOptionType<string>>
             // Reverting input to previously selected value in case of blur event. (no-selection)
             setInputValue(selectValue?.value || '')
+            setIsInputDirty(false)
         }
     }
 
@@ -195,6 +213,7 @@ export const SelectPickerTextArea = ({
             selectRef={selectRef}
             inputValue={inputValue}
             value={value}
+            filterOption={filterOption}
             onInputChange={onInputChange}
             controlShouldRenderValue={false}
             onChange={onChange}