@devtron-labs/devtron-fe-common-lib 0.0.62-beta-8 → 0.0.63-beta-1

package/src/Common/EmptyState/EmptyState.tsx

@@ -1,42 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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 = '',
-    imageStyles = {},
-}: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row'
-
-    const getImageSize = () => {
-        switch (imageType) {
-            case ImageType.Large:
-                return { width: '250px', height: '200px' }
-            default:
-                return { width: '200px', height: '160px' }
-        }
-    }
-
-    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}
-                        style={{
-                            ...imageStyles,
-                            width: `${getImageSize().width}`,
-                            height: `${getImageSize().height}`,
-                        }}
-                        alt="empty-state"
-                    />
-                )
-            ) : (
-                <SvgImage
-                    style={{
-                        ...imageStyles,
-                        width: `${getImageSize().width}`,
-                        height: `${getImageSize().height}`,
-                    }}
-                />
-            )}
-            <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

@@ -1,74 +0,0 @@
-.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

@@ -1,61 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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,
-    ...containerDivProps
-}: 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} {...containerDivProps}>
-                {children}
-            </div>
-        )
-    }
-
-    return (
-        <div
-            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
-            style={containerStyles}
-            {...containerDivProps}
-        >
-            {children}
-        </div>
-    )
-}

package/src/Common/Grid/types.ts

@@ -1,11 +0,0 @@
-import { HTMLAttributes } from 'react'
-
-export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    container?: boolean
-    spacing?: number
-    item?: boolean
-    xs?: number
-    containerClass?: string
-    itemClass?: string
-    children?: React.ReactNode
-}