@devtron-labs/devtron-fe-common-lib 0.0.55-beta-6 → 0.0.55-beta-7

package/dist/Common/SearchBar/SearchBar.component.js

@@ -0,0 +1,66 @@
+import "../../assets/SearchBar.component.css";
+import { j as t } from "../../jsx-runtime-0dcb030c.js";
+import * as c from "react";
+import { useState as x, useRef as g, useCallback as j } from "react";
+import { S as B } from "../../ic-error-cross-2760059a.js";
+import { B as E } from "../../Helper-a0caa238.js";
+const S = (r) => /* @__PURE__ */ c.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...r }, /* @__PURE__ */ c.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ c.createElement("path", { d: "M0 0h24v24H0z" }), /* @__PURE__ */ c.createElement("path", { fill: "#959BA1", d: "M10 2a8 8 0 0 1 6.32 12.905l5.044 5.045a1 1 0 1 1-1.414 1.414l-5.045-5.043A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12z" })));
+const A = ({
+  initialSearchText: r = "",
+  handleSearchChange: s = () => {
+  },
+  handleEnter: p = () => {
+  },
+  inputProps: m = {},
+  containerClassName: d,
+  shouldDebounce: b = !1,
+  debounceTimeout: o = 300
+}) => {
+  const [n, u] = x(!!r), l = g(), _ = j(E(s, o), [
+    s,
+    o
+  ]), h = (e) => {
+    const { value: a } = e.target;
+    u(!!a), b ? _(a) : s(a);
+  }, i = (e) => {
+    s(e), p(e);
+  }, f = (e) => {
+    const { key: a } = e;
+    if (a === "Enter") {
+      const v = e.target.value.trim();
+      i(v);
+    }
+  }, w = () => {
+    l.current.value = "", i("");
+  };
+  return /* @__PURE__ */ t.jsx("div", { className: d, children: /* @__PURE__ */ t.jsxs("div", { className: "search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32", children: [
+    /* @__PURE__ */ t.jsx(S, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" }),
+    /* @__PURE__ */ t.jsx(
+      "input",
+      {
+        placeholder: "Search",
+        "data-testid": "search-bar",
+        type: "text",
+        ...m,
+        defaultValue: r,
+        className: `search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${n ? "pr-30" : "pr-10"}`,
+        onChange: h,
+        onKeyDown: f,
+        ref: l
+      }
+    ),
+    n && /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5",
+        type: "button",
+        onClick: w,
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ t.jsx(B, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" })
+      }
+    )
+  ] }) });
+};
+export {
+  A as default
+};

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

@@ -1,2 +1,2 @@
-export { default as SearchBar } from './SearchBar.component';
-export type { SearchBarProps } from './types';
+export { default as SearchBar } from './SearchBar.component';
+export type { SearchBarProps } from './types';

package/dist/Common/SearchBar/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./SearchBar.component.js";
+export {
+  e as SearchBar
+};

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

@@ -1,35 +1,35 @@
-import { InputHTMLAttributes } from 'react';
-export interface SearchBarProps {
-    /**
-     * Initial search text
-     *
-     * @default ''
-     */
-    initialSearchText?: string;
-    /**
-     * Search handler for the search input
-     */
-    handleSearchChange?: (searchText: string) => void;
-    /**
-     * Enter event handler for the search input
-     */
-    handleEnter?: (searchText: string) => void;
-    /**
-     * Input props for the search input
-     */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /**
-     * Class name for the container; can be used for handling width
-     */
-    containerClassName?: string;
-    /**
-     * If true, the change handler would be triggered with debounce
-     *
-     * @default false
-     */
-    shouldDebounce?: boolean;
-    /**
-     * Timeout for the debounce handler to be triggered
-     */
-    debounceTimeout?: number;
-}
+import { InputHTMLAttributes } from 'react';
+export interface SearchBarProps {
+    /**
+     * Initial search text
+     *
+     * @default ''
+     */
+    initialSearchText?: string;
+    /**
+     * Search handler for the search input
+     */
+    handleSearchChange?: (searchText: string) => void;
+    /**
+     * Enter event handler for the search input
+     */
+    handleEnter?: (searchText: string) => void;
+    /**
+     * Input props for the search input
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Class name for the container; can be used for handling width
+     */
+    containerClassName?: string;
+    /**
+     * If true, the change handler would be triggered with debounce
+     *
+     * @default false
+     */
+    shouldDebounce?: boolean;
+    /**
+     * Timeout for the debounce handler to be triggered
+     */
+    debounceTimeout?: number;
+}

package/dist/Common/SearchBar/types.js

@@ -0,0 +1 @@
+

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

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

package/dist/Common/Security/ScanVulnerabilitiesTable.js

@@ -0,0 +1,49 @@
+import "../../assets/ScanVulnerabilitiesTable.css";
+import { j as e } from "../../jsx-runtime-0dcb030c.js";
+function i({ vulnerabilities: s }) {
+  const r = (c) => /* @__PURE__ */ e.jsxs(
+    "tr",
+    {
+      className: "dc__security-tab__table-row cursor",
+      onClick: (a) => {
+        window.open(`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${c.name}`, "_blank");
+      },
+      children: [
+        /* @__PURE__ */ e.jsx("td", { className: "security-tab__cell-cve dc__cve-cell", children: /* @__PURE__ */ e.jsx(
+          "a",
+          {
+            href: `https://cve.mitre.org/cgi-bin/cvename.cgi?name=${c.name}`,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            children: c.name
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx("td", { className: "security-tab__cell-severity", children: /* @__PURE__ */ e.jsx("span", { className: `fill-${c.severity?.toLowerCase()}`, children: c.severity }) }),
+        /* @__PURE__ */ e.jsx("td", { className: "security-tab__cell-package", children: c.package }),
+        /* @__PURE__ */ e.jsx("td", { className: "security-tab__cell-current-ver", children: c.version }),
+        /* @__PURE__ */ e.jsx("td", { className: "security-tab__cell-fixed-ver", children: c.fixedVersion }),
+        /* @__PURE__ */ e.jsx(
+          "td",
+          {
+            className: `security-tab__cell-policy security-tab__cell-policy--${c.policy?.toLowerCase()}`,
+            children: c.policy?.toLowerCase()
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ e.jsx("table", { className: "security-tab__table", children: /* @__PURE__ */ e.jsxs("tbody", { children: [
+    /* @__PURE__ */ e.jsxs("tr", { className: "security-tab__table-header", children: [
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-cve", children: "CVE" }),
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-severity", children: "Severity" }),
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-package", children: "Package" }),
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-current-ver", children: "Current Version" }),
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-fixed-ver", children: "Fixed In Version" }),
+      /* @__PURE__ */ e.jsx("th", { className: "security-cell-header security-tab__cell-policy", children: "Policy" })
+    ] }),
+    s.map((c) => r(c))
+  ] }) });
+}
+export {
+  i as default
+};

package/dist/Common/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectComposition, SelectProps } from './types';
+declare const Select: React.FC<SelectProps> & SelectComposition;
+export default Select;

package/dist/Common/Select/Select.js

@@ -0,0 +1,193 @@
+import "../../assets/Select.css";
+import { j as t } from "../../jsx-runtime-0dcb030c.js";
+import u, { useEffect as F } from "react";
+import { a as G } from "../../ic-chevron-down-eb7fd953.js";
+import C from "../PopupMenu.js";
+import { s as R } from "../../Helper-a0caa238.js";
+const b = u.createContext(null);
+function m() {
+  const s = u.useContext(b);
+  if (!s)
+    throw new Error("Select compound components cannot be rendered outside the Toggle component");
+  return s;
+}
+const d = ({
+  children: s = null,
+  onChange: n,
+  value: e = null,
+  valueComparator: o,
+  rootClassName: r = "",
+  disabled: l = !1,
+  tabIndex: i = 0,
+  name: f = "select",
+  autoWidth: x = !0,
+  isKebab: y = !1,
+  dataTestId: g = ""
+}) => {
+  const [h, p] = u.useState(e), [j, S] = u.useState(!1), [E, O] = u.useState(""), [_, P] = u.useState(!1);
+  useEffectAfterMount(() => {
+    h !== e && S(!1);
+  }, [h]), useEffectAfterMount(() => {
+    p(e);
+  }, [e]);
+  function w(c, a) {
+    p(a), c.target.name = f, c.target.value = a, n(c);
+  }
+  if (!s)
+    return null;
+  const { button: B, body: L, optionLength: M, AsyncComponent: T } = u.Children.toArray(s).reduce(
+    (c, a) => (a.type === $ ? c.button = a : a.type === k ? c.AsyncComponent = a : ((a.type === A || a.type === N) && (c.optionLength += 1), c.body.push(a)), c),
+    { button: null, body: [], optionLength: 0, AsyncComponent: null }
+  );
+  return /* @__PURE__ */ t.jsx(
+    b.Provider,
+    {
+      value: {
+        selected: h,
+        select: p,
+        popupOpen: j,
+        valueComparator: o,
+        searchString: E,
+        search: O,
+        handleClick: w,
+        disabled: l,
+        loading: _,
+        setLoading: P
+      },
+      children: /* @__PURE__ */ t.jsxs(C, { onToggleCallback: (c) => S(c), autoClose: j, children: [
+        /* @__PURE__ */ t.jsx(
+          C.Button,
+          {
+            isKebab: y,
+            disabled: l,
+            tabIndex: i,
+            rootClassName: r,
+            dataTestId: g,
+            children: B
+          }
+        ),
+        j && T,
+        /* @__PURE__ */ t.jsx(C.Body, { rootClassName: `select-popup ${r || ""}`, autoWidth: x, children: _ ? null : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          M === 0 && /* @__PURE__ */ t.jsx("div", { className: `${r} no-option-found flex`, children: "No results found" }),
+          L
+        ] }) })
+      ] })
+    }
+  );
+}, A = ({
+  dataTestIdMenuList: s,
+  children: n,
+  value: e,
+  disabled: o = !1,
+  style: r = {},
+  active: l = !1,
+  name: i = "",
+  rootClassName: f = ""
+}) => {
+  const { selected: x, searchString: y, valueComparator: g, handleClick: h } = m();
+  return l = l || x === e, typeof e == "object" && (l = l || g(e)), i.includes(y) ? /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      "data-testid": `list-${s}`,
+      className: `select__option ${f} ${l ? "selected" : ""}`,
+      style: { ...r },
+      onClick: (p) => {
+        o || (p.persist(), h(p, e));
+      },
+      children: n
+    }
+  ) : null;
+}, N = ({ children: s, label: n, rootClassName: e = "" }) => /* @__PURE__ */ t.jsxs("div", { className: `select__option-group ${e}`, children: [
+  /* @__PURE__ */ t.jsx("span", { className: "option-group__label", children: n }),
+  s
+] }), $ = ({
+  dataTestIdDropdown: s,
+  children: n,
+  style: e = {},
+  rootClassName: o = "",
+  arrowAsset: r = "",
+  hideArrow: l = !1
+}) => {
+  const { popupOpen: i, loading: f } = m();
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      "data-testid": s,
+      className: `select-button flex ${o} ${i ? "focused" : ""}`,
+      style: { ...e },
+      children: [
+        n,
+        !l && (f ? /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(Progressing, {}) }) : /* @__PURE__ */ t.jsx(
+          "img",
+          {
+            src: r || G,
+            className: "rotate select-button-sort-image",
+            style: { "--rotateBy": i ? "180deg" : "0deg" }
+          }
+        ))
+      ]
+    }
+  );
+}, I = ({ placeholder: s = "search", style: n = {}, inputStyle: e = {}, rootClassName: o = "" }) => {
+  const { searchString: r, search: l } = m();
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: `${o} search search--select-menu`,
+      onClickCapture: (i) => i.stopPropagation(),
+      style: { ...n },
+      children: [
+        /* @__PURE__ */ t.jsx("span", { className: "search__icon", children: /* @__PURE__ */ t.jsx("i", { className: "fa fa-search" }) }),
+        /* @__PURE__ */ t.jsx(
+          "input",
+          {
+            autoFocus: !0,
+            className: "search__input",
+            style: { ...e },
+            type: "text",
+            placeholder: s,
+            value: r,
+            onChange: (i) => l(i.target.value)
+          }
+        )
+      ]
+    }
+  );
+}, k = ({ api: s }) => {
+  const { loading: n, setLoading: e } = m();
+  return F(() => {
+    async function o() {
+      e(!0);
+      try {
+        await s();
+      } catch (r) {
+        R(r);
+      } finally {
+        e(!1);
+      }
+    }
+    o();
+  }, []), null;
+}, q = ({ rootClassName: s = "", style: n = {} }) => {
+  const { handleClick: e } = m();
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: `select__all ${s}`,
+      style: { ...n },
+      onClick: (o) => {
+        o.persist(), e(o, "all");
+      },
+      children: "Select All"
+    }
+  );
+};
+d.Button = $;
+d.OptGroup = N;
+d.Option = A;
+d.Search = I;
+d.All = q;
+d.Async = k;
+export {
+  d as default
+};

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface SelectComposition {
+    Button?: React.FC<any>;
+    OptGroup?: React.FC<any>;
+    Option?: React.FC<any>;
+    Search?: React.FC<any>;
+    All?: React.FC<any>;
+    Async?: React.FC<any>;
+}
+export interface OptionGroupProps {
+    label: string;
+    rootClassName?: string;
+}
+export interface SelectProps {
+    children: any;
+    onChange: (...args: any[]) => void;
+    valueComparator?: (...args: any[]) => boolean;
+    value?: any;
+    rootClassName?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    name?: string;
+    autoWidth?: boolean;
+    isKebab?: boolean;
+    dataTestId?: string;
+}
+export interface SelectAsync {
+    api: (...args: any[]) => Promise<any>;
+}

package/dist/Common/Select/types.js

@@ -0,0 +1 @@
+

package/dist/Common/ServerError.d.ts

@@ -1,15 +1,15 @@
-export declare class ServerError {
-    code: number;
-    internalMessage: string | null;
-    userMessage: string | null;
-    moreInfo?: string | null;
-    constructor(error: any);
-}
-export declare class ServerErrors extends Error {
-    code: number;
-    errors: ServerError[];
-    constructor(obj: {
-        code: number;
-        errors: ServerError[];
-    });
-}
+export declare class ServerError {
+    code: number;
+    internalMessage: string | null;
+    userMessage: string | null;
+    moreInfo?: string | null;
+    constructor(error: any);
+}
+export declare class ServerErrors extends Error {
+    code: number;
+    errors: ServerError[];
+    constructor(obj: {
+        code: number;
+        errors: ServerError[];
+    });
+}

package/dist/Common/ServerError.js

@@ -0,0 +1,26 @@
+var i = Object.defineProperty;
+var g = (t, e, s) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
+var r = (t, e, s) => (g(t, typeof e != "symbol" ? e + "" : e, s), s);
+class d {
+  constructor(e) {
+    r(this, "code");
+    r(this, "internalMessage");
+    r(this, "userMessage");
+    r(this, "moreInfo");
+    this.code = e.code || 0, this.userMessage = e.userMessage || "", this.internalMessage = e.internalMessage || "", this.moreInfo = e.moreInfo || "";
+  }
+}
+class n extends Error {
+  constructor(s) {
+    super();
+    r(this, "code");
+    r(this, "errors");
+    this.code = s.code;
+    let c = s.errors.reduce((o, a) => (o += `${a.internalMessage || a.userMessage}`, o), "");
+    this.name = `[${s.code.toString()}]`, this.message = c, this.errors = s.errors.map((o) => new d(o)), Object.setPrototypeOf(this, n.prototype);
+  }
+}
+export {
+  d as ServerError,
+  n as ServerErrors
+};

package/dist/Common/TippyCustomized.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import 'tippy.js/animations/shift-toward-subtle.css';
-import { TippyCustomizedProps } from './Types';
-export declare function TippyCustomized(props: TippyCustomizedProps): JSX.Element;
+/// <reference types="react" />
+import { TippyCustomizedProps } from './Types';
+export declare function TippyCustomized(props: TippyCustomizedProps): JSX.Element;

package/dist/Common/TippyCustomized.js

@@ -0,0 +1,10 @@
+import "../jsx-runtime-0dcb030c.js";
+import "react";
+import "../tippy-react.esm-8dc66a75.js";
+import "../ic-cross-0e71861d.js";
+import { T } from "../TippyCustomized-7b9b46b9.js";
+import "./Types.js";
+import "../Helper-a0caa238.js";
+export {
+  T as TippyCustomized
+};

package/dist/Common/ToastBody.d.ts

@@ -1,23 +1,23 @@
-import React from 'react';
-export declare class ToastBody extends React.Component<{
-    title: string;
-    subtitle?: string;
-}> {
-    render(): JSX.Element;
-}
-export declare class ToastBody3 extends React.Component<{
-    text: string;
-    onClick: (...args: any[]) => void;
-    buttonText: string;
-}> {
-    render(): JSX.Element;
-}
-export declare class ToastBodyWithButton extends React.Component<{
-    title: string;
-    subtitle?: string;
-    onClick: (...args: any[]) => void;
-    buttonText: string;
-}> {
-    render(): JSX.Element;
-}
-export declare const toastAccessDenied: (title?: string, subtitle?: string) => React.ReactText;
+import React from 'react';
+export declare class ToastBody extends React.Component<{
+    title: string;
+    subtitle?: string;
+}> {
+    render(): JSX.Element;
+}
+export declare class ToastBody3 extends React.Component<{
+    text: string;
+    onClick: (...args: any[]) => void;
+    buttonText: string;
+}> {
+    render(): JSX.Element;
+}
+export declare class ToastBodyWithButton extends React.Component<{
+    title: string;
+    subtitle?: string;
+    onClick: (...args: any[]) => void;
+    buttonText: string;
+}> {
+    render(): JSX.Element;
+}
+export declare const toastAccessDenied: (title?: string, subtitle?: string) => React.ReactText;

package/dist/Common/ToastBody.js

@@ -0,0 +1,41 @@
+import { j as t } from "../jsx-runtime-0dcb030c.js";
+import e from "react";
+import { t as r } from "../react-toastify.esm-1042de65.js";
+import { TOAST_ACCESS_DENIED as o } from "./Constants.js";
+class a extends e.Component {
+  render() {
+    return /* @__PURE__ */ t.jsxs("div", { className: "toast", children: [
+      /* @__PURE__ */ t.jsx("div", { className: "toast__title", children: this.props.title }),
+      this.props.subtitle && /* @__PURE__ */ t.jsx("div", { className: "toast__subtitle", children: this.props.subtitle })
+    ] });
+  }
+}
+class c extends e.Component {
+  render() {
+    return /* @__PURE__ */ t.jsxs("div", { className: "flex left column dc__app-update-toast", children: [
+      /* @__PURE__ */ t.jsx("span", { className: "info", children: this.props.text }),
+      /* @__PURE__ */ t.jsx("button", { type: "button", onClick: this.props.onClick, children: this.props.buttonText })
+    ] });
+  }
+}
+class u extends e.Component {
+  render() {
+    return /* @__PURE__ */ t.jsxs("div", { className: "toast dc__app-update-toast", children: [
+      /* @__PURE__ */ t.jsx("div", { className: "toast__title", children: this.props.title }),
+      this.props.subtitle && /* @__PURE__ */ t.jsx("div", { className: "toast__subtitle", children: this.props.subtitle }),
+      /* @__PURE__ */ t.jsx("button", { type: "button", onClick: this.props.onClick, style: { float: "right" }, children: this.props.buttonText })
+    ] });
+  }
+}
+const h = (s, i) => r.info(
+  /* @__PURE__ */ t.jsx(a, { title: s || o.TITLE, subtitle: i || o.SUBTITLE }),
+  {
+    className: "devtron-toast unauthorized"
+  }
+);
+export {
+  a as ToastBody,
+  c as ToastBody3,
+  u as ToastBodyWithButton,
+  h as toastAccessDenied
+};

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

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