@devtron-labs/devtron-fe-common-lib 0.0.7 → 0.0.9-beta-1

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import PopupMenu from '../PopupMenu'
-import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
-import { TagLabelValueSelectorType } from './Types'
+import { SuggestedTagOptionType, TagLabelValueSelectorType } from './Types'
+import Tippy from '@tippyjs/react'
+import { ValidationRules } from './ValidationRules'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -19,6 +20,7 @@ export const TagLabelValueSelector = ({
     tabIndex = null,
     refVar,
     dependentRef,
+    noBackDrop,
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [activeElement, setActiveElement] = useState<string>('')
@@ -43,11 +45,12 @@ export const TagLabelValueSelector = ({
             const _tagData = { ...tagData }
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
-                _tagData.isInvalidKey = selectedValue
-                    ? !validationRules.propagateTagKey(selectedValue).isValid
-                    : _tagData.value !== ''
-            } else if (selectedValue || isRequired) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidKey =
+                    selectedValue || _tagData.propagate
+                        ? !validationRules.propagateTagKey(selectedValue).isValid
+                        : _tagData.value !== ''
+            } else if (selectedValue || isRequired || _tagData.propagate) {
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -65,7 +68,9 @@ export const TagLabelValueSelector = ({
         stopPropagation(e)
         const _tagData = { ...tagData }
         _tagData[tagInputType] = e.currentTarget.dataset.key
+        _tagData.propagate = e.currentTarget.dataset.propagate === 'true'
         setTagData(selectedTagIndex, _tagData)
+        setActiveElement('')
     }
 
     const renderValidationsSuggestions = (): JSX.Element => {
@@ -74,12 +79,12 @@ export const TagLabelValueSelector = ({
             if (selectedValue || tagData.value) {
                 field = validationRules.propagateTagKey(selectedValue)
             }
-        } else if (isRequired || selectedValue) {
-            field = validationRules.propagateTagValue(selectedValue)
+        } else if (isRequired || selectedValue || tagData.propagate) {
+            field = validationRules.propagateTagValue(selectedValue, tagData.key)
         }
         if (!field.isValid) {
             return (
-                <div className="p-4" onClick={stopPropagation}>
+                <div className="p-4" onClick={stopPropagation} data-testid="tag-label-cross-stop-propagation">
                     {field.messages.map((error) => (
                         <div key={error} className="flexbox pr-4 pl-4">
                             <span>
@@ -102,22 +107,48 @@ export const TagLabelValueSelector = ({
         return null
     }
 
+    const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <div
+                key={`${tag.value}-${index}`}
+                data-key={tag.label}
+                data-propagate={tag.propagate}
+                className="dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
+                onClick={onSelectValue}
+                data-testid={`tag-label-value-${index}`}
+            >
+                {tag.label}
+            </div>
+        )
+    }
+
+    const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <Tippy
+                className="default-tt"
+                arrow={false}
+                placement="right"
+                content={
+                    <div>
+                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">{tag.label}</div>
+                        <div className="fs-12 fw-4 cn-0 dc__break-word">{tag.description}</div>
+                    </div>
+                }
+            >
+                {option(tag, index)}
+            </Tippy>
+        )
+    }
+
     const renderSuggestions = (): JSX.Element => {
         if (tagOptions?.length) {
-            const filteredTags = tagOptions.filter((tag) => tag.value.indexOf(selectedValue) >= 0)
+            const filteredTags = tagOptions.filter((tag) => tag.label.indexOf(selectedValue) >= 0)
             if (filteredTags.length) {
                 return (
                     <div>
-                        {filteredTags.map((tag, index) => (
-                            <div
-                                key={`${tag.value}-${index}`}
-                                data-key={tag.label}
-                                className="dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
-                                onClick={onSelectValue}
-                            >
-                                {tag.label}
-                            </div>
-                        ))}
+                        {filteredTags.map((tag, index) =>
+                            tag.description ? optionWithTippy(tag, index) : option(tag, index),
+                        )}
                     </div>
                 )
             }
@@ -125,13 +156,14 @@ export const TagLabelValueSelector = ({
         return renderValidationsSuggestions()
     }
 
+    const popupMenuBody = activeElement === `tag-${tagInputType}-${selectedTagIndex}` ? renderSuggestions() : null
     return (
         <PopupMenu autoClose autoPosition>
-            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border">
+            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border-imp">
                 <ResizableTagTextArea
                     minHeight={30}
                     maxHeight={80}
-                    className={`form__input pt-4-imp pb-4-imp fs-13 ${
+                    className={`form__input tag-input pt-4-imp pb-4-imp fs-13 ${
                         tagInputType === KEY_VALUE.KEY
                             ? `dc__no-right-radius`
                             : `dc__no-border-radius dc__no-right-border dc__no-left-border`
@@ -148,11 +180,19 @@ export const TagLabelValueSelector = ({
                     tabIndex={tabIndex}
                     refVar={refVar}
                     dependentRef={dependentRef}
+                    dataTestId={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
                 />
             </PopupMenu.Button>
-            <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true} preventWheelDisable={true}>
-                {activeElement === `tag-${tagInputType}-${selectedTagIndex}` && renderSuggestions()}
-            </PopupMenu.Body>
+            {popupMenuBody && (
+                <PopupMenu.Body
+                    rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
+                    autoWidth={true}
+                    preventWheelDisable={true}
+                    noBackDrop={noBackDrop}
+                >
+                    {popupMenuBody}
+                </PopupMenu.Body>
+            )}
         </PopupMenu>
     )
 }

package/src/Common/CustomTagSelector/Types.ts

@@ -1,6 +1,10 @@
 import { KEY_VALUE } from '../Constants'
 import { OptionType } from '../Types'
 
+export interface SuggestedTagOptionType extends OptionType {
+    description: string
+    propagate: boolean
+}
 export interface TagType {
     id?: number
     key: string
@@ -11,6 +15,7 @@ export interface TagType {
     isInvalidKey?: boolean
     isInvalidValue?: boolean
     isSuggested?: boolean
+    isPropagateDisabled?: boolean
 }
 
 export interface TagErrorType {
@@ -23,7 +28,8 @@ export interface TagLabelSelectType {
     setLabelTags: (tagList: TagType[]) => void
     tabIndex?: number
     selectedProjectId?: number
-    suggestedTagsOptions?: OptionType[]
+    suggestedTagsOptions?: SuggestedTagOptionType[]
+    reloadProjectTags?: boolean
 }
 
 export interface TagDetailType {
@@ -32,20 +38,21 @@ export interface TagDetailType {
     setTagData: (index: number, tagData: TagType) => void
     removeTag?: (index: number) => void
     tabIndex?: number
-    suggestedTagsOptions?: OptionType[]
+    suggestedTagsOptions?: SuggestedTagOptionType[]
 }
 
 export interface TagLabelValueSelectorType {
     selectedTagIndex: number
     tagData: TagType
     setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
+    tagOptions?: SuggestedTagOptionType[]
     isRequired?: boolean
     tagInputType?: KEY_VALUE
     placeholder?: string
     tabIndex?: number
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    noBackDrop?: boolean
 }
 
 export interface ResizableTagTextAreaProps {
@@ -60,4 +67,5 @@ export interface ResizableTagTextAreaProps {
     tabIndex?: number
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    dataTestId?: string
 }

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -16,39 +16,42 @@ const validateTagValue = (value: string): string[] => {
     return errorList
 }
 export class ValidationRules {
-
     propagateTagKey = (key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!key) {
             errorList.push('Key is required')
         } else {
-            const re = new RegExp('/', 'g')
-            const noOfSlashInKey = key.match(re)?.length
-            if (noOfSlashInKey > 1) {
-                errorList.push('Key: Max 1 ( / ) allowed')
-            } else if (noOfSlashInKey === 1) {
-                const [prefix, name] = key.split('/')
-                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-                if (prefix.length > 253) {
-                    errorList.push('Prefix: Can be max 253 characters')
-                }
-                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-                if (!validPrefix) {
-                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+            if(!key.startsWith("devtron.ai/")){
+                const re = new RegExp('/', 'g')
+                const noOfSlashInKey = key.match(re)?.length
+                if (noOfSlashInKey > 1) {
+                    errorList.push('Key: Max 1 ( / ) allowed')
+                } else if (noOfSlashInKey === 1) {
+                    const [prefix, name] = key.split('/')
+                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                    if (prefix.length > 253) {
+                        errorList.push('Prefix: Can be max 253 characters')
+                    }
+                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                    if (!validPrefix) {
+                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                    }
+                } else {
+                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
                 }
-            } else {
-                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }
 
-    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
         } else {
-            errorList.push(...validateTagValue(value))
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import info from '../../Assets/Icon/ic-info-filled.svg'
+import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
+import { ServerErrors } from '../ServerError'
+import { DeleteComponentProps } from './types'
+
+
+function DeleteComponent({
+    setDeleting,
+    toggleConfirmation,
+    deleteComponent,
+    title,
+    component,
+    payload,
+    confirmationDialogDescription = '',
+    redirectTo = false,
+    url = '',
+    reload,
+    configuration = '',
+    closeCustomComponent,
+}: DeleteComponentProps) {
+    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
+    const { push } = useHistory()
+
+    async function handleDelete() {
+        setDeleting(true)
+        try {
+            await deleteComponent(payload)
+            toast.success('Successfully deleted')
+            toggleConfirmation(false)
+            if (redirectTo) {
+                push(url)
+            } else {
+                reload()
+            }
+            if (typeof closeCustomComponent === 'function') {
+                closeCustomComponent()
+            }
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setCannotDeleteDialogModal(true)
+            }
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const handleConfirmation = () => {
+        setCannotDeleteDialogModal(false)
+        toggleConfirmation(false)
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent()
+        }
+    }
+
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
+
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
+    return (
+        <div>
+            {!showCannotDeleteDialogModal && renderDeleteDialog()}
+            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
+        </div>
+    )
+}
+
+export default DeleteComponent

package/src/Common/DeleteComponentModal/types.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean) => void
+    toggleConfirmation: any
+    deleteComponent: (any) => Promise<any>
+    title: string
+    component: string
+    payload: any
+    confirmationDialogDescription?: string
+    redirectTo?: boolean
+    url?: string
+    reload?: () => void
+    configuration?: string
+    dataTestid?: string
+    closeCustomComponent?: () => void
+}

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/DeleteDialog.tsx

@@ -1,35 +1,53 @@
-import React from 'react';
-import warn from '../../Assets/Img/warning-medium.svg';
+import React from 'react'
+import warn from '../../Assets/Img/delete-medium.svg'
 import { Progressing } from '../Progressing'
-import ConfirmationDialog from './ConfirmationDialog';
-import { DeleteDialogProps } from './Types';
+import ConfirmationDialog from './ConfirmationDialog'
+import { DeleteDialogProps } from './Types'
 
 export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
-
-    return <ConfirmationDialog className="confirmation-dialog__body--w-400">
-        <ConfirmationDialog.Icon src={warn} />
-        <ConfirmationDialog.Body title={props.title}>
-            <div className="fs-13 cn-7 lh-1-54 w-100">
-                {props.description ? props.description : null}
-                {props.children}
-            </div>
-        </ConfirmationDialog.Body>
-        <ConfirmationDialog.ButtonGroup>
-            <div className="flex right">
-                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress}>Cancel</button>
-                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress}>
-                    {props.apiCallInProgress ? <Progressing /> :  `${props.deletePrefix || ''}Delete${props.deletePostfix || ''}`}
-                </button>
-            </div>
-        </ConfirmationDialog.ButtonGroup>
-    </ConfirmationDialog >
+    return (
+        <ConfirmationDialog className="confirmation-dialog__body--w-400">
+            <ConfirmationDialog.Icon src={warn} />
+            <ConfirmationDialog.Body title={props.title}>
+                <div className="fs-13 cn-7 lh-1-54 w-100">
+                    {props.description ? props.description : null}
+                    {props.children}
+                </div>
+            </ConfirmationDialog.Body>
+            <ConfirmationDialog.ButtonGroup>
+                <div className="flex right">
+                    <button
+                        type="button"
+                        className="cta cancel cta-cd-delete-modal ml-16"
+                        onClick={props.closeDelete}
+                        disabled={props.apiCallInProgress}
+                        data-testid="dialog-cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className="cta delete cta-cd-delete-modal ml-16"
+                        onClick={() => props.delete()}
+                        disabled={props.apiCallInProgress}
+                        data-testid="dialog-delete"
+                    >
+                        {props.apiCallInProgress ? (
+                            <Progressing />
+                        ) : (
+                            `${props.deletePrefix || ''}${
+                                props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete'
+                            }${props.deletePostfix || ''}`
+                        )}
+                    </button>
+                </div>
+            </ConfirmationDialog.ButtonGroup>
+        </ConfirmationDialog>
+    )
 }
 
 function DeleteDialogDescription(props) {
-
-    return <>
-        {props.children}
-    </>
+    return <>{props.children}</>
 }
 
-DeleteDialog.Description = DeleteDialogDescription;
+DeleteDialog.Description = DeleteDialogDescription

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,20 +1,11 @@
 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'
+import { DialogFormProps } from './Types';
 //TODO: may not need context
 const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });
 
-export interface DialogFormProps {
-    className: string;
-    title: string;
-    isLoading: boolean;
-    closeOnESC?: boolean;
-    close: (event) => void;
-    onSave: (event) => void;
-    headerClassName?: string;
-}
-
 export class DialogForm extends Component<DialogFormProps> {
     constructor(props) {
         super(props);

package/src/Common/Dialogs/Types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 export interface DeleteDialogProps {
     title: string
     description?: string
@@ -6,6 +8,8 @@ export interface DeleteDialogProps {
     deletePrefix?: string
     deletePostfix?: string
     apiCallInProgress?: boolean
+    dataTestId?: string
+    buttonPrimaryText?: string
 }
 
 export interface ForceDeleteDialogType {
@@ -14,3 +18,28 @@ 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?: ReactNode
+    children?: any
+}
+export interface ConfirmationDialogButtonGroupType {
+    children: any
+}
+export interface DialogFormProps {
+    className: string;
+    title: string;
+    isLoading: boolean;
+    closeOnESC?: boolean;
+    close: (event) => void;
+    onSave: (event) => void;
+    headerClassName?: string;
+}

package/src/Common/Drawer/Drawer.scss

@@ -1,39 +1,40 @@
-.drawer{
+.drawer {
     position: absolute;
     overflow: hidden;
-    &.left, &.right{
+    &.left,
+    &.right {
         top: 0;
         bottom: 0;
         width: 0;
         transition: width 200ms;
-        &.show{
+        &.show {
             min-width: var(--minWidth);
             width: var(--width);
             max-width: var(--maxWidth);
         }
     }
 
-    &.top, &.bottom{
+    &.top,
+    &.bottom {
         left: 0;
         right: 0;
         height: 0;
         transition: height 200ms;
-        &.show{
+        &.show {
             height: var(--height);
         }
     }
-    &.right{
+    &.right {
         right: 0;
     }
-    &.left{
+    &.left {
         left: 0;
-
     }
-    &.top{
+    &.top {
         top: 0;
     }
 
-    &.bottom{
+    &.bottom {
         bottom: 0;
     }
-}
+}

package/src/Common/EmptyState/EmptyState.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import './emptyState.scss';
 import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
 
-function EmptyState({ children }) {
+function EmptyState({ children, className = '' }) {
     return (
-        <div className="flex column empty-state" style={{ width: '100%', height: '100%' }}>
+        <div className={`flex column empty-state w-100 h-100 ${className}`}>
             {children}
         </div>
     )
@@ -18,8 +18,8 @@ function Title({ children }) {
     return children
 }
 
-function Subtitle({ children, className }:{children: any, className?: string}) {
-    return <p className={`subtitle ${className}`}>{children}</p>
+function Subtitle({ children, className }: { children: any; className?: string }) {
+    return <p className={`subtitle ${className || ''}`}>{children}</p>
 }
 
 function Button({ children }) {
@@ -39,4 +39,4 @@ EmptyState.Subtitle = Subtitle
 EmptyState.Button = Button
 EmptyState.Loading = Loading
 
-export default EmptyState
+export default EmptyState