@devtron-labs/devtron-fe-common-lib 0.0.52-beta-2 → 0.0.52-beta-3

package/src/Common/Modals/VisibleModal.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import { Component } from 'react'
 import ReactDOM from 'react-dom'
 
-export class VisibleModal extends React.Component<{
+export class VisibleModal extends Component<{
     className: string
     parentClassName?: string
     noBackground?: boolean
@@ -46,7 +46,11 @@ export class VisibleModal extends React.Component<{
 
     render() {
         return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal-close">
+            <div
+                className={`visible-modal__body ${this.props.className}`}
+                onClick={this.props?.close}
+                data-testid="visible-modal-close"
+            >
                 {this.props.children}
             </div>,
             document.getElementById('visible-modal'),

package/src/Common/Modals/VisibleModal2.tsx

@@ -1,35 +1,40 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { Component } from 'react'
+import ReactDOM from 'react-dom'
 
-export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void; }> {
-
-    modalRef = document.getElementById('visible-modal-2');
+export class VisibleModal2 extends Component<{ className: string; close?: (e) => void }> {
+    modalRef = document.getElementById('visible-modal-2')
 
     constructor(props) {
-        super(props);
-        this.escFunction = this.escFunction.bind(this);
+        super(props)
+        this.escFunction = this.escFunction.bind(this)
     }
 
     escFunction(event) {
         if (event.keyCode === 27 && this.props.close) {
-            this.props.close(event);
+            this.props.close(event)
         }
     }
 
     componentDidMount() {
-        document.addEventListener("keydown", this.escFunction);
-        this.modalRef.classList.add("show-with-bg");
+        document.addEventListener('keydown', this.escFunction)
+        this.modalRef.classList.add('show-with-bg')
     }
 
     componentWillUnmount() {
-        document.removeEventListener("keydown", this.escFunction);
-        this.modalRef.classList.remove("show-with-bg");
+        document.removeEventListener('keydown', this.escFunction)
+        this.modalRef.classList.remove('show-with-bg')
     }
 
     render() {
         return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal2-close">
+            <div
+                className={`visible-modal__body ${this.props.className}`}
+                onClick={this.props?.close}
+                data-testid="visible-modal2-close"
+            >
                 {this.props.children}
-            </div>, document.getElementById('visible-modal-2'))
+            </div>,
+            document.getElementById('visible-modal-2'),
+        )
     }
-}
+}

package/src/Common/MultiSelectCustomization.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import Select, { components } from 'react-select'
 import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
 import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
@@ -42,7 +42,7 @@ export const MultiValueContainer = (props) => {
     const { label, value } = data
     return (
         <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
-            <div className={`flex fs-12 ml-4 cn-9`}>{label}</div>
+            <div className="flex fs-12 ml-4 cn-9">{label}</div>
             {children[1]}
         </components.MultiValueContainer>
     )
@@ -106,14 +106,12 @@ export const multiSelectStyles = {
     menu: (base, state) => ({
         ...base,
     }),
-    option: (base, state) => {
-        return {
-            ...base,
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-            color: 'var(--N900)',
-            padding: '8px 12px',
-        }
-    },
+    option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+        color: 'var(--N900)',
+        padding: '8px 12px',
+    }),
     container: (base, state) => ({
         ...base,
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -143,6 +141,4 @@ export interface CustomSelect {
     formatOptionLabel?: (...args) => any
 }
 
-export const CustomSelect: React.FC<CustomSelect> = (props) => {
-    return <Select {...props} />
-}
+export const CustomSelect: React.FC<CustomSelect> = (props) => <Select {...props} />

package/src/Common/Policy.Types.ts

@@ -1,63 +1,63 @@
-import { VariableType } from "./CIPipeline.Types"
-import { ResponseType } from "./Types"
+import { VariableType } from './CIPipeline.Types'
+import { ResponseType } from './Types'
 
 export enum ApplyPolicyToStage {
-  PRE_CI = 'PRE_CI',
-  POST_CI = 'POST_CI',
-  PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+    PRE_CI = 'PRE_CI',
+    POST_CI = 'POST_CI',
+    PRE_OR_POST_CI = 'PRE_OR_POST_CI',
 }
 
 export enum PluginRequiredStage {
-  PRE_CI = 'preBuildStage',
-  POST_CI = 'postBuildStage',
-  PRE_OR_POST_CI = 'PRE_OR_POST_CI',
+    PRE_CI = 'preBuildStage',
+    POST_CI = 'postBuildStage',
+    PRE_OR_POST_CI = 'PRE_OR_POST_CI',
 }
 
 export interface DefinitionSourceType {
-  projectName: string
-  isDueToProductionEnvironment: boolean
-  isDueToLinkedPipeline: boolean
-  policyName: string
-  appName?: string
-  clusterName?: string
-  environmentName?: string
-  branchNames?: string[]
-  ciPipelineName?: string
+    projectName: string
+    isDueToProductionEnvironment: boolean
+    isDueToLinkedPipeline: boolean
+    policyName: string
+    appName?: string
+    clusterName?: string
+    environmentName?: string
+    branchNames?: string[]
+    ciPipelineName?: string
 }
 export interface MandatoryPluginDetailType {
-  id: number
-  icon: string
-  name: string
-  description?: string
-  requiredIn: PluginRequiredStage
-  applied?: boolean
-  inputVariables?: VariableType[]
-  outputVariables?: VariableType[]
-  definitionSources?: DefinitionSourceType[]
+    id: number
+    icon: string
+    name: string
+    description?: string
+    requiredIn: PluginRequiredStage
+    applied?: boolean
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    definitionSources?: DefinitionSourceType[]
 }
 export interface MandatoryPluginDataType {
-  pluginData: MandatoryPluginDetailType[]
-  isValidPre: boolean
-  isValidPost: boolean
+    pluginData: MandatoryPluginDetailType[]
+    isValidPre: boolean
+    isValidPost: boolean
 }
 
 export enum ConsequenceAction {
-  BLOCK = 'BLOCK',
-  ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
-  ALLOW_FOREVER = 'ALLOW_FOREVER',
+    BLOCK = 'BLOCK',
+    ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
+    ALLOW_FOREVER = 'ALLOW_FOREVER',
 }
 
 export interface ConsequenceType {
-  action: ConsequenceAction
-  metadataField: string
+    action: ConsequenceAction
+    metadataField: string
 }
 
 export interface BlockedStateData {
-  isOffendingMandatoryPlugin: boolean
-  isCITriggerBlocked: boolean
-  ciBlockState: ConsequenceType
+    isOffendingMandatoryPlugin: boolean
+    isCITriggerBlocked: boolean
+    ciBlockState: ConsequenceType
 }
 
 export interface GetBlockedStateResponse extends ResponseType {
     result?: BlockedStateData
-}
+}

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'