@devtron-labs/devtron-fe-common-lib 0.0.9-beta-11 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.9-beta-11",
+    "version": "0.0.10",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -33,6 +33,7 @@
         "@svgr/rollup": "6.5.1",
         "@rollup/plugin-url": "8.0.1",
         "@rollup/plugin-commonjs": "24.0.1",
+        "moment": "^2.29.4",
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#767D84" fill-rule="evenodd" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-.205 12.868c-.615 0-1.12.505-1.12 1.12 0 .617.505 1.121 1.12 1.121.615 0 1.12-.504 1.12-1.12 0-.616-.506-1.12-1.12-1.12zM11.863 7c-1.667 0-3.197 1.187-3.196 2.527 0 .546.41.833.888.833 1.325 0 .642-1.803 2.39-1.803.82 0 1.311.438 1.311 1.175 0 1.34-2.39 1.708-2.39 3.334 0 .438.287.915.874.915.902 0 .792-.67 1.12-1.148.438-.642 2.473-1.325 2.473-3.101 0-1.927-1.721-2.732-3.47-2.732z"/>
+</svg>

package/src/Common/CIPipeline.Types.ts

@@ -0,0 +1,277 @@
+export interface MaterialType {
+    name: string
+    type: string
+    value: string
+    gitMaterialId: number
+    id: number
+    isSelected: boolean
+    gitHostId: number
+    gitProviderId: number
+    regex?: string
+    isRegex: boolean
+}
+
+export interface Githost {
+    id: number
+    name: string
+    active: boolean
+    webhookSecret: string
+    webhookUrl: string
+}
+
+export interface WebhookEvent {
+    id: number
+    gitHostId: number
+    name: string
+    isActive: boolean
+    selectors: WebhookEventSelectors[]
+}
+
+interface WebhookEventSelectors {
+    id: number
+    eventId: number
+    name: string
+    selector: string
+    toShowInCiFilter: boolean
+    fixValue: string
+    toShow: boolean
+    possibleValues: string
+    isActive: boolean
+}
+
+export interface CiPipelineSourceTypeOption {
+    label: string
+    value: string
+    isDisabled: boolean
+    isSelected: boolean
+    isWebhook: boolean
+}
+
+export enum RefVariableType {
+    GLOBAL = 'GLOBAL',
+    FROM_PREVIOUS_STEP = 'FROM_PREVIOUS_STEP',
+    NEW = 'NEW',
+}
+
+export enum PluginType {
+    INLINE = 'INLINE',
+    PLUGIN_REF = 'REF_PLUGIN',
+}
+
+export enum ScriptType {
+    SHELL = 'SHELL',
+    DOCKERFILE = 'DOCKERFILE',
+    CONTAINERIMAGE = 'CONTAINER_IMAGE',
+}
+
+export enum MountPath {
+    TRUE = 'Yes',
+    FALSE = 'No',
+}
+
+export enum ConditionType {
+    SKIP = 'SKIP',
+    TRIGGER = 'TRIGGER',
+    PASS = 'PASS',
+    FAIL = 'FAIL',
+}
+
+export enum RefVariableStageType {
+    PRE_CI = 'PRE_CI',
+    POST_CI = 'POST_CI',
+}
+
+export interface VariableType {
+    id: number
+    name: string
+    value: string
+    format: string
+    description: string
+    defaultValue: string
+    variableType: RefVariableType
+    refVariableStepIndex: number
+    refVariableName: string
+    refVariableStage?: RefVariableStageType
+    variableStepIndexInPlugin?: number
+}
+
+interface CommandArgsMap {
+    command: string
+    args: string[]
+}
+
+export interface PortMapType {
+    portOnLocal: number
+    portOnContainer: number
+}
+interface ConditionDetails {
+    id: number
+    conditionOnVariable: string
+    conditionOperator: string
+    conditionType: ConditionType
+    conditionalValue: string
+}
+
+interface InlineStepDetailType {
+    scriptType: ScriptType
+    isMountCustomScript?: boolean
+    script?: string
+    dockerFileExists?: boolean
+    mountPath?: string
+    mountCodeToContainer?: boolean
+    mountDirectoryFromHost?: boolean
+    containerImagePath?: string
+    imagePullSecret?: string
+    commandArgsMap?: CommandArgsMap[]
+    portMap?: PortMapType[]
+    mountPathMap?: {
+        filePathOnDisk: string
+        filePathOnContainer: string
+    }[]
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails: ConditionDetails[]
+}
+
+interface PluginRefStepDetailType {
+    id: number
+    pluginId: number
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails?: ConditionDetails[]
+}
+
+export interface StepType {
+    id: number
+    index: number
+    name: string
+    description: string
+    stepType: PluginType
+    outputDirectoryPath: string[]
+    inlineStepDetail?: InlineStepDetailType
+    pluginRefStepDetail?: PluginRefStepDetailType
+    triggerIfParentStageFail: boolean
+    isMandatory?: boolean
+}
+
+export interface BuildStageType {
+    id: number
+    steps: StepType[]
+}
+
+export enum CIBuildType {
+    SELF_DOCKERFILE_BUILD_TYPE = 'self-dockerfile-build',
+    MANAGED_DOCKERFILE_BUILD_TYPE = 'managed-dockerfile-build',
+    BUILDPACK_BUILD_TYPE = 'buildpack-build',
+}
+
+export interface BuildPackConfigType {
+    builderId: string
+    language: string
+    languageVersion: string
+    projectPath: string
+    builderLangEnvParam?: string
+    currentBuilderLangEnvParam?: string
+    buildPacks?: any
+    args?: Record<string, string>
+}
+
+export interface DockerBuildConfigType {
+    dockerfileContent: string
+    dockerfileRelativePath: string
+    buildContext: string
+    dockerfilePath?: string
+    dockerfileRepository?: string
+    args?: Record<string, string>
+    targetPlatform?: any
+    language?: string
+    languageFramework?: string
+}
+
+export interface CIBuildConfigType {
+    buildPackConfig: BuildPackConfigType
+    ciBuildType: CIBuildType
+    dockerBuildConfig: DockerBuildConfigType
+    gitMaterialId: number
+    buildContextGitMaterialId: number
+    id?: number
+    useRootBuildContext: boolean
+}
+
+export interface DockerConfigOverrideType {
+    dockerRegistry: string
+    dockerRepository: string
+    ciBuildConfig: CIBuildConfigType
+}
+
+export interface FormType {
+    name: string
+    args: { key: string; value: string }[]
+    materials: MaterialType[]
+    gitHost: Githost
+    webhookEvents: WebhookEvent[]
+    ciPipelineSourceTypeOptions: CiPipelineSourceTypeOption[]
+    webhookConditionList: { selectorId: number; value: string }[]
+    triggerType: string
+    scanEnabled?: boolean
+    beforeDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    afterDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    ciPipelineEditable: true
+    preBuildStage?: BuildStageType
+    postBuildStage?: BuildStageType
+    isDockerConfigOverridden?: boolean
+    dockerConfigOverride?: DockerConfigOverrideType
+    isOffendingMandatoryPlugin?: boolean
+}
+
+export interface ErrorObj {
+    isValid: boolean
+    message: string | null
+}
+export interface TaskErrorObj {
+    isValid: boolean
+    name: ErrorObj
+    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+}
+export interface FormErrorObjectType {
+    name: ErrorObj
+    materials?: MaterialType[]
+    preBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+    buildStage?: {
+        isValid: boolean
+        name: ErrorObj
+    }
+    postBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+}
+
+export interface PluginDetailType {
+    id: number
+    name: string
+    type: string
+    description: string
+    icon: string
+    tags: string[]
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+}

package/src/Common/Constants.ts

@@ -57,4 +57,10 @@ export const TOKEN_COOKIE_NAME = 'argocd.token'
 export const TriggerTypeMap = {
     automatic: 'Auto',
     manual: 'Manual',
+}
+
+export const BuildStageVariable = {
+  PreBuild: 'preBuildStage',
+  Build: 'buildStage',
+  PostBuild: 'postBuildStage',
 }

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -1,35 +1,53 @@
-import React from 'react';
-import warn from '../../Assets/Img/warning-medium.svg';
+import React from 'react'
+import warn from '../../Assets/Img/delete-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 || ''}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 || ''}${
+                                props.buttonPrimaryText ? props.buttonPrimaryText : '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,6 +9,7 @@ export interface DeleteDialogProps {
     deletePostfix?: string
     apiCallInProgress?: boolean
     dataTestId?: string
+    buttonPrimaryText?: string
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/Helper.tsx

@@ -5,6 +5,7 @@ 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'
+import moment from 'moment';
 
 toast.configure({
     autoClose: 3000,
@@ -331,3 +332,17 @@ export function CustomInput({
         </div>
     )
 }
+
+export function handleUTCTime(ts: string, isRelativeTime = false) {
+  let timestamp = "";
+  try {
+      if (ts && ts.length) {
+          let date = moment(ts);
+          if (isRelativeTime) timestamp = date.fromNow();
+          else timestamp = date.format("ddd DD MMM YYYY HH:mm:ss");
+      }
+  } catch (error) {
+      console.error("Error Parsing Date:", ts);
+  }
+  return timestamp;
+}

package/src/Common/Policy.Types.ts

@@ -0,0 +1,62 @@
+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',
+}
+
+export enum PluginRequiredStage {
+  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
+}
+export interface MandatoryPluginDetailType {
+  id: number
+  name: string
+  description?: string
+  requiredIn: PluginRequiredStage
+  applied?: boolean
+  inputVariables?: VariableType[]
+  outputVariables?: VariableType[]
+  definitionSources?: DefinitionSourceType[]
+}
+export interface MandatoryPluginDataType {
+  pluginData: MandatoryPluginDetailType[]
+  isValidPre: boolean
+  isValidPost: boolean
+}
+
+export enum ConsequenceAction {
+  BLOCK = 'BLOCK',
+  ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
+  ALLOW_FOREVER = 'ALLOW_FOREVER',
+}
+
+export interface ConsequenceType {
+  action: ConsequenceAction
+  metadataField: string
+}
+
+export interface BlockedStateData {
+  isOffendingMandatoryPlugin: boolean
+  isCITriggerBlocked: boolean
+  ciBlockState: ConsequenceType
+}
+
+export interface GetBlockedStateResponse extends ResponseType {
+    result?: BlockedStateData
+}

package/src/Common/TippyCustomized.tsx

@@ -1,13 +1,17 @@
-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 { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.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 +28,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                 props.onClose()
             }
         }
+        setShowHeadingInfo(false)
     }
 
     const closeOnEsc = (e) => {
@@ -32,6 +37,10 @@ export function TippyCustomized(props: TippyCustomizedProps) {
         }
     }
 
+    const toggleHeadingInfo = (e) => {
+        setShowHeadingInfo(not)
+    }
+
     const getTippyContent = () => {
         const {
             Icon,
@@ -40,6 +49,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             iconSize,
             onImageLoadError,
             heading,
+            headingInfo,
             infoTextHeading,
             infoText,
             showCloseButton,
@@ -51,7 +61,9 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             <>
                 <div
                     className={`dc__word-break dc__hyphens-auto flex left ${
-                        isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
+                        isWhiteTheme
+                            ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
+                            : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
                     }`}
                 >
                     {iconPath ? (
@@ -69,6 +81,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}>
+                            <Question className="icon-dim-20" />
+                        </div>
+                    )}
                     {showCloseButton && (
                         <div className="icon-dim-16 ml-auto">
                             <CloseIcon
@@ -78,6 +95,18 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         </div>
                     )}
                 </div>
+                {showHeadingInfo && (
+                    <div
+                        className={`flex left top 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 ${