@devtron-labs/devtron-fe-common-lib 0.0.7-beta-51 → 0.0.9

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import info from '../../Assets/Icon/ic-info-filled.svg'
+import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
+import { ServerErrors } from '../ServerError'
+import { DeleteComponentProps } from './types'
+
+
+function DeleteComponent({
+    setDeleting,
+    toggleConfirmation,
+    deleteComponent,
+    title,
+    component,
+    payload,
+    confirmationDialogDescription = '',
+    redirectTo = false,
+    url = '',
+    reload,
+    configuration = '',
+    closeCustomComponent,
+}: DeleteComponentProps) {
+    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
+    const { push } = useHistory()
+
+    async function handleDelete() {
+        setDeleting(true)
+        try {
+            await deleteComponent(payload)
+            toast.success('Successfully deleted')
+            toggleConfirmation(false)
+            if (redirectTo) {
+                push(url)
+            } else {
+                reload()
+            }
+            if (typeof closeCustomComponent === 'function') {
+                closeCustomComponent()
+            }
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setCannotDeleteDialogModal(true)
+            }
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const handleConfirmation = () => {
+        setCannotDeleteDialogModal(false)
+        toggleConfirmation(false)
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent()
+        }
+    }
+
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
+
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
+    return (
+        <div>
+            {!showCannotDeleteDialogModal && renderDeleteDialog()}
+            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
+        </div>
+    )
+}
+
+export default DeleteComponent

package/src/Common/DeleteComponentModal/types.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean) => void
+    toggleConfirmation: any
+    deleteComponent: (any) => Promise<any>
+    title: string
+    component: string
+    payload: any
+    confirmationDialogDescription?: string
+    redirectTo?: boolean
+    url?: string
+    reload?: () => void
+    configuration?: string
+    dataTestid?: string
+    closeCustomComponent?: () => void
+}

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -1,53 +1,35 @@
-import React from 'react'
-import warn from '../../Assets/Img/delete-medium.svg'
+import React from 'react';
+import warn from '../../Assets/Img/warning-medium.svg';
 import { Progressing } from '../Progressing'
-import ConfirmationDialog from './ConfirmationDialog'
-import { DeleteDialogProps } from './Types'
+import ConfirmationDialog from './ConfirmationDialog';
+import { DeleteDialogProps } from './Types';
 
 export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
-    return (
-        <ConfirmationDialog className="confirmation-dialog__body--w-400">
-            <ConfirmationDialog.Icon src={warn} />
-            <ConfirmationDialog.Body title={props.title}>
-                <div className="fs-13 cn-7 lh-1-54 w-100">
-                    {props.description ? props.description : null}
-                    {props.children}
-                </div>
-            </ConfirmationDialog.Body>
-            <ConfirmationDialog.ButtonGroup>
-                <div className="flex right">
-                    <button
-                        type="button"
-                        className="cta cancel cta-cd-delete-modal ml-16"
-                        onClick={props.closeDelete}
-                        disabled={props.apiCallInProgress}
-                        data-testid="dialog-cancel"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="button"
-                        className="cta delete cta-cd-delete-modal ml-16"
-                        onClick={() => props.delete()}
-                        disabled={props.apiCallInProgress}
-                        data-testid="dialog-delete"
-                    >
-                        {props.apiCallInProgress ? (
-                            <Progressing />
-                        ) : (
-                            `${props.deletePrefix || ''}${
-                                props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete'
-                            }${props.deletePostfix || ''}`
-                        )}
-                    </button>
-                </div>
-            </ConfirmationDialog.ButtonGroup>
-        </ConfirmationDialog>
-    )
+
+    return <ConfirmationDialog className="confirmation-dialog__body--w-400">
+        <ConfirmationDialog.Icon src={warn} />
+        <ConfirmationDialog.Body title={props.title}>
+            <div className="fs-13 cn-7 lh-1-54 w-100">
+                {props.description ? props.description : null}
+                {props.children}
+            </div>
+        </ConfirmationDialog.Body>
+        <ConfirmationDialog.ButtonGroup>
+            <div className="flex right">
+                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress} data-testid="dialog-cancel">Cancel</button>
+                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress} data-testid="dialog-delete">
+                    {props.apiCallInProgress ? <Progressing /> :  `${props.deletePrefix || ''}Delete${props.deletePostfix || ''}`}
+                </button>
+            </div>
+        </ConfirmationDialog.ButtonGroup>
+    </ConfirmationDialog >
 }
 
 function DeleteDialogDescription(props) {
-    return <>{props.children}</>
+
+    return <>
+        {props.children}
+    </>
 }
 
-DeleteDialog.Description = DeleteDialogDescription
+DeleteDialog.Description = DeleteDialogDescription;

package/src/Common/Dialogs/Types.ts

@@ -9,7 +9,6 @@ export interface DeleteDialogProps {
     deletePostfix?: string
     apiCallInProgress?: boolean
     dataTestId?: string
-    buttonPrimaryText?: string
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -30,7 +30,7 @@ function GenericEmptyState({
                 height={imageType === ImageType.Medium ? '160' : '200'}
                 alt="empty-state"
             />}
-            <h4 className="title fw-6 cn-9 mb-8">{title}</h4>
+            <h4 className="title fw-6 cn-9 mb-8 mt-20">{title}</h4>
             {subTitle && <p className="subtitle">{subTitle}</p>}
             {isButtonAvailable && renderButton()}
               {children}

package/src/Common/Helper.tsx

@@ -1,48 +1,49 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
+import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 
 toast.configure({
-  autoClose: 3000,
-  hideProgressBar: true,
-  pauseOnHover: true,
-  pauseOnFocusLoss: true,
-  closeOnClick: false,
-  newestOnTop: true,
-  toastClassName: 'devtron-toast',
-  bodyClassName: 'devtron-toast__body',
+    autoClose: 3000,
+    hideProgressBar: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: true,
+    closeOnClick: false,
+    newestOnTop: true,
+    toastClassName: 'devtron-toast',
+    bodyClassName: 'devtron-toast__body',
 })
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
-  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
-      serverError.errors.map(({ userMessage, internalMessage }) => {
-          if (
-              serverError.code === 403 &&
-              (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
-          ) {
-              if (!hideAccessError) {
-                  toastAccessDenied()
-              }
-          } else {
-              toast.error(userMessage || internalMessage)
-          }
-      })
-  } else {
-      if (serverError.code !== 403 && serverError.code !== 408) {
-          Sentry.captureException(serverError)
-      }
-
-      if (showToastOnUnknownError) {
-          if (serverError.message) {
-              toast.error(serverError.message)
-          } else {
-              toast.error('Some Error Occurred')
-          }
-      }
-  }
+    if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+        serverError.errors.map(({ userMessage, internalMessage }) => {
+            if (
+                serverError.code === 403 &&
+                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+            ) {
+                if (!hideAccessError) {
+                    toastAccessDenied()
+                }
+            } else {
+                toast.error(userMessage || internalMessage)
+            }
+        })
+    } else {
+        if (serverError.code !== 403 && serverError.code !== 408) {
+            Sentry.captureException(serverError)
+        }
+
+        if (showToastOnUnknownError) {
+            if (serverError.message) {
+                toast.error(serverError.message)
+            } else {
+                toast.error('Some Error Occurred')
+            }
+        }
+    }
 }
 
 interface ConditionalWrapper<T> {
@@ -167,4 +168,166 @@ export function getLoginInfo() {
             return null
         }
     }
-}
+}
+
+export function useForm(stateSchema, validationSchema = {}, callback) {
+    const [state, setState] = useState(stateSchema)
+    const [disable, setDisable] = useState(true)
+    const [isDirty, setIsDirty] = useState(false)
+
+    // Disable button in initial render.
+    useEffect(() => {
+        setDisable(true)
+    }, [])
+
+    // For every changed in our state this will be fired
+    // To be able to disable the button
+    useEffect(() => {
+        if (isDirty) {
+            setDisable(validateState(state))
+        }
+    }, [state, isDirty])
+
+    // Used to disable submit button if there's an error in state
+    // or the required field in state has no value.
+    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
+    // in every re-render in component
+    const validateState = useCallback(
+        (state) => {
+            //check errors in all fields
+            const hasErrorInState = Object.keys(validationSchema).some((key) => {
+                const isInputFieldRequired = validationSchema[key].required
+                const stateValue = state[key].value // state value
+                const stateError = state[key].error // state error
+                return (isInputFieldRequired && !stateValue) || stateError
+            })
+            return hasErrorInState
+        },
+        [state, validationSchema],
+    )
+
+    function validateField(name, value): string | string[] {
+        if (validationSchema[name].required) {
+            if (!value) {
+                return 'This is a required field.'
+            }
+        }
+
+        function _validateSingleValidator(validator, value) {
+            if (value && !validator.regex.test(value)) {
+                return false
+            }
+            return true
+        }
+
+        // single validator
+        let _validator = validationSchema[name].validator
+        if (_validator && typeof _validator === 'object') {
+            if (!_validateSingleValidator(_validator, value)) {
+                return _validator.error
+            }
+        }
+
+        // multiple validators
+        let _validators = validationSchema[name].validators
+        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
+            let errors = []
+            _validators.forEach((_validator) => {
+                if (!_validateSingleValidator(_validator, value)) {
+                    errors.push(_validator.error)
+                }
+            })
+            if (errors.length > 0) {
+                return errors
+            }
+        }
+
+        return ''
+    }
+
+    const handleOnChange = useCallback(
+        (event) => {
+            setIsDirty(true)
+
+            const { name, value } = event.target
+            let error = validateField(name, value)
+            setState((prevState) => ({
+                ...prevState,
+                [name]: { value, error },
+            }))
+        },
+        [validationSchema],
+    )
+
+    const handleOnSubmit = (event) => {
+        event.preventDefault()
+        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
+            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
+            return agg
+        }, state)
+        if (!validateState(newState)) {
+            callback(state)
+        } else {
+            setState({ ...newState })
+        }
+    }
+    return { state, disable, handleOnChange, handleOnSubmit }
+}
+
+function handleError(error: any): any[] {
+    if (!error) {
+        return []
+    }
+
+    if (!Array.isArray(error)) {
+        return [error]
+    }
+
+    return error
+}
+
+export function CustomInput({
+    name,
+    value,
+    error,
+    onChange,
+    onBlur = (e) => {},
+    onFocus = (e) => {},
+    label,
+    type = 'text',
+    disabled = false,
+    autoComplete = 'off',
+    labelClassName = '',
+    placeholder = '',
+    tabIndex = 1,
+    dataTestid = '',
+}) {
+    return (
+        <div className="flex column left top">
+            <label className={`form__label ${labelClassName}`}>{label}</label>
+            <input
+                data-testid={dataTestid}
+                type={type}
+                name={name}
+                autoComplete="off"
+                className="form__input"
+                onChange={(e) => {
+                    e.persist()
+                    onChange(e)
+                }}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                tabIndex={tabIndex}
+            />
+            {handleError(error).map((err) => (
+                <div className="form__error">
+                    <FormError className="form__icon form__icon--error" />
+                    {err}
+                </div>
+            ))}
+        </div>
+    )
+}

package/src/Common/TippyCustomized.tsx

@@ -1,16 +1,13 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
-import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
-import { not } from './Helper'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
 export function TippyCustomized(props: TippyCustomizedProps) {
     const tippyRef = useRef(null)
-    const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
 
     const onTippyMount = (tippyInstance) => {
@@ -27,7 +24,6 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                 props.onClose()
             }
         }
-        setShowHeadingInfo(false)
     }
 
     const closeOnEsc = (e) => {
@@ -36,10 +32,6 @@ export function TippyCustomized(props: TippyCustomizedProps) {
         }
     }
 
-    const toggleHeadingInfo = (e) => {
-        setShowHeadingInfo(not)
-    }
-
     const getTippyContent = () => {
         const {
             Icon,
@@ -48,7 +40,6 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             iconSize,
             onImageLoadError,
             heading,
-            headingInfo,
             infoTextHeading,
             infoText,
             showCloseButton,
@@ -67,7 +58,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         <img
                             className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
                             src={iconPath}
-                            alt={heading}
+                            alt="Heading"
                             onError={onImageLoadError}
                         />
                     ) : (
@@ -78,11 +69,6 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         )
                     )}
                     {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
-                    {headingInfo && (
-                        <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
-                            <QuestionFilled className="icon-dim-20" />
-                        </div>
-                    )}
                     {showCloseButton && (
                         <div className="icon-dim-16 ml-auto">
                             <CloseIcon
@@ -92,18 +78,6 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         </div>
                     )}
                 </div>
-                {showHeadingInfo && (
-                    <div
-                        className={`flex left bcv-1 fs-13 fw-4 lh-20 pt-8 pb-8 ${
-                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
-                        }`}
-                    >
-                        <div className="icon-dim-20 mr-8">
-                            <QuestionFilled className="icon-dim-20 fcv-5" />
-                        </div>
-                        <div className="dc__word-break dc__hyphens-auto">{headingInfo}</div>
-                    </div>
-                )}
                 {infoTextHeading && (
                     <div
                         className={`dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ${

package/src/Common/Types.ts

@@ -1,6 +1,5 @@
 import { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
-import { VariableType } from './CIPipeline.Types'
 export interface ResponseType {
     code: number
     status: string
@@ -52,8 +51,7 @@ export interface CheckboxProps {
 export interface TippyCustomizedProps {
     theme: TippyTheme
     visible?: boolean
-    heading?: string
-    headingInfo?: string
+    heading?: ReactNode | string
     infoTextHeading?: string
     placement: Placement
     className?: string
@@ -259,7 +257,8 @@ export interface CommonNodeAttr {
     approvalUsers?: string[]
     userApprovalConfig?: UserApprovalConfigType
     requestedUserId?: number
-    showPluginWarning?: boolean
+    helmPackageName?: string
+    isVirtualEnvironment?: boolean
 }
 
 
@@ -320,29 +319,3 @@ export interface CDMaterialResponseType {
     userApprovalConfig: UserApprovalConfigType
     requestedUserId: number
 }
-
-export enum PluginRequiredStageKeys {
-  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'
-}
-export interface MandatoryPluginDetailType {
-  id: number
-  name: string
-  description?: string;
-  requiredIn: PluginRequiredStage
-  applied?: boolean
-  inputVariables?: VariableType[]
-  outputVariables?: VariableType[]
-}
-export interface MandatoryPluginDataType {
-    pluginData: MandatoryPluginDetailType[]
-    isValidPre: boolean
-    isValidPost: boolean
-}

package/src/Common/index.ts

@@ -29,4 +29,4 @@ export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
-export * from './CIPipeline.Types'
+export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'