@devtron-labs/devtron-fe-common-lib 0.0.50-beta-2 → 0.0.51

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, className = '' }) {
+    return (
+        <div className={`flex column empty-state w-100 h-100 ${className}`}>
+            {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/GenericEmptyState.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
+import { GenericEmptyStateType, ImageType } from '../Types'
+
+import './emptyState.scss'
+
+function GenericEmptyState({
+    title,
+    image,
+    subTitle,
+    isButtonAvailable,
+    classname,
+    styles,
+    heightToDeduct,
+    imageType,
+    renderButton,
+    imageClassName,
+    children,
+    SvgImage,
+    noImage,
+    layout = 'column',
+    contentClassName = ''
+}: GenericEmptyStateType): JSX.Element {
+    const isRowLayout = layout === 'row';
+    
+    return (
+        <div
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
+            style={styles}
+            data-testid="generic-empty-state"
+            {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
+        >   
+            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
+                src={image || AppNotDeployed}
+                width={imageType === ImageType.Medium ? '200' : '250'}
+                height={imageType === ImageType.Medium ? '160' : '200'}
+                alt="empty-state"
+            /> : <SvgImage />}
+            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+                <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
+                {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
+                {isButtonAvailable && renderButton()}
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default GenericEmptyState

package/src/Common/EmptyState/emptyState.scss

@@ -0,0 +1,74 @@
+.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);
+    }
+    .subtitle {
+        font-size: 13px;
+        font-weight: 400;
+        text-align: center;
+        line-height: 1.5;
+        margin-bottom: 6px;
+
+        &--text-start {
+            text-align: start;
+        }
+    }
+    .cta {
+        height: 36px;
+    }
+    p {
+        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;
+    }
+}

package/src/Common/Error.tsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import EmptyState from './EmptyState/EmptyState'
+import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
+import ErrorScreenNotFound from './ErrorScreenNotFound'
+import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+import Reload from './Reload'
+
+export class ErrorScreenManager extends Component<{
+    code?: number
+    reload?: (...args) => any
+    subtitle?: React.ReactChild
+    subtitleClass?: 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 <ErrorScreenNotFound />
+            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?: React.ReactChild
+    title?: string
+}> {
+    render() {
+        return (
+            <GenericEmptyState
+                image={notAuthorized}
+                title={this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}
+                subTitle={this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
+            />
+        )
+    }
+}

package/src/Common/ErrorScreenNotFound.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import notFound from '../Assets/Img/ic-empty-error@2x.png'
+import { useHistory } from 'react-router-dom'
+import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+
+function ErrorScreenNotFound() {
+    const {push} = useHistory()
+    const redirectToHome = () => {
+        push('/app/list')
+    }
+    const renderGenerateButton = () => {
+        return (
+            <button className="flex cta h-32" onClick={redirectToHome} data-testid="empty-screen-take-me-home">
+                {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
+            </button>
+        )
+    }
+
+    return (
+        <GenericEmptyState
+            image={notFound}
+            title={ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}
+            subTitle={ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}
+            isButtonAvailable={true}
+            renderButton={renderGenerateButton}
+        />
+    )
+}
+
+export default ErrorScreenNotFound

package/src/Common/Grid/Grid.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { GridProps } from './types'
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+export default function Grid({
+    container,
+    spacing = 0,
+    item,
+    xs,
+    containerClass = '',
+    itemClass = '',
+    children,
+}: GridProps) {
+    const containerStyles = container ? { gap: spacing + 'px' } : {}
+
+    if (item) {
+        const getColumnWidth = () => {
+            const percentageWidth = (xs / 12) * 100
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return `calc(${percentageWidth}%)`
+        }
+
+        const itemStyles = {
+            flex: `1 1 ${getColumnWidth()}`,
+        }
+
+        return (
+            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+            {children}
+        </div>
+    )
+}

package/src/Common/Grid/types.ts

@@ -0,0 +1,9 @@
+export interface GridProps {
+    container?: boolean
+    spacing?: number
+    item?: boolean
+    xs?: number
+    containerClass?: string
+    itemClass?: string
+    children?: React.ReactNode
+}