@devtron-labs/devtron-fe-common-lib 0.0.39-beta-2 → 0.0.40-beta-1

package/dist/Common/Common.service.d.ts

@@ -1,4 +1,4 @@
-import { TeamList, ResponseType, DeploymentNodeType } from './Types';
+import { TeamList, ResponseType, DeploymentNodeType, CDMaterialServiceEnum, CDMaterialServiceQueryParams, CDMaterialResponseType } from './Types';
 export declare const getTeamListMin: () => Promise<TeamList>;
 interface UserRole extends ResponseType {
     result?: {
@@ -13,7 +13,7 @@ export declare const SourceTypeMap: {
 };
 export declare function getUserRole(appName?: string): Promise<UserRole>;
 export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
-export declare const getCDMaterials: (cdMaterialId: any, stageType: DeploymentNodeType, abortSignal: AbortSignal, isApprovalNode?: boolean, imageTag?: string) => Promise<any>;
+export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
 export {};

package/dist/Common/Constants.d.ts

@@ -19,6 +19,7 @@ export declare const ROUTES: {
     PROJECT_LIST_MIN: string;
     USER_CHECK_ROLE: string;
     IMAGE_TAGGING: string;
+    CD_MATERIAL_GET: string;
 };
 export declare enum KEY_VALUE {
     KEY = "key",

package/dist/Common/Types.d.ts

@@ -202,6 +202,9 @@ export declare enum FilterStates {
     BLOCKED = 1,
     ERROR = 2
 }
+export declare enum MaterialDataSource {
+    EXTERNAL = "ext"
+}
 export interface CDMaterialType {
     index: number;
     id: string;
@@ -228,6 +231,31 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[];
     artifactStatus?: string;
     filterState: FilterStates;
+    scanToolId?: number;
+    appliedFiltersTimestamp?: string;
+    appliedFilters?: FilterConditionsListType[];
+    appliedFiltersState?: FilterStates;
+    createdTime?: string;
+    deployed?: boolean;
+    dataSource?: MaterialDataSource;
+}
+export declare enum CDMaterialServiceEnum {
+    ROLLBACK = "rollback",
+    CD_MATERIALS = "cd-materials"
+}
+export declare enum CDMaterialResourceQuery {
+    PENDING_APPROVAL = "PENDING_APPROVAL"
+}
+export declare enum CDMaterialFilterQuery {
+    RESOURCE = "ELIGIBLE_RESOURCES",
+    ALL = "ALL_RESOURCES"
+}
+export interface CDMaterialServiceQueryParams {
+    search?: string;
+    offset?: number;
+    size?: number;
+    resource?: CDMaterialResourceQuery;
+    filter?: CDMaterialFilterQuery;
 }
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number;
@@ -334,15 +362,21 @@ export interface FilterConditionsListType {
     description: string;
     conditions: FilterConditionsInfo[];
 }
-export interface CDMaterialResponseType {
+export interface CDMaterialsApprovalInfo {
     approvalUsers: string[];
-    materials: any[];
     userApprovalConfig: UserApprovalConfigType;
     requestedUserId: number;
+}
+export interface CDMaterialsMetaInfo {
     tagsEditable: boolean;
     appReleaseTagNames: string[];
     hideImageTaggingHardDelete: boolean;
     resourceFilters?: FilterConditionsListType[];
+    totalCount: number;
+    canApproverDeploy: boolean;
+}
+export interface CDMaterialResponseType extends CDMaterialsMetaInfo, CDMaterialsApprovalInfo {
+    materials: CDMaterialType[];
 }
 export interface InputDetailType {
     label: string;

package/dist/index.js

@@ -47,6 +47,7 @@ var ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING: 'app/image-tagging',
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -433,6 +434,24 @@ exports.FilterStates = void 0;
     FilterStates[FilterStates["BLOCKED"] = 1] = "BLOCKED";
     FilterStates[FilterStates["ERROR"] = 2] = "ERROR";
 })(exports.FilterStates || (exports.FilterStates = {}));
+exports.MaterialDataSource = void 0;
+(function (MaterialDataSource) {
+    MaterialDataSource["EXTERNAL"] = "ext";
+})(exports.MaterialDataSource || (exports.MaterialDataSource = {}));
+exports.CDMaterialServiceEnum = void 0;
+(function (CDMaterialServiceEnum) {
+    CDMaterialServiceEnum["ROLLBACK"] = "rollback";
+    CDMaterialServiceEnum["CD_MATERIALS"] = "cd-materials";
+})(exports.CDMaterialServiceEnum || (exports.CDMaterialServiceEnum = {}));
+exports.CDMaterialResourceQuery = void 0;
+(function (CDMaterialResourceQuery) {
+    CDMaterialResourceQuery["PENDING_APPROVAL"] = "PENDING_APPROVAL";
+})(exports.CDMaterialResourceQuery || (exports.CDMaterialResourceQuery = {}));
+exports.CDMaterialFilterQuery = void 0;
+(function (CDMaterialFilterQuery) {
+    CDMaterialFilterQuery["RESOURCE"] = "ELIGIBLE_RESOURCES";
+    CDMaterialFilterQuery["ALL"] = "ALL_RESOURCES";
+})(exports.CDMaterialFilterQuery || (exports.CDMaterialFilterQuery = {}));
 exports.DeploymentAppTypes = void 0;
 (function (DeploymentAppTypes) {
     DeploymentAppTypes["HELM"] = "helm";
@@ -18723,7 +18742,7 @@ var menuListCSS = function menuListCSS(_ref4) {
     WebkitOverflowScrolling: 'touch'
   };
 };
-var MenuList = function MenuList(props) {
+var MenuList$1 = function MenuList(props) {
   var children = props.children,
       className = props.className,
       cx = props.cx,
@@ -19598,7 +19617,7 @@ var components = {
   Input: Input,
   LoadingIndicator: LoadingIndicator,
   Menu: Menu,
-  MenuList: MenuList,
+  MenuList: MenuList$1,
   MenuPortal: MenuPortal,
   LoadingMessage: LoadingMessage,
   NoOptionsMessage: NoOptionsMessage,
@@ -22700,77 +22719,170 @@ function getUserRole(appName) {
 function setImageTags(request, pipelineId, artifactId) {
     return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
 }
-// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
-var getCDMaterials = function (cdMaterialId, stageType, abortSignal, isApprovalNode, imageTag) {
-    var URL = (!imageTag) ? "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType]) : "app/cd-pipeline/".concat(cdMaterialId, "/material?stage=").concat(stageMap[stageType], "&search=").concat(imageTag);
-    return get(URL, {
-        signal: abortSignal,
-    }).then(function (response) {
-        var _a;
-        var artifacts = (_a = response.result.ci_artifacts) !== null && _a !== void 0 ? _a : [];
-        if (!response.result) {
-            return {
-                materials: [],
-            };
+var processURL = function (url, params) {
+    var validParams = Object.keys(params).filter(function (key) {
+        return params[key] != null;
+    });
+    if (!validParams.length) {
+        return url;
+    }
+    var queryString = validParams
+        .map(function (key) {
+        if (Array.isArray(params[key])) {
+            return "".concat(key, "=").concat(params[key].join(','));
         }
-        else {
-            var materials = artifacts.map(function (material, index) {
-                var _a;
-                var artifactStatusValue = '';
-                var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
-                return {
-                    index: index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    tab: CDModalTab.Changes,
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    isSelected: !material.vulnerable && filterState === exports.FilterStates.ALLOWED && index === 0,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map(function (mat) {
-                            return {
-                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
-                                commitLink: createGitCommitUrl(mat.url, mat.revision),
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                    ? material.ciConfigureSourceValue
-                                    : mat.branch) || '',
-                                type: material.ciConfigureSourceType || '',
-                            };
-                        })
-                        : [],
-                    filterState: filterState,
-                };
-            });
-            return {
-                materials: materials
-            };
+        return "".concat(key, "=").concat(params[key]);
+    })
+        .join('&');
+    return "".concat(url, "?").concat(queryString);
+};
+var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatus) {
+    if (!artifacts || !artifacts.length)
+        return [];
+    var markFirstSelected = offset === 0;
+    var startIndex = offset;
+    var isImageMarked = false;
+    var materials = artifacts.map(function (material, index) {
+        var _a, _b, _c, _d, _e, _f;
+        var artifactStatusValue = '';
+        var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
+        if (artifactId && artifactStatus && material.id === artifactId) {
+            artifactStatusValue = artifactStatus;
+        }
+        var selectImage = !isImageMarked && markFirstSelected && filterState === exports.FilterStates.ALLOWED ? !material.vulnerable : false;
+        if (selectImage) {
+            isImageMarked = true;
         }
+        return {
+            index: startIndex + index,
+            id: material.id,
+            deployedTime: material.deployed_time
+                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                : 'Not Deployed',
+            deployedBy: material.deployedBy,
+            wfrId: material.wfrId,
+            tab: CDModalTab.Changes,
+            image: extractImage(material.image),
+            showChanges: false,
+            vulnerabilities: [],
+            buildTime: material.build_time || '',
+            isSelected: selectImage,
+            showSourceInfo: false,
+            deployed: material.deployed || false,
+            latest: material.latest || false,
+            vulnerabilitiesLoading: true,
+            scanned: material.scanned,
+            scanEnabled: material.scanEnabled,
+            vulnerable: material.vulnerable,
+            runningOnParentCd: material.runningOnParentCd,
+            artifactStatus: artifactStatusValue,
+            userApprovalMetadata: material.userApprovalMetadata,
+            triggeredBy: material.triggeredBy,
+            isVirtualEnvironment: material.isVirtualEnvironment,
+            imageComment: material.imageComment,
+            imageReleaseTags: material.imageReleaseTags,
+            // It is going to be null but required in type so can't remove
+            lastExecution: material.lastExecution,
+            materialInfo: material.material_info
+                ? material.material_info.map(function (mat) {
+                    return {
+                        modifiedTime: mat.modifiedTime
+                            ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
+                            : '',
+                        commitLink: createGitCommitUrl(mat.url, mat.revision),
+                        author: mat.author || '',
+                        message: mat.message || '',
+                        revision: mat.revision || '',
+                        tag: mat.tag || '',
+                        webhookData: mat.webhookData || '',
+                        url: mat.url || '',
+                        branch: (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                            ? material.ciConfigureSourceValue
+                            : mat.branch) || '',
+                        type: material.ciConfigureSourceType || '',
+                    };
+                })
+                : [],
+            filterState: filterState,
+            appliedFiltersTimestamp: (_b = material.appliedFiltersTimestamp) !== null && _b !== void 0 ? _b : '',
+            appliedFilters: (_c = material.appliedFilters) !== null && _c !== void 0 ? _c : [],
+            appliedFiltersState: (_d = material.appliedFiltersState) !== null && _d !== void 0 ? _d : exports.FilterStates.ALLOWED,
+            createdTime: (_e = material.createdTime) !== null && _e !== void 0 ? _e : '',
+            dataSource: (_f = material.data_source) !== null && _f !== void 0 ? _f : '',
+        };
+    });
+    return materials;
+};
+var processCDMaterialsApprovalInfo = function (enableApproval, cdMaterialsResult) {
+    if (!enableApproval) {
+        return {
+            approvalUsers: [],
+            userApprovalConfig: null,
+            requestedUserId: 0,
+        };
+    }
+    return {
+        approvalUsers: cdMaterialsResult.approvalUsers,
+        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+        requestedUserId: cdMaterialsResult.requestedUserId,
+    };
+};
+var processCDMaterialsMetaInfo = function (cdMaterialsResult) {
+    var _a, _b, _c, _d;
+    if (!cdMaterialsResult) {
+        return {
+            tagsEditable: false,
+            appReleaseTagNames: [],
+            hideImageTaggingHardDelete: false,
+            resourceFilters: [],
+            totalCount: 0,
+            canApproverDeploy: (_a = cdMaterialsResult.canApproverDeploy) !== null && _a !== void 0 ? _a : false,
+        };
+    }
+    return {
+        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
+        tagsEditable: cdMaterialsResult.tagsEditable,
+        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
+        resourceFilters: (_b = cdMaterialsResult.resourceFilters) !== null && _b !== void 0 ? _b : [],
+        totalCount: (_c = cdMaterialsResult.totalCount) !== null && _c !== void 0 ? _c : 0,
+        canApproverDeploy: (_d = cdMaterialsResult.canApproverDeploy) !== null && _d !== void 0 ? _d : false,
+    };
+};
+var processCDMaterialServiceResponse = function (cdMaterialsResult, stage, offset, filter) {
+    if (!cdMaterialsResult) {
+        return __assign(__assign({ materials: [] }, processCDMaterialsMetaInfo(cdMaterialsResult)), processCDMaterialsApprovalInfo(false, cdMaterialsResult));
+    }
+    var materials = cdMaterialListModal(cdMaterialsResult.ci_artifacts, offset !== null && offset !== void 0 ? offset : 0, cdMaterialsResult.latest_wf_artifact_id, cdMaterialsResult.latest_wf_artifact_status);
+    var approvalInfo = processCDMaterialsApprovalInfo(stage === exports.DeploymentNodeType.CD || stage === exports.DeploymentNodeType.APPROVAL, cdMaterialsResult);
+    var metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult);
+    // TODO: On update of service would remove from here
+    var filteredMaterials = filter && filter === exports.CDMaterialFilterQuery.RESOURCE
+        ? materials.filter(function (material) {
+            return material.filterState === exports.FilterStates.ALLOWED;
+        })
+        : materials;
+    return __assign(__assign({ materials: filteredMaterials }, approvalInfo), metaInfo);
+};
+var getSanitizedQueryParams = function (queryParams) {
+    queryParams.filter; var rest = __rest(queryParams, ["filter"]);
+    return rest;
+};
+var genericCDMaterialsService = function (serviceType, cdMaterialID, stage, signal, queryParams) {
+    if (queryParams === void 0) { queryParams = {}; }
+    // TODO: On update of service would remove from here
+    var manipulatedParams = getSanitizedQueryParams(queryParams);
+    var URL;
+    switch (serviceType) {
+        case exports.CDMaterialServiceEnum.ROLLBACK:
+            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material/rollback"), manipulatedParams);
+            break;
+        // Meant for handling getCDMaterialList
+        default:
+            URL = processURL("".concat(ROUTES.CD_MATERIAL_GET, "/").concat(cdMaterialID, "/material"), __assign(__assign({}, manipulatedParams), { stage: stageMap[stage] }));
+            break;
+    }
+    return get(URL, { signal: signal }).then(function (response) {
+        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter);
     });
 };
 function extractImage(image) {
@@ -23137,7 +23249,9 @@ var SvgIcEnter = function SvgIcEnter(props) {
 };
 
 var ImageTagsContainer = function (_a) {
-    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
+    var 
+    // Setting it to zero in case of external pipeline
+    ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit, isSuperAdmin = _a.isSuperAdmin;
     var _b = __read(React.useState(imageReleaseTags ? imageReleaseTags : []), 2), initialTags = _b[0], setInitialTags = _b[1];
     var _c = __read(React.useState(imageComment ? imageComment.comment : ''), 2), initialDescription = _c[0], setInitialDescription = _c[1];
     var _d = __read(React.useState(appReleaseTagNames ? appReleaseTagNames : []), 2), existingTags = _d[0], setExistingTags = _d[1];
@@ -23151,6 +23265,7 @@ var ImageTagsContainer = function (_a) {
     var _m = __read(React.useState([]), 2), hardDeleteTags = _m[0], setHardDeleteTags = _m[1];
     var _o = __read(React.useState(''), 2), descriptionValidationMessage = _o[0], setDescriptionValidationMessage = _o[1];
     var _p = __read(React.useState(''), 2), textInput = _p[0], setTextInput = _p[1];
+    var _q = __read(React.useState(false), 2), loading = _q[0], setLoading = _q[1];
     React.useEffect(function () {
         reInitState();
     }, [imageReleaseTags, imageComment, tagsEditable]);
@@ -23298,7 +23413,8 @@ var ImageTagsContainer = function (_a) {
                 hardDeleteTags: hardDeleteTags,
             };
             // set loading state true
-            setImageTags(payload, ciPipelineId, artifactId)
+            setLoading(true);
+            setImageTags(payload, ciPipelineId !== null && ciPipelineId !== void 0 ? ciPipelineId : 0, artifactId)
                 .then(function (res) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 var tags = (_b = (_a = res.result) === null || _a === void 0 ? void 0 : _a.imageReleaseTags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return ({
@@ -23337,6 +23453,9 @@ var ImageTagsContainer = function (_a) {
                 else {
                     showError(err);
                 }
+            })
+                .finally(function () {
+                setLoading(false);
             });
             return [2 /*return*/];
         });
@@ -23387,10 +23506,10 @@ var ImageTagsContainer = function (_a) {
                         }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea fs-13", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 handleCancel();
-                            } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
+                            }, disabled: loading }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 onClickSave();
-                            } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
+                            }, disabled: loading }, { children: loading ? jsxRuntime.jsx(Progressing, {}) : 'Save' }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagSoftDelete(index);
                                     }, onHardDeleteClick: function (e) {
@@ -23900,6 +24019,10 @@ var SvgIcChevronDown = function SvgIcChevronDown(props) {
 };
 
 var commonStyles = getCommonSelectStyle();
+var MenuList = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx(components.MenuList, __assign({}, props, { children: Array.isArray(children) ? children.slice(0, 20) : children })));
+};
 var DropdownIndicator = function (props) { return (jsxRuntime.jsx(components.DropdownIndicator, __assign({}, props, { children: jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 icon-n5", "data-testid": "overview-project-edit-dropdown" }) }))); };
 var Select = function (props) {
     var id = props.id, _a = props.multiple, multiple = _a === void 0 ? false : _a, options = props.options, value = props.value, disabled = props.disabled, readonly = props.readonly, _b = props.autofocus, autofocus = _b === void 0 ? false : _b, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, placeholder = props.placeholder;
@@ -23916,7 +24039,8 @@ var Select = function (props) {
     return (jsxRuntime.jsx(ReactSelect, { id: id, name: id, isMulti: multiple, value: typeof value === 'undefined' ? emptyValue : getOption(value), autoFocus: autofocus, onChange: handleChange, options: selectOptions, onBlur: function () { return onBlur(id, value); }, onFocus: function () { return onFocus(id, value); }, placeholder: placeholder || PLACEHOLDERS.SELECT, isDisabled: disabled || readonly, styles: __assign(__assign({}, commonStyles), { control: function (base) { return (__assign(__assign(__assign({}, base), commonStyles.control), { backgroundColor: 'var(--N50)' })); } }), components: {
             IndicatorSeparator: null,
             DropdownIndicator: DropdownIndicator,
-        }, menuPlacement: "auto", menuPortalTarget: document.body }));
+            MenuList: MenuList,
+        }, menuPlacement: "auto" }));
 };
 
 var widgets = {
@@ -24022,9 +24146,9 @@ exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.extractImage = extractImage;
+exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
-exports.getCDMaterials = getCDMaterials;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.39-beta-2",
+    "version": "0.0.40-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Common.service.ts

@@ -2,7 +2,19 @@ import moment from 'moment';
 import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import { TeamList ,ResponseType, DeploymentNodeType, CDModalTab, FilterStates } from './Types';
+import {
+    TeamList,
+    ResponseType,
+    DeploymentNodeType,
+    CDModalTab,
+    FilterStates,
+    CDMaterialServiceEnum,
+    CDMaterialServiceQueryParams,
+    CDMaterialResponseType,
+    CDMaterialsMetaInfo,
+    CDMaterialsApprovalInfo,
+    CDMaterialFilterQuery,
+} from './Types'
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -30,7 +42,7 @@ interface UserRole extends ResponseType {
     }
 }
 
-let stageMap = {
+const stageMap = {
     PRECD: 'PRE',
     CD: 'DEPLOY',
     POSTCD: 'POST',
@@ -51,83 +63,218 @@ export function setImageTags(request, pipelineId: number, artifactId: number){
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
 }
 
-// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
-export const getCDMaterials = (
-    cdMaterialId,
-    stageType: DeploymentNodeType,
-    abortSignal: AbortSignal,
-    isApprovalNode?: boolean,
-    imageTag?: string): Promise<any> => {
-    const URL = (!imageTag) ? `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}` : `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}&search=${imageTag}`
-
-    return get(URL, {
-        signal: abortSignal,
-    }).then((response) => {
-        let artifacts = response.result.ci_artifacts ?? []
-        if (!response.result) {
-            return {
-                materials: [],
+const processURL = (url: string, params: object) => {
+    const validParams = Object.keys(params).filter((key) => {
+        return params[key] != null
+    })
+
+    if (!validParams.length) {
+        return url
+    }
+
+    const queryString = validParams
+        .map((key) => {
+            if (Array.isArray(params[key])) {
+                return `${key}=${params[key].join(',')}`  
             }
+            return `${key}=${params[key]}`
+        })
+        .join('&')    
+
+    return `${url}?${queryString}`
+}
+
+const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string) => {
+    if (!artifacts || !artifacts.length) return []
+
+    const markFirstSelected = offset === 0
+    const startIndex = offset
+    let isImageMarked = false
+
+    const materials = artifacts.map((material, index) => {
+        let artifactStatusValue = ''
+        const filterState = material.filterState ?? FilterStates.ALLOWED
+
+        if (artifactId && artifactStatus && material.id === artifactId) {
+            artifactStatusValue = artifactStatus
         }
-        else {
-            const materials = artifacts.map((material, index) => {
-                let artifactStatusValue = ''
-                const filterState = material.filterState ?? FilterStates.ALLOWED
-
-                return {
-                    index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    tab: CDModalTab.Changes,
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    isSelected: !material.vulnerable && filterState === FilterStates.ALLOWED && index === 0,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map((mat) => {
-                            return {
-                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
-                                commitLink: createGitCommitUrl(mat.url, mat.revision),
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                branch:
-                                    (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                        ? material.ciConfigureSourceValue
-                                        : mat.branch) || '',
-                                type: material.ciConfigureSourceType || '',
-                            }
-                        })
-                        : [],
-                    filterState,
-                }
-            })
-            return {
-                materials: materials
-            }
+
+        const selectImage =
+            !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED ? !material.vulnerable : false
+        if (selectImage) {
+            isImageMarked = true
+        }
+
+        return {
+            index: startIndex + index,
+            id: material.id,
+            deployedTime: material.deployed_time
+                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                : 'Not Deployed',
+            deployedBy: material.deployedBy,
+            wfrId: material.wfrId,
+            tab: CDModalTab.Changes,
+            image: extractImage(material.image),
+            showChanges: false,
+            vulnerabilities: [],
+            buildTime: material.build_time || '',
+            isSelected: selectImage,
+            showSourceInfo: false,
+            deployed: material.deployed || false,
+            latest: material.latest || false,
+            vulnerabilitiesLoading: true,
+            scanned: material.scanned,
+            scanEnabled: material.scanEnabled,
+            vulnerable: material.vulnerable,
+            runningOnParentCd: material.runningOnParentCd,
+            artifactStatus: artifactStatusValue,
+            userApprovalMetadata: material.userApprovalMetadata,
+            triggeredBy: material.triggeredBy,
+            isVirtualEnvironment: material.isVirtualEnvironment,
+            imageComment: material.imageComment,
+            imageReleaseTags: material.imageReleaseTags,
+            // It is going to be null but required in type so can't remove
+            lastExecution: material.lastExecution,
+            materialInfo: material.material_info
+                ? material.material_info.map((mat) => {
+                      return {
+                          modifiedTime: mat.modifiedTime
+                              ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
+                              : '',
+                          commitLink: createGitCommitUrl(mat.url, mat.revision),
+                          author: mat.author || '',
+                          message: mat.message || '',
+                          revision: mat.revision || '',
+                          tag: mat.tag || '',
+                          webhookData: mat.webhookData || '',
+                          url: mat.url || '',
+                          branch:
+                              (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                                  ? material.ciConfigureSourceValue
+                                  : mat.branch) || '',
+                          type: material.ciConfigureSourceType || '',
+                      }
+                  })
+                : [],
+            filterState,
+            appliedFiltersTimestamp: material.appliedFiltersTimestamp ?? '',
+            appliedFilters: material.appliedFilters ?? [],
+            appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
+            createdTime: material.createdTime ?? '',
+            dataSource: material.data_source ?? '',
+        }
+    })
+    return materials
+}
+
+const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
+    if (!enableApproval) {
+        return {
+            approvalUsers: [],
+            userApprovalConfig: null,
+            requestedUserId: 0,
+        }
+    }
+
+    return {
+        approvalUsers: cdMaterialsResult.approvalUsers,
+        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+        requestedUserId: cdMaterialsResult.requestedUserId,
+    }
+}
+
+const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
+    if (!cdMaterialsResult) {
+        return {
+            tagsEditable: false,
+            appReleaseTagNames: [],
+            hideImageTaggingHardDelete: false,
+            resourceFilters: [],
+            totalCount: 0,
+            canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
         }
+    }
+
+    return {
+        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
+        tagsEditable: cdMaterialsResult.tagsEditable,
+        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
+        resourceFilters: cdMaterialsResult.resourceFilters ?? [],
+        totalCount: cdMaterialsResult.totalCount ?? 0,
+        canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
+    }
+}
+
+const processCDMaterialServiceResponse = (
+    cdMaterialsResult,
+    stage: DeploymentNodeType,
+    offset: number,
+    filter: CDMaterialFilterQuery,
+): CDMaterialResponseType => {
+    if (!cdMaterialsResult) {
+        return {
+            materials: [],
+            ...processCDMaterialsMetaInfo(cdMaterialsResult),
+            ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
+        }
+    }
+
+    const materials = cdMaterialListModal(
+        cdMaterialsResult.ci_artifacts,
+        offset ?? 0,
+        cdMaterialsResult.latest_wf_artifact_id,
+        cdMaterialsResult.latest_wf_artifact_status,
+    )
+    const approvalInfo = processCDMaterialsApprovalInfo(
+        stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
+        cdMaterialsResult,
+    )
+    const metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult)
+
+    // TODO: On update of service would remove from here
+    const filteredMaterials =
+        filter && filter === CDMaterialFilterQuery.RESOURCE
+            ? materials.filter((material) => {
+                  return material.filterState === FilterStates.ALLOWED
+              })
+            : materials
+
+    return {
+        materials: filteredMaterials,
+        ...approvalInfo,
+        ...metaInfo,
+    }
+}
+
+const getSanitizedQueryParams = (queryParams: CDMaterialServiceQueryParams): CDMaterialServiceQueryParams => {
+    const { filter, ...rest } = queryParams
+    return rest
+}
+
+export const genericCDMaterialsService = (
+    serviceType: CDMaterialServiceEnum,
+    cdMaterialID: number,
+    stage: DeploymentNodeType,
+    signal: AbortSignal,
+    queryParams: CDMaterialServiceQueryParams = {},
+): Promise<CDMaterialResponseType> => {
+    // TODO: On update of service would remove from here
+    const manipulatedParams = getSanitizedQueryParams(queryParams)
+    
+    let URL
+    switch (serviceType) {
+        case CDMaterialServiceEnum.ROLLBACK:
+            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material/rollback`, manipulatedParams)
+            break
+
+        // Meant for handling getCDMaterialList
+        default:
+            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
+            break
+    }
+
+    return get(URL, { signal }).then((response) => {
+        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
     })
 }
 

package/src/Common/Constants.ts

@@ -24,6 +24,7 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {

package/src/Common/ImageTags.tsx

@@ -18,8 +18,10 @@ import { showError, stopPropagation } from './Helper'
 import { TippyCustomized } from './TippyCustomized'
 import { setImageTags } from './Common.service'
 import Tippy from '@tippyjs/react'
+import { Progressing } from './Progressing'
 
 export const ImageTagsContainer = ({
+    // Setting it to zero in case of external pipeline
     ciPipelineId,
     artifactId,
     imageComment,
@@ -47,6 +49,7 @@ export const ImageTagsContainer = ({
     const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
     const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
     const [textInput, setTextInput] = useState<string>('')
+    const [loading, setLoading] = useState<boolean>(false)
 
 
     useEffect(() => {
@@ -213,7 +216,8 @@ export const ImageTagsContainer = ({
         }
 
         // set loading state true
-        setImageTags(payload, ciPipelineId, artifactId)
+        setLoading(true)
+        setImageTags(payload, ciPipelineId ?? 0, artifactId)
             .then((res) => {
                 const tags = res.result?.imageReleaseTags?.map((tag) => ({
                     id: tag.id,
@@ -249,6 +253,9 @@ export const ImageTagsContainer = ({
                     showError(err)
                 }
             })
+            .finally(()=>{
+                setLoading(false)
+            })
     }
 
     const renderInfoCard = (): JSX.Element => {
@@ -425,6 +432,7 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 handleCancel()
                             }}
+                            disabled={loading}
                         >
                             Cancel
                         </button>
@@ -436,8 +444,9 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 onClickSave()
                             }}
+                            disabled={loading}
                         >
-                            Save
+                            {loading ? <Progressing /> : 'Save'}
                         </button>
                     </div>
                 </div>

package/src/Common/RJSF/widgets/Select.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { WidgetProps } from '@rjsf/utils'
-import ReactSelect, { components } from 'react-select'
+import ReactSelect, { MenuListProps, components } from 'react-select'
 import { PLACEHOLDERS } from '../constants'
 import { getCommonSelectStyle } from '../utils'
 
@@ -8,6 +8,10 @@ import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-dow
 
 const commonStyles = getCommonSelectStyle()
 
+const MenuList = ({ children, ...props }: MenuListProps) => (
+    <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
+)
+
 const DropdownIndicator = (props) => (
     <components.DropdownIndicator {...props}>
         <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
@@ -64,9 +68,9 @@ export const Select = (props: WidgetProps) => {
             components={{
                 IndicatorSeparator: null,
                 DropdownIndicator,
+                MenuList,
             }}
             menuPlacement="auto"
-            menuPortalTarget={document.body}
         />
     )
 }

package/src/Common/Types.ts

@@ -226,6 +226,10 @@ export enum FilterStates {
     ERROR = 2,
 }
 
+export enum MaterialDataSource {
+    EXTERNAL = "ext"
+}
+
 export interface CDMaterialType {
     index: number
     id: string
@@ -252,6 +256,36 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[]
     artifactStatus?: string
     filterState: FilterStates
+    // Not even coming from API but required in CDMaterials for Security which makes its own api call but stores data in CDMaterials
+    scanToolId?: number
+    appliedFiltersTimestamp?: string
+    appliedFilters?: FilterConditionsListType[]
+    appliedFiltersState?: FilterStates
+    createdTime?: string
+    deployed?: boolean
+    dataSource?: MaterialDataSource
+}
+
+export enum CDMaterialServiceEnum {
+    ROLLBACK = 'rollback',
+    CD_MATERIALS = 'cd-materials',
+}
+
+export enum CDMaterialResourceQuery {
+    PENDING_APPROVAL = 'PENDING_APPROVAL'
+}
+
+export enum CDMaterialFilterQuery {
+    RESOURCE = 'ELIGIBLE_RESOURCES',
+    ALL = 'ALL_RESOURCES'
+}
+
+export interface CDMaterialServiceQueryParams {
+    search?: string
+    offset?: number
+    size?: number
+    resource?: CDMaterialResourceQuery
+    filter?: CDMaterialFilterQuery
 }
 
 export interface CommonNodeAttr {
@@ -367,15 +401,23 @@ export interface FilterConditionsListType {
     conditions: FilterConditionsInfo[]
 }
 
-export interface CDMaterialResponseType {
+export interface CDMaterialsApprovalInfo {
     approvalUsers: string[]
-    materials: any[]
     userApprovalConfig: UserApprovalConfigType
     requestedUserId: number
+}
+
+export interface CDMaterialsMetaInfo {
     tagsEditable: boolean
     appReleaseTagNames: string[]
     hideImageTaggingHardDelete: boolean
     resourceFilters?: FilterConditionsListType[]
+    totalCount: number
+    canApproverDeploy: boolean
+}
+
+export interface CDMaterialResponseType extends CDMaterialsMetaInfo, CDMaterialsApprovalInfo {
+    materials: CDMaterialType[]
 }
 
 export interface InputDetailType {