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

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,51 @@
+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
+}
+
+const Drawer: React.FC<drawerInterface> = ({
+    children,
+    position,
+    height,
+    width,
+    minWidth,
+    maxWidth,
+    parentClassName,
+    onEscape,
+}) => {
+    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>
+    )
+}
+
+export default Drawer

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,31 @@
+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')
+          }
+      }
+  }
+}

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'),
+        )
+    }
+}

package/src/Common/Modals/VisibleModal2.tsx

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

package/src/Common/Progressing.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+interface ProgressingProps {
+    pageLoader?: boolean
+    loadingText?: string
+    size?: number
+    fullHeight?: boolean
+    theme?: 'white' | 'default'
+    styles?: React.CSSProperties
+    children?: React.ReactNode
+}
+
+export function Progressing({ pageLoader, size, theme, styles }: ProgressingProps): JSX.Element {
+    const loaderSize = size ? `${size}px` : pageLoader ? '48px' : '20px'
+    return (
+        <div className={`loader ${theme || 'default'}-background`} style={styles}>
+            <div style={{ width: loaderSize, height: loaderSize }}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="loader__svg">
+                    <g fill="none" fillRule="evenodd" strokeLinecap="round">
+                        <animateTransform
+                            attributeName="transform"
+                            attributeType="XML"
+                            dur="0.5s"
+                            from="0 12 12"
+                            repeatCount="indefinite"
+                            to="360 12 12"
+                            type="rotate"
+                        />
+                        <path
+                            fill="#06C"
+                            fillRule="nonzero"
+                            d="M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z"
+                        />
+                    </g>
+                </svg>
+            </div>
+        </div>
+    )
+}
+
+export function DetailsProgressing({
+    loadingText,
+    size = 24,
+    fullHeight = false,
+    children,
+    styles,
+}: ProgressingProps): JSX.Element {
+    return (
+        <div
+            className={`details-loader bcn-0 flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
+            style={styles}
+        >
+            <span style={{ width: `${size}px`, height: `${size}px` }}>
+                <Progressing size={size} />
+            </span>
+            {loadingText && <span className="mt-10">{loadingText}</span>}
+            {children}
+        </div>
+    )
+}

package/src/Common/Reload.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import loadingFailure from '../Assets/Img/ic-loading-failure.png';
+
+export default function Reload({ reload = null, className = '' }) {
+    function refresh(e){
+        window.location.reload();
+    }
+    return (
+        <article className={`flex ${className}`} style={{ width: '100%', height: '100%' }}>
+            <div className="flex column" style={{ width: '250px', textAlign: 'center' }}>
+                <img src={loadingFailure} style={{ width: '100%', height: 'auto', marginBottom: '12px' }} alt="load-error" />
+                <h3 className="title dc__bold">Failed to load</h3>
+                <div className="dc__empty__subtitle" style={{ marginBottom: '20px' }}>We could not load this page. Please give us another try.</div>
+                <button type="button" className="cta ghosted" onClick={typeof reload === 'function' ? reload : refresh}>Retry</button>
+            </div>
+        </article>
+    )
+}

package/src/Common/ServerError.ts

@@ -1,30 +1,31 @@
 export class ServerError {
-    code: number;
-    internalMessage: string | null;
-    userMessage: string | null;
-    moreInfo?: string | null;
+    code: number
+    internalMessage: string | null
+    userMessage: string | null
+    moreInfo?: string | null
 
     constructor(error) {
-        this.code = error.code || 0;
-        this.userMessage = error.userMessage || '';
-        this.internalMessage = error.internalMessage || '';
-        this.moreInfo = error.moreInfo || '';
+        this.code = error.code || 0
+        this.userMessage = error.userMessage || ''
+        this.internalMessage = error.internalMessage || ''
+        this.moreInfo = error.moreInfo || ''
     }
 }
 
 export class ServerErrors extends Error {
-    code: number;
-    errors: ServerError[];
+    code: number
+    errors: ServerError[]
 
     constructor(obj: { code: number; errors: ServerError[] }) {
-        super();
-        this.code = obj.code;
+        super()
+        this.code = obj.code
         let message = obj.errors.reduce((str: string, err: ServerError) => {
-            str += `${err.internalMessage || err.userMessage}`;
-            return str;
-        }, '');
-        this.name = `[${obj.code.toString()}]`;
-        this.message = message;
-        this.errors = obj.errors.map((err) => new ServerError(err));
+            str += `${err.internalMessage || err.userMessage}`
+            return str
+        }, '')
+        this.name = `[${obj.code.toString()}]`
+        this.message = message
+        this.errors = obj.errors.map((err) => new ServerError(err))
+        Object.setPrototypeOf(this, ServerErrors.prototype)
     }
 }

package/src/Common/ToastBody.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { toast } from 'react-toastify'
+
+export class ToastBody extends React.Component<{
+    title: string
+    subtitle?: string
+}> {
+    render() {
+        return (
+            <div className="toast">
+                <div className="toast__title">{this.props.title}</div>
+                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
+            </div>
+        )
+    }
+}
+
+export class ToastBody3 extends React.Component<{
+    text: string
+    onClick: (...args) => void
+    buttonText: string
+}> {
+    render() {
+        return (
+            <div className="flex left column dc__app-update-toast">
+                <span className="info">{this.props.text}</span>
+                <button type="button" onClick={this.props.onClick}>
+                    {this.props.buttonText}
+                </button>
+            </div>
+        )
+    }
+}
+
+export class ToastBodyWithButton extends React.Component<{
+    title: string
+    subtitle?: string
+    onClick: (...args) => void
+    buttonText: string
+}> {
+    render() {
+        return (
+            <div className="toast dc__app-update-toast">
+                <div className="toast__title">{this.props.title}</div>
+                {this.props.subtitle && <div className="toast__subtitle">{this.props.subtitle}</div>}
+                <button type="button" onClick={this.props.onClick} style={{ float: 'right' }}>
+                    {this.props.buttonText}
+                </button>
+            </div>
+        )
+    }
+}
+
+export const toastAccessDenied = (subtitle?: string) => {
+    return toast.info(
+        <ToastBody
+            title="Access denied"
+            subtitle={subtitle || "You do not have required access to perform this action"}
+        />,
+        {
+            className: 'devtron-toast unauthorized',
+        },
+    )
+}