@devtron-labs/devtron-fe-common-lib 0.0.48-beta-9 → 0.0.48-beta-11

package/src/Common/PopupMenu.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
+import * as React from 'react'
 import { Modal } from './Modals/Modal'
 import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
 
@@ -12,12 +13,12 @@ function usePopupContext() {
     return context
 }
 
-function PopupMenu({
+const PopupMenu = ({
     children = null,
     onToggleCallback = null,
     autoClose = false,
     autoPosition = false,
-}: PopupMenuType) {
+}: PopupMenuType) => {
     const [popupPosition, setPopupPosition] = React.useState(null)
     const [opacity, setOpacity] = React.useState(0)
     const observer = React.useRef<IntersectionObserver | null>(null)
@@ -135,15 +136,15 @@ function PopupMenu({
     )
 }
 
-function Button({
+const Button = ({
     children = null,
     disabled = false,
     rootClassName = '',
     tabIndex = 0,
     onHover = false,
     isKebab = false,
-    dataTestId = "",
-}: PopupMenuButtonType) {
+    dataTestId = '',
+}: PopupMenuButtonType) => {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
     return (
         <button
@@ -163,14 +164,14 @@ function Button({
     )
 }
 
-function Body({
+const Body = ({
     children = null,
     rootClassName = '',
     style = {},
     autoWidth = false,
     preventWheelDisable = false,
     noBackDrop,
-}: PopupMenuBodyType) {
+}: PopupMenuBodyType) => {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
         <Modal
@@ -183,7 +184,7 @@ function Body({
                 ...popupPosition,
                 ...style,
                 ...(autoWidth ? { width: buttonWidth.current } : {}),
-                opacity: opacity,
+                opacity,
             }}
             preventWheelDisable={preventWheelDisable}
             noBackDrop={noBackDrop}

package/src/Common/Progressing.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import { ProgressingProps } from './Types'
 
-export function Progressing({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element {
+export const Progressing = ({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element => {
     const loaderSize = size ? `${size}px` : pageLoader ? '48px' : '20px'
     return (
         <div className={`loader ${theme || 'default'}-background`} style={styles} data-testid="progressing">
@@ -29,25 +28,23 @@ export function Progressing({ pageLoader, size, theme, styles, fillColor }: Prog
     )
 }
 
-export function DetailsProgressing({
+export const DetailsProgressing = ({
     loadingText,
     size = 24,
     fullHeight = false,
     styles,
     fillColor,
     children,
-}: ProgressingProps): JSX.Element {
-    return (
-        <div
-            className={`details-loader bcn-0 flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
-            style={styles}
-            data-testid="details-progressing"
-        >
-            <span style={{ width: `${size}px`, height: `${size}px` }}>
-                <Progressing size={size} fillColor={fillColor} />
-            </span>
-            {loadingText && <span className="mt-10">{loadingText}</span>}
-            {children}
-        </div>
-    )
-}
+}: ProgressingProps): JSX.Element => (
+    <div
+        className={`details-loader bcn-0 flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
+        style={styles}
+        data-testid="details-progressing"
+    >
+        <span style={{ width: `${size}px`, height: `${size}px` }}>
+            <Progressing size={size} fillColor={fillColor} />
+        </span>
+        {loadingText && <span className="mt-10">{loadingText}</span>}
+        {children}
+    </div>
+)

package/src/Common/RJSF/Form.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import RJSF from '@rjsf/core'
 import RJSFValidator from '@rjsf/validator-ajv8'
 

package/src/Common/RJSF/common/FieldRow.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { FieldRowProps } from './types'
 import { DEFAULT_FIELD_TITLE, DO_NOT_SHOW_LABEL } from '../constants'
 

package/src/Common/RJSF/config.ts

@@ -1,4 +1,3 @@
-import React from 'react'
 import { RegistryWidgetsType } from '@rjsf/utils'
 
 import {

package/src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
 import { ArrayFieldTemplateItemType } from '@rjsf/utils'
 
 export const ArrayFieldItemTemplate = ({

package/src/Common/RJSF/templates/ArrayFieldTemplate.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
 import { DO_NOT_SHOW_LABEL } from '../constants'

package/src/Common/RJSF/templates/BaseInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { getDefaultRegistry } from '@rjsf/core'
 import { BaseInputTemplateProps } from '@rjsf/utils'
 import { PLACEHOLDERS } from '../constants'

package/src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { IconButtonProps } from '@rjsf/utils'
 
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'

package/src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { IconButtonProps } from '@rjsf/utils'
 
 import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.svg'

package/src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { getSubmitButtonOptions, SubmitButtonProps } from '@rjsf/utils'
 
 export const SubmitButton = ({ uiSchema }: SubmitButtonProps) => {
@@ -6,11 +5,7 @@ export const SubmitButton = ({ uiSchema }: SubmitButtonProps) => {
 
     return norender ? null : (
         <div className="flexbox flex-justify-end">
-            <button
-                type="submit"
-                {...submitButtonProps}
-                className={`cta ${submitButtonProps.className || ''}`}
-            >
+            <button type="submit" {...submitButtonProps} className={`cta ${submitButtonProps.className || ''}`}>
                 {submitText}
             </button>
         </div>

package/src/Common/RJSF/templates/Description.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { DescriptionFieldProps } from '@rjsf/utils'
 
 import { ReactComponent as Info } from '../../../Assets/Icon/ic-info-filled.svg'

package/src/Common/RJSF/templates/Field.tsx

@@ -1,10 +1,21 @@
-import React from 'react'
 import { FieldTemplateProps, getUiOptions, getTemplate, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
 
 export const Field = (props: FieldTemplateProps) => {
-    const { id, label, children, errors, hidden, required, displayLabel, registry, uiSchema, classNames, schema, description } =
-        props
+    const {
+        id,
+        label,
+        children,
+        errors,
+        hidden,
+        required,
+        displayLabel,
+        registry,
+        uiSchema,
+        classNames,
+        schema,
+        description,
+    } = props
     const uiOptions = getUiOptions(uiSchema)
     const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
         'WrapIfAdditionalTemplate',

package/src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { errorId, FieldErrorProps } from '@rjsf/utils'
 
 import { ReactComponent as Error } from '../../../Assets/Icon/ic-warning.svg'
@@ -11,14 +10,12 @@ export const FieldErrorTemplate = ({ errors = [], idSchema }: FieldErrorProps) =
             <span id={id}>
                 {errors
                     .filter((elem) => !!elem)
-                    .map((error, index: number) => {
-                        return (
-                            <span className="form__error" key={index}>
-                                <Error className="form__icon form__icon--error" />
-                                {error}
-                            </span>
-                        )
-                    })}
+                    .map((error, index: number) => (
+                        <span className="form__error" key={index}>
+                            <Error className="form__icon form__icon--error" />
+                            {error}
+                        </span>
+                    ))}
             </span>
         )
     )

package/src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
     ObjectFieldTemplatePropertyType,
     ObjectFieldTemplateProps,
@@ -55,13 +54,12 @@ const Field = ({
                     {ActionButton}
                 </>
             )
-        } else {
-            return (
-                <FieldRowWithLabel label={title} required={required} showLabel id={idSchema.$id}>
-                    {ActionButton}
-                </FieldRowWithLabel>
-            )
         }
+        return (
+            <FieldRowWithLabel label={title} required={required} showLabel id={idSchema.$id}>
+                {ActionButton}
+            </FieldRowWithLabel>
+        )
     }
     return (
         <>

package/src/Common/RJSF/templates/TitleField.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { TitleFieldProps } from '@rjsf/utils'
 
 export const TitleField = ({ id, title, required }: TitleFieldProps) => (

package/src/Common/RJSF/templates/WrapIfAdditionalTemplate.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ADDITIONAL_PROPERTY_FLAG, WrapIfAdditionalTemplateProps } from '@rjsf/utils'
 
 import { PLACEHOLDERS } from '../constants'

package/src/Common/RJSF/utils.ts

@@ -13,63 +13,59 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
     }
 }
 
-export const getCommonSelectStyle = (styleOverrides = {}) => {
-    return {
-        menuList: (base) => ({
-            ...base,
-            paddingTop: 0,
-            paddingBottom: 0,
-        }),
-        control: (base, state) => ({
-            ...base,
-            minHeight: '32px',
-            boxShadow: 'none',
-            backgroundColor: 'var(--N50)',
-            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
-            cursor: 'pointer',
-        }),
-        option: (base, state) => ({
-            ...base,
-            color: 'var(--N900)',
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-            padding: '10px 12px',
-        }),
-        dropdownIndicator: (base, state) => ({
-            ...base,
-            color: 'var(--N400)',
-            padding: '0 8px',
-            transition: 'all .2s ease',
-            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        }),
-        valueContainer: (base, state) => ({
-            ...base,
-            padding: '0 8px',
-            fontWeight: '400',
-            color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-        }),
-        loadingMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        noOptionsMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        multiValue: (base, state) => {
-            return {
-                ...base,
-                border: `1px solid var(--N200)`,
-                borderRadius: `4px`,
-                background: 'white',
-                height: '28px',
-                marginRight: '8px',
-                padding: '2px',
-                fontSize: '12px',
-            }
-        },
-        ...styleOverrides,
-    }
-}
+export const getCommonSelectStyle = (styleOverrides = {}) => ({
+    menuList: (base) => ({
+        ...base,
+        paddingTop: 0,
+        paddingBottom: 0,
+    }),
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        backgroundColor: 'var(--N50)',
+        border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+        cursor: 'pointer',
+    }),
+    option: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        padding: '10px 12px',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+    valueContainer: (base, state) => ({
+        ...base,
+        padding: '0 8px',
+        fontWeight: '400',
+        color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
+    }),
+    loadingMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    noOptionsMessage: (base) => ({
+        ...base,
+        color: 'var(--N600)',
+    }),
+    multiValue: (base, state) => ({
+        ...base,
+        border: `1px solid var(--N200)`,
+        borderRadius: `4px`,
+        background: 'white',
+        height: '28px',
+        marginRight: '8px',
+        padding: '2px',
+        fontSize: '12px',
+    }),
+    ...styleOverrides,
+})
 
 /**
  * Returns the redirection props for a url

package/src/Common/RJSF/widgets/Checkbox.tsx

@@ -1,6 +1,6 @@
-import React, { ChangeEvent } from 'react'
-import Toggle from '../../Toggle/Toggle'
+import { ChangeEvent } from 'react'
 import { WidgetProps } from '@rjsf/utils'
+import Toggle from '../../Toggle/Toggle'
 
 export const Checkbox = ({
     id,

package/src/Common/RJSF/widgets/Select.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import isEqual from 'lodash/isEqual'
 import { WidgetProps } from '@rjsf/utils'
 import ReactSelect, { MenuListProps, components } from 'react-select'

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import Tippy from '@tippyjs/react'
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+import * as React from 'react'
 import { ConditionalWrap } from '../Helper'
 import './radioGroup.scss'
 
@@ -28,30 +29,24 @@ interface RadioGroupComposition {
     Radio?: React.FC<any>
 }
 
-const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
-    name,
-    onChange,
-    children,
-    className = '',
-    initialTab,
-    disabled = false,
-    dataTestId,
-}) {
-    const [selected, select] = useState(null)
+const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(
+    ({ name, onChange, children, className = '', initialTab, disabled = false, dataTestId }) => {
+        const [selected, select] = useState(null)
 
-    useEffect(() => {
-        if (initialTab === selected) return
-        select(initialTab)
-    }, [initialTab])
+        useEffect(() => {
+            if (initialTab === selected) return
+            select(initialTab)
+        }, [initialTab])
 
-    return (
-        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
-            <div className={`${className} radio-group`}>{children}</div>
-        </RadioContext.Provider>
-    )
-})
+        return (
+            <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
+                <div className={`${className} radio-group`}>{children}</div>
+            </RadioContext.Provider>
+        )
+    },
+)
 
-function Radio({
+const Radio = ({
     value,
     children,
     className = '',
@@ -62,7 +57,7 @@ function Radio({
     isDisabled = false,
     tippyClass = '',
     dataTestId,
-}) {
+}) => {
     const { name, selected, select, disabled, onChange } = useRadioContext()
     return (
         <ConditionalWrap

package/src/Common/RadioGroup.tsx

@@ -1,33 +1,34 @@
-import React, { Component, createContext } from 'react'
+import { Component, createContext } from 'react'
 import { RadioGroupItemProps, RadioGroupProps } from './Types'
+
 const RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: (event) => {} })
 
 export class RadioGroupItem extends Component<RadioGroupItemProps> {
     render() {
         return (
             <RadioGroupContext.Consumer>
-                {(context) => {
-                    return (
-                        <>
-                            <label className={(this.props.disabled || context.disabled) ? 'form__radio-item disabled' : 'form__radio-item'}>
-                                <input
-                                    type="radio"
-                                    className="form__checkbox"
-                                    name={context.name}
-                                    disabled={context.disabled || this.props.disabled}
-                                    onChange={context.onChange}
-                                    value={this.props.value}
-                                    checked={context.value === this.props.value}
-                                    data-testid={this.props.dataTestId}
-                                />
-                                <span className="form__radio-item-content" data-testid={`${this.props.dataTestId}-span`}>
-                                    <span className="radio__button"></span>
-                                    <span className="radio__title">{this.props.children}</span>
-                                </span>
-                            </label>
-                        </>
-                    )
-                }}
+                {(context) => (
+                    <label
+                        className={
+                            this.props.disabled || context.disabled ? 'form__radio-item disabled' : 'form__radio-item'
+                        }
+                    >
+                        <input
+                            type="radio"
+                            className="form__checkbox"
+                            name={context.name}
+                            disabled={context.disabled || this.props.disabled}
+                            onChange={context.onChange}
+                            value={this.props.value}
+                            checked={context.value === this.props.value}
+                            data-testid={this.props.dataTestId}
+                        />
+                        <span className="form__radio-item-content" data-testid={`${this.props.dataTestId}-span`}>
+                            <span className="radio__button" />
+                            <span className="radio__title">{this.props.children}</span>
+                        </span>
+                    </label>
+                )}
             </RadioGroupContext.Consumer>
         )
     }

package/src/Common/Reload.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import loadingFailure from '../Assets/Img/ic-loading-failure.png'
 import { ReloadType } from './Types'
 

package/src/Common/ResizableTextarea.tsx

@@ -1,22 +1,23 @@
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
+import * as React from 'react'
 import { useThrottledEffect } from './Helper'
 import { ResizableTextareaProps } from './Types'
 
 export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
-                                                                        minHeight,
-                                                                        maxHeight,
-                                                                        value,
-                                                                        onChange = null,
-                                                                        onBlur = null,
-                                                                        onFocus = null,
-                                                                        className = '',
-                                                                        placeholder = 'Enter your text here..',
-                                                                        lineHeight = 14,
-                                                                        padding = 12,
-                                                                        disabled = false,
-                                                                        dataTestId,
-                                                                        ...props
-                                                                    }) => {
+    minHeight,
+    maxHeight,
+    value,
+    onChange = null,
+    onBlur = null,
+    onFocus = null,
+    className = '',
+    placeholder = 'Enter your text here..',
+    lineHeight = 14,
+    padding = 12,
+    disabled = false,
+    dataTestId,
+    ...props
+}) => {
     const [text, setText] = useState('')
     const _textRef = useRef(null)
 
@@ -48,7 +49,7 @@ export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
             if (maxHeight && nextHeight > maxHeight) {
                 nextHeight = maxHeight
             }
-            _textRef.current.style.height = nextHeight + 2 + 'px'
+            _textRef.current.style.height = `${nextHeight + 2}px`
         },
         500,
         [text],
@@ -70,4 +71,4 @@ export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
             {...props}
         />
     )
-}
+}