@devtron-labs/devtron-fe-common-lib 0.0.37 → 0.0.39

package/dist/Common/AppStatus/AppStatus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AppStatusType } from './types';
+export default function AppStatus({ appStatus, isDeploymentStatus, isJobView, isVirtualEnv, hideStatusMessage, }: AppStatusType): JSX.Element;

package/dist/Common/AppStatus/constants.d.ts

@@ -0,0 +1,51 @@
+export declare const StatusConstants: {
+    NOT_DEPLOYED: {
+        noSpaceLower: string;
+        normalCase: string;
+        lowerCase: string;
+    };
+    APP_STATUS: {
+        noSpaceLower: string;
+        normalText: string;
+    };
+    PROJECT: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    CLUSTER: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    NAMESPACE: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    ENVIRONMENT: {
+        pluralLower: string;
+        lowerCase: string;
+    };
+    NOT_AVILABLE: {
+        normalCase: string;
+    };
+};
+export declare enum TIMELINE_STATUS {
+    DEPLOYMENT_INITIATED = "DEPLOYMENT_INITIATED",
+    GIT_COMMIT = "GIT_COMMIT",
+    GIT_COMMIT_FAILED = "GIT_COMMIT_FAILED",
+    KUBECTL_APPLY = "KUBECTL_APPLY",
+    KUBECTL_APPLY_STARTED = "KUBECTL_APPLY_STARTED",
+    KUBECTL_APPLY_SYNCED = "KUBECTL_APPLY_SYNCED",
+    HEALTHY = "HEALTHY",
+    APP_HEALTH = "APP_HEALTH",
+    DEPLOYMENT_FAILED = "FAILED",
+    FETCH_TIMED_OUT = "TIMED_OUT",
+    UNABLE_TO_FETCH_STATUS = "UNABLE_TO_FETCH_STATUS",
+    DEGRADED = "DEGRADED",
+    DEPLOYMENT_SUPERSEDED = "DEPLOYMENT_SUPERSEDED",
+    ABORTED = "ABORTED",
+    INPROGRESS = "INPROGRESS",
+    HELM_PACKAGE_GENERATED = "HELM_PACKAGE_GENERATED",
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO = "HELM_MANIFEST_PUSHED_TO_HELM_REPO",
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED = "HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED"
+}
+export declare const YET_TO_RUN = "Yet to run";

package/dist/Common/AppStatus/index.d.ts

@@ -0,0 +1 @@
+export { default as AppStatus } from './AppStatus';

package/dist/Common/AppStatus/types.d.ts

@@ -0,0 +1,12 @@
+export interface AppStatusType {
+    appStatus: string;
+    isDeploymentStatus?: boolean;
+    isJobView?: boolean;
+    isVirtualEnv?: boolean;
+    /**
+     * Hide the status message if true and show status message in tooltip
+     *
+     * @default false
+     */
+    hideStatusMessage?: boolean;
+}

package/dist/Common/AppStatus/utils.d.ts

@@ -0,0 +1 @@
+export declare const triggerStatus: (triggerDetailStatus: string) => string;

package/dist/Common/Helper.d.ts

@@ -51,4 +51,5 @@ export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) =>
  */
 export declare function copyToClipboard(str: any, callback?: typeof noop): void;
 export declare function useAsync<T>(func: (...rest: any[]) => Promise<T>, dependencyArray?: any[], shouldRun?: boolean, options?: AsyncOptions): [boolean, T, any | null, () => void, React.Dispatch<any>, any[]];
+export declare const processDeployedTime: (lastDeployed: any, isArgoInstalled: any) => string;
 export {};

package/dist/Common/Hooks/UseClickOutside/UseClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutside: (ref: any, callback: () => void) => void;

package/dist/Common/Hooks/index.d.ts

@@ -1 +1,2 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin';
+export { useClickOutside } from './UseClickOutside/UseClickOutside';

package/dist/Common/index.d.ts

@@ -39,3 +39,4 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch';
 export { default as Grid } from './Grid/Grid';
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton';
 export * from './Hooks';
+export { AppStatus } from './AppStatus';

package/dist/index.js

@@ -10220,7 +10220,15 @@ function useAsync(func, dependencyArray, shouldRun, options) {
         }
     };
     return [state.loading, state.result, state.error, reload, setResult, state.dependencies];
-}
+}
+var processDeployedTime = function (lastDeployed, isArgoInstalled) {
+    if (lastDeployed) {
+        return handleUTCTime(lastDeployed, true);
+    }
+    else {
+        return isArgoInstalled ? '' : 'Not deployed';
+    }
+};
 
 function Progressing(_a) {
     var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
@@ -22837,7 +22845,7 @@ var Toggle = function (_a) {
     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}";
+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    max-width: 120px;\n    word-wrap: break-word;\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$1);
 
 function ScanVulnerabilitiesTable(_a) {
@@ -23608,6 +23616,116 @@ var useSuperAdmin = function () {
     return { isSuperAdmin: isSuperAdmin };
 };
 
+var useClickOutside = function (ref, callback) {
+    React.useEffect(function () {
+        var handleClickOutside = function (e) {
+            if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [ref, callback]);
+};
+
+var StatusConstants = {
+    NOT_DEPLOYED: {
+        noSpaceLower: 'notdeployed',
+        normalCase: 'Not deployed',
+        lowerCase: 'not-deployed',
+    },
+    APP_STATUS: {
+        noSpaceLower: 'appStatus',
+        normalText: 'App status',
+    },
+    PROJECT: {
+        pluralLower: 'projects',
+        lowerCase: 'project',
+    },
+    CLUSTER: {
+        pluralLower: 'clusters',
+        lowerCase: 'cluster',
+    },
+    NAMESPACE: {
+        pluralLower: 'namespaces',
+        lowerCase: 'namespace',
+    },
+    ENVIRONMENT: {
+        pluralLower: 'environments',
+        lowerCase: 'environment',
+    },
+    NOT_AVILABLE: {
+        normalCase: 'Not available',
+    },
+};
+var TIMELINE_STATUS;
+(function (TIMELINE_STATUS) {
+    TIMELINE_STATUS["DEPLOYMENT_INITIATED"] = "DEPLOYMENT_INITIATED";
+    TIMELINE_STATUS["GIT_COMMIT"] = "GIT_COMMIT";
+    TIMELINE_STATUS["GIT_COMMIT_FAILED"] = "GIT_COMMIT_FAILED";
+    TIMELINE_STATUS["KUBECTL_APPLY"] = "KUBECTL_APPLY";
+    TIMELINE_STATUS["KUBECTL_APPLY_STARTED"] = "KUBECTL_APPLY_STARTED";
+    TIMELINE_STATUS["KUBECTL_APPLY_SYNCED"] = "KUBECTL_APPLY_SYNCED";
+    TIMELINE_STATUS["HEALTHY"] = "HEALTHY";
+    TIMELINE_STATUS["APP_HEALTH"] = "APP_HEALTH";
+    TIMELINE_STATUS["DEPLOYMENT_FAILED"] = "FAILED";
+    TIMELINE_STATUS["FETCH_TIMED_OUT"] = "TIMED_OUT";
+    TIMELINE_STATUS["UNABLE_TO_FETCH_STATUS"] = "UNABLE_TO_FETCH_STATUS";
+    TIMELINE_STATUS["DEGRADED"] = "DEGRADED";
+    TIMELINE_STATUS["DEPLOYMENT_SUPERSEDED"] = "DEPLOYMENT_SUPERSEDED";
+    TIMELINE_STATUS["ABORTED"] = "ABORTED";
+    TIMELINE_STATUS["INPROGRESS"] = "INPROGRESS";
+    TIMELINE_STATUS["HELM_PACKAGE_GENERATED"] = "HELM_PACKAGE_GENERATED";
+    TIMELINE_STATUS["HELM_MANIFEST_PUSHED_TO_HELM_REPO"] = "HELM_MANIFEST_PUSHED_TO_HELM_REPO";
+    TIMELINE_STATUS["HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED"] = "HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED";
+})(TIMELINE_STATUS || (TIMELINE_STATUS = {}));
+var YET_TO_RUN = 'Yet to run';
+
+var triggerStatus = function (triggerDetailStatus) {
+    var triggerStatus = triggerDetailStatus === null || triggerDetailStatus === void 0 ? void 0 : triggerDetailStatus.toUpperCase();
+    if (triggerStatus === TIMELINE_STATUS.ABORTED || triggerStatus === TIMELINE_STATUS.DEGRADED) {
+        return 'Failed';
+    }
+    else if (triggerStatus === TIMELINE_STATUS.HEALTHY) {
+        return 'Succeeded';
+    }
+    else if (triggerStatus === TIMELINE_STATUS.INPROGRESS) {
+        return 'Inprogress';
+    }
+    else {
+        return triggerDetailStatus;
+    }
+};
+
+function AppStatus(_a) {
+    var appStatus = _a.appStatus, _b = _a.isDeploymentStatus, isDeploymentStatus = _b === void 0 ? false : _b, _c = _a.isJobView, isJobView = _c === void 0 ? false : _c, isVirtualEnv = _a.isVirtualEnv, _d = _a.hideStatusMessage, hideStatusMessage = _d === void 0 ? false : _d;
+    var status = appStatus;
+    if (isDeploymentStatus) {
+        status = triggerStatus(appStatus);
+    }
+    var appStatusLowerCase = status === null || status === void 0 ? void 0 : status.toLowerCase();
+    var isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower;
+    var iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase;
+    var statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-');
+    var notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase;
+    var textContent = isNotDeployed ? notDeployed : statusMessage;
+    var renderIcon = function () {
+        if (iconClass) {
+            return jsxRuntime.jsx("span", { className: "dc__app-summary__icon icon-dim-16 ".concat(iconClass, " ").concat(iconClass, "--node") });
+        }
+        else if (isVirtualEnv) {
+            return (jsxRuntime.jsx("span", { className: "dc__app-summary__icon icon-dim-16 ".concat(StatusConstants.NOT_DEPLOYED.lowerCase, " ").concat(StatusConstants.NOT_DEPLOYED.lowerCase, "--node") }));
+        }
+        else {
+            return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt w-200", arrow: false, placement: "top", content: "To fetch app status for GitOps based deployments open the app detail page" }, { children: jsxRuntime.jsx(SvgIcInfoOutlined, { className: "icon-dim-16 fcn-6" }) })));
+        }
+    };
+    return hideStatusMessage ? (iconClass || isVirtualEnv ? (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "top", content: textContent }, { children: jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: renderIcon() })) }))) : (renderIcon())) : (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex mr-6" }, { children: renderIcon() })), jsxRuntime.jsx("p", __assign({ "data-testid": "".concat(status, "-app-status"), className: "dc__truncate-text dc__first-letter-capitalize cn-6 m-0" }, { children: textContent }))] })));
+}
+
+exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
@@ -23697,6 +23815,7 @@ exports.multiSelectStyles = multiSelectStyles;
 exports.noop = noop$1;
 exports.not = not;
 exports.post = post;
+exports.processDeployedTime = processDeployedTime;
 exports.put = put;
 exports.setImageTags = setImageTags;
 exports.showError = showError;
@@ -23706,6 +23825,7 @@ exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
 exports.useAsync = useAsync;
 exports.useBreadcrumb = useBreadcrumb;
+exports.useClickOutside = useClickOutside;
 exports.useEffectAfterMount = useEffectAfterMount;
 exports.useForm = useForm;
 exports.useSearchString = useSearchString;

package/package.json

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

package/src/Common/AppStatus/AppStatus.tsx

@@ -0,0 +1,64 @@
+import Tippy from '@tippyjs/react'
+import { ReactComponent as InfoIcon } from '../../Assets/Icon/ic-info-outlined.svg'
+import { StatusConstants, YET_TO_RUN } from './constants'
+import { AppStatusType } from './types'
+import { triggerStatus } from './utils'
+
+export default function AppStatus({
+    appStatus,
+    isDeploymentStatus = false,
+    isJobView = false,
+    isVirtualEnv,
+    hideStatusMessage = false,
+}: AppStatusType) {
+    let status = appStatus
+    if (isDeploymentStatus) {
+        status = triggerStatus(appStatus)
+    }
+    const appStatusLowerCase = status?.toLowerCase()
+    const isNotDeployed = appStatusLowerCase === StatusConstants.NOT_DEPLOYED.noSpaceLower
+    const iconClass = isNotDeployed ? StatusConstants.NOT_DEPLOYED.lowerCase : appStatusLowerCase
+    const statusMessage = status || (isVirtualEnv ? StatusConstants.NOT_AVILABLE.normalCase : '-')
+    const notDeployed = isJobView ? YET_TO_RUN : StatusConstants.NOT_DEPLOYED.normalCase
+    const textContent = isNotDeployed ? notDeployed : statusMessage
+
+    const renderIcon = () => {
+        if (iconClass) {
+            return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
+        } else if (isVirtualEnv) {
+            return (
+                <span
+                    className={`dc__app-summary__icon icon-dim-16 ${StatusConstants.NOT_DEPLOYED.lowerCase} ${StatusConstants.NOT_DEPLOYED.lowerCase}--node`}
+                />
+            )
+        } else {
+            return (
+                <Tippy
+                    className="default-tt w-200"
+                    arrow={false}
+                    placement="top"
+                    content="To fetch app status for GitOps based deployments open the app detail page"
+                >
+                    <InfoIcon className="icon-dim-16 fcn-6" />
+                </Tippy>
+            )
+        }
+    }
+
+    return hideStatusMessage ? (
+        iconClass || isVirtualEnv ? (
+            <Tippy className="default-tt" arrow={false} placement="top" content={textContent}>
+                <div className="flex">{renderIcon()}</div>
+            </Tippy>
+        ) : (
+            renderIcon()
+        )
+    ) : (
+        <div className="flex left">
+            <div className="flex mr-6">{renderIcon()}</div>
+            <p data-testid={`${status}-app-status`} className="dc__truncate-text dc__first-letter-capitalize cn-6 m-0">
+                {textContent}
+            </p>
+        </div>
+    )
+}

package/src/Common/AppStatus/constants.ts

@@ -0,0 +1,53 @@
+export const StatusConstants = {
+    NOT_DEPLOYED: {
+        noSpaceLower: 'notdeployed',
+        normalCase: 'Not deployed',
+        lowerCase: 'not-deployed',
+    },
+    APP_STATUS: {
+        noSpaceLower: 'appStatus',
+        normalText: 'App status',
+    },
+    PROJECT: {
+        pluralLower: 'projects',
+        lowerCase: 'project',
+    },
+    CLUSTER: {
+        pluralLower: 'clusters',
+        lowerCase: 'cluster',
+    },
+    NAMESPACE: {
+        pluralLower: 'namespaces',
+        lowerCase: 'namespace',
+    },
+    ENVIRONMENT: {
+        pluralLower: 'environments',
+        lowerCase: 'environment',
+    },
+    NOT_AVILABLE: {
+        normalCase: 'Not available',
+    },
+}
+
+export enum TIMELINE_STATUS {
+    DEPLOYMENT_INITIATED = 'DEPLOYMENT_INITIATED',
+    GIT_COMMIT = 'GIT_COMMIT',
+    GIT_COMMIT_FAILED = 'GIT_COMMIT_FAILED',
+    KUBECTL_APPLY = 'KUBECTL_APPLY',
+    KUBECTL_APPLY_STARTED = 'KUBECTL_APPLY_STARTED',
+    KUBECTL_APPLY_SYNCED = 'KUBECTL_APPLY_SYNCED',
+    HEALTHY = 'HEALTHY',
+    APP_HEALTH = 'APP_HEALTH',
+    DEPLOYMENT_FAILED = 'FAILED',
+    FETCH_TIMED_OUT = 'TIMED_OUT',
+    UNABLE_TO_FETCH_STATUS = 'UNABLE_TO_FETCH_STATUS',
+    DEGRADED = 'DEGRADED',
+    DEPLOYMENT_SUPERSEDED = 'DEPLOYMENT_SUPERSEDED',
+    ABORTED = 'ABORTED',
+    INPROGRESS = 'INPROGRESS',
+    HELM_PACKAGE_GENERATED = 'HELM_PACKAGE_GENERATED',
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO',
+    HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED',
+}
+
+export const YET_TO_RUN = 'Yet to run'

package/src/Common/AppStatus/index.ts

@@ -0,0 +1 @@
+export { default as AppStatus } from './AppStatus'

package/src/Common/AppStatus/types.ts

@@ -0,0 +1,12 @@
+export interface AppStatusType {
+    appStatus: string
+    isDeploymentStatus?: boolean
+    isJobView?: boolean
+    isVirtualEnv?: boolean
+    /**
+     * Hide the status message if true and show status message in tooltip
+     *
+     * @default false
+     */
+    hideStatusMessage?: boolean
+}

package/src/Common/AppStatus/utils.ts

@@ -0,0 +1,14 @@
+import { TIMELINE_STATUS } from './constants'
+
+export const triggerStatus = (triggerDetailStatus: string): string => {
+    let triggerStatus = triggerDetailStatus?.toUpperCase()
+    if (triggerStatus === TIMELINE_STATUS.ABORTED || triggerStatus === TIMELINE_STATUS.DEGRADED) {
+        return 'Failed'
+    } else if (triggerStatus === TIMELINE_STATUS.HEALTHY) {
+        return 'Succeeded'
+    } else if (triggerStatus === TIMELINE_STATUS.INPROGRESS) {
+        return 'Inprogress'
+    } else {
+        return triggerDetailStatus
+    }
+}

package/src/Common/Helper.tsx

@@ -487,3 +487,11 @@ export function useAsync<T>(
 
     return [state.loading, state.result, state.error, reload, setResult, state.dependencies]
 }
+
+export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
+    if (lastDeployed) {
+        return handleUTCTime(lastDeployed, true)
+    } else {
+        return isArgoInstalled ? '' : 'Not deployed'
+    }
+}

package/src/Common/Hooks/UseClickOutside/UseClickOutside.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+export const useClickOutside = (ref: any, callback: () => void) => {
+    useEffect(() => {
+        const handleClickOutside = (e: any) => {
+            if (ref?.current && !ref.current.contains(e.target)) {
+                callback()
+            }
+        }
+        document.addEventListener('click', handleClickOutside)
+        return () => {
+            document.removeEventListener('click', handleClickOutside)
+        }
+    }, [ref, callback])
+}

package/src/Common/Hooks/index.ts

@@ -1 +1,2 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
+export { useClickOutside } from './UseClickOutside/UseClickOutside'

package/src/Common/Security/scanVulnerabilities.css

@@ -39,6 +39,8 @@
 .security-tab__cell-fixed-ver,
 .security-tab__cell-policy {
     padding: 10px;
+    max-width: 120px;
+    word-wrap: break-word;
 }
 
 .security-tab__cell-cve {

package/src/Common/index.ts

@@ -39,3 +39,4 @@ export { default as DebouncedSearch } from './DebouncedSearch/DebouncedSearch'
 export { default as Grid } from './Grid/Grid'
 export { default as ClipboardButton } from './ClipboardButton/ClipboardButton'
 export * from './Hooks'
+export { AppStatus } from './AppStatus'