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

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'))
     }
-}
+}

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
-}
+}