@devtron-labs/devtron-fe-common-lib 0.0.6-beta-8 → 0.0.6-beta-10

package/src/Assets/Img/ic-not-authorized.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="200" viewBox="0 0 250 200">
+    <defs>
+        <linearGradient id="ho9etwod5c" x1="55.01%" x2="40.976%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#2A318C"/>
+            <stop offset="100%" stop-color="#1D225F"/>
+        </linearGradient>
+        <linearGradient id="mdhg2gjypd" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#EEE"/>
+            <stop offset="100%" stop-color="#D6D7D8"/>
+        </linearGradient>
+        <linearGradient id="xe2mx0bk0e" x1="0%" x2="100%" y1="18%" y2="82%">
+            <stop offset="0%" stop-color="#E8B73F"/>
+            <stop offset="100%" stop-color="#CF9F36"/>
+        </linearGradient>
+        <path id="88gkjk6cca" d="M0 0H250V200H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-590 -308) translate(590 308)">
+                <mask id="pitr2853ub" fill="#fff">
+                    <use xlink:href="#88gkjk6cca"/>
+                </mask>
+                <g mask="url(#pitr2853ub)">
+                    <g>
+                        <path fill="#FFF" fill-rule="nonzero" d="M47.646 0c2.598 0 5.717 1.017 7.994 2.74 2.276 1.722 3.845 3.02 4.55 5.097.465 1.372.252 3.282-.641 5.728l.008-.072c-.013.145-.039.269-.071.387.574-1.048 1.638-1.624 2.576-1.283 1.07.39 1.5 1.803 1.013 3.14-.487 1.337-1.723 2.144-2.794 1.754-.536-.195-.91-.646-1.09-1.216.023.975.09 2.117.203 3.427l-2.317.161c-2.223 2.412-4.574 3.48-7.055 3.207-.6-.067-1.158-.18-1.675-.339-.588 1.007-1.177 2.688-1.766 5.043l-.064.031.005-.043c-.585 5.627-1.014 11.07-1.287 16.327l.001-.108c-.013.958-.003 1.853.028 2.684l.109-1.533c2.141 1.735 4.344 2.776 6.608 3.123 2.263.348 5.76-.128 10.49-1.426 2.808-.962 5.555-2.299 8.243-4.011H63.94l16.84-20.83h2.756c0-1.439 1.165-2.604 2.604-2.604 1.378 0 2.506 1.07 2.597 2.425l.006.178h1.736c0-1.438 1.166-2.603 2.604-2.603 1.378 0 2.506 1.07 2.598 2.425l.006.178h5.284L89.832 35.292c.097-.07.17-.106.212-.106.692 0 .692 5.306-.057 7.152-.289.865-4.73 5.71-9.864 10.844-2.78 2.78-6.605 6.366-11.477 10.759l2.511 11.858c-.568 1.157-2.01 1.928-4.324 2.314-5.208.579-10.415-1.736-16.78-1.736-1.852 0-3.142.343-4.269.744.841 8.545 2.264 16.398 4.269 23.558-1.157 1.157-1.946 1.682-2.808 2.052-1.015.394-2.305.789-3.009.86.776 2.429 1.318 4.584 1.627 6.464.38 2.322 2.518 22.156 6.411 59.5h-.044l2.037 1.697c2.308 1.962 12.796 7.547 14.132 8.307.891.506 2.067 1.794 3.526 3.864-16.575-.025-27.78-.05-33.613-.075l.053.075C12.788 183.385 0 183.346 0 183.308c0-.116 1.154-3.288 2.538-7.095l2.44-6.658H1.761c-.4-1.385-.792-3.254-1.175-5.606-.75-4.788-.18-7.96 3.05-14.536 3.23-6.518 4.866-10.072 4.866-13.764.058-5.768 1.222-11.316 4.28-17.315 2.364-4.73 3.495-5.086 3.725-7.97l.367-5.421c-2.382-.231-5.928-.988-8.045-1.693l-4.21-1.385-.116-4.326C4.214 85.6 5.08 76.89 7.79 65.757 11.482 50.47 22.096 34.84 34.959 25.668c3.055-2.203 4.272-3.049 5.093-2.807.79-.548 1.483-1.096 2.077-1.645-1.685-.52-3.275-1.222-4.77-2.105-2.311-1.366-4.444-3.194-6.398-5.483.397-.834.904-1.524 1.522-2.07.671-.592 1.935-1.108 3.169-1.822l-.065.021-1.204.401c-1.26.424-1.956.713-2.396 1.032-.829.601-1.259 1.275-1.312 2.032l-.005.191-.579.007c-.012-1.039.516-1.943 1.557-2.699.427-.31 1.013-.573 1.983-.916l1.755-.59.612-.213c.593-.213 1.063-.401 1.438-.584 1.296-1.399 2.17-3.971 4.089-5.678C43.642.855 45.048 0 47.646 0zM27.999 144.476l-.189.512c-2.603 7.055-5.679 15.219-9.228 24.493l2.126 1.771c2.307 1.962 12.795 7.547 14.132 8.307l.035.021c.364-1.006.782-2.154 1.223-3.367l2.44-6.658h-4.242c-1.444-2.617-2.166-4.456-2.166-5.517 0-1.59.913-3.77.913-6.068 0-1.393-1.68-5.89-5.044-13.494zM78.827 42.819l-1.242-.001c-2.375 2.17-3.972 3.706-4.791 4.61-.72.793-2.112 2.23-4.176 4.309 3.033-1.194 5.06-2.078 6.083-2.65 1.5-.865 2.077-1.673 3.807-5.307.082-.163.192-.506.319-.961zm7.313-22.857c-1.119 0-2.026.907-2.026 2.025h4.05c0-1.118-.906-2.025-2.024-2.025zm6.943 0c-1.119 0-2.025.907-2.025 2.025h4.05c0-1.118-.907-2.025-2.025-2.025zm-33.27-5.413c-.388 1.066-.065 2.132.666 2.398.73.266 1.664-.343 2.052-1.408.388-1.065.064-2.132-.667-2.398-.73-.266-1.664.343-2.052 1.408z" transform="translate(29 8)"/>
+                        <path fill="#80AEF2" fill-rule="nonzero" d="M36.56 183.308c0-.116 1.153-3.288 2.538-7.095l2.538-6.922 6.46-.173 6.403-.173 2.768 2.307c2.308 1.962 12.796 7.547 14.132 8.307.891.506 2.067 1.794 3.526 3.864-25.577-.038-38.365-.077-38.365-.115z" transform="translate(29 8)"/>
+                        <path fill="#94BBF8" fill-rule="nonzero" d="M3 183.308c0-.116 1.154-3.288 2.538-7.095l2.538-6.922 6.46-.173 6.403-.173 2.769 2.307c2.307 1.962 12.795 7.547 14.132 8.307.89.506 2.066 1.794 3.525 3.864C15.788 183.385 3 183.346 3 183.308z" transform="translate(29 8)"/>
+                        <path fill="#1D225F" fill-rule="nonzero" d="M46.655 101.836c1.09 3.158 1.826 5.898 2.208 8.22.38 2.321 2.518 22.155 6.411 59.5H37.296c-1.444-2.618-2.166-4.457-2.166-5.518 0-1.59.913-3.77.913-6.068 0-1.532-2.034-6.823-6.104-15.871l3.931-39.349 12.785-.914z" transform="translate(29 8)"/>
+                        <path fill="url(#ho9etwod5c)" d="M21.554 169.555H4.76c-.4-1.385-.792-3.254-1.175-5.606-.75-4.788-.18-7.96 3.05-14.536 3.23-6.518 4.866-10.072 4.866-13.764.058-5.768 1.222-11.316 4.28-17.315 2.364-4.73 3.495-5.086 3.725-7.97l.42-6.202h21.078c.512 1.433.696 4.075.55 7.925-.145 3.85-6.812 23.006-20.001 57.468z" transform="translate(29 8)"/>
+                        <g fill-rule="nonzero">
+                            <path fill="#98BDF9" d="M0 24.302L16.84 3.472 37.031 3.472 19.592 24.302z" transform="translate(29 8) translate(66.94 18.516)"/>
+                            <path fill="#2174DB" d="M22.2.868c1.378 0 2.506 1.07 2.597 2.425l.006.179h-.578c0-1.119-.907-2.025-2.025-2.025-1.119 0-2.025.906-2.025 2.025 0 1.062.818 1.934 1.859 2.018l.166.007v.578c-1.438 0-2.604-1.165-2.604-2.603 0-1.438 1.166-2.604 2.604-2.604zM29.143.868c1.378 0 2.506 1.07 2.598 2.425l.006.179h-.579c0-1.119-.906-2.025-2.025-2.025-1.118 0-2.025.906-2.025 2.025 0 1.062.818 1.934 1.859 2.018l.166.007v.578c-1.438 0-2.604-1.165-2.604-2.603 0-1.438 1.166-2.604 2.604-2.604z" transform="translate(29 8) translate(66.94 18.516)"/>
+                        </g>
+                        <path fill="#F3A29D" fill-rule="nonzero" d="M65.472 46.829c2.807-.962 5.554-2.299 8.242-4.011h6.871c-2.375 2.17-3.972 3.706-4.791 4.61-.82.903-2.509 2.638-5.068 5.205-1.091 5.781-2.254 8.21-3.487 7.285-1.85-1.386-7.939-10.897-1.767-13.09z" transform="translate(29 8)"/>
+                        <path fill="#FAB6AF" fill-rule="nonzero" d="M69.254 52.654c4.363-1.668 7.179-2.857 8.447-3.567 1.5-.865 2.077-1.673 3.807-5.307.23-.461.692-2.365 1.096-4.153.923-4.557 2.423-4.326 2.538.346.058 1.27.346 2.423.692 2.538.288.116 1.961-1.5 3.634-3.576 1.673-2.077 3.288-3.75 3.576-3.75.692 0 .692 5.307-.057 7.153-.289.865-4.73 5.71-9.864 10.844-3.422 3.423-8.431 8.068-15.026 13.937l1.157-14.465z" transform="translate(29 8)"/>
+                        <path fill="#F3A29D" fill-rule="nonzero" d="M49.581 27.774c.772-3.086 1.543-5.015 2.315-5.787-1.157-1.157-2.315-2.314-4.63-3.471-.77 1.543-2.314 3.086-4.628 4.629 0 2.314.771 3.857 2.314 4.629 1.543.771 3.086.771 4.63 0z" transform="translate(29 8)"/>
+                        <g>
+                            <path fill="url(#mdhg2gjypd)" fill-rule="nonzero" d="M12.858 82.16c-2.365-.174-6.23-.981-8.48-1.731l-4.21-1.385-.115-4.326c-.289-11.94.577-20.65 3.288-31.782C7.032 27.65 17.646 12.019 30.509 2.847c4.96-3.576 5.076-3.576 6.518-1.153.634 1.153 1.96 2.307 2.884 2.653l2.161.594c-3.046 29.324-1.87 53.63 3.531 72.917-1.157 1.158-1.946 1.682-2.808 2.052-1.039.403-2.365.807-3.057.865-.693.058-3 .519-5.25 1.038-4.21.923-13.382 1.096-21.63.346z" transform="translate(29 8) translate(7.45 22.82)"/>
+                            <path fill="#D6D7D8" d="M58.022 24.008l1.767 11.311-19.972 2.645 1.106-15.653c2.141 1.735 4.344 2.776 6.608 3.123 2.263.348 5.76-.128 10.49-1.426z" transform="translate(29 8) translate(7.45 22.82)"/>
+                            <path fill="#E9E9E9" fill-rule="nonzero" d="M61.804 29.833l4.903 23.145c-.568 1.157-2.01 1.929-4.324 2.314-5.208.579-10.415-1.736-16.78-1.736-6.365 0-6.09 4.05-15.348.58-6.172-2.315-8.68-12.73-7.523-31.246l18.054-1.73c-.078 5.782.655 9.252 2.198 10.409 1.512 1.134 7.569.601 18.17-1.6l.65-.136z" transform="translate(29 8) translate(7.45 22.82)"/>
+                        </g>
+                        <g>
+                            <path fill="#FAB6AF" fill-rule="nonzero" d="M29.082 7.444c1.07 1.52 1.488 3.536 1.253 6.049-.062.656-.376.883-.376 2.052 0 1.12.07 2.506.212 4.157l-2.317.161c-2.222 2.412-4.574 3.48-7.055 3.207-2.48-.275-4.251-1.343-5.31-3.207-2.18-4.023-1.621-7.444 1.675-10.262 3.296-2.818 7.269-3.537 11.918-2.157z" transform="translate(29 8) translate(32.223)"/>
+                            <path fill="#E94A47" d="M18.423 0c2.598 0 5.717 1.017 7.994 2.74 2.277 1.722 3.845 3.02 4.55 5.097.47 1.384.248 3.314-.664 5.791.13-2.345-.048-3.647-.533-3.906-.67 1.653-1.595 1.987-2.703 2.787-.62.448-2.791.518-4.917.897-2.628 1.722-4.303 3.33-4.867 4.86-.448 1.218-.402 2.608.148 4.177l.126.339-.54.21c-.714-1.833-.81-3.478-.277-4.925.522-1.417 1.85-2.838 3.894-4.321-1.09.307-2.051.754-2.634 1.449-1.279 1.526-2.028 3.765-2.246 6.716-2.766-.5-5.305-1.433-7.617-2.8-2.312-1.366-4.445-3.194-6.398-5.483.396-.834.904-1.524 1.521-2.07.671-.592 1.935-1.108 3.169-1.822l-.065.021-1.204.401c-1.26.424-1.956.713-2.395 1.032-.83.601-1.26 1.275-1.313 2.032l-.005.191-.579.007c-.012-1.039.516-1.943 1.557-2.699.427-.31 1.013-.573 1.983-.916l1.756-.59.61-.213c.594-.213 1.064-.401 1.439-.584 1.296-1.399 2.17-3.971 4.09-5.678C14.418.855 15.825 0 18.422 0z" transform="translate(29 8) translate(32.223)"/>
+                            <g fill="#222768" fill-rule="nonzero">
+                                <path d="M1.025 3.16C1.622 1.52 3.194.563 4.56 1.06c1.061.386 1.653 1.524 1.586 2.781.36-.092.688-.137.988-.137l.208.008c.254.02.466.056.636.114.511-1.271 1.708-2.023 2.749-1.644 1.07.39 1.5 1.802 1.013 3.14-.487 1.337-1.723 2.143-2.794 1.754-.953-.347-1.397-1.504-1.14-2.697-.103-.038-.274-.072-.508-.09-.334-.025-.737.029-1.209.165l-.03.01c-.036.159-.083.318-.14.477-.597 1.64-2.17 2.597-3.536 2.1C1.017 6.543.428 4.8 1.025 3.16zm9.504-.434c-.73-.266-1.664.343-2.052 1.408-.388 1.065-.064 2.132.667 2.398.73.266 1.664-.343 2.052-1.408.387-1.066.064-2.132-.667-2.398zM4.362 1.604c-1.036-.378-2.297.39-2.793 1.754-.496 1.363-.024 2.762 1.012 3.14 1.036.376 2.298-.392 2.794-1.755s.023-2.762-1.013-3.14z" transform="translate(29 8) translate(32.223) translate(22.112 10.415)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+                <g mask="url(#pitr2853ub)">
+                    <g>
+                        <path fill="#FFF" d="M30 0c12.15 0 22 9.85 22 22v11h8v48H0V33h8V22C8 9.973 17.654.198 29.637.004zm0 7.934c-7.755 0-14.067 6.309-14.067 14.067V33h28.133V22c0-7.652-6.14-13.896-13.752-14.063z" transform="translate(134 61)"/>
+                        <path fill="#D6D7D8" d="M55 34.3V22C55 9.85 45.15 0 33 0S11 9.85 11 22v12.3m7.933 0V22c0-7.757 6.312-14.066 14.068-14.066 7.756 0 14.065 6.31 14.065 14.067v12.298" transform="translate(134 61)"/>
+                        <path fill="url(#xe2mx0bk0e)" d="M3 33H63V81H3z" transform="translate(134 61)"/>
+                        <path fill="#3E3D4C" fill-rule="nonzero" d="M39 56c0-3.314-2.686-6-6-6s-6 2.686-6 6c0 2.282 1.275 4.267 3.15 5.281l-.965 7.386h7.63l-.965-7.386C37.726 60.267 39 58.282 39 56z" transform="translate(134 61)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo, useEffect } from 'react'
+import { useRouteMatch, useParams } from 'react-router'
+import { Link } from 'react-router-dom';
+import { useBreadcrumbContext } from './BreadcrumbStore'
+import { ConditionalWrap } from '../Helper';
+export const BreadcrumbContext = React.createContext(null)
+
+
+interface Breadcrumb {
+    to: string;
+    name: string;
+    className?: string;
+}
+
+interface UseBreadcrumbState {
+    breadcrumbs: Breadcrumb[];
+    setCrumb: (props: { [key: string]: any; }) => void;
+    resetCrumb: (props: string[]) => void;
+}
+
+interface AdvancedAlias {
+    component: any;
+    linked: boolean;
+}
+
+interface UseBreadcrumbProps {
+    sep?: string;
+    alias?: { [key: string]: AdvancedAlias | any; }
+}
+
+type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
+
+export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
+    let sep = props?.sep || "/"
+    deps = deps || []
+    const { url, path } = useRouteMatch()
+    const params = useParams()
+    const { state, setState } = useBreadcrumbContext()
+
+    useEffect(() => {
+        if (!props || !props.alias) return
+        setState(state => ({ ...state, alias: { ...state.alias, ...props.alias } }))
+        return () => resetCrumb(Object.keys(props.alias))
+    }, deps)
+
+    function setCrumb(props) {
+        setState(state => ({ ...state, alias: { ...state.alias, ...props } }))
+    }
+
+    function resetCrumb(props: string[]) {
+        const tempAlias = props.reduce((agg, curr, idx) => {
+            delete agg[curr]
+            return agg
+        }, state.alias)
+        setState(state => ({ ...state, alias: tempAlias }))
+    }
+
+    let levels: Breadcrumb[] = useMemo(() => {
+        const paths = path.split("/").filter(Boolean)
+        const urls = url.split("/").filter(Boolean)
+        return paths.map((path, idx) => {
+            const crumb: Breadcrumb = { to: urls[idx], name: path }
+            if (path.startsWith(":") && params[path.replace(":", "")]) {
+                crumb.className = "param"
+            }
+            return crumb
+        })
+    }, [path, url])
+    const { res: breadcrumbs } = useMemo(() => {
+        return levels.reduce((agg, curr, idx) => {
+            const { res, prefix } = agg
+            const { to, name } = curr
+            res.push({
+                to:
+                    !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
+                        ? `${prefix}${to}`
+                        : null,
+                name: typeof state.alias[name] === 'object'
+                    ? !!state.alias[name]?.component ? state.alias[name].component : null
+                    : state.alias[name] || name,
+                className: curr.className || '',
+            });
+            return { res, prefix: `${prefix}${curr.to}${sep}` }
+        }, { res: [], prefix: "/" })
+    }, [levels, state])
+
+    return { breadcrumbs, setCrumb, resetCrumb }
+}
+
+interface Breadcrumbs {
+    breadcrumbs: Breadcrumb[]
+    sep?: string;
+    className?: string;
+};
+
+export const BreadCrumb: React.FC<Breadcrumbs> = ({ breadcrumbs, sep = "/", className = "dc__devtron-breadcrumb__item" }) => {
+    const { url } = useRouteMatch()
+    const filteredCrumbs = breadcrumbs.filter(crumb => !!crumb.name)
+    return <React.Fragment>
+        {filteredCrumbs.map((breadcrumb, idx) =>
+            <React.Fragment key={idx}>
+                <ConditionalWrap
+                    condition={!!breadcrumb.to}
+                    wrap={children => <Link className={`${url === breadcrumb.to ? 'active' : ''} ${className} ${breadcrumb.className || ""}`} to={breadcrumb.to}>
+                        {children}
+                    </Link>}
+                >
+                    {breadcrumb.name}
+                </ConditionalWrap>
+
+                {idx + 1 !== filteredCrumbs.length && breadcrumb.name && <span className={`${className}__separator cn-5`}>{sep}</span>}
+            </React.Fragment>
+        )}
+    </React.Fragment>
+}

package/src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useState } from 'react'
+
+const initialState = {
+    alias: {},
+}
+
+const Store = ({ children }) => {
+    const [state, setState] = useState(initialState)
+    return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>
+}
+
+export const BreadcrumbContext = createContext({
+    state: { alias: {} },
+    setState: null,
+})
+
+export function useBreadcrumbContext() {
+    const context = React.useContext(BreadcrumbContext)
+    if (!context) {
+        throw new Error(`breadcrumb components cannot be used outside Breadcrumb context`)
+    }
+    return context
+}
+
+export default Store

package/src/Common/Constants.ts

@@ -1,2 +1,2 @@
 export const RequestTimeout = 60000
-export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
+export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT

package/src/Common/Drawer/Drawer.scss

@@ -0,0 +1,39 @@
+.drawer{
+    position: absolute;
+    overflow: hidden;
+    &.left, &.right{
+        top: 0;
+        bottom: 0;
+        width: 0;
+        transition: width 200ms;
+        &.show{
+            min-width: var(--minWidth);
+            width: var(--width);
+            max-width: var(--maxWidth);
+        }
+    }
+
+    &.top, &.bottom{
+        left: 0;
+        right: 0;
+        height: 0;
+        transition: height 200ms;
+        &.show{
+            height: var(--height);
+        }
+    }
+    &.right{
+        right: 0;
+    }
+    &.left{
+        left: 0;
+
+    }
+    &.top{
+        top: 0;
+    }
+
+    &.bottom{
+        bottom: 0;
+    }
+}

package/src/Common/Drawer/Drawer.tsx

@@ -0,0 +1,49 @@
+import React, { useRef, useEffect } from 'react'
+import { VisibleModal } from '../Modals/VisibleModal'
+import './Drawer.scss'
+
+interface drawerInterface {
+    position: 'left' | 'right' | 'bottom' | 'top'
+    children?: any
+    backdrop?: boolean
+    onClose?: (e: any) => void
+    width?: string
+    minWidth?: string
+    maxWidth?: string
+    height?: string
+    parentClassName?: string
+    onEscape?: (e?: any) => void
+}
+
+export const Drawer = ({
+    children,
+    position,
+    height,
+    width,
+    minWidth,
+    maxWidth,
+    parentClassName,
+    onEscape,
+}: drawerInterface) => {
+    const drawerRef = useRef(null)
+    useEffect(() => {
+        setTimeout(() => drawerRef.current?.classList?.add('show'), 1)
+        return () => drawerRef.current?.classList?.remove('show')
+    }, [])
+    const style = {}
+    if (position === 'left' || position === 'right') {
+        style['--width'] = width
+        style['--minWidth'] = minWidth
+        style['--maxWidth'] = maxWidth
+    }
+    if (position === 'top' || position === 'bottom') {
+        style['--height'] = height
+    }
+    return (
+        <VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape}>
+            <aside style={style} ref={drawerRef} className={`drawer ${position}`}>
+                {children}
+            </aside>
+        </VisibleModal>
+    )
+}

package/src/Common/EmptyState/EmptyState.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import './emptyState.scss';
+import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
+
+function EmptyState({ children }) {
+    return (
+        <div className="flex column empty-state" style={{ width: '100%', height: '100%' }}>
+            {children}
+        </div>
+    )
+}
+
+function Image({ children }) {
+    return children
+}
+
+function Title({ children }) {
+    return children
+}
+
+function Subtitle({ children, className }:{children: any, className?: string}) {
+    return <p className={`subtitle ${className}`}>{children}</p>
+}
+
+function Button({ children }) {
+    return children
+}
+
+const Loading: React.FC<{ text: string }> = function (props) {
+    return <>
+        <Progressing className="dc__block empty-state__loader" />
+        <p className="empty-state__loading-text">{props.text}</p>
+    </>
+}
+
+EmptyState.Image = Image
+EmptyState.Title = Title
+EmptyState.Subtitle = Subtitle
+EmptyState.Button = Button
+EmptyState.Loading = Loading
+
+export default EmptyState

package/src/Common/EmptyState/emptyState.scss

@@ -0,0 +1,83 @@
+.empty-state {
+    height: 100%;
+    img {
+        height: 40%;
+        max-height: 200px;
+        width: auto;
+        max-width: 250px;
+    }
+    svg {
+        height: 40%;
+        max-height: 200px;
+        width: auto;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--N900);
+    }
+    .title {
+        font-weight: 600;
+    }
+    .subtitle {
+        font-size: 13px;
+        width: 250px;
+        font-weight: 400;
+        text-align: center;
+        line-height: 1.5;
+        margin-bottom: 20px;
+    }
+    .cta {
+        height: 36px;
+    }
+    p {
+        width: 250px;
+        text-align: center;
+        font-size: 13px;
+        color: var(--N700);
+    }
+    strong {
+        font-size: 16px;
+        margin-bottom: 4px;
+        color: var(--N900);
+        font-weight: normal;
+    }
+    .select-popup {
+        height: min-content;
+        max-height: 250px;
+        overflow: auto;
+        padding: 8px 0;
+    }
+    .empty-state__loader {
+        width: 34px;
+        height: 34px;
+        margin-bottom: 16px;
+    }
+    .empty-state__loading-text {
+        font-size: 12px;
+        width: 200px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.5;
+        letter-spacing: normal;
+        text-align: center;
+        color: var(--N900);
+    }
+    .button__icon {
+        width:16px;
+        height:16px;
+        margin-left: 8px;
+    }
+    //TODO: use name
+    // .subtitle a {
+    //     color: inherit;
+    // }
+    // .subtitle a:focus,
+    // .subtitle a:hover {
+    //     color: inherit;
+    // }
+}

package/src/Common/Error.tsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import EmptyState from './EmptyState/EmptyState'
+import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
+import Reload from './Reload'
+
+export class ErrorScreenManager extends Component<{ code?: number; reload?: (...args) => any; subtitle?: string ;reloadClass?: string}> {
+    getMessage() {
+        switch (this.props.code) {
+            case 400:
+                return 'Bad Request'
+            case 401:
+                return 'Unauthorized'
+            case 403:
+                return <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
+            case 404:
+                return 'Not Found'
+            case 500:
+                return 'Internal Server Error'
+            case 502:
+                return 'Bad Gateway'
+            case 503:
+                return 'Service Temporarily Unavailable'
+            default:
+                return <Reload className={this.props.reloadClass} />
+        }
+    }
+    render() {
+        let msg = this.getMessage()
+        return (
+            <div>
+                <h1>{msg}</h1>
+            </div>
+        )
+    }
+}
+
+export class ErrorScreenNotAuthorized extends Component<{ subtitle: string }> {
+    render() {
+        return (
+            <EmptyState>
+                <EmptyState.Image>
+                    <img src={notAuthorized} alt="Not Authorized" />
+                </EmptyState.Image>
+                <EmptyState.Title>
+                    <h3 className="title">Not authorized</h3>
+                </EmptyState.Title>
+                <EmptyState.Subtitle>
+                    {this.props.subtitle
+                        ? this.props.subtitle
+                        : "Looks like you don't have access to information on this page. Please contact your manager to request access."}
+                </EmptyState.Subtitle>
+            </EmptyState>
+        )
+    }
+}

package/src/Common/Helper.tsx

@@ -0,0 +1,39 @@
+import { ServerErrors } from "./ServerError"
+import { toast } from 'react-toastify'
+import * as Sentry from '@sentry/browser'
+import { toastAccessDenied } from "./ToastBody"
+
+
+export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
+  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+      serverError.errors.map(({ userMessage, internalMessage }) => {
+          if (serverError.code === 403 && userMessage === 'unauthorized') {
+              if (!hideAccessError) {
+                  toastAccessDenied()
+              }
+          } else {
+              toast.error(userMessage || internalMessage)
+          }
+      })
+  } else {
+      if (serverError.code !== 403 && serverError.code !== 408) {
+          Sentry.captureException(serverError)
+      }
+
+      if (showToastOnUnknownError) {
+          if (serverError.message) {
+              toast.error(serverError.message)
+          } else {
+              toast.error('Some Error Occurred')
+          }
+      }
+  }
+}
+
+interface ConditionalWrapper<T> {
+  condition: boolean
+  wrap: (children: T) => T
+  children: T
+}
+export const ConditionalWrap: React.FC<ConditionalWrapper<any>> = ({ condition, wrap, children }) =>
+  condition ? wrap(children) : <>{children}</>

package/src/Common/Modals/Modal.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom'
+export const Modal = ({ style = {}, children, modal = false, rootClassName = "", onClick = null, callbackRef = null }) => {
+    const innerRef = React.useRef(null)
+    function handleClick(e) {
+        if (typeof onClick !== 'function') return
+        if (innerRef && innerRef.current.contains(e.target)) {
+            onClick(e, 'in')
+        }
+        else {
+            onClick(e, 'out')
+        }
+    }
+
+    function disableWheel(e) {
+        if (innerRef && innerRef.current.contains(e.target)) {
+            if (innerRef.current.clientHeight === innerRef.current.scrollHeight) {
+                e.preventDefault();
+            }
+        }
+        else {
+            e.preventDefault();
+        }
+    }
+    useEffect(() => {
+        document.addEventListener('click', handleClick)
+        let modal = document.getElementById("visible-modal");
+        if (modal) modal.classList.add("show")
+        document.body.addEventListener('wheel', disableWheel, { passive: false })
+        return () => {
+            document.body.removeEventListener('wheel', disableWheel)
+            document.removeEventListener('click', handleClick)
+            if (modal) modal.classList.remove("show")
+
+        }
+    }, []
+    )
+    return ReactDOM.createPortal(
+        <div tabIndex={0} onClick={onClick}
+            ref={
+                el => {
+                    if (typeof callbackRef === 'function') {
+                        callbackRef(el);
+                    }
+                    innerRef.current = el;
+                }
+            }
+            id="popup"
+            className={`${rootClassName} popup ${modal ? 'modal' : ''}`}
+            style={{ ...style }}>
+            {children}
+        </div>, document.getElementById('visible-modal'));
+}

package/src/Common/Modals/OpaqueModal.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOM from 'react-dom';
+import closeIcon from '../../Assets/Icon/ic-close.svg'
+
+export interface OpaqueModalProps {
+    className?: string;
+    onHide?: any;
+    noBackground?: boolean;
+}
+
+export class OpaqueModal extends React.Component<OpaqueModalProps> {
+    modalRef = document.getElementById('full-screen-modal');
+
+    componentDidMount() {
+        if (this.props.noBackground)
+            this.modalRef.classList.add("show");
+        else this.modalRef.classList.add("show-with-bg");
+    }
+
+    componentWillUnmount() {
+        this.modalRef.classList.remove("show");
+        this.modalRef.classList.remove("show-with-bg");
+    }
+
+    render() {
+        const { className = "", onHide = null } = { ...this.props };
+
+        return ReactDOM.createPortal(
+            <div className={`full-screen-modal__body-container ${className}`}>
+                {this.props.children}
+                {typeof onHide === 'function' && <div className="close-btn icon-dim-24" onClick={e => onHide(false)}>
+                    <img className="close-img" src={closeIcon} alt="close" />
+                </div>}
+            </div>, document.getElementById('full-screen-modal'))
+    }
+}

package/src/Common/Modals/VisibleModal.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+export class VisibleModal extends React.Component<{
+    className: string
+    parentClassName?: string
+    noBackground?: boolean
+    close?: (e) => void
+    onEscape?: (e) => void
+}> {
+    modalRef = document.getElementById('visible-modal')
+
+    constructor(props) {
+        super(props)
+        this.escFunction = this.escFunction.bind(this)
+    }
+
+    escFunction(event) {
+        if (event.keyCode === 27 || event.key === 'Escape') {
+            if (this.props.onEscape) {
+                this.props.onEscape(event)
+            } else if (this.props.close) {
+                this.props.close(event)
+            }
+        }
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.escFunction)
+        this.modalRef.classList.add(this.props.noBackground ? 'show' : 'show-with-bg')
+
+        if (this.props.parentClassName) {
+            this.modalRef.classList.add(this.props.parentClassName)
+        }
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.escFunction)
+        this.modalRef.classList.remove('show')
+        this.modalRef.classList.remove('show-with-bg')
+
+        if (this.props.parentClassName) {
+            this.modalRef.classList.remove(this.props.parentClassName)
+        }
+    }
+
+    render() {
+        return ReactDOM.createPortal(
+            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close}>
+                {this.props.children}
+            </div>,
+            document.getElementById('visible-modal'),
+        )
+    }
+}