@devtron-labs/devtron-fe-common-lib 0.0.7-beta-49 → 0.0.7-beta-50

package/src/Common/TippyCustomized.tsx

@@ -1,13 +1,16 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } 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) => {
@@ -24,6 +27,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                 props.onClose()
             }
         }
+        setShowHeadingInfo(false)
     }
 
     const closeOnEsc = (e) => {
@@ -32,6 +36,10 @@ export function TippyCustomized(props: TippyCustomizedProps) {
         }
     }
 
+    const toggleHeadingInfo = (e) => {
+        setShowHeadingInfo(not)
+    }
+
     const getTippyContent = () => {
         const {
             Icon,
@@ -40,6 +48,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             iconSize,
             onImageLoadError,
             heading,
+            headingInfo,
             infoTextHeading,
             infoText,
             showCloseButton,
@@ -58,7 +67,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         <img
                             className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
                             src={iconPath}
-                            alt={'Heading'}
+                            alt={heading}
                             onError={onImageLoadError}
                         />
                     ) : (
@@ -69,6 +78,11 @@ 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
@@ -78,6 +92,18 @@ 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,5 +1,6 @@
 import { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
+import { VariableType } from './CIPipeline.Types'
 export interface ResponseType {
     code: number
     status: string
@@ -51,7 +52,8 @@ export interface CheckboxProps {
 export interface TippyCustomizedProps {
     theme: TippyTheme
     visible?: boolean
-    heading?: ReactNode | string
+    heading?: string
+    headingInfo?: string
     infoTextHeading?: string
     placement: Placement
     className?: string
@@ -257,7 +259,7 @@ export interface CommonNodeAttr {
     approvalUsers?: string[]
     userApprovalConfig?: UserApprovalConfigType
     requestedUserId?: number
-    isVirtualEnvironment?: boolean
+    showPluginWarning?: boolean
 }
 
 
@@ -318,3 +320,29 @@ 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 { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'
+export * from './CIPipeline.Types'

package/dist/Common/DeleteComponentModal/DeleteComponent.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { DeleteComponentProps } from './types';
-declare function DeleteComponent({ setDeleting, toggleConfirmation, deleteComponent, title, component, payload, confirmationDialogDescription, redirectTo, url, reload, configuration, closeCustomComponent, }: DeleteComponentProps): JSX.Element;
-export default DeleteComponent;

package/dist/Common/DeleteComponentModal/types.d.ts

@@ -1,15 +0,0 @@
-export interface DeleteComponentProps {
-    setDeleting: (boolean: any) => void;
-    toggleConfirmation: any;
-    deleteComponent: (any: 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/Assets/Icon/ic-info-filled.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#06C" d="M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667z"/>
-        <path fill="#FFF" d="M16 14.667c.736 0 1.333.597 1.333 1.333v5.333a1.333 1.333 0 1 1-2.666 0V16c0-.736.597-1.333 1.333-1.333zm0-5.334A1.333 1.333 0 1 1 16 12a1.333 1.333 0 0 1 0-2.667z"/>
-    </g>
-</svg>

package/src/Assets/Icon/ic-warning.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
-        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
-    </g>
-</svg>

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -1,95 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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
-}