@devtron-labs/devtron-fe-common-lib 0.0.48-beta-5 → 0.0.48-beta-7

package/src/Common/Helper.tsx

@@ -1,14 +1,13 @@
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import * as React from 'react'
 import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
-import { JSONPath } from 'jsonpath-plus'
-import * as jsonpatch from 'fast-json-patch'
 
 toast.configure({
     autoClose: 3000,
@@ -79,16 +78,19 @@ export const stopPropagation = (event): void => {
 }
 
 export function useThrottledEffect(callback, delay, deps = []) {
-    //function will be executed only once in a given time interval.
+    // function will be executed only once in a given time interval.
     const lastRan = useRef(Date.now())
 
     useEffect(() => {
-        const handler = setTimeout(function () {
-            if (Date.now() - lastRan.current >= delay) {
-                callback()
-                lastRan.current = Date.now()
-            }
-        }, delay - (Date.now() - lastRan.current))
+        const handler = setTimeout(
+            () => {
+                if (Date.now() - lastRan.current >= delay) {
+                    callback()
+                    lastRan.current = Date.now()
+                }
+            },
+            delay - (Date.now() - lastRan.current),
+        )
 
         return () => {
             clearTimeout(handler)
@@ -117,7 +119,7 @@ export function getRandomColor(email: string): string {
     return colors[sum % colors.length]
 }
 
-export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
+export const getAlphabetIcon = (str: string, rootClassName: string = '') => {
     if (!str) return null
     return (
         <span
@@ -129,9 +131,7 @@ export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
     )
 }
 
-export const getEmptyArrayOfLength = (length: number) => {
-    return Array.from({ length })
-}
+export const getEmptyArrayOfLength = (length: number) => Array.from({ length })
 
 export function noop(...args): any {}
 
@@ -155,7 +155,7 @@ export function getCookie(sKey) {
     }
     return (
         document.cookie.replace(
-            new RegExp('(?:(?:^|.*;)\\s*' + sKey.replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'),
+            new RegExp(`(?:(?:^|.*;)\\s*${sKey.replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`),
             '$1',
         ) || null
     )
@@ -198,7 +198,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
     // in every re-render in component
     const validateState = useCallback(
         (state) => {
-            //check errors in all fields
+            // check errors in all fields
             const hasErrorInState = Object.keys(validationSchema).some((key) => {
                 const isInputFieldRequired = validationSchema[key].required
                 const stateValue = state[key].value // state value
@@ -225,7 +225,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // single validator
-        let _validator = validationSchema[name].validator
+        const _validator = validationSchema[name].validator
         if (_validator && typeof _validator === 'object') {
             if (!_validateSingleValidator(_validator, value)) {
                 return _validator.error
@@ -233,9 +233,9 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // multiple validators
-        let _validators = validationSchema[name].validators
+        const _validators = validationSchema[name].validators
         if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            let errors = []
+            const errors = []
             _validators.forEach((_validator) => {
                 if (!_validateSingleValidator(_validator, value)) {
                     errors.push(_validator.error)
@@ -254,7 +254,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
             setIsDirty(true)
 
             const { name, value } = event.target
-            let error = validateField(name, value)
+            const error = validateField(name, value)
             setState((prevState) => ({
                 ...prevState,
                 [name]: { value, error },
@@ -282,7 +282,7 @@ export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {
         if (ts && ts.length) {
-            let date = moment(ts)
+            const date = moment(ts)
             if (isRelativeTime) timestamp = date.fromNow()
             else timestamp = date.format('ddd DD MMM YYYY HH:mm:ss')
         }
@@ -366,9 +366,7 @@ export function useAsync<T>(
         dependencies: dependencyArray,
     })
     const mounted = useRef(true)
-    const dependencies: any[] = useMemo(() => {
-        return [...dependencyArray, shouldRun]
-    }, [...dependencyArray, shouldRun])
+    const dependencies: any[] = useMemo(() => [...dependencyArray, shouldRun], [...dependencyArray, shouldRun])
 
     const reload = () => {
         async function call() {
@@ -434,9 +432,8 @@ export function useAsync<T>(
 export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
     if (lastDeployed) {
         return handleUTCTime(lastDeployed, true)
-    } else {
-        return isArgoInstalled ? '' : 'Not deployed'
     }
+    return isArgoInstalled ? '' : 'Not deployed'
 }
 
 /**
@@ -460,64 +457,3 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
  * Custom exception logger function for logging errors to sentry
  */
 export const logExceptionToSentry = Sentry.captureException.bind(window)
-
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
-    for (let key in obj) {
-        if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0) continue
-            obj[key] = obj[key].filter((item) => item !== null)
-            // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key] // Delete the key if the array is empty
-            }
-        } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
-                delete obj[key]
-            }
-        } else if (obj[key] === undefined) {
-            delete obj[key]
-        }
-    }
-    return Object.keys(obj).length === 0
-}
-
-export function getUnlockedJSON(json, jsonPathArray) {
-    const jsonCopy = JSON.parse(JSON.stringify(json))
-    let patches = jsonPathArray.flatMap((jsonPath) => {
-        const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
-    })
-    let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
-}
-
-export function getLockedJSON(json, jsonPathArray: string[]) {
-    const jsonCopy = JSON.parse(JSON.stringify(json))
-    let resultJson = {}
-    jsonPathArray.forEach((jsonPath) => {
-        const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        elements.forEach((element) => {
-            const pathArray: string[] = JSONPath.toPathArray(element.path)
-            const lastPath = pathArray.pop()
-            let current = resultJson
-            for (let i = 0; i < pathArray.length; i++) {
-                let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
-                if (!current[key]) {
-                    current[key] = isNaN(Number(pathArray[i + 1])) ? {} : []
-                }
-                current = current[key]
-            }
-            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
-            current[key] = element.value
-        })
-    })
-    return resultJson['$']
-}
-

package/src/Common/Hooks/UseClickOutside/UseClickOutside.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 export const useClickOutside = (ref: any, callback: () => void) => {
     useEffect(() => {

package/src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { getUserRole } from '../../Common.service'
 import { useSuperAdminType } from './types'
 import { showError } from '../../Helper'

package/src/Common/ImageTags.Types.ts

@@ -13,13 +13,12 @@ export interface ImageComment {
     artifactId: number
 }
 
-
 export interface ImageTaggingContainerType {
     ciPipelineId?: number
     artifactId?: number
     imageComment?: ImageComment
     imageReleaseTags?: ReleaseTag[]
-    updateCurrentAppMaterial? : (matId:number, releaseTags?:ReleaseTag[], imageComment?:ImageComment) => void
+    updateCurrentAppMaterial?: (matId: number, releaseTags?: ReleaseTag[], imageComment?: ImageComment) => void
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
     forceReInit?: boolean
@@ -41,4 +40,4 @@ export interface ImageButtonType {
     isSuperAdmin: any
     duplicateTag?: boolean
     hideHardDelete?: boolean
-}
+}

package/src/Common/ImageTags.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import Tippy from '@tippyjs/react'
 import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
 import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
@@ -7,7 +9,6 @@ import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
 import { ReactComponent as EditIcon } from '../Assets/Icon/ic-pencil.svg'
 import { ReactComponent as Redo } from '../Assets/Icon/ic-arrow-counter-clockwise.svg'
 import { ReactComponent as Minus } from '../Assets/Icon/ic-minus.svg'
-import { toast } from 'react-toastify'
 import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
 import { ReactComponent as Warning } from '../Assets/Icon/ic-error-exclamation.svg'
@@ -17,7 +18,6 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag } from './ImageT
 import { showError, stopPropagation } from './Helper'
 import { TippyCustomized } from './TippyCustomized'
 import { setImageTags } from './Common.service'
-import Tippy from '@tippyjs/react'
 import { Progressing } from './Progressing'
 
 export const ImageTagsContainer = ({
@@ -34,15 +34,15 @@ export const ImageTagsContainer = ({
     toggleCardMode,
     hideHardDelete,
     forceReInit,
-    isSuperAdmin
+    isSuperAdmin,
 }: ImageTaggingContainerType) => {
-    const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
+    const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags || [])
     const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
-    const [existingTags, setExistingTags] = useState(appReleaseTagNames ? appReleaseTagNames : [])
+    const [existingTags, setExistingTags] = useState(appReleaseTagNames || [])
     const [newDescription, setNewDescription] = useState(imageComment ? imageComment.comment : '')
     const [isEditing, setIsEditing] = useState(false)
     const [showTagsWarning, setShowTagsWarning] = useState(false)
-    const [displayedTags, setDisplayedTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
+    const [displayedTags, setDisplayedTags] = useState<ReleaseTag[]>(imageReleaseTags || [])
     const [tagErrorMessage, setTagErrorMessage] = useState('')
     const [createTags, setCreateTags] = useState<ReleaseTag[]>([])
     const [softDeleteTags, setSoftDeleteTags] = useState<ReleaseTag[]>([])
@@ -51,22 +51,20 @@ export const ImageTagsContainer = ({
     const [textInput, setTextInput] = useState<string>('')
     const [loading, setLoading] = useState<boolean>(false)
 
-
     useEffect(() => {
         reInitState()
     }, [imageReleaseTags, imageComment, tagsEditable])
 
     useEffect(() => {
-        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+        setExistingTags(appReleaseTagNames || [])
     }, [appReleaseTagNames])
 
-
     const reInitState = () => {
         if (forceReInit || !isEditing) {
-            setInitialTags(imageReleaseTags ? imageReleaseTags : [])
+            setInitialTags(imageReleaseTags || [])
             setInitialDescription(imageComment ? imageComment.comment : '')
             setNewDescription(imageComment ? imageComment.comment : '')
-            setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+            setDisplayedTags(imageReleaseTags || [])
             setIsEditing(false)
         }
     }
@@ -97,7 +95,7 @@ export const ImageTagsContainer = ({
         setTagErrorMessage('')
     }
 
-    const validateTag = (lowercaseValue) : boolean => {
+    const validateTag = (lowercaseValue): boolean => {
         if (
             lowercaseValue.length == 0 ||
             lowercaseValue.length >= 128 ||
@@ -120,9 +118,9 @@ export const ImageTagsContainer = ({
         return true
     }
 
-    const handleTagCreate = (newValue) : ReleaseTag[] => {
+    const handleTagCreate = (newValue): ReleaseTag[] => {
         const lowercaseValue = newValue.toLowerCase().trim()
-        if(validateTag(lowercaseValue)) {
+        if (validateTag(lowercaseValue)) {
             const newTag: ReleaseTag = {
                 id: 0,
                 tagName: lowercaseValue,
@@ -148,7 +146,7 @@ export const ImageTagsContainer = ({
             deleted: !updatedTags[index].deleted,
         }
         const updatedTag = updatedTags[index]
-        let updatedSoftDeleteTags = [...softDeleteTags]
+        const updatedSoftDeleteTags = [...softDeleteTags]
         const tagIndex = updatedSoftDeleteTags.findIndex((tag) => tag.tagName === updatedTag.tagName)
         if (tagIndex !== -1) {
             // Tag already exists in softDeleteTags array, remove it
@@ -206,13 +204,13 @@ export const ImageTagsContainer = ({
 
         const payload = {
             createTags: tagsToBeCreated,
-            softDeleteTags: softDeleteTags,
+            softDeleteTags,
             imageComment: {
                 id: 0,
                 comment: newDescription.trim(),
                 artifactId: 0,
             },
-            hardDeleteTags: hardDeleteTags,
+            hardDeleteTags,
         }
 
         // set loading state true
@@ -242,7 +240,7 @@ export const ImageTagsContainer = ({
                 handleEditClick()
                 setShowTagsWarning(false)
                 setTagErrorMessage('')
-                if(updateCurrentAppMaterial)updateCurrentAppMaterial(artifactId,tags,res.result?.imageComment)
+                if (updateCurrentAppMaterial) updateCurrentAppMaterial(artifactId, tags, res.result?.imageComment)
             })
             .catch((err) => {
                 // Fix toast message
@@ -253,50 +251,45 @@ export const ImageTagsContainer = ({
                     showError(err)
                 }
             })
-            .finally(()=>{
+            .finally(() => {
                 setLoading(false)
             })
     }
 
-    const renderInfoCard = (): JSX.Element => {
-        return (
-            <TippyCustomized
-                theme={TippyTheme.white}
-                className="w-300 fcv-5"
-                placement="right"
-                Icon={QuestionFilled}
-                heading="Release tags"
-                showCloseButton={true}
-                trigger="click"
-                interactive={true}
-                additionalContent={getBuildContextAdditionalContent()}
-            >
-                <div className="flex">
-                    <Question  className="fcn-5 ml-8 cursor icon-dim-16"/>
-                </div>
-            </TippyCustomized>
-        )
-    }
-
-    const getBuildContextAdditionalContent = () => {
-        return (
-            <div className="h-250 fs-13 dc__overflow-scroll p-12">
-                <div>Release tags allow you to tag container images with readable and relatable tags eg. v1.0.</div>
-                <ul className="pl-20 mt-8">
-                    <li>
-                        A release tag can only be added if a workflow has CD pipelines deploying to Production
-                        environments.
-                    </li>
-                    <li>Multiple tags can be added to an image.</li>
-                    <li>Multiple images in an application cannot have the same tag.</li>
-                    <li>
-                        Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has
-                        been added.
-                    </li>
-                </ul>
+    const renderInfoCard = (): JSX.Element => (
+        <TippyCustomized
+            theme={TippyTheme.white}
+            className="w-300 fcv-5"
+            placement="right"
+            Icon={QuestionFilled}
+            heading="Release tags"
+            showCloseButton
+            trigger="click"
+            interactive
+            additionalContent={getBuildContextAdditionalContent()}
+        >
+            <div className="flex">
+                <Question className="fcn-5 ml-8 cursor icon-dim-16" />
             </div>
-        )
-    }
+        </TippyCustomized>
+    )
+
+    const getBuildContextAdditionalContent = () => (
+        <div className="h-250 fs-13 dc__overflow-scroll p-12">
+            <div>Release tags allow you to tag container images with readable and relatable tags eg. v1.0.</div>
+            <ul className="pl-20 mt-8">
+                <li>
+                    A release tag can only be added if a workflow has CD pipelines deploying to Production environments.
+                </li>
+                <li>Multiple tags can be added to an image.</li>
+                <li>Multiple images in an application cannot have the same tag.</li>
+                <li>
+                    Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been
+                    added.
+                </li>
+            </ul>
+        </div>
+    )
 
     const creatableRef = useRef(null)
 
@@ -306,7 +299,7 @@ export const ImageTagsContainer = ({
                 <AddImageButton handleEditClick={handleEditClick} />
             </div>
         ) : (
-            <div></div>
+            <div />
         )
     }
 
@@ -456,8 +449,10 @@ export const ImageTagsContainer = ({
                         className="flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10"
                         data-testid="image-tags-container-hover"
                     >
-                        <div className='w-100'>
-                            {initialDescription && <div className="mb-6 fs-13 lh-20 dc__word-break-all">{initialDescription}</div>}
+                        <div className="w-100">
+                            {initialDescription && (
+                                <div className="mb-6 fs-13 lh-20 dc__word-break-all">{initialDescription}</div>
+                            )}
                             <div className="flex-wrap flex left">
                                 {initialTags?.map((tag, index) => (
                                     <ImageTagButton
@@ -520,11 +515,11 @@ export const ImageTagButton = ({
     const tabColor = () => {
         if (duplicateTag) {
             return 'cr-5 bcr-1 er-2'
-        } else if (isSoftDeleted) {
+        }
+        if (isSoftDeleted) {
             return 'cy-7 bcy-1 dc__strike-through ey-2'
-        } else {
-            return 'cn-9'
         }
+        return 'cn-9'
     }
 
     return (
@@ -538,7 +533,7 @@ export const ImageTagButton = ({
             ) : (
                 <Tippy
                     className="default-tt"
-                    arrow={true}
+                    arrow
                     placement="top"
                     content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
                 >
@@ -556,7 +551,7 @@ export const ImageTagButton = ({
                 </Tippy>
             )}
             {text}
-            <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
+            <Tippy className="default-tt" arrow placement="top" content="Remove tag">
                 <div className={`action-icon ml-4 lh-16 pt-3 ${canTagBeHardDelete ? 'show-icon' : ''}`}>
                     <Close
                         className="icon-dim-12 fcn-6 cursor"

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import { Link } from 'react-router-dom'
 import { InfoColourBarType } from '../Types'
 import './infoColourBar.scss'
 
-function InfoColourBar({
+const InfoColourBar = ({
     message,
     classname,
     Icon,
@@ -16,11 +15,12 @@ function InfoColourBar({
     linkClass,
     internalLink,
     styles,
-}: InfoColourBarType) {
+}: InfoColourBarType) => {
     const renderLink = () => {
         if (!linkText) {
             return null
-        } else if (redirectLink) {
+        }
+        if (redirectLink) {
             if (internalLink) {
                 return (
                     <Link
@@ -41,6 +41,7 @@ function InfoColourBar({
                     onClick={linkOnClick}
                     data-testid="info-bar-redirectLink"
                     className="cursor dc__link dc__underline-onhover mr-5"
+                    rel="noreferrer"
                 >
                     {linkText}
                 </a>
@@ -49,7 +50,11 @@ function InfoColourBar({
 
         return (
             linkOnClick && (
-                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover" data-testid="info-bar-linkText">
+                <div
+                    onClick={linkOnClick}
+                    className="cursor dc__link dc__underline-onhover"
+                    data-testid="info-bar-linkText"
+                >
                     {linkText}
                 </div>
             )

package/src/Common/Modals/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { ModalType } from '../Types'
 
@@ -12,7 +12,7 @@ export const Modal = ({
     preventWheelDisable = false,
     noBackDrop,
 }: ModalType) => {
-    const innerRef = React.useRef(null)
+    const innerRef = useRef(null)
     function handleClick(e) {
         if (typeof onClick !== 'function') return
         if (innerRef && innerRef.current?.contains(e.target)) {
@@ -35,7 +35,7 @@ export const Modal = ({
     }
     useEffect(() => {
         document.addEventListener('click', handleClick)
-        let modal = document.getElementById('visible-modal')
+        const modal = document.getElementById('visible-modal')
         if (modal) modal.classList.add('show')
         if (noBackDrop) modal.classList.add('no-back-drop')
         if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })

package/src/Common/Modals/OpaqueModal.tsx

@@ -1,36 +1,43 @@
-import React from 'react'
-import ReactDOM from 'react-dom';
+import { Component } from 'react'
+import ReactDOM from 'react-dom'
 import closeIcon from '../../Assets/Icon/ic-cross.svg'
 
 export interface OpaqueModalProps {
-    className?: string;
-    onHide?: any;
-    noBackground?: boolean;
+    className?: string
+    onHide?: any
+    noBackground?: boolean
 }
 
-export class OpaqueModal extends React.Component<OpaqueModalProps> {
-    modalRef = document.getElementById('full-screen-modal');
+export class OpaqueModal extends Component<OpaqueModalProps> {
+    modalRef = document.getElementById('full-screen-modal')
 
     componentDidMount() {
-        if (this.props.noBackground)
-            this.modalRef.classList.add("show");
-        else this.modalRef.classList.add("show-with-bg");
+        if (this.props.noBackground) this.modalRef.classList.add('show')
+        else this.modalRef.classList.add('show-with-bg')
     }
 
     componentWillUnmount() {
-        this.modalRef.classList.remove("show");
-        this.modalRef.classList.remove("show-with-bg");
+        this.modalRef.classList.remove('show')
+        this.modalRef.classList.remove('show-with-bg')
     }
 
     render() {
-        const { className = "", onHide = null } = { ...this.props };
+        const { className = '', onHide = null } = { ...this.props }
 
         return ReactDOM.createPortal(
             <div className={`full-screen-modal__body-container ${className}`}>
                 {this.props.children}
-                {typeof onHide === 'function' && <div className="close-btn icon-dim-24" onClick={e => onHide(false)} data-testid="opaque-modal-close">
-                    <img className="close-img" src={closeIcon} alt="close" />
-                </div>}
-            </div>, document.getElementById('full-screen-modal'))
+                {typeof onHide === 'function' && (
+                    <div
+                        className="close-btn icon-dim-24"
+                        onClick={(e) => onHide(false)}
+                        data-testid="opaque-modal-close"
+                    >
+                        <img className="close-img" src={closeIcon} alt="close" />
+                    </div>
+                )}
+            </div>,
+            document.getElementById('full-screen-modal'),
+        )
     }
-}
+}

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'),