@devtron-labs/devtron-fe-common-lib 0.0.7-beta-36 → 0.0.7-beta-37

package/dist/Common/Constants.d.ts

@@ -43,3 +43,8 @@ export declare const ERROR_EMPTY_SCREEN: {
     FORBIDDEN: string;
     REQUIRED_MANAGER_ACCESS: string;
 };
+export declare const TOKEN_COOKIE_NAME = "argocd.token";
+export declare const TriggerTypeMap: {
+    automatic: string;
+    manual: string;
+};

package/dist/Common/Helper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;
@@ -9,4 +9,12 @@ export declare const ConditionalWrap: React.FC<ConditionalWrapper<any>>;
 export declare function sortCallback(key: string, a: any, b: any, isCaseSensitive?: boolean): 1 | -1 | 0;
 export declare const stopPropagation: (event: any) => void;
 export declare function useThrottledEffect(callback: any, delay: any, deps?: any[]): void;
+export declare function getRandomColor(email: string): string;
+export declare const getAlphabetIcon: (str: string) => JSX.Element;
+export declare const getEmptyArrayOfLength: (length: number) => unknown[];
+export declare function noop(...args: any[]): any;
+export declare function not(e: any): boolean;
+export declare function useEffectAfterMount(cb: any, dependencies: any): void;
+export declare function getCookie(sKey: any): string;
+export declare function getLoginInfo(): any;
 export {};

package/dist/Common/Security/ScanVulnerabilitiesTable.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ScanVulnerabilitiesTableProps } from '../Types';
+import './scanVulnerabilities.css';
+export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulnerabilitiesTableProps): JSX.Element;

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

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

package/dist/Common/Types.d.ts

@@ -158,3 +158,134 @@ export interface ModalType {
     preventWheelDisable?: boolean;
     noBackDrop?: boolean;
 }
+export type CDModalTabType = 'SECURITY' | 'CHANGES';
+export declare const CDModalTab: {
+    Security: CDModalTabType;
+    Changes: CDModalTabType;
+};
+export declare enum DeploymentNodeType {
+    PRECD = "PRECD",
+    CD = "CD",
+    POSTCD = "POSTCD",
+    APPROVAL = "APPROVAL"
+}
+export interface UserApprovalConfigType {
+    requiredCount: number;
+}
+interface ApprovalUserDataType {
+    dataId: number;
+    userActionTime: string;
+    userComment: string;
+    userEmail: string;
+    userId: number;
+    userResponse: number;
+}
+export interface UserApprovalMetadataType {
+    approvalRequestId: number;
+    approvalRuntimeState: number;
+    approvedUsersData: ApprovalUserDataType[];
+    requestedUserData: ApprovalUserDataType;
+}
+export interface CommonNodeAttr {
+    connectingCiPipelineId?: number;
+    parents: string | number[] | string[];
+    x: number;
+    y: number;
+    title: string;
+    description?: string;
+    triggerType?: string;
+    id: string;
+    icon?: string;
+    status?: string;
+    isSource: boolean;
+    isGitSource: boolean;
+    isRoot: boolean;
+    downstreams: string[];
+    type: 'CI' | 'GIT' | 'PRECD' | 'CD' | 'POSTCD' | 'WEBHOOK';
+    parentCiPipeline?: number;
+    parentAppId?: number;
+    url?: string;
+    branch?: string;
+    sourceType?: string;
+    colorCode?: string;
+    isExternalCI?: boolean;
+    isLinkedCI?: boolean;
+    environmentName?: string;
+    environmentId?: number;
+    inputMaterialList?: any[];
+    rollbackMaterialList?: any[];
+    linkedCount?: number;
+    deploymentStrategy?: string;
+    height: number;
+    width: number;
+    preNode?: CommonNodeAttr;
+    postNode?: CommonNodeAttr;
+    stageIndex?: number;
+    sourceNodes?: Array<CommonNodeAttr>;
+    downstreamNodes?: Array<CommonNodeAttr>;
+    parentPipelineId?: string;
+    parentPipelineType?: string;
+    parentEnvironmentName?: string;
+    isRegex?: boolean;
+    regex?: string;
+    primaryBranchAfterRegex?: string;
+    storageConfigured?: boolean;
+    deploymentAppDeleteRequest?: boolean;
+    approvalUsers?: string[];
+    userApprovalConfig?: UserApprovalConfigType;
+    requestedUserId?: number;
+}
+export interface VulnerabilityType {
+    name: string;
+    severity: "CRITICAL" | "MODERATE" | "LOW";
+    package: string;
+    version: string;
+    fixedVersion: string;
+    policy: string;
+    url?: string;
+}
+export interface ScanVulnerabilitiesTableProps {
+    vulnerabilities: VulnerabilityType[];
+}
+export interface MaterialInfo {
+    revision: string;
+    modifiedTime: string | Date;
+    author: string;
+    message: string;
+    commitLink: string;
+    tag: string;
+    webhookData: string;
+    branch: string;
+    url?: string;
+    type?: string;
+}
+export interface CDMaterialType {
+    index: number;
+    id: string;
+    materialInfo: MaterialInfo[];
+    tab: CDModalTabType;
+    scanEnabled: boolean;
+    scanned: boolean;
+    vulnerabilitiesLoading: boolean;
+    lastExecution: string;
+    vulnerabilities: VulnerabilityType[];
+    vulnerable: boolean;
+    deployedTime: string;
+    deployedBy?: string;
+    wfrId?: number;
+    buildTime: string;
+    image: string;
+    isSelected: boolean;
+    showSourceInfo: boolean;
+    latest: boolean;
+    runningOnParentCd?: boolean;
+    userApprovalMetadata?: UserApprovalMetadataType;
+    triggeredBy?: number;
+}
+export interface CDMaterialResponseType {
+    approvalUsers: string[];
+    materials: any[];
+    userApprovalConfig: UserApprovalConfigType;
+    requestedUserId: number;
+}
+export {};

package/dist/Common/index.d.ts

@@ -26,3 +26,5 @@ export * from './Common.service';
 export * from './Checkbox';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
+export { default as Toggle } from './Toggle/Toggle';
+export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';

package/dist/index.js

@@ -70,6 +70,11 @@ var ERROR_EMPTY_SCREEN = {
     UNAUTHORIZED: 'unauthorized',
     FORBIDDEN: 'forbidden',
     REQUIRED_MANAGER_ACCESS: 'Looks like you don’t have access to information on this page. Please contact your manager to request access.',
+};
+var TOKEN_COOKIE_NAME = 'argocd.token';
+var TriggerTypeMap = {
+    automatic: 'Auto',
+    manual: 'Manual',
 };
 
 /******************************************************************************
@@ -232,7 +237,18 @@ exports.ImageType = void 0;
 (function (ImageType) {
     ImageType["Large"] = "large";
     ImageType["Medium"] = "medium";
-})(exports.ImageType || (exports.ImageType = {}));
+})(exports.ImageType || (exports.ImageType = {}));
+var CDModalTab = {
+    Security: 'SECURITY',
+    Changes: 'CHANGES',
+};
+exports.DeploymentNodeType = void 0;
+(function (DeploymentNodeType) {
+    DeploymentNodeType["PRECD"] = "PRECD";
+    DeploymentNodeType["CD"] = "CD";
+    DeploymentNodeType["POSTCD"] = "POSTCD";
+    DeploymentNodeType["APPROVAL"] = "APPROVAL";
+})(exports.DeploymentNodeType || (exports.DeploymentNodeType = {}));
 
 var responseMessages = {
     100: 'Continue',
@@ -484,8 +500,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
-styleInject(css_248z$3);
+var css_248z$5 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
+styleInject(css_248z$5);
 
 var _g$2;
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
@@ -3989,6 +4005,66 @@ function useThrottledEffect(callback, delay, deps) {
             clearTimeout(handler);
         };
     }, __spreadArray([delay], __read(deps), false));
+}
+var colors$1 = [
+    '#FFB900',
+    '#D83B01',
+    '#B50E0E',
+    '#E81123',
+    '#B4009E',
+    '#5C2D91',
+    '#0078D7',
+    '#00B4FF',
+    '#008272',
+    '#107C10',
+];
+function getRandomColor(email) {
+    var sum = 0;
+    for (var i = 0; i < email.length; i++) {
+        sum += email.charCodeAt(i);
+    }
+    return colors$1[sum % colors$1.length];
+}
+var getAlphabetIcon = function (str) {
+    if (!str)
+        return null;
+    return (jsxRuntime.jsx("span", __assign({ className: "alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8", style: { backgroundColor: getRandomColor(str) } }, { children: str[0] })));
+};
+var getEmptyArrayOfLength = function (length) {
+    return Array.from({ length: length });
+};
+function noop$1() {
+}
+function not(e) {
+    return !e;
+}
+function useEffectAfterMount(cb, dependencies) {
+    var justMounted = React.useRef(true);
+    React.useEffect(function () {
+        if (!justMounted.current) {
+            return cb();
+        }
+        justMounted.current = false;
+    }, dependencies);
+}
+function getCookie(sKey) {
+    if (!sKey) {
+        return null;
+    }
+    return (document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + sKey.replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1') || null);
+}
+function getLoginInfo() {
+    var argocdToken = getCookie(TOKEN_COOKIE_NAME);
+    if (argocdToken) {
+        var jwts = argocdToken.split('.');
+        try {
+            return JSON.parse(atob(jwts[1]));
+        }
+        catch (err) {
+            console.error('error in setting user ', err);
+            return null;
+        }
+    }
 }
 
 function Progressing(_a) {
@@ -4041,8 +4117,8 @@ var VisibleModal = /** @class */ (function (_super) {
     return VisibleModal;
 }(React.Component));
 
-var css_248z$2 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
-styleInject(css_248z$2);
+var css_248z$4 = ".drawer {\n  position: absolute;\n  overflow: hidden;\n}\n.drawer.left, .drawer.right {\n  top: 0;\n  bottom: 0;\n  width: 0;\n  transition: width 200ms;\n}\n.drawer.left.show, .drawer.right.show {\n  min-width: var(--minWidth);\n  width: var(--width);\n  max-width: var(--maxWidth);\n}\n.drawer.top, .drawer.bottom {\n  left: 0;\n  right: 0;\n  height: 0;\n  transition: height 200ms;\n}\n.drawer.top.show, .drawer.bottom.show {\n  height: var(--height);\n}\n.drawer.right {\n  right: 0;\n}\n.drawer.left {\n  left: 0;\n}\n.drawer.top {\n  top: 0;\n}\n.drawer.bottom {\n  bottom: 0;\n}";
+styleInject(css_248z$4);
 
 var Drawer = function (_a) {
     var children = _a.children, position = _a.position, height = _a.height, width = _a.width, minWidth = _a.minWidth, maxWidth = _a.maxWidth, parentClassName = _a.parentClassName, onEscape = _a.onEscape;
@@ -8424,8 +8500,8 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var css_248z$1 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
-styleInject(css_248z$1);
+var css_248z$3 = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
+styleInject(css_248z$3);
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -16366,8 +16442,8 @@ var CustomSelect = function (props) {
     return jsxRuntime.jsx(Select, __assign({}, props));
 };
 
-var css_248z = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
-styleInject(css_248z);
+var css_248z$2 = ".info-bar-container .info_text .success {\n  background-color: var(--G100);\n}\n.info-bar-container .warn {\n  background: var(--Y100);\n  border: solid var(--Y200);\n}\n.info-bar-container .warn .warning-icon path:nth-child(2) {\n  fill: var(--Y700);\n}\n.info-bar-container .info_bar {\n  background-color: var(--B100);\n  border: 1px solid var(--B200);\n}\n.info-bar-container .error_bar {\n  background-color: var(--R100);\n  border: 1px solid var(--R200);\n}\n.info-bar-container .question-bar {\n  background-color: var(--V100);\n  border: 1px solid var(--V200);\n}";
+styleInject(css_248z$2);
 
 function InfoColourBar(_a) {
     var message = _a.message, classname = _a.classname, Icon = _a.Icon, iconClass = _a.iconClass, iconSize = _a.iconSize, renderActionButton = _a.renderActionButton, linkText = _a.linkText, redirectLink = _a.redirectLink, linkOnClick = _a.linkOnClick, linkClass = _a.linkClass, internalLink = _a.internalLink, styles = _a.styles;
@@ -16427,8 +16503,50 @@ var Checkbox = /** @class */ (function (_super) {
     return Checkbox;
 }(React.Component));
 
+var css_248z$1 = ".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}";
+styleInject(css_248z$1);
+
+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];
+    useEffectAfterMount(function () {
+        if (typeof onSelect === 'function') {
+            if (active !== selected) {
+                onSelect(active);
+            }
+        }
+    }, [active]);
+    useEffectAfterMount(function () {
+        setActive(selected);
+    }, [selected]);
+    function handleClick(e) {
+        if (!disabled) {
+            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 })] })));
+};
+
+var css_248z = ".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}";
+styleInject(css_248z);
+
+function ScanVulnerabilitiesTable(_a) {
+    var vulnerabilities = _a.vulnerabilities;
+    var renderRow = function (vulnerability) {
+        var _a, _b, _c;
+        return (jsxRuntime.jsxs("tr", __assign({ className: "dc__security-tab__table-row cursor", onClick: function (e) {
+                window.open("https://cve.mitre.org/cgi-bin/cvename.cgi?name=".concat(vulnerability.name), '_blank');
+            } }, { children: [jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-cve dc__cve-cell" }, { children: jsxRuntime.jsx("a", __assign({ href: "https://cve.mitre.org/cgi-bin/cvename.cgi?name=".concat(vulnerability.name), rel: "noopener noreferrer", target: "_blank" }, { children: vulnerability.name })) })), jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-severity" }, { children: jsxRuntime.jsx("span", __assign({ className: "fill-".concat((_a = vulnerability.severity) === null || _a === void 0 ? void 0 : _a.toLowerCase()) }, { children: vulnerability.severity })) })), jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-package" }, { children: vulnerability.package })), jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-current-ver" }, { children: vulnerability.version })), jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-fixed-ver" }, { children: vulnerability.fixedVersion })), jsxRuntime.jsx("td", __assign({ className: "security-tab__cell-policy security-tab__cell-policy--".concat((_b = vulnerability.policy) === null || _b === void 0 ? void 0 : _b.toLowerCase()) }, { children: (_c = vulnerability.policy) === null || _c === void 0 ? void 0 : _c.toLowerCase() }))] })));
+    };
+    return (jsxRuntime.jsx("table", __assign({ className: "security-tab__table" }, { children: jsxRuntime.jsxs("tbody", { children: [jsxRuntime.jsxs("tr", __assign({ className: "security-tab__table-header" }, { children: [jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-cve" }, { children: "CVE" })), jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-severity" }, { children: "Severity" })), jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-package" }, { children: "Package" })), jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-current-ver" }, { children: "Current Version" })), jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-fixed-ver" }, { children: "Fixed In Version" })), jsxRuntime.jsx("th", __assign({ className: "security-cell-header security-tab__cell-policy" }, { children: "Policy" }))] })), vulnerabilities.map(function (vulnerability) {
+                    return renderRow(vulnerability);
+                })] }) })));
+}
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
+exports.CDModalTab = CDModalTab;
 exports.Checkbox = Checkbox;
 exports.ClearIndicator = ClearIndicator;
 exports.ConditionalWrap = ConditionalWrap;
@@ -16466,10 +16584,12 @@ exports.RadioGroupItem = RadioGroupItem;
 exports.Reload = Reload;
 exports.RequestTimeout = RequestTimeout;
 exports.ResizableTagTextArea = ResizableTagTextArea;
+exports.ScanVulnerabilitiesTable = ScanVulnerabilitiesTable;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
 exports.TOAST_ACCESS_DENIED = TOAST_ACCESS_DENIED;
+exports.TOKEN_COOKIE_NAME = TOKEN_COOKIE_NAME;
 exports.TagDetails = TagDetails;
 exports.TagLabelSelect = TagLabelSelect;
 exports.TagLabelValueSelector = TagLabelValueSelector;
@@ -16477,12 +16597,21 @@ exports.TippyCustomized = TippyCustomized;
 exports.ToastBody = ToastBody;
 exports.ToastBody3 = ToastBody3;
 exports.ToastBodyWithButton = ToastBodyWithButton;
+exports.Toggle = Toggle;
+exports.TriggerTypeMap = TriggerTypeMap;
 exports.URLS = URLS;
 exports.VisibleModal = VisibleModal;
 exports.VisibleModal2 = VisibleModal2;
 exports.get = get;
+exports.getAlphabetIcon = getAlphabetIcon;
+exports.getCookie = getCookie;
+exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
+exports.getLoginInfo = getLoginInfo;
+exports.getRandomColor = getRandomColor;
 exports.getTeamListMin = getTeamListMin;
 exports.multiSelectStyles = multiSelectStyles;
+exports.noop = noop$1;
+exports.not = not;
 exports.post = post;
 exports.put = put;
 exports.showError = showError;
@@ -16491,4 +16620,5 @@ exports.stopPropagation = stopPropagation;
 exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
 exports.useBreadcrumb = useBreadcrumb;
+exports.useEffectAfterMount = useEffectAfterMount;
 exports.useThrottledEffect = useThrottledEffect;

package/package.json

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

package/src/Common/Constants.ts

@@ -53,3 +53,8 @@ export const ERROR_EMPTY_SCREEN = {
     REQUIRED_MANAGER_ACCESS:
         'Looks like you don’t have access to information on this page. Please contact your manager to request access.',
 }
+export const TOKEN_COOKIE_NAME = 'argocd.token'
+export const TriggerTypeMap = {
+    automatic: 'Auto',
+    manual: 'Manual',
+}

package/src/Common/Helper.tsx

@@ -1,9 +1,9 @@
+import React, { useEffect, useRef } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
-import { useEffect, useRef } from 'react'
-import { ERROR_EMPTY_SCREEN } from './Constants'
+import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 
 toast.configure({
   autoClose: 3000,
@@ -90,3 +90,81 @@ export function useThrottledEffect(callback, delay, deps = []) {
         }
     }, [delay, ...deps])
 }
+
+const colors = [
+    '#FFB900',
+    '#D83B01',
+    '#B50E0E',
+    '#E81123',
+    '#B4009E',
+    '#5C2D91',
+    '#0078D7',
+    '#00B4FF',
+    '#008272',
+    '#107C10',
+]
+
+export function getRandomColor(email: string): string {
+    let sum = 0
+    for (let i = 0; i < email.length; i++) {
+        sum += email.charCodeAt(i)
+    }
+    return colors[sum % colors.length]
+}
+
+export const getAlphabetIcon = (str: string) => {
+    if (!str) return null
+    return (
+        <span
+            className="alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8"
+            style={{ backgroundColor: getRandomColor(str) }}
+        >
+            {str[0]}
+        </span>
+    )
+}
+
+export const getEmptyArrayOfLength = (length: number) => {
+    return Array.from({ length })
+}
+
+export function noop(...args): any {}
+
+export function not(e) {
+    return !e
+}
+
+export function useEffectAfterMount(cb, dependencies) {
+    const justMounted = React.useRef(true)
+    React.useEffect(() => {
+        if (!justMounted.current) {
+            return cb()
+        }
+        justMounted.current = false
+    }, dependencies)
+}
+
+export function getCookie(sKey) {
+    if (!sKey) {
+        return null
+    }
+    return (
+        document.cookie.replace(
+            new RegExp('(?:(?:^|.*;)\\s*' + sKey.replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'),
+            '$1',
+        ) || null
+    )
+}
+
+export function getLoginInfo() {
+    const argocdToken = getCookie(TOKEN_COOKIE_NAME)
+    if (argocdToken) {
+        const jwts = argocdToken.split('.')
+        try {
+            return JSON.parse(atob(jwts[1]))
+        } catch (err) {
+            console.error('error in setting user ', err)
+            return null
+        }
+    }
+}

package/src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
+import './scanVulnerabilities.css'
+
+export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulnerabilitiesTableProps) {
+    const renderRow = (vulnerability: VulnerabilityType) => {
+        return (
+            <tr
+                className="dc__security-tab__table-row cursor"
+                onClick={(e) => {
+                    window.open(`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${vulnerability.name}`, '_blank')
+                }}
+            >
+                <td className="security-tab__cell-cve dc__cve-cell">
+                    <a
+                        href={`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${vulnerability.name}`}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                    >
+                        {vulnerability.name}
+                    </a>
+                </td>
+                <td className="security-tab__cell-severity">
+                    <span className={`fill-${vulnerability.severity?.toLowerCase()}`}>{vulnerability.severity}</span>
+                </td>
+                <td className="security-tab__cell-package">{vulnerability.package}</td>
+                <td className="security-tab__cell-current-ver">{vulnerability.version}</td>
+                <td className="security-tab__cell-fixed-ver">{vulnerability.fixedVersion}</td>
+                <td
+                    className={`security-tab__cell-policy security-tab__cell-policy--${vulnerability.policy?.toLowerCase()}`}
+                >
+                    {vulnerability.policy?.toLowerCase()}
+                </td>
+            </tr>
+        )
+    }
+
+    return (
+        <table className="security-tab__table">
+            <tbody>
+                <tr className="security-tab__table-header">
+                    <th className="security-cell-header security-tab__cell-cve">CVE</th>
+                    <th className="security-cell-header security-tab__cell-severity">Severity</th>
+                    <th className="security-cell-header security-tab__cell-package">Package</th>
+                    <th className="security-cell-header security-tab__cell-current-ver">Current Version</th>
+                    <th className="security-cell-header security-tab__cell-fixed-ver">Fixed In Version</th>
+                    <th className="security-cell-header security-tab__cell-policy">Policy</th>
+                </tr>
+                {vulnerabilities.map((vulnerability) => {
+                    return renderRow(vulnerability)
+                })}
+            </tbody>
+        </table>
+    )
+}

package/src/Common/Security/scanVulnerabilities.css

@@ -0,0 +1,67 @@
+.modal-body--scan-details {
+    position: fixed;
+    top: 0;
+    right: 0;
+    background: var(--N000);
+    width: 800px;
+}
+
+.security-tab__table {
+    width: 100%;
+}
+
+.security-tab__table-header {
+    border-bottom: solid 1px var(--N200);
+}
+
+.security-cell-header {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: normal;
+    text-transform: uppercase;
+    color: var(--N500);
+}
+
+.dc__security-tab__table-row {
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 1.54;
+    letter-spacing: normal;
+    color: var(--N900);
+    box-shadow: inset 0 -1px 0 0 #f5f5f5;
+}
+
+.security-tab__cell-cve,
+.security-tab__cell-severity,
+.security-tab__cell-package,
+.security-tab__cell-current-ver,
+.security-tab__cell-fixed-ver,
+.security-tab__cell-policy {
+    padding: 10px;
+}
+
+.security-tab__cell-cve {
+    padding-left: 0px;
+    text-align: left;
+    width: 20%;
+}
+
+.security-tab__cell-policy {
+    padding-right: 0px;
+}
+
+.security-tab__cell-policy--whitelist,
+.security-tab__cell-policy--whitelisted {
+    color: var(--G500);
+    text-transform: capitalize;
+}
+
+.security-tab__cell-policy--block {
+    color: var(--R500);
+    text-transform: capitalize;
+}
+
+.scanned-object__results {
+    margin: 0 20px;
+}

package/src/Common/Toggle/Toggle.scss

@@ -0,0 +1,70 @@
+.toggle__switch {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    &.disabled{
+        cursor: not-allowed;
+        .toggle__slider{
+            cursor: not-allowed;
+        }
+    }
+}
+
+
+/* Hide default HTML checkbox */
+
+.toggle__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+
+/* The slider */
+
+.toggle__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    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;
+}
+
+input:checked+.toggle__slider {
+    background-color: var(--color);
+}
+
+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

@@ -0,0 +1,38 @@
+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);
+
+    useEffectAfterMount(()=>{
+        if(typeof onSelect === 'function'){
+            if(active !== selected){
+                onSelect(active)
+            }
+        }
+    },[active])
+
+    useEffectAfterMount(() => {
+        setActive(selected)
+    }, [selected])
+
+    function handleClick(e){
+        if(!disabled){
+            setActive(active=>!active)
+        }
+    }
+
+    return (
+        <label
+            {...props}
+            className={`${rootClassName} toggle__switch ${disabled ? 'disabled' : ''}`}
+            style={{ ['--color' as any]: color }}
+        >
+            <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
+            <span className="toggle__slider round" data-testid={dataTestId}></span>
+        </label>
+    )
+}
+
+export default Toggle

package/src/Common/Types.ts

@@ -174,3 +174,146 @@ export interface ModalType {
     preventWheelDisable?: boolean
     noBackDrop?: boolean
 }
+
+export type CDModalTabType = 'SECURITY' | 'CHANGES'
+
+export const CDModalTab = {
+    Security: <CDModalTabType>'SECURITY',
+    Changes: <CDModalTabType>'CHANGES',
+}
+
+export enum DeploymentNodeType {
+    PRECD = 'PRECD',
+    CD = 'CD',
+    POSTCD = 'POSTCD',
+    APPROVAL = 'APPROVAL'
+}
+
+export interface UserApprovalConfigType {
+    requiredCount: number
+}
+
+interface ApprovalUserDataType {
+    dataId: number
+    userActionTime: string
+    userComment: string
+    userEmail: string
+    userId: number
+    userResponse: number
+}
+
+export interface UserApprovalMetadataType {
+    approvalRequestId: number
+    approvalRuntimeState: number
+    approvedUsersData: ApprovalUserDataType[]
+    requestedUserData: ApprovalUserDataType
+}
+
+export interface CommonNodeAttr {
+    connectingCiPipelineId?: number
+    parents: string | number[] | string[]
+    x: number
+    y: number
+    title: string
+    description?: string
+    triggerType?: string
+    id: string
+    icon?: string
+    status?: string
+    isSource: boolean
+    isGitSource: boolean
+    isRoot: boolean
+    downstreams: string[]
+    type: 'CI' | 'GIT' | 'PRECD' | 'CD' | 'POSTCD' | 'WEBHOOK'
+    parentCiPipeline?: number
+    parentAppId?: number
+    url?: string
+    branch?: string
+    sourceType?: string
+    colorCode?: string
+    isExternalCI?: boolean
+    isLinkedCI?: boolean
+    environmentName?: string //used for CDs
+    environmentId?: number
+    inputMaterialList?: any[]
+    rollbackMaterialList?: any[] //used for CDs
+    linkedCount?: number //used for CI
+    deploymentStrategy?: string
+    height: number
+    width: number
+    preNode?: CommonNodeAttr //used for CDs
+    postNode?: CommonNodeAttr //used for CDs
+    stageIndex?: number //used for CDs
+    sourceNodes?: Array<CommonNodeAttr> //used for CI
+    downstreamNodes?: Array<CommonNodeAttr>
+    parentPipelineId?: string
+    parentPipelineType?: string
+    parentEnvironmentName?: string
+    isRegex?: boolean
+    regex?: string
+    primaryBranchAfterRegex?: string
+    storageConfigured?: boolean
+    deploymentAppDeleteRequest?: boolean
+    approvalUsers?: string[]
+    userApprovalConfig?: UserApprovalConfigType
+    requestedUserId?: number
+}
+
+
+export interface VulnerabilityType {
+    name: string;
+    severity: "CRITICAL" | "MODERATE" | "LOW";
+    package: string;
+    version: string;
+    fixedVersion: string;
+    policy: string;
+    url?: string;
+}
+
+export interface ScanVulnerabilitiesTableProps {
+    vulnerabilities: VulnerabilityType[];
+}
+
+export interface MaterialInfo {
+    revision: string
+    modifiedTime: string | Date
+    author: string
+    message: string
+    commitLink: string
+    tag: string
+    webhookData: string
+    branch: string
+    url?: string
+    type?: string
+}
+
+export interface CDMaterialType {
+    index: number
+    id: string
+    materialInfo: MaterialInfo[]
+    tab: CDModalTabType
+    scanEnabled: boolean
+    scanned: boolean
+    vulnerabilitiesLoading: boolean
+    lastExecution: string //timestamp
+    vulnerabilities: VulnerabilityType[]
+    vulnerable: boolean
+    deployedTime: string
+    deployedBy?: string
+    wfrId?: number
+    buildTime: string
+    image: string
+    isSelected: boolean
+    showSourceInfo: boolean
+    latest: boolean
+    runningOnParentCd?: boolean
+    userApprovalMetadata?: UserApprovalMetadataType
+    triggeredBy?: number
+}
+
+export interface CDMaterialResponseType {
+    approvalUsers: string[]
+    materials: any[]
+    userApprovalConfig: UserApprovalConfigType
+    requestedUserId: number
+}

package/src/Common/index.ts

@@ -26,4 +26,5 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-
+export { default as Toggle } from './Toggle/Toggle' 
+export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'