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

package/src/Common/Modals/VisibleModal.tsx

@@ -1,7 +1,7 @@
-import { Component } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 
-export class VisibleModal extends Component<{
+export class VisibleModal extends React.Component<{
     className: string
     parentClassName?: string
     noBackground?: boolean
@@ -46,11 +46,7 @@ export class VisibleModal extends 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,40 +1,35 @@
-import { Component } from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-export class VisibleModal2 extends Component<{ className: string; close?: (e) => void }> {
-    modalRef = document.getElementById('visible-modal-2')
+export class VisibleModal2 extends React.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 * as React from 'react'
+import 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,12 +106,14 @@ export const multiSelectStyles = {
     menu: (base, state) => ({
         ...base,
     }),
-    option: (base, state) => ({
-        ...base,
-        backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-        color: 'var(--N900)',
-        padding: '8px 12px',
-    }),
+    option: (base, state) => {
+        return {
+            ...base,
+            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
+            color: 'var(--N900)',
+            padding: '8px 12px',
+        }
+    },
     container: (base, state) => ({
         ...base,
         cursor: state.isDisabled ? 'not-allowed' : 'pointer',
@@ -141,4 +143,6 @@ export interface CustomSelect {
     formatOptionLabel?: (...args) => any
 }
 
-export const CustomSelect: React.FC<CustomSelect> = (props) => <Select {...props} />
+export const CustomSelect: React.FC<CustomSelect> = (props) => {
+    return <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,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'