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

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

package/src/Common/Types.ts

@@ -1,13 +1,12 @@
-
 export interface ResponseType {
-  code: number;
-  status: string;
-  result?: any;
-  errors?: any;
+    code: number
+    status: string
+    result?: any
+    errors?: any
 }
 
 export interface APIOptions {
-  timeout?: number;
-  signal?: AbortSignal;
-  preventAutoLogout?: boolean;
-}
+    timeout?: number
+    signal?: AbortSignal
+    preventAutoLogout?: boolean
+}

package/src/Common/index.ts

@@ -1,4 +1,17 @@
 export * from './Constants'
 export * from './ServerError'
 export * from './Types'
-export * from './Api'
+export * from './Api'
+export * from './EmptyState/EmptyState'
+export * from './ToastBody'
+export * from './Reload'
+export * from './Error'
+export * from './Helper'
+export * from './Progressing'
+export * from './Drawer/Drawer'
+export * from './Modals/Modal'
+export * from './Modals/OpaqueModal'
+export * from './Modals/VisibleModal'
+export * from './Modals/VisibleModal2'
+export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
+export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'

package/src/custom.d.ts

@@ -0,0 +1,13 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

package/tsconfig.json

@@ -34,6 +34,7 @@
     "build"
   ],
   "include": [
-    "src"
+    "src",
+    "src/custom.d.ts"
   ]
 }