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

package/src/Common/Helper.tsx

@@ -1,15 +1,14 @@
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import * as React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { JSONPath } from 'jsonpath-plus'
-import * as jsonpatch from 'fast-json-patch'
 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,
@@ -80,19 +79,16 @@ 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(
-            () => {
-                if (Date.now() - lastRan.current >= delay) {
-                    callback()
-                    lastRan.current = Date.now()
-                }
-            },
-            delay - (Date.now() - lastRan.current),
-        )
+        const handler = setTimeout(function () {
+            if (Date.now() - lastRan.current >= delay) {
+                callback()
+                lastRan.current = Date.now()
+            }
+        }, delay - (Date.now() - lastRan.current))
 
         return () => {
             clearTimeout(handler)
@@ -121,7 +117,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
@@ -133,7 +129,9 @@ export const getAlphabetIcon = (str: string, rootClassName: string = '') => {
     )
 }
 
-export const getEmptyArrayOfLength = (length: number) => Array.from({ length })
+export const getEmptyArrayOfLength = (length: number) => {
+    return Array.from({ length })
+}
 
 export function noop(...args): any {}
 
@@ -157,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
     )
@@ -200,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
@@ -227,7 +225,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // single validator
-        const _validator = validationSchema[name].validator
+        let _validator = validationSchema[name].validator
         if (_validator && typeof _validator === 'object') {
             if (!_validateSingleValidator(_validator, value)) {
                 return _validator.error
@@ -235,9 +233,9 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // multiple validators
-        const _validators = validationSchema[name].validators
+        let _validators = validationSchema[name].validators
         if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            const errors = []
+            let errors = []
             _validators.forEach((_validator) => {
                 if (!_validateSingleValidator(_validator, value)) {
                     errors.push(_validator.error)
@@ -256,7 +254,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
             setIsDirty(true)
 
             const { name, value } = event.target
-            const error = validateField(name, value)
+            let error = validateField(name, value)
             setState((prevState) => ({
                 ...prevState,
                 [name]: { value, error },
@@ -284,7 +282,7 @@ export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {
         if (ts && ts.length) {
-            const date = moment(ts)
+            let date = moment(ts)
             if (isRelativeTime) timestamp = date.fromNow()
             else timestamp = date.format('ddd DD MMM YYYY HH:mm:ss')
         }
@@ -368,7 +366,9 @@ export function useAsync<T>(
         dependencies: dependencyArray,
     })
     const mounted = useRef(true)
-    const dependencies: any[] = useMemo(() => [...dependencyArray, shouldRun], [...dependencyArray, shouldRun])
+    const dependencies: any[] = useMemo(() => {
+        return [...dependencyArray, shouldRun]
+    }, [...dependencyArray, shouldRun])
 
     const reload = () => {
         async function call() {
@@ -434,8 +434,9 @@ export function useAsync<T>(
 export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
     if (lastDeployed) {
         return handleUTCTime(lastDeployed, true)
+    } else {
+        return isArgoInstalled ? '' : 'Not deployed'
     }
-    return isArgoInstalled ? '' : 'Not deployed'
 }
 
 /**
@@ -488,19 +489,19 @@ export const customStyles = {
     }),
 }
 
-export const getFilteredChartVersions = (charts, selectedChartType) =>
+export const getFilteredChartVersions = (charts, selectedChartType) => {
     // Filter chart versions based on selected chart type
-    charts
+    return charts
         .filter((item) => item?.chartType === selectedChartType.value)
         .map((item) => ({
             value: item?.chartVersion,
             label: item?.chartVersion,
             chartRefId: item.chartRefId,
         }))
-
+}
 function removeEmptyObjectKeysAndNullValues(obj) {
     // It recursively removes empty object keys and array values that are null
-    for (const key in obj) {
+    for (let key in obj) {
         if (Array.isArray(obj[key])) {
             if (obj[key].length === 0) continue
             obj[key] = obj[key].filter((item) => item !== null)
@@ -521,7 +522,7 @@ function removeEmptyObjectKeysAndNullValues(obj) {
 
 export function getUnlockedJSON(json, jsonPathArray) {
     const jsonCopy = JSON.parse(JSON.stringify(json))
-    const patches = jsonPathArray.flatMap((jsonPath) => {
+    let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
         return pathsToRemove.map((result) =>
             Array.isArray(result.parent)
@@ -529,7 +530,7 @@ export function getUnlockedJSON(json, jsonPathArray) {
                 : { op: 'remove', path: result.pointer },
         )
     })
-    const { newDocument } = jsonpatch.applyPatch(jsonCopy, patches)
+    let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
 
     removeEmptyObjectKeysAndNullValues(newDocument)
     return newDocument
@@ -537,7 +538,7 @@ export function getUnlockedJSON(json, jsonPathArray) {
 
 export function getLockedJSON(json, jsonPathArray: string[]) {
     const jsonCopy = JSON.parse(JSON.stringify(json))
-    const resultJson = {}
+    let resultJson = {}
     jsonPathArray.forEach((jsonPath) => {
         const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
         elements.forEach((element) => {
@@ -545,16 +546,16 @@ export function getLockedJSON(json, jsonPathArray: string[]) {
             const lastPath = pathArray.pop()
             let current = resultJson
             for (let i = 0; i < pathArray.length; i++) {
-                const key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
+                let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
                 if (!current[key]) {
-                    current[key] = isNaN(Number(pathArray[i + 1] ?? lastPath)) ? {} : []
+                    current[key] = isNaN(Number(pathArray[i + 1]??lastPath)) ? {} : []
                 }
                 current = current[key]
             }
-            const key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
+            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
             current[key] = element.value
         })
     })
-    // eslint-disable-next-line dot-notation
     return resultJson['$']
 }
+

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

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

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

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

package/src/Common/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -2,10 +2,12 @@ import { useState, useEffect } from 'react'
 
 let timeout
 
-const getSize = () => ({
-    width: window.innerWidth,
-    height: window.innerHeight,
-})
+const getSize = () => {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }
+}
 
 export const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState(getSize)
@@ -15,7 +17,7 @@ export const useWindowSize = () => {
             window.cancelAnimationFrame(timeout)
         }
 
-        timeout = window.requestAnimationFrame(() => {
+        timeout = window.requestAnimationFrame(function () {
             setWindowSize(getSize())
         })
     }

package/src/Common/ImageTags.Types.ts

@@ -13,12 +13,13 @@ 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
@@ -40,4 +41,4 @@ export interface ImageButtonType {
     isSuperAdmin: any
     duplicateTag?: boolean
     hideHardDelete?: boolean
-}
+}

package/src/Common/ImageTags.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import Tippy from '@tippyjs/react'
+import React, { useEffect, useMemo, useRef, useState } from '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'
@@ -9,6 +7,7 @@ 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'
@@ -18,6 +17,7 @@ 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 || [])
+    const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
     const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
-    const [existingTags, setExistingTags] = useState(appReleaseTagNames || [])
+    const [existingTags, setExistingTags] = useState(appReleaseTagNames ? appReleaseTagNames : [])
     const [newDescription, setNewDescription] = useState(imageComment ? imageComment.comment : '')
     const [isEditing, setIsEditing] = useState(false)
     const [showTagsWarning, setShowTagsWarning] = useState(false)
-    const [displayedTags, setDisplayedTags] = useState<ReleaseTag[]>(imageReleaseTags || [])
+    const [displayedTags, setDisplayedTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
     const [tagErrorMessage, setTagErrorMessage] = useState('')
     const [createTags, setCreateTags] = useState<ReleaseTag[]>([])
     const [softDeleteTags, setSoftDeleteTags] = useState<ReleaseTag[]>([])
@@ -51,20 +51,22 @@ export const ImageTagsContainer = ({
     const [textInput, setTextInput] = useState<string>('')
     const [loading, setLoading] = useState<boolean>(false)
 
+
     useEffect(() => {
         reInitState()
     }, [imageReleaseTags, imageComment, tagsEditable])
 
     useEffect(() => {
-        setExistingTags(appReleaseTagNames || [])
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
     }, [appReleaseTagNames])
 
+
     const reInitState = () => {
         if (forceReInit || !isEditing) {
-            setInitialTags(imageReleaseTags || [])
+            setInitialTags(imageReleaseTags ? imageReleaseTags : [])
             setInitialDescription(imageComment ? imageComment.comment : '')
             setNewDescription(imageComment ? imageComment.comment : '')
-            setDisplayedTags(imageReleaseTags || [])
+            setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
             setIsEditing(false)
         }
     }
@@ -95,7 +97,7 @@ export const ImageTagsContainer = ({
         setTagErrorMessage('')
     }
 
-    const validateTag = (lowercaseValue): boolean => {
+    const validateTag = (lowercaseValue) : boolean => {
         if (
             lowercaseValue.length == 0 ||
             lowercaseValue.length >= 128 ||
@@ -118,9 +120,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,
@@ -146,7 +148,7 @@ export const ImageTagsContainer = ({
             deleted: !updatedTags[index].deleted,
         }
         const updatedTag = updatedTags[index]
-        const updatedSoftDeleteTags = [...softDeleteTags]
+        let updatedSoftDeleteTags = [...softDeleteTags]
         const tagIndex = updatedSoftDeleteTags.findIndex((tag) => tag.tagName === updatedTag.tagName)
         if (tagIndex !== -1) {
             // Tag already exists in softDeleteTags array, remove it
@@ -204,13 +206,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
@@ -240,7 +242,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
@@ -251,45 +253,50 @@ export const ImageTagsContainer = ({
                     showError(err)
                 }
             })
-            .finally(() => {
+            .finally(()=>{
                 setLoading(false)
             })
     }
 
-    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 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 = () => (
-        <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 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>
+            </div>
+        )
+    }
 
     const creatableRef = useRef(null)
 
@@ -299,7 +306,7 @@ export const ImageTagsContainer = ({
                 <AddImageButton handleEditClick={handleEditClick} />
             </div>
         ) : (
-            <div />
+            <div></div>
         )
     }
 
@@ -449,10 +456,8 @@ 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
@@ -515,11 +520,11 @@ export const ImageTagButton = ({
     const tabColor = () => {
         if (duplicateTag) {
             return 'cr-5 bcr-1 er-2'
-        }
-        if (isSoftDeleted) {
+        } else if (isSoftDeleted) {
             return 'cy-7 bcy-1 dc__strike-through ey-2'
+        } else {
+            return 'cn-9'
         }
-        return 'cn-9'
     }
 
     return (
@@ -533,7 +538,7 @@ export const ImageTagButton = ({
             ) : (
                 <Tippy
                     className="default-tt"
-                    arrow
+                    arrow={true}
                     placement="top"
                     content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
                 >
@@ -551,7 +556,7 @@ export const ImageTagButton = ({
                 </Tippy>
             )}
             {text}
-            <Tippy className="default-tt" arrow placement="top" content="Remove tag">
+            <Tippy className="default-tt" arrow={true} 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,8 +1,9 @@
+import React from 'react'
 import { Link } from 'react-router-dom'
 import { InfoColourBarType } from '../Types'
 import './infoColourBar.scss'
 
-const InfoColourBar = ({
+function InfoColourBar({
     message,
     classname,
     Icon,
@@ -15,12 +16,11 @@ const InfoColourBar = ({
     linkClass,
     internalLink,
     styles,
-}: InfoColourBarType) => {
+}: InfoColourBarType) {
     const renderLink = () => {
         if (!linkText) {
             return null
-        }
-        if (redirectLink) {
+        } else if (redirectLink) {
             if (internalLink) {
                 return (
                     <Link
@@ -41,7 +41,6 @@ const InfoColourBar = ({
                     onClick={linkOnClick}
                     data-testid="info-bar-redirectLink"
                     className="cursor dc__link dc__underline-onhover mr-5"
-                    rel="noreferrer"
                 >
                     {linkText}
                 </a>
@@ -50,11 +49,7 @@ const 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 { useRef, useEffect } from 'react'
+import React, { 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 = useRef(null)
+    const innerRef = React.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)
-        const modal = document.getElementById('visible-modal')
+        let 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,43 +1,36 @@
-import { Component } from 'react'
-import ReactDOM from 'react-dom'
+import React 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 Component<OpaqueModalProps> {
-    modalRef = document.getElementById('full-screen-modal')
+export class OpaqueModal extends React.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'))
     }
-}
+}