feat: add support for mandatory plugin in pre/post CD

package.json

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

src/Common/Policy.Types.ts

@@ -22,6 +22,11 @@ import { ResponseType } from './Types'
 export enum ApplyPolicyToStage {
     PRE_CI = 'PRE_CI',
     POST_CI = 'POST_CI',
+    PRE_CD = 'PRE_CD',
+    POST_CD = 'POST_CD',
+    /**
+     * @deprecated in mandatory plugin policy v2
+     */
     PRE_OR_POST_CI = 'PRE_OR_POST_CI',
 }
 
@@ -67,8 +72,17 @@ export interface ProcessPluginDataReturnType {
 }
 
 export enum ConsequenceAction {
+    /**
+     * This is used if the policy is enforced immediately.
+     */
     BLOCK = 'BLOCK',
+    /**
+     * This is used if the policy will be enforced after a certain timestamp.
+     */
     ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
+    /**
+     * This is used if the policy is not enforced yet (just to show waring).
+     */
     ALLOW_FOREVER = 'ALLOW_FOREVER',
 }
 

src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DescriptorProps } from './types'
+import { BuildInfraDescriptorProps } from './types'
 import { BreadCrumb, DOCUMENTATION } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 import { InfoIconTippy } from '../../../Shared'
@@ -25,7 +25,7 @@ const Descriptor = ({
     children,
     tippyInfoText,
     tippyAdditionalContent,
-}: DescriptorProps) => (
+}: BuildInfraDescriptorProps) => (
     <div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
         <div className="flexbox dc__align-items-center dc__gap-4">
             <BreadCrumb breadcrumbs={breadCrumbs} />

src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -74,7 +74,7 @@ export enum BuildInfraProfileVariants {
     CUSTOM = 'CUSTOM',
 }
 
-export interface DescriptorProps {
+export interface BuildInfraDescriptorProps {
     /**
      * In case we want to restrict the max-width
      */

src/Shared/Components/Button/Button.component.tsx

@@ -171,7 +171,7 @@ const Button = ({
                 <ButtonElement
                     {...props}
                     disabled={isDisabled}
-                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''}`}
+                    className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''} dc__w-fit-content`}
                     data-testid={dataTestId}
                     aria-label={ariaLabel}
                 >

src/Shared/Components/DatePicker/DateTimePicker.tsx

@@ -69,9 +69,11 @@ const DateTimePicker = ({
 
     return (
         <div className="date-time-picker">
-            <label className={`form__label ${required ? 'dc__required-field' : ''}`} htmlFor={id}>
-                {label}
-            </label>
+            {label && (
+                <label className={`form__label ${required ? 'dc__required-field' : ''}`} htmlFor={id}>
+                    {label}
+                </label>
+            )}
             <div className="flex left dc__gap-8">
                 <SingleDatePicker
                     id={id}

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -35,6 +35,7 @@ const FeatureTitleWithInfo = ({
     docLinkText = 'View Documentation',
     dataTestId = 'feature-title-with-info',
     additionalContent,
+    showInfoIcon = false,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -64,10 +65,14 @@ const FeatureTitleWithInfo = ({
                 </div>
             )
         }
-        if (breadCrumbs?.length > 0) {
+        if (breadCrumbs?.length > 0 || showInfoIcon) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-4">
-                    <BreadCrumb breadcrumbs={breadCrumbs} />
+                    {showInfoIcon && breadCrumbs?.length === 0 ? (
+                        <span className="fs-16 fw-6 cn-9 lh-32">{title}</span>
+                    ) : (
+                        <BreadCrumb breadcrumbs={breadCrumbs} />
+                    )}
                     <ICHelpOutline className={`${iconClassName} icon-dim-20 cursor fcn-6`} onClick={onClickInfoIcon} />
                 </div>
             )

src/Shared/Components/FeatureDescription/index.ts

@@ -16,3 +16,4 @@
 
 export * from './FeatureDescriptionModal'
 export { default as FeatureTitleWithInfo } from './FeatureTitleWithInfo'
+export * from './types'

src/Shared/Components/FeatureDescription/types.ts

@@ -38,4 +38,10 @@ export interface DescriptorProps extends FeatureDescriptionModalProps {
     docLinkText?: string
     dataTestId?: string
     additionalContent?: ReactNode
+    /**
+     * If true, the info icon is displayed which when clicked shows the feature description modal
+     *
+     * @default false
+     */
+    showInfoIcon?: boolean
 }

src/Shared/Components/Plugin/PluginImageContainer.tsx

@@ -21,7 +21,10 @@ import { ImageWithFallback } from '../ImageWithFallback'
 const PluginImageContainer = ({ imageProps, fallbackImageClassName }: PluginImageContainerProps) => (
     <ImageWithFallback
         fallbackImage={<ICLegoBlock className={`dc__no-shrink ${fallbackImageClassName}`} />}
-        imageProps={imageProps}
+        imageProps={{
+            loading: 'lazy',
+            ...imageProps,
+        }}
     />
 )
 

src/Shared/Components/Plugin/service.tsx

@@ -36,12 +36,14 @@ export const getPluginsDetail = async ({
     pluginIds,
     signal,
     shouldShowError = true,
+    parentPluginIdentifiers,
 }: PluginDetailServiceParamsType): Promise<Pick<GetPluginStoreDataReturnType, 'pluginStore'>> => {
     try {
         const payload: PluginDetailPayloadType = {
             appId,
             parentPluginId: parentPluginIds,
             pluginId: pluginIds,
+            parentPluginIdentifier: parentPluginIdentifiers ? `${parentPluginIdentifiers}` : null,
         }
 
         const { result } = await get<PluginDetailDTO>(
@@ -115,7 +117,7 @@ export const getAvailablePluginTags = async (appId: number): Promise<string[]> =
     }
 }
 
-export const getParentPluginList = async (appId?: number): Promise<ResponseType<MinParentPluginDTO[]>> => {
-    const queryParams: GetParentPluginListPayloadType = { appId }
-    return get<MinParentPluginDTO[]>(getUrlWithSearchParams(ROUTES.PLUGIN_LIST_MIN, queryParams))
-}
+export const getParentPluginList = async (
+    params?: Partial<GetParentPluginListPayloadType>,
+): Promise<ResponseType<MinParentPluginDTO[]>> =>
+    get<MinParentPluginDTO[]>(getUrlWithSearchParams(ROUTES.PLUGIN_LIST_MIN, params))

src/Shared/Components/Plugin/types.ts

@@ -30,7 +30,9 @@ export interface PluginAPIBaseQueryParamsType {
 }
 
 export interface GetPluginTagsPayloadType extends PluginAPIBaseQueryParamsType {}
-export interface GetParentPluginListPayloadType extends PluginAPIBaseQueryParamsType {}
+export interface GetParentPluginListPayloadType extends PluginAPIBaseQueryParamsType {
+    type?: 'ALL'
+}
 
 export interface PluginTagNamesDTO {
     tagNames: string[]
@@ -73,7 +75,7 @@ export interface ParentPluginDTO {
     pluginIdentifier: string
 }
 
-export interface MinParentPluginDTO extends Pick<ParentPluginDTO, 'id' | 'name' | 'icon'> {}
+export interface MinParentPluginDTO extends Pick<ParentPluginDTO, 'id' | 'name' | 'icon' | 'pluginIdentifier'> {}
 
 export interface PluginDetailDTO {
     parentPlugins: ParentPluginDTO[]
@@ -84,6 +86,7 @@ export interface PluginDetailServiceParamsType {
     appId: number
     pluginIds?: number[]
     parentPluginIds?: number[]
+    parentPluginIdentifiers?: string[]
     /**
      * @default true
      */
@@ -94,6 +97,7 @@ export interface PluginDetailServiceParamsType {
 export interface PluginDetailPayloadType extends Pick<PluginDetailServiceParamsType, 'appId'> {
     pluginId?: PluginDetailServiceParamsType['pluginIds']
     parentPluginId?: PluginDetailServiceParamsType['parentPluginIds']
+    parentPluginIdentifier?: PluginDetailServiceParamsType['parentPluginIdentifiers'][number]
 }
 
 export interface PluginListFiltersType extends Pick<BaseFilterQueryParams<unknown>, 'searchKey'> {

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

@@ -14,14 +14,7 @@
  * limitations under the License.
  */
 
-import {
-    ControlProps,
-    GroupHeadingProps,
-    MultiValueProps,
-    OptionProps,
-    ValueContainerProps,
-    MenuPlacement,
-} from 'react-select'
+import { GroupHeadingProps, MultiValueProps, OptionProps, ValueContainerProps, MenuPlacement } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 import { ReactElement, useCallback, useMemo } from 'react'
 
@@ -213,9 +206,10 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     isCreatable = false,
     onCreateOption,
     closeMenuOnSelect = false,
+    shouldShowNoOptionsMessage = true,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
-    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
+    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
     const { isGroupHeadingSelectable = false, getIsOptionValid = () => true } = multiSelectProps
 
     // Only large variant is supported for multi select picker
@@ -252,18 +246,12 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 value as SelectPickerOptionType<OptionValue>[],
                 trimmedInput as OptionValue,
                 null,
+                getOptionValue,
             ) &&
-            !getSelectPickerOptionByValue<OptionValue>(options, trimmedInput as OptionValue, null)
+            !getSelectPickerOptionByValue<OptionValue>(options, trimmedInput as OptionValue, null, getOptionValue)
         )
     }
 
-    const renderControl = useCallback(
-        (controlProps: ControlProps<SelectPickerOptionType<OptionValue>>) => (
-            <SelectPickerControl {...controlProps} icon={icon} showSelectedOptionIcon={shouldShowSelectedOptionIcon} />
-        ),
-        [icon, shouldShowSelectedOptionIcon],
-    )
-
     const renderValueContainer = useCallback(
         (valueContainerProps: ValueContainerProps<SelectPickerOptionType<OptionValue>>) => (
             <SelectPickerValueContainer
@@ -298,7 +286,11 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             return <GenericSectionErrorState reload={reloadOptionList} />
         }
 
-        return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No options</p>
+        if (shouldShowNoOptionsMessage) {
+            return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">No options</p>
+        }
+
+        return null
     }
 
     const renderDisabledTippy = (children: ReactElement) => (
@@ -381,7 +373,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                 IndicatorSeparator: null,
                                 LoadingIndicator: SelectPickerLoadingIndicator,
                                 DropdownIndicator: SelectPickerDropdownIndicator,
-                                Control: renderControl,
+                                Control: SelectPickerControl,
                                 Option: renderOption,
                                 MenuList: SelectPickerMenuList,
                                 ClearIndicator: SelectPickerClearIndicator,
@@ -399,6 +391,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             renderMenuListFooter={!optionListError && renderMenuListFooter}
                             inputValue={inputValue}
                             onInputChange={onInputChange}
+                            icon={icon}
+                            showSelectedOptionIcon={shouldShowSelectedOptionIcon}
                         />
                     </div>
                 </ConditionalWrap>

src/Shared/Components/SelectPicker/common.tsx

@@ -59,13 +59,12 @@ export const SelectPickerClearIndicator = <OptionValue,>(
     </components.ClearIndicator>
 )
 
-export const SelectPickerControl = <OptionValue, IsMulti extends boolean>({
-    icon,
-    showSelectedOptionIcon,
-    ...props
-}: ControlProps<SelectPickerOptionType<OptionValue>> &
-    Pick<SelectPickerProps<OptionValue, IsMulti>, 'icon' | 'showSelectedOptionIcon'>) => {
-    const { children, getValue } = props
+export const SelectPickerControl = <OptionValue,>(props: ControlProps<SelectPickerOptionType<OptionValue>>) => {
+    const {
+        children,
+        getValue,
+        selectProps: { icon, showSelectedOptionIcon },
+    } = props
     const { startIcon, endIcon } = getValue()?.[0] ?? {}
 
     let iconToDisplay: SelectPickerOptionType<OptionValue>['startIcon'] = icon
@@ -149,7 +148,8 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                     />
                 )}
                 <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
-                    {startIcon && (
+                    {/* startIcon is not to be shown in option in case of multi select */}
+                    {!isMulti && startIcon && (
                         <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{startIcon}</div>
                     )}
                     <div className="flex-grow-1">
@@ -201,7 +201,7 @@ export const SelectPickerMultiValueLabel = <OptionValue, IsMulti extends boolean
     Pick<SelectPickerProps<OptionValue, IsMulti>['multiSelectProps'], 'getIsOptionValid'>) => {
     const { data, selectProps } = props
     const isOptionValid = getIsOptionValid(data)
-    const iconToDisplay = isOptionValid ? data.startIcon || data.endIcon : <ICErrorExclamation />
+    const iconToDisplay = isOptionValid ? (data.startIcon || data.endIcon) ?? null : <ICErrorExclamation />
 
     return (
         <div className="flex dc__gap-4 mw-0 dc__truncate">