chore: Move FileConfigTippy to common-lib, feat: SelectPicker - add support for formatCreateLabel

Author: RohitRaj011

src/Pages/Applications/DevtronApps/Details/CIPipeline/components/FileConfigTippy.tsx

@@ -0,0 +1,27 @@
+import Tippy from '@tippyjs/react'
+
+import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline.svg'
+import { VariableType } from '@Common/CIPipeline.Types'
+
+export const FileConfigTippy = ({ fileMountDir }: Pick<VariableType, 'fileMountDir'>) => (
+    <Tippy
+        trigger="click"
+        arrow={false}
+        className="default-tt w-200"
+        content={
+            <div className="fs-12 lh-18 flexbox-col dc__gap-2 mw-none">
+                <p className="m-0 fw-6 cn-0">File mount path</p>
+                <p className="m-0 cn-50 flexbox-col flex-nowrap dc__word-break">
+                    {fileMountDir}
+                    <br />
+                    <br />
+                    Ensure the uploaded file name is unique to avoid conflicts or overrides.
+                </p>
+            </div>
+        }
+    >
+        <div className="cursor flex">
+            <ICInfoOutline className="icon-dim-18 scn-6" />
+        </div>
+    </Tippy>
+)

src/Pages/Applications/DevtronApps/Details/CIPipeline/components/index.ts

@@ -1 +1,2 @@
 export * from './SystemVariableIcon'
+export * from './FileConfigTippy'

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

@@ -207,6 +207,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     onCreateOption,
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
+    formatCreateLabel,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
@@ -393,6 +394,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
+                            formatCreateLabel={formatCreateLabel}
                         />
                     </div>
                 </ConditionalWrap>

src/Shared/Components/SelectPicker/type.ts

@@ -238,6 +238,11 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default true
          */
         shouldShowNoOptionsMessage?: boolean
+        /**
+         * Gets the label for the "create new ..." option in the menu.
+         * @param inputValue the current input value.
+         */
+        formatCreateLabel?: (inputValue: string) => ReactNode
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean