Merge branch 'feat/plugin-policy' into feat/ci-pipeline-mandatory-plugins

AbhishekA1509 · AbhishekA1509 · commit f0e0aa421e5c · 2024-10-17T12:44:36.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "4.0.2-beta-1",
+    "version": "0.5.1-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/Policy.Types.ts b/src/Common/Policy.Types.ts
@@ -21,6 +21,11 @@ import { ServerErrors } from './ServerError'
 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',
     POST_CD = 'POST_CD',
     PRE_CD = 'PRE_CD',
@@ -95,8 +100,17 @@ export type ProcessPluginDataParamsType = {
 } & (ProcessPluginDataCIParamsType | ProcessPluginDataCDParamsType)
 
 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',
 }
 
diff --git a/src/Common/RJSF/utils.tsx b/src/Common/RJSF/utils.tsx
@@ -166,7 +166,7 @@ export const parseSchemaHiddenType = (hiddenSchema: HiddenType): MetaHiddenType
     const clone = structuredClone(hiddenSchema)
     if (typeof clone === 'string') {
         return {
-            value: false,
+            value: true,
             path: conformPathToPointers(clone),
         }
     }
diff --git a/src/Shared/Components/Button/Button.component.tsx b/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}
                 >
diff --git a/src/Shared/Components/DatePicker/DateTimePicker.tsx b/src/Shared/Components/DatePicker/DateTimePicker.tsx
@@ -112,8 +112,8 @@ const DateTimePicker = ({
                             onChange={handleTimeChange}
                             data-testid={dataTestIdForTime}
                             menuSize={ComponentSizeType.xs}
-                            menuPosition="absolute"
                             size={ComponentSizeType.large}
+                            shouldMenuAlignRight
                         />
                     </div>
                 )}
diff --git a/src/Shared/Components/DatePicker/TimeSelect.tsx b/src/Shared/Components/DatePicker/TimeSelect.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ClockIcon } from '@Icons/ic-clock.svg'
 import { ComponentSizeType } from '@Shared/constants'
 import { DEFAULT_TIME_OPTIONS } from './utils'
@@ -29,26 +28,18 @@ export const TimePickerSelect = ({
     error,
     selectedTimeOption,
 }: TimeSelectProps) => (
-    <>
-        <SelectPicker
-            inputId={DATE_PICKER_IDS.TIME}
-            placeholder="12:00 AM"
-            options={DEFAULT_TIME_OPTIONS}
-            isSearchable={false}
-            isDisabled={disabled}
-            {...timePickerProps}
-            value={selectedTimeOption}
-            icon={<ClockIcon className="icon-dim-20 fcn-6" />}
-            onChange={onChange}
-            data-testid={DATE_PICKER_IDS.TIME}
-            size={ComponentSizeType.large}
-            menuPosition="absolute"
-        />
-        {error && (
-            <div className="form__error">
-                <ErrorIcon className="form__icon form__icon--error" />
-                {error}
-            </div>
-        )}
-    </>
+    <SelectPicker
+        inputId={DATE_PICKER_IDS.TIME}
+        placeholder="12:00 AM"
+        options={DEFAULT_TIME_OPTIONS}
+        isSearchable={false}
+        isDisabled={disabled}
+        {...timePickerProps}
+        value={selectedTimeOption}
+        icon={<ClockIcon className="icon-dim-20 fcn-6" />}
+        onChange={onChange}
+        data-testid={DATE_PICKER_IDS.TIME}
+        size={ComponentSizeType.large}
+        error={error}
+    />
 )
diff --git a/src/Shared/Components/Plugin/PluginImageContainer.tsx b/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,
+        }}
     />
 )
 
diff --git a/src/Shared/Components/Plugin/service.tsx b/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>(
@@ -68,14 +70,13 @@ export const getPluginStoreData = async ({
     appId,
     offset = 0,
     signal,
-    size = 20,
 }: GetPluginStoreDataServiceParamsType): Promise<GetPluginStoreDataReturnType> => {
     try {
         const payload: GetPluginListPayloadType = {
             searchKey,
             offset,
             appId,
-            size,
+            size: 20,
             tag: selectedTags,
         }
         const { result } = await get<PluginDetailDTO>(getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_LIST_V2, payload), {
@@ -116,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))
diff --git a/src/Shared/Components/Plugin/types.ts b/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'> {
@@ -178,7 +182,6 @@ export interface GetPluginStoreDataServiceParamsType extends Pick<PluginListFilt
     signal: AbortSignal
     appId: number
     offset?: number
-    size?: number
 }
 
 export interface GetPluginListPayloadType
diff --git a/src/Shared/Components/SelectPicker/SelectPicker.component.tsx b/src/Shared/Components/SelectPicker/SelectPicker.component.tsx
@@ -206,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
@@ -245,8 +246,9 @@ 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)
         )
     }
 
@@ -284,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) => (
diff --git a/src/Shared/Components/SelectPicker/common.tsx b/src/Shared/Components/SelectPicker/common.tsx
@@ -148,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">
@@ -200,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">
diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts
@@ -222,6 +222,14 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default false
          */
         isCreatable?: boolean
+        /**
+         * If false, the no options message is not shown
+         *
+         * Note: Handling for the menu distortion needs to be handled explicitly in this case
+         *
+         * @default true
+         */
+        shouldShowNoOptionsMessage?: boolean
     } & (IsMulti extends true
         ? {
               isMulti: IsMulti | boolean
@@ -263,6 +271,7 @@ export interface FilterSelectPickerProps
             | 'shouldMenuAlignRight'
             | 'optionListError'
             | 'reloadOptionList'
+            | 'getOptionValue'
         > {
     appliedFilterOptions: SelectPickerOptionType[]
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void
diff --git a/src/Shared/Components/SelectPicker/utils.ts b/src/Shared/Components/SelectPicker/utils.ts
@@ -340,36 +340,28 @@ export const getGroupCheckboxValue = <OptionValue>(
  * @param optionsList - The list of options or groups of options.
  * @param value - The value to compare against the options' values.
  * @param defaultOption - The default option to return if no match is found.
+ * @param getOptionValue - Override the default value for the option
  * @returns The matched option or the default option if no match is found.
  */
 export const getSelectPickerOptionByValue = <OptionValue>(
     optionsList: OptionsOrGroups<SelectPickerOptionType<OptionValue>, GroupBase<SelectPickerOptionType<OptionValue>>>,
     value: OptionValue,
     defaultOption: SelectPickerOptionType<OptionValue> = { label: '', value: '' as unknown as OptionValue },
+    getOptionValue: SelectPickerProps<OptionValue>['getOptionValue'] = null,
 ): SelectPickerOptionType<OptionValue> => {
     if (!Array.isArray(optionsList)) {
         return defaultOption
     }
 
-    const foundOption = optionsList.reduce(
-        (acc, curr) => {
-            if (!acc.notFound) return acc
+    const flatOptionsList = optionsList.flatMap<SelectPickerOptionType<OptionValue>>((groupOrBaseOption) =>
+        'options' in groupOrBaseOption ? groupOrBaseOption.options : [groupOrBaseOption],
+    )
 
-            if ('value' in curr && curr.value === value) {
-                return { data: curr, notFound: false }
-            }
-
-            if ('options' in curr && curr.options) {
-                const nestedOption = curr.options.find(({ value: _value }) => _value === value)
-                if (nestedOption) {
-                    return { data: nestedOption, notFound: false }
-                }
-            }
-
-            return acc
-        },
-        { notFound: true, data: defaultOption },
-    ).data
+    return (
+        flatOptionsList.find((option) => {
+            const optionValue = getOptionValue ? getOptionValue(option) : option.value
 
-    return foundOption
+            return optionValue === value
+        }) ?? defaultOption
+    )
 }
diff --git a/src/Shared/Services/ToastManager/toastManager.scss b/src/Shared/Services/ToastManager/toastManager.scss
@@ -47,7 +47,7 @@
     &__content {
 
         // Override the style for the action button
-        button {
+        button.button, a.button {
             color: var(--N0);
 
             svg *[stroke^="#"] {
@@ -69,7 +69,7 @@
     &__close-btn {
         button {
             svg {
-                use {
+                path {
                     fill: var(--N0) !important;
                 }
             }
diff --git a/src/Shared/types.ts b/src/Shared/types.ts
diff --git a/src/Shared/validations.tsx b/src/Shared/validations.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "4.0.2-beta-1",`
	`3`	`+ "version": "0.5.1-beta-1",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@ export const parseSchemaHiddenType = (hiddenSchema: HiddenType): MetaHiddenType`
`166`	`166`	`const clone = structuredClone(hiddenSchema)`
`167`	`167`	`if (typeof clone === 'string') {`
`168`	`168`	`return {`
`169`		`- value: false,`
	`169`	`+ value: true,`
`170`	`170`	`path: conformPathToPointers(clone),`
`171`	`171`	`}`
`172`	`172`	`}`
Original file line number	Diff line number	Diff line change
`@@ -171,7 +171,7 @@ const Button = ({`
`171`	`171`	`<ButtonElement`
`172`	`172`	`{...props}`
`173`	`173`	`disabled={isDisabled}`
`174`		- className={`br-4 flex cursor dc__tab-focus dc__position-rel dc__capitalize ${getButtonDerivedClass({ size, variant, style, isLoading, icon })} ${isDisabled ? 'dc__disabled' : ''}`}
	`174`	+ 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`}
`175`	`175`	`data-testid={dataTestId}`
`176`	`176`	`aria-label={ariaLabel}`
`177`	`177`	`>`