@devtron-labs/devtron-fe-common-lib 0.0.48-beta-9 → 0.0.48-beta-10

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

package/src/Common/Modals/VisibleModal2.tsx

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

package/src/Common/MultiSelectCustomization.tsx

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

package/src/Common/Policy.Types.ts

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