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

package/src/Common/PopupMenu.tsx

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

package/src/Common/Progressing.tsx

@@ -1,6 +1,7 @@
+import React from 'react'
 import { ProgressingProps } from './Types'
 
-export const Progressing = ({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element => {
+export function 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">
@@ -28,23 +29,25 @@ export const Progressing = ({ pageLoader, size, theme, styles, fillColor }: Prog
     )
 }
 
-export const DetailsProgressing = ({
+export function DetailsProgressing({
     loadingText,
     size = 24,
     fullHeight = false,
     styles,
     fillColor,
     children,
-}: 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>
-)
+}: 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>
+    )
+}

package/src/Common/RJSF/Form.tsx

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

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

@@ -1,3 +1,4 @@
+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,3 +1,4 @@
+import React from 'react'
 import { RegistryWidgetsType } from '@rjsf/utils'
 
 import {

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

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

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
     ObjectFieldTemplatePropertyType,
     ObjectFieldTemplateProps,
@@ -54,12 +55,13 @@ 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,3 +1,4 @@
+import React from 'react'
 import { TitleFieldProps } from '@rjsf/utils'
 
 export const TitleField = ({ id, title, required }: TitleFieldProps) => (

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

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

package/src/Common/RJSF/utils.ts

@@ -13,59 +13,63 @@ export const translateString = (stringToTranslate: TranslatableString, params?:
     }
 }
 
-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,
-})
+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,
+    }
+}
 
 /**
  * Returns the redirection props for a url

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

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

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

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

package/src/Common/RadioGroup.tsx

@@ -1,34 +1,33 @@
-import { Component, createContext } from 'react'
+import React, { 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) => (
-                    <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>
-                )}
+                {(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>
+                        </>
+                    )
+                }}
             </RadioGroupContext.Consumer>
         )
     }

package/src/Common/Reload.tsx

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

package/src/Common/ResizableTextarea.tsx

@@ -1,23 +1,22 @@
-import { useState, useEffect, useRef } from 'react'
-import * as React from 'react'
+import React, { useState, useEffect, useRef } 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)
 
@@ -49,7 +48,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],
@@ -71,4 +70,4 @@ export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
             {...props}
         />
     )
-}
+}