@devtron-labs/devtron-fe-common-lib 0.0.7-beta-2 → 0.0.7-beta-4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-2",
+    "version": "0.0.7-beta-4",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -2,32 +2,9 @@ import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
 import { useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
+import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 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 || []
@@ -91,12 +68,6 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
     return { breadcrumbs, setCrumb, resetCrumb }
 }
 
-interface Breadcrumbs {
-    breadcrumbs: Breadcrumb[]
-    sep?: string
-    className?: string
-}
-
 export const BreadCrumb: React.FC<Breadcrumbs> = ({
     breadcrumbs,
     sep = '/',

package/src/Common/BreadCrumb/Types.ts

@@ -0,0 +1,30 @@
+
+export interface Breadcrumb {
+  to: string
+  name: string
+  className?: string
+}
+
+export interface UseBreadcrumbState {
+  breadcrumbs: Breadcrumb[]
+  setCrumb: (props: { [key: string]: any }) => void
+  resetCrumb: (props: string[]) => void
+}
+
+export interface AdvancedAlias {
+  component: any
+  linked: boolean
+}
+
+export interface UseBreadcrumbProps {
+  sep?: string
+  alias?: { [key: string]: AdvancedAlias | any }
+}
+
+export interface Breadcrumbs {
+    breadcrumbs: Breadcrumb[]
+    sep?: string
+    className?: string
+}
+
+export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null

package/src/Common/Checkbox.tsx

@@ -1,19 +1,5 @@
 import React, { Component } from 'react'
-
-export enum CHECKBOX_VALUE {
-    CHECKED = 'CHECKED',
-    INTERMEDIATE = 'INTERMEDIATE',
-}
-export interface CheckboxProps {
-    onChange: (event) => void
-    isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
-    disabled?: boolean
-    tabIndex?: number
-    rootClassName?: string
-    onClick?: (event) => void
-    id?: string
-}
+import { CheckboxProps } from './Types'
 
 /*
 Valid States of Checkbox:

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { VisibleModal2 } from '../Modals/VisibleModal2'
-function ConfirmationDialog({ className = '', children }) {
+import { ConfirmationDialogBodyType, ConfirmationDialogButtonGroupType, ConfirmationDialogIconType, ConfirmationDialogType } from './Types'
+
+function ConfirmationDialog({ className = '', children }: ConfirmationDialogType) {
     return (
         <VisibleModal2 className="confirmation-dialog">
             <div className={`confirmation-dialog__body ${className}`}>{children}</div>
@@ -8,11 +10,11 @@ function ConfirmationDialog({ className = '', children }) {
     )
 }
 
-function Icon({ src, className = '' }) {
+function Icon({ src, className = '' }: ConfirmationDialogIconType) {
     return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
 }
 
-function Body({ title, subtitle = null, children = null }) {
+function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
     return (
         <div className="flex left column ">
             <h3 className="confirmation-dialog__title lh-1-25 dc__break-word w-100">{title}</h3>
@@ -22,7 +24,7 @@ function Body({ title, subtitle = null, children = null }) {
     )
 }
 
-function ButtonGroup({ children }) {
+function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
     return <div className="flex right confirmation-dialog__button-group">{children}</div>
 }
 

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createContext } from 'react';
 import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../Assets/Icon/ic-close.svg';
+import close from '../../Assets/Icon/ic-cross.svg';
 import { Progressing } from '../Progressing'
 //TODO: may not need context
 const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });

package/src/Common/Dialogs/Types.ts

@@ -14,3 +14,19 @@ export interface ForceDeleteDialogType {
   forceDeleteDialogTitle: string
   forceDeleteDialogMessage: string
 }
+export interface ConfirmationDialogType {
+    className?: string
+    children: any
+}
+export interface ConfirmationDialogIconType {
+    src: string
+    className?: string
+}
+export interface ConfirmationDialogBodyType {
+    title: string
+    subtitle?: string
+    children?: any
+}
+export interface ConfirmationDialogButtonGroupType {
+    children: any
+}

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -0,0 +1,40 @@
+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,
+    noImage
+}: GenericEmptyStateType): JSX.Element {
+    return (
+        <div
+            className={`flex column empty-state ${classname ? classname : ''}`}
+            style={styles}
+            {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
+        >
+            {!noImage && <img className={imageClassName ? imageClassName : ''}
+                src={image || AppNotDeployed}
+                width={imageType === ImageType.Medium ? '200' : '250'}
+                height={imageType === ImageType.Medium ? '160' : '200'}
+                alt="empty-state"
+            />}
+            <h4 className="title fw-6 cn-9 mb-8">{title}</h4>
+            {subTitle && <p className="subtitle">{subTitle}</p>}
+            {isButtonAvailable && renderButton()}
+              {children}
+        </div>
+    )
+}
+
+export default GenericEmptyState

package/src/Common/EmptyState/emptyState.scss

@@ -19,12 +19,9 @@
     h6 {
         color: var(--N900);
     }
-    .title {
-        font-weight: 600;
-    }
     .subtitle {
         font-size: 13px;
-        width: 250px;
+        width: 300px;
         font-weight: 400;
         text-align: center;
         line-height: 1.5;
@@ -34,7 +31,7 @@
         height: 36px;
     }
     p {
-        width: 250px;
+        width: 300px;
         text-align: center;
         font-size: 13px;
         color: var(--N700);
@@ -68,16 +65,8 @@
         color: var(--N900);
     }
     .button__icon {
-        width:16px;
-        height:16px;
+        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

@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
 import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
-import Reload from './Reload'
 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
@@ -19,7 +20,9 @@ export class ErrorScreenManager extends Component<{
             case 401:
                 return 'Unauthorized'
             case 403:
-                return <ErrorScreenNotAuthorized subtitle={this.props.subtitle} subtitleClass={this.props.subtitleClass}/>
+                return (
+                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
+                )
             case 404:
                 return <ErrorScreenNotFound />
             case 500:
@@ -45,21 +48,14 @@ export class ErrorScreenManager extends Component<{
 export class ErrorScreenNotAuthorized extends Component<{
     subtitle?: React.ReactChild
     title?: string
-    subtitleClass?: string
 }> {
     render() {
         return (
-            <EmptyState className="dc__align-reload-center">
-                <EmptyState.Image>
-                    <img src={notAuthorized} alt="Not Authorized" />
-                </EmptyState.Image>
-                <EmptyState.Title>
-                    <h3 className="title">{this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}</h3>
-                </EmptyState.Title>
-                <EmptyState.Subtitle className={this.props.subtitleClass}>
-                    {this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
-                </EmptyState.Subtitle>
-            </EmptyState>
+            <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,38 +1,31 @@
 import React from 'react'
 import notFound from '../Assets/Img/ic-empty-error@2x.png'
 import { useHistory } from 'react-router'
-import EmptyState from './EmptyState/EmptyState'
 import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
 
 function ErrorScreenNotFound() {
-  const history = useHistory()
+    const history = useHistory()
+    const redirectToHome = () => {
+        history.push('/app/list')
+    }
+    const renderGenerateButton = () => {
+        return (
+            <button className="flex cta h-32" onClick={redirectToHome}>
+                {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
+            </button>
+        )
+    }
 
-  const redirectToHome = () => {
-    history.push('/app/list')
-  }
-
-  return (
-    <div>
-         <EmptyState>
-              <EmptyState.Image>
-                  <img src={notFound} alt="Not Found" />
-              </EmptyState.Image>
-              <EmptyState.Title>
-                  <h3 className="title">{ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}</h3>
-              </EmptyState.Title>
-              <EmptyState.Subtitle >
-                   <p>{ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}</p>
-              </EmptyState.Subtitle>
-              <EmptyState.Button>
-                        <button className="flex cta h-32"
-                        onClick={redirectToHome}
-                        >
-                            {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
-                        </button>
-                    </EmptyState.Button>
-          </EmptyState>
-    </div>
-  )
+    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
+export default ErrorScreenNotFound

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -1,22 +1,8 @@
-import React, { CSSProperties } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
+import { InfoColourBarType } from '../Types'
 import './infoColourBar.scss'
 
-interface InfoColourBarType {
-    message: React.ReactNode
-    classname: string
-    Icon
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    renderActionButton?: () => JSX.Element
-    linkText?: React.ReactNode
-    redirectLink?: string
-    linkOnClick?: () => void
-    linkClass?: string
-    internalLink?: boolean
-    styles?: CSSProperties
-}
-
 function InfoColourBar({
     message,
     classname,

package/src/Common/Modals/Modal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
+import { ModalType } from '../Types'
+
 export const Modal = ({
     style = {},
     children,
@@ -8,7 +10,7 @@ export const Modal = ({
     onClick = null,
     callbackRef = null,
     preventWheelDisable = false,
-}) => {
+}: ModalType) => {
     const innerRef = React.useRef(null)
     function handleClick(e) {
         if (typeof onClick !== 'function') return

package/src/Common/Modals/OpaqueModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
-import closeIcon from '../../Assets/Icon/ic-close.svg'
+import closeIcon from '../../Assets/Icon/ic-cross.svg'
 
 export interface OpaqueModalProps {
     className?: string;

package/src/Common/MultiSelectCustomization.tsx

@@ -124,7 +124,7 @@ export const multiSelectStyles = {
     }),
 }
 
-interface CustomSelect {
+export interface CustomSelect {
     sortSelected?: boolean
     options: any[]
     onChange: (...args) => void

package/src/Common/PopupMenu.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect } from 'react';
-import {Modal} from './Modals/Modal';
-const PopupContext = React.createContext(null);
+import React, { useEffect } from 'react'
+import { Modal } from './Modals/Modal'
+import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
+
+const PopupContext = React.createContext(null)
 
 function usePopupContext() {
     const context = React.useContext(PopupContext)
@@ -10,7 +12,12 @@ function usePopupContext() {
     return context
 }
 
-function PopupMenu({ children = null, onToggleCallback = null, autoClose = false, autoPosition = false }) {
+function PopupMenu({
+    children = null,
+    onToggleCallback = null,
+    autoClose = false,
+    autoPosition = false,
+}: PopupMenuType) {
     const [popupPosition, setPopupPosition] = React.useState(null)
     const [opacity, setOpacity] = React.useState(0)
     const observer = React.useRef<IntersectionObserver | null>(null)
@@ -135,7 +142,7 @@ function Button({
     tabIndex = 0,
     onHover = false,
     isKebab = false,
-}) {
+}: PopupMenuButtonType) {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
     return (
         <button
@@ -154,7 +161,13 @@ function Button({
     )
 }
 
-function Body({ children = null, rootClassName = '', style = {}, autoWidth = false, preventWheelDisable = false }) {
+function Body({
+    children = null,
+    rootClassName = '',
+    style = {},
+    autoWidth = false,
+    preventWheelDisable = false,
+}: PopupMenuBodyType) {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
         <Modal

package/src/Common/Progressing.tsx

@@ -1,14 +1,5 @@
 import React from 'react'
-
-interface ProgressingProps {
-    pageLoader?: boolean
-    loadingText?: string
-    size?: number
-    fullHeight?: boolean
-    theme?: 'white' | 'default'
-    styles?: React.CSSProperties
-    children?: React.ReactNode
-}
+import { ProgressingProps } from './Types'
 
 export function Progressing({ pageLoader, size, theme, styles }: ProgressingProps): JSX.Element {
     const loaderSize = size ? `${size}px` : pageLoader ? '48px' : '20px'

package/src/Common/RadioGroup.tsx

@@ -1,10 +1,7 @@
 import React, { Component, createContext } from 'react'
+import { RadioGroupItemProps, RadioGroupProps } from './Types'
 const RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: (event) => {} })
 
-export interface RadioGroupItemProps {
-    value: string
-}
-
 export class RadioGroupItem extends Component<RadioGroupItemProps> {
     render() {
         return (
@@ -35,14 +32,6 @@ export class RadioGroupItem extends Component<RadioGroupItemProps> {
     }
 }
 
-export interface RadioGroupProps {
-    value: string
-    name: string
-    disabled?: boolean
-    onChange: (event) => void
-    className?: string
-}
-
 export class RadioGroup extends Component<RadioGroupProps> {
     render() {
         return (

package/src/Common/Reload.tsx

@@ -1,18 +1,23 @@
 import React from 'react'
-import loadingFailure from '../Assets/Img/ic-loading-failure.png';
+import loadingFailure from '../Assets/Img/ic-loading-failure.png'
+import { ReloadType } from './Types'
 
-export default function Reload({ reload = null, className = '' }) {
-    function refresh(e){
-        window.location.reload();
+export default function Reload({ reload, className = '' }: ReloadType) {
+    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" />
+        <article className={`flex w-100 h-100 ${className}`}>
+            <div className="flex column w-250 dc__align-center">
+                <img src={loadingFailure} style={{ height: 'auto' }} className="w-100 mb-12" 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 className="dc__empty__subtitle mb-20">
+                    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/TippyCustomized.tsx

@@ -1,36 +1,8 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { useRef } from 'react'
 import Tippy from '@tippyjs/react'
-import { Placement } from 'tippy.js'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
-import { TippyTheme } from './Types'
-
-interface TippyCustomizedProps {
-    theme: TippyTheme
-    visible?: boolean
-    heading?: string
-    infoTextHeading?: string
-    placement: Placement
-    className?: string
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    iconPath?: string
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    onImageLoadError?: (e) => void
-    onClose?: () => void
-    infoText?: string
-    showCloseButton?: boolean
-    arrow?: boolean
-    interactive?: boolean
-    showOnCreate?: boolean
-    trigger?: string
-    animation?: string
-    duration?: number
-    additionalContent?: ReactNode
-    documentationLink?: string
-    documentationLinkText?: string
-    children: React.ReactElement<any>
-}
+import { TippyCustomizedProps, TippyTheme } from './Types'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions