@devtron-labs/devtron-fe-common-lib 0.0.17 → 0.0.18-beta-2

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

@@ -1,4 +1,4 @@
-import { TeamList, ResponseType } from './Types';
+import { TeamList, ResponseType, DeploymentNodeType } from './Types';
 export declare const getTeamListMin: () => Promise<TeamList>;
 interface UserRole extends ResponseType {
     result?: {
@@ -6,6 +6,14 @@ interface UserRole extends ResponseType {
         superAdmin: boolean;
     };
 }
+export declare const SourceTypeMap: {
+    BranchFixed: string;
+    WEBHOOK: string;
+    BranchRegex: string;
+};
 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 function extractImage(image: string): string;
+export declare function createGitCommitUrl(url: string, revision: string): string;
 export {};

package/dist/Common/Helper.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { UseSearchString } from './Types';
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;
@@ -40,4 +41,5 @@ export declare function CustomInput({ name, value, error, onChange, onBlur, onFo
     dataTestid?: string;
 }): JSX.Element;
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
+export declare function useSearchString(): UseSearchString;
 export {};

package/dist/Common/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './Toggle.scss';
-declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, ...props }: {
+declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dataTestId, Icon, iconClass, ...props }: {
     [x: string]: any;
     selected?: boolean;
     onSelect?: any;
@@ -8,5 +8,7 @@ declare const Toggle: ({ selected, onSelect, color, rootClassName, disabled, dat
     rootClassName?: string;
     disabled?: boolean;
     dataTestId?: string;
+    Icon?: any;
+    iconClass?: string;
 }) => JSX.Element;
 export default Toggle;

package/dist/Common/Types.d.ts

@@ -332,4 +332,10 @@ export interface RegistryTypeDetailType {
     id: InputDetailType;
     password: InputDetailType;
 }
+export interface UseSearchString {
+    queryParams: URLSearchParams;
+    searchParams: {
+        [key: string]: string;
+    };
+}
 export {};

package/dist/index.js

@@ -2162,7 +2162,6 @@ var AppNotDeployed = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAGQCAYA
 
 function GenericEmptyState(_a) {
     var title = _a.title, image = _a.image, subTitle = _a.subTitle, isButtonAvailable = _a.isButtonAvailable, classname = _a.classname, styles = _a.styles, heightToDeduct = _a.heightToDeduct, imageType = _a.imageType, renderButton = _a.renderButton, imageClassName = _a.imageClassName, children = _a.children, SvgImage = _a.SvgImage, noImage = _a.noImage;
-    console.log(image);
     return (jsxRuntime.jsxs("div", __assign({ className: "flex column empty-state ".concat(classname ? classname : ''), style: styles, "data-testid": "generic-empty-state" }, (heightToDeduct >= 0 && { style: __assign(__assign({}, styles), { height: "calc(100vh - ".concat(heightToDeduct, "px)") }) }), { children: [!SvgImage ? !noImage && jsxRuntime.jsx("img", { className: imageClassName ? imageClassName : '', src: image || AppNotDeployed, width: imageType === exports.ImageType.Medium ? '200' : '250', height: imageType === exports.ImageType.Medium ? '160' : '200', alt: "empty-state" }) : jsxRuntime.jsx(SvgImage, {}), jsxRuntime.jsx("h4", __assign({ className: "title fw-6 cn-9 mb-8" }, { children: title })), subTitle && jsxRuntime.jsx("p", __assign({ className: "subtitle" }, { children: subTitle })), isButtonAvailable && renderButton(), children] })));
 }
 
@@ -10079,6 +10078,22 @@ function handleUTCTime(ts, isRelativeTime) {
         console.error("Error Parsing Date:", ts);
     }
     return timestamp;
+}
+function useSearchString() {
+    var location = reactRouterDom.useLocation();
+    var queryParams = React.useMemo(function () {
+        var queryParams = new URLSearchParams(location.search);
+        return queryParams;
+    }, [location]);
+    // const searchParams={}
+    // for (let [key, value] of queryParams.entries()){
+    //     searchParams[key]=value
+    // }
+    var searchParams = Array.from(queryParams.entries()).reduce(function (agg, curr, idx) {
+        agg[curr[0]] = curr[1];
+        return agg;
+    }, {});
+    return { queryParams: queryParams, searchParams: searchParams };
 }
 
 function Progressing(_a) {
@@ -22524,11 +22539,118 @@ var getTeamListMin = function () {
         };
     });
 };
+var stageMap = {
+    PRECD: 'PRE',
+    CD: 'DEPLOY',
+    POSTCD: 'POST',
+    APPROVAL: 'APPROVAL',
+};
+var SourceTypeMap = {
+    BranchFixed: 'SOURCE_TYPE_BRANCH_FIXED',
+    WEBHOOK: 'WEBHOOK',
+    BranchRegex: 'SOURCE_TYPE_BRANCH_REGEX',
+};
 function getUserRole(appName) {
     return get("".concat(ROUTES.USER_CHECK_ROLE).concat(appName ? "?appName=".concat(appName) : ''));
 }
 function setImageTags(request, pipelineId, artifactId) {
     return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
+}
+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: [],
+            };
+        }
+        else {
+            var materials = artifacts.map(function (material, index) {
+                var artifactStatusValue = '';
+                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 && 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 || '',
+                            };
+                        })
+                        : [],
+                };
+            });
+            return {
+                materials: materials
+            };
+        }
+    });
+};
+function extractImage(image) {
+    return image ? image.split(':').pop() : '';
+}
+function createGitCommitUrl(url, revision) {
+    if (!url || !revision) {
+        return "NA";
+    }
+    if (url.indexOf("gitlab") > 0 || url.indexOf("github") > 0 || url.indexOf("azure") > 0) {
+        var urlpart = url.split("@");
+        if (urlpart.length > 1) {
+            return "https://" + urlpart[1].split(".git")[0] + "/commit/" + revision;
+        }
+        if (urlpart.length == 1) {
+            return urlpart[0].split(".git")[0] + "/commit/" + revision;
+        }
+    }
+    if (url.indexOf("bitbucket") > 0) {
+        var urlpart = url.split("@");
+        if (urlpart.length > 1) {
+            return "https://" + urlpart[1].split(".git")[0] + "/commits/" + revision;
+        }
+        if (urlpart.length == 1) {
+            return urlpart[0].split(".git")[0] + "/commits/" + revision;
+        }
+    }
+    return "NA";
 }
 
 /*
@@ -22553,13 +22675,13 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
-var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}\n\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\n\n/* Rounded sliders */\n.toggle__slider.round {\n  border-radius: 34px;\n}\n\n.toggle__slider.round:before {\n  border-radius: 50%;\n}";
+var css_248z$2 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
 styleInject(css_248z$2);
 
 var Toggle = function (_a) {
     var _b;
-    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? "#36b37e" : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? "" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? "handle-toggle-button" : _h, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId"]);
-    var _j = __read(React.useState(selected), 2), active = _j[0], setActive = _j[1];
+    var _c = _a.selected, selected = _c === void 0 ? false : _c, _d = _a.onSelect, onSelect = _d === void 0 ? null : _d, _e = _a.color, color = _e === void 0 ? '#36b37e' : _e, _f = _a.rootClassName, rootClassName = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.dataTestId, dataTestId = _h === void 0 ? 'handle-toggle-button' : _h, _j = _a.Icon, Icon = _j === void 0 ? null : _j, _k = _a.iconClass, iconClass = _k === void 0 ? '' : _k, props = __rest(_a, ["selected", "onSelect", "color", "rootClassName", "disabled", "dataTestId", "Icon", "iconClass"]);
+    var _l = __read(React.useState(selected), 2), active = _l[0], setActive = _l[1];
     useEffectAfterMount(function () {
         if (typeof onSelect === 'function') {
             if (active !== selected) {
@@ -22575,7 +22697,7 @@ var Toggle = function (_a) {
             setActive(function (active) { return !active; });
         }
     }
-    return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", { className: "toggle__slider round", "data-testid": dataTestId })] })));
+    return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
 };
 
 var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
@@ -23130,7 +23252,7 @@ var ImageTagsContainer = function (_a) {
         }
         handleSave(tagsToBeCreated);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
+    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input fs-13", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
                                 top: '50%',
                                 fontFamily: 'monospace',
                                 right: '8px',
@@ -23141,7 +23263,7 @@ var ImageTagsContainer = function (_a) {
                         }, onHardDeleteClick: function (e) {
                             stopPropagation(e);
                             handleTagHardDelete(index);
-                        }, 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", 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) {
+                        }, 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) {
@@ -23235,6 +23357,7 @@ exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
+exports.SourceTypeMap = SourceTypeMap;
 exports.StyledRadioGroup = RadioGroup;
 exports.TOAST_ACCESS_DENIED = TOAST_ACCESS_DENIED;
 exports.TOKEN_COOKIE_NAME = TOKEN_COOKIE_NAME;
@@ -23250,8 +23373,11 @@ exports.TriggerTypeMap = TriggerTypeMap;
 exports.URLS = URLS;
 exports.VisibleModal = VisibleModal;
 exports.VisibleModal2 = VisibleModal2;
+exports.createGitCommitUrl = createGitCommitUrl;
+exports.extractImage = extractImage;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
+exports.getCDMaterials = getCDMaterials;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;
@@ -23273,4 +23399,5 @@ exports.trash = trash;
 exports.useBreadcrumb = useBreadcrumb;
 exports.useEffectAfterMount = useEffectAfterMount;
 exports.useForm = useForm;
+exports.useSearchString = useSearchString;
 exports.useThrottledEffect = useThrottledEffect;

package/package.json

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

package/src/Common/Common.service.ts

@@ -1,7 +1,8 @@
+import moment from 'moment';
 import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import { TeamList ,ResponseType } from './Types';
+import { TeamList ,ResponseType, DeploymentNodeType, CDModalTab } from './Types';
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -29,10 +30,128 @@ interface UserRole extends ResponseType {
     }
 }
 
+let stageMap = {
+    PRECD: 'PRE',
+    CD: 'DEPLOY',
+    POSTCD: 'POST',
+    APPROVAL: 'APPROVAL',
+}
+
+export const SourceTypeMap = {
+    BranchFixed: 'SOURCE_TYPE_BRANCH_FIXED',
+    WEBHOOK: 'WEBHOOK',
+    BranchRegex: 'SOURCE_TYPE_BRANCH_REGEX',
+}
+
 export function getUserRole(appName?: string): Promise<UserRole> {
     return get(`${ROUTES.USER_CHECK_ROLE}${appName ? `?appName=${appName}` : ''}`)
 }
 
 export function setImageTags(request, pipelineId: number, artifactId: number){
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
-}
+}
+
+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: [],
+            }
+        }
+        else {
+            const materials = artifacts.map((material, index) => {
+                let artifactStatusValue = ''
+                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 && 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 || '',
+                            }
+                        })
+                        : [],
+                }
+            })
+            return {
+                materials: materials
+            }
+        }
+    })
+}
+
+export function extractImage(image: string): string {
+    return image ? image.split(':').pop() : ''
+}
+
+export function createGitCommitUrl(url: string, revision: string): string {
+    if (!url || !revision) {
+        return "NA"
+    }
+    if (url.indexOf("gitlab") > 0 || url.indexOf("github") > 0 || url.indexOf("azure") > 0) {
+        let urlpart = url.split("@")
+        if (urlpart.length > 1) {
+            return "https://" + urlpart[1].split(".git")[0] + "/commit/" + revision
+        }
+        if (urlpart.length == 1) {
+            return urlpart[0].split(".git")[0] + "/commit/" + revision
+        }
+    }
+    if (url.indexOf("bitbucket") > 0) {
+        let urlpart = url.split("@")
+        if (urlpart.length > 1) {
+            return "https://" + urlpart[1].split(".git")[0] + "/commits/" + revision
+        }
+        if (urlpart.length == 1) {
+            return urlpart[0].split(".git")[0] + "/commits/" + revision
+        }
+    }
+    return "NA"
+}

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -19,7 +19,6 @@ function GenericEmptyState({
     SvgImage,
     noImage
 }: GenericEmptyStateType): JSX.Element {
-    console.log(image);
     
     return (
         <div

package/src/Common/Helper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
@@ -6,6 +6,8 @@ import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import moment from 'moment';
+import { UseSearchString } from './Types'
+import { useLocation } from 'react-router-dom'
 
 toast.configure({
     autoClose: 3000,
@@ -346,3 +348,24 @@ export function handleUTCTime(ts: string, isRelativeTime = false) {
   }
   return timestamp;
 }
+
+export function useSearchString(): UseSearchString {
+    const location = useLocation()
+    const queryParams: URLSearchParams = useMemo(() => {
+        const queryParams = new URLSearchParams(location.search)
+        return queryParams
+    }, [location])
+
+    // const searchParams={}
+    // for (let [key, value] of queryParams.entries()){
+    //     searchParams[key]=value
+    // }
+    const searchParams = Array.from(queryParams.entries()).reduce((agg, curr, idx) => {
+        agg[curr[0]] = curr[1]
+        return agg
+    }, {})
+
+    return { queryParams, searchParams }
+}
+
+

package/src/Common/ImageTags.tsx

@@ -352,7 +352,7 @@ export const ImageTagsContainer = ({
                     </div>
                     <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
                         <input
-                            className="form__input"
+                            className="form__input fs-13"
                             value={textInput}
                             onChange={setInputValue}
                             placeholder="Type a tag and press enter"
@@ -420,7 +420,7 @@ export const ImageTagsContainer = ({
                         <textarea
                             value={newDescription}
                             onChange={handleDescriptionChange}
-                            className="flex left flex-wrap dc__gap-8 dc__description-textarea"
+                            className="flex left flex-wrap dc__gap-8 dc__description-textarea fs-13"
                             style={{ height: '90px !important' }}
                         />
                     </div>

package/src/Common/Toggle/Toggle.scss

@@ -4,15 +4,14 @@
     width: 100%;
     height: 100%;
 
-    &.disabled{
+    &.disabled {
         cursor: not-allowed;
-        .toggle__slider{
+        .toggle__slider {
             cursor: not-allowed;
         }
     }
 }
 
-
 /* Hide default HTML checkbox */
 
 .toggle__switch input {
@@ -21,7 +20,6 @@
     height: 0;
 }
 
-
 /* The slider */
 
 .toggle__slider {
@@ -32,39 +30,49 @@
     right: 0;
     bottom: 0;
     background-color: #ccc;
-    transition: all .4s ease;
-}
-
-.toggle__slider:before {
-    position: absolute;
-    content: "";
-    height: calc( 100% - 8px);
-    width: calc( 50% - 4px);
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
     transition: all 0.4s ease;
+    &.round {
+        border-radius: 34px;
+        &:before {
+            border-radius: 50%;
+        }
+    }
+    &:before {
+        position: absolute;
+        content: '';
+        height: calc(100% - 8px);
+        width: calc(50% - 4px);
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        transition: all 0.4s ease;
+    }
+    &.with-icon {
+        background-color: var(--N000) !important;
+        svg {
+            position: absolute;
+            content: '';
+            top: -1px;
+            left: -1px;
+            background-color: var(--N300);
+            transition: all 0.4s ease;
+        }
+    }
 }
 
-input:checked+.toggle__slider {
+input:checked + .toggle__slider {
     background-color: var(--color);
+    &:before {
+        transform: translateX(calc(100%));
+    }
+    &.with-icon {
+        svg {
+            transform: translateX(calc(100%));
+            background-color: var(--color);
+        }
+    }
 }
 
-input:focus+.toggle__slider {
+input:focus + .toggle__slider {
     box-shadow: 0 0 1px var(--color);
 }
-
-input:checked+.toggle__slider:before {
-    transform: translateX(calc( 100%));
-}
-
-
-/* Rounded sliders */
-
-.toggle__slider.round {
-    border-radius: 34px;
-}
-
-.toggle__slider.round:before {
-    border-radius: 50%;
-}

package/src/Common/Toggle/Toggle.tsx

@@ -1,25 +1,35 @@
-import React from 'react';
-import { useEffectAfterMount } from '../Helper';
+import React from 'react'
+import { useEffectAfterMount } from '../Helper'
 import './Toggle.scss'
 
-const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="", disabled=false, dataTestId="handle-toggle-button", ...props})=>{
-    const [active, setActive] = React.useState(selected);
+const Toggle = ({
+    selected = false,
+    onSelect = null,
+    color = '#36b37e',
+    rootClassName = '',
+    disabled = false,
+    dataTestId = 'handle-toggle-button',
+    Icon = null,
+    iconClass= '',
+    ...props
+}) => {
+    const [active, setActive] = React.useState(selected)
 
-    useEffectAfterMount(()=>{
-        if(typeof onSelect === 'function'){
-            if(active !== selected){
+    useEffectAfterMount(() => {
+        if (typeof onSelect === 'function') {
+            if (active !== selected) {
                 onSelect(active)
             }
         }
-    },[active])
+    }, [active])
 
     useEffectAfterMount(() => {
         setActive(selected)
     }, [selected])
 
-    function handleClick(e){
-        if(!disabled){
-            setActive(active=>!active)
+    function handleClick(e) {
+        if (!disabled) {
+            setActive((active) => !active)
         }
     }
 
@@ -30,9 +40,11 @@ const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="
             style={{ ['--color' as any]: color }}
         >
             <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
-            <span className="toggle__slider round" data-testid={dataTestId}></span>
+            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
+                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            </span>
         </label>
     )
 }
 
-export default Toggle
+export default Toggle

package/src/Common/Types.ts

@@ -364,4 +364,11 @@ export interface RegistryTypeDetailType {
     registryURL: InputDetailType
     id: InputDetailType
     password: InputDetailType
+}
+
+export interface UseSearchString {
+    queryParams: URLSearchParams
+    searchParams: {
+        [key: string]: string
+    }
 }