@devtron-labs/devtron-fe-common-lib 0.0.39 → 0.0.40-beta-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.39",
+    "version": "0.0.40-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -41,6 +41,9 @@
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {
+        "@rjsf/core": "^5.13.3",
+        "@rjsf/utils": "^5.13.3",
+        "@rjsf/validator-ajv8": "^5.13.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",

package/src/Assets/Icon/ic-chevron-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#999" class="fill-color" fill-rule="nonzero" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+    </g>
+</svg>

package/src/Common/Common.service.ts

@@ -2,7 +2,19 @@ import moment from 'moment';
 import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import { TeamList ,ResponseType, DeploymentNodeType, CDModalTab, FilterStates } from './Types';
+import {
+    TeamList,
+    ResponseType,
+    DeploymentNodeType,
+    CDModalTab,
+    FilterStates,
+    CDMaterialServiceEnum,
+    CDMaterialServiceQueryParams,
+    CDMaterialResponseType,
+    CDMaterialsMetaInfo,
+    CDMaterialsApprovalInfo,
+    CDMaterialFilterQuery,
+} from './Types'
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -30,7 +42,7 @@ interface UserRole extends ResponseType {
     }
 }
 
-let stageMap = {
+const stageMap = {
     PRECD: 'PRE',
     CD: 'DEPLOY',
     POSTCD: 'POST',
@@ -51,83 +63,218 @@ export function setImageTags(request, pipelineId: number, artifactId: number){
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
 }
 
-// FIXME: This is only returning materials to cater the case of search in approval but it should be a common function service coming from dashboard.
-export const getCDMaterials = (
-    cdMaterialId,
-    stageType: DeploymentNodeType,
-    abortSignal: AbortSignal,
-    isApprovalNode?: boolean,
-    imageTag?: string): Promise<any> => {
-    const URL = (!imageTag) ? `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}` : `app/cd-pipeline/${cdMaterialId}/material?stage=${stageMap[stageType]}&search=${imageTag}`
-
-    return get(URL, {
-        signal: abortSignal,
-    }).then((response) => {
-        let artifacts = response.result.ci_artifacts ?? []
-        if (!response.result) {
-            return {
-                materials: [],
+const processURL = (url: string, params: object) => {
+    const validParams = Object.keys(params).filter((key) => {
+        return params[key] != null
+    })
+
+    if (!validParams.length) {
+        return url
+    }
+
+    const queryString = validParams
+        .map((key) => {
+            if (Array.isArray(params[key])) {
+                return `${key}=${params[key].join(',')}`  
             }
+            return `${key}=${params[key]}`
+        })
+        .join('&')    
+
+    return `${url}?${queryString}`
+}
+
+const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string) => {
+    if (!artifacts || !artifacts.length) return []
+
+    const markFirstSelected = offset === 0
+    const startIndex = offset
+    let isImageMarked = false
+
+    const materials = artifacts.map((material, index) => {
+        let artifactStatusValue = ''
+        const filterState = material.filterState ?? FilterStates.ALLOWED
+
+        if (artifactId && artifactStatus && material.id === artifactId) {
+            artifactStatusValue = artifactStatus
         }
-        else {
-            const materials = artifacts.map((material, index) => {
-                let artifactStatusValue = ''
-                const filterState = material.filterState ?? FilterStates.ALLOWED
-
-                return {
-                    index,
-                    id: material.id,
-                    deployedTime: material.deployed_time
-                        ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                        : 'Not Deployed',
-                    deployedBy: material.deployedBy,
-                    wfrId: material.wfrId,
-                    image: extractImage(material.image),
-                    showChanges: false,
-                    vulnerabilities: [],
-                    buildTime: material.build_time || '',
-                    tab: CDModalTab.Changes,
-                    showSourceInfo: false,
-                    deployed: material.deployed || false,
-                    latest: material.latest || false,
-                    vulnerabilitiesLoading: true,
-                    scanned: material.scanned,
-                    scanEnabled: material.scanEnabled,
-                    isSelected: !material.vulnerable && filterState === FilterStates.ALLOWED && index === 0,
-                    vulnerable: material.vulnerable,
-                    runningOnParentCd: material.runningOnParentCd,
-                    artifactStatus: artifactStatusValue,
-                    userApprovalMetadata: material.userApprovalMetadata,
-                    triggeredBy: material.triggeredBy,
-                    isVirtualEnvironment: material.isVirtualEnvironment,
-                    imageComment: material.imageComment,
-                    imageReleaseTags: material.imageReleaseTags,
-                    materialInfo: material.material_info
-                        ? material.material_info.map((mat) => {
-                            return {
-                                modifiedTime: mat.modifiedTime ? moment(mat.modifiedTime).format("ddd, DD MMM YYYY, hh:mm A") : '',
-                                commitLink: createGitCommitUrl(mat.url, mat.revision),
-                                author: mat.author || '',
-                                message: mat.message || '',
-                                revision: mat.revision || '',
-                                tag: mat.tag || '',
-                                webhookData: mat.webhookData || '',
-                                url: mat.url || '',
-                                branch:
-                                    (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                                        ? material.ciConfigureSourceValue
-                                        : mat.branch) || '',
-                                type: material.ciConfigureSourceType || '',
-                            }
-                        })
-                        : [],
-                    filterState,
-                }
-            })
-            return {
-                materials: materials
-            }
+
+        const selectImage =
+            !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED ? !material.vulnerable : false
+        if (selectImage) {
+            isImageMarked = true
+        }
+
+        return {
+            index: startIndex + index,
+            id: material.id,
+            deployedTime: material.deployed_time
+                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
+                : 'Not Deployed',
+            deployedBy: material.deployedBy,
+            wfrId: material.wfrId,
+            tab: CDModalTab.Changes,
+            image: extractImage(material.image),
+            showChanges: false,
+            vulnerabilities: [],
+            buildTime: material.build_time || '',
+            isSelected: selectImage,
+            showSourceInfo: false,
+            deployed: material.deployed || false,
+            latest: material.latest || false,
+            vulnerabilitiesLoading: true,
+            scanned: material.scanned,
+            scanEnabled: material.scanEnabled,
+            vulnerable: material.vulnerable,
+            runningOnParentCd: material.runningOnParentCd,
+            artifactStatus: artifactStatusValue,
+            userApprovalMetadata: material.userApprovalMetadata,
+            triggeredBy: material.triggeredBy,
+            isVirtualEnvironment: material.isVirtualEnvironment,
+            imageComment: material.imageComment,
+            imageReleaseTags: material.imageReleaseTags,
+            // It is going to be null but required in type so can't remove
+            lastExecution: material.lastExecution,
+            materialInfo: material.material_info
+                ? material.material_info.map((mat) => {
+                      return {
+                          modifiedTime: mat.modifiedTime
+                              ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
+                              : '',
+                          commitLink: createGitCommitUrl(mat.url, mat.revision),
+                          author: mat.author || '',
+                          message: mat.message || '',
+                          revision: mat.revision || '',
+                          tag: mat.tag || '',
+                          webhookData: mat.webhookData || '',
+                          url: mat.url || '',
+                          branch:
+                              (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                                  ? material.ciConfigureSourceValue
+                                  : mat.branch) || '',
+                          type: material.ciConfigureSourceType || '',
+                      }
+                  })
+                : [],
+            filterState,
+            appliedFiltersTimestamp: material.appliedFiltersTimestamp ?? '',
+            appliedFilters: material.appliedFilters ?? [],
+            appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
+            createdTime: material.createdTime ?? '',
+            dataSource: material.data_source ?? '',
+        }
+    })
+    return materials
+}
+
+const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
+    if (!enableApproval) {
+        return {
+            approvalUsers: [],
+            userApprovalConfig: null,
+            requestedUserId: 0,
+        }
+    }
+
+    return {
+        approvalUsers: cdMaterialsResult.approvalUsers,
+        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+        requestedUserId: cdMaterialsResult.requestedUserId,
+    }
+}
+
+const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
+    if (!cdMaterialsResult) {
+        return {
+            tagsEditable: false,
+            appReleaseTagNames: [],
+            hideImageTaggingHardDelete: false,
+            resourceFilters: [],
+            totalCount: 0,
+            canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
         }
+    }
+
+    return {
+        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
+        tagsEditable: cdMaterialsResult.tagsEditable,
+        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
+        resourceFilters: cdMaterialsResult.resourceFilters ?? [],
+        totalCount: cdMaterialsResult.totalCount ?? 0,
+        canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
+    }
+}
+
+const processCDMaterialServiceResponse = (
+    cdMaterialsResult,
+    stage: DeploymentNodeType,
+    offset: number,
+    filter: CDMaterialFilterQuery,
+): CDMaterialResponseType => {
+    if (!cdMaterialsResult) {
+        return {
+            materials: [],
+            ...processCDMaterialsMetaInfo(cdMaterialsResult),
+            ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
+        }
+    }
+
+    const materials = cdMaterialListModal(
+        cdMaterialsResult.ci_artifacts,
+        offset ?? 0,
+        cdMaterialsResult.latest_wf_artifact_id,
+        cdMaterialsResult.latest_wf_artifact_status,
+    )
+    const approvalInfo = processCDMaterialsApprovalInfo(
+        stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
+        cdMaterialsResult,
+    )
+    const metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult)
+
+    // TODO: On update of service would remove from here
+    const filteredMaterials =
+        filter && filter === CDMaterialFilterQuery.RESOURCE
+            ? materials.filter((material) => {
+                  return material.filterState === FilterStates.ALLOWED
+              })
+            : materials
+
+    return {
+        materials: filteredMaterials,
+        ...approvalInfo,
+        ...metaInfo,
+    }
+}
+
+const getSanitizedQueryParams = (queryParams: CDMaterialServiceQueryParams): CDMaterialServiceQueryParams => {
+    const { filter, ...rest } = queryParams
+    return rest
+}
+
+export const genericCDMaterialsService = (
+    serviceType: CDMaterialServiceEnum,
+    cdMaterialID: number,
+    stage: DeploymentNodeType,
+    signal: AbortSignal,
+    queryParams: CDMaterialServiceQueryParams = {},
+): Promise<CDMaterialResponseType> => {
+    // TODO: On update of service would remove from here
+    const manipulatedParams = getSanitizedQueryParams(queryParams)
+    
+    let URL
+    switch (serviceType) {
+        case CDMaterialServiceEnum.ROLLBACK:
+            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material/rollback`, manipulatedParams)
+            break
+
+        // Meant for handling getCDMaterialList
+        default:
+            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
+            break
+    }
+
+    return get(URL, { signal }).then((response) => {
+        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
     })
 }
 

package/src/Common/Constants.ts

@@ -24,6 +24,7 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {

package/src/Common/ImageTags.tsx

@@ -18,8 +18,10 @@ 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 = ({
+    // Setting it to zero in case of external pipeline
     ciPipelineId,
     artifactId,
     imageComment,
@@ -47,6 +49,7 @@ export const ImageTagsContainer = ({
     const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
     const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
     const [textInput, setTextInput] = useState<string>('')
+    const [loading, setLoading] = useState<boolean>(false)
 
 
     useEffect(() => {
@@ -213,7 +216,8 @@ export const ImageTagsContainer = ({
         }
 
         // set loading state true
-        setImageTags(payload, ciPipelineId, artifactId)
+        setLoading(true)
+        setImageTags(payload, ciPipelineId ?? 0, artifactId)
             .then((res) => {
                 const tags = res.result?.imageReleaseTags?.map((tag) => ({
                     id: tag.id,
@@ -249,6 +253,9 @@ export const ImageTagsContainer = ({
                     showError(err)
                 }
             })
+            .finally(()=>{
+                setLoading(false)
+            })
     }
 
     const renderInfoCard = (): JSX.Element => {
@@ -425,6 +432,7 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 handleCancel()
                             }}
+                            disabled={loading}
                         >
                             Cancel
                         </button>
@@ -436,8 +444,9 @@ export const ImageTagsContainer = ({
                                 stopPropagation(e)
                                 onClickSave()
                             }}
+                            disabled={loading}
                         >
-                            Save
+                            {loading ? <Progressing /> : 'Save'}
                         </button>
                     </div>
                 </div>

package/src/Common/RJSF/Form.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import RJSF from '@rjsf/core'
+import RJSFValidator from '@rjsf/validator-ajv8'
+
+import { templates, widgets } from './config'
+import { FormProps } from './types'
+import { translateString } from './utils'
+import './rjsfForm.scss'
+
+// Need to use this way because the default import was not working as expected
+// The default import resolves to an object intead of a function
+const Form = (RJSF as any).default as typeof RJSF
+const validator = (RJSFValidator as any).default as typeof RJSFValidator
+
+export const RJSFForm = (props: FormProps) => (
+    <Form
+        noHtml5Validate
+        showErrorList={false}
+        autoComplete="off"
+        {...props}
+        validator={validator}
+        templates={{
+            ...templates,
+            ...props.templates,
+        }}
+        widgets={{ ...widgets, ...props.widgets }}
+        translateString={translateString}
+    />
+)

package/src/Common/RJSF/common/FieldRow.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { FieldRowProps } from './types'
+
+export const FieldRowWithLabel = ({
+    showLabel,
+    label,
+    required,
+    children,
+    id,
+    shouldAlignCenter = true,
+}: FieldRowProps) => (
+    <div
+        className={
+            showLabel
+                ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
+                : ''
+        }
+    >
+        {showLabel && (
+            <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
+                {!!label && (
+                    <>
+                        <span className="dc__ellipsis-right">{label}</span>
+                        {required && <span className="cr-5">&nbsp;*</span>}
+                    </>
+                )}
+            </label>
+        )}
+        {children}
+    </div>
+)

package/src/Common/RJSF/common/types.ts

@@ -0,0 +1,9 @@
+import { FieldTemplateProps } from '@rjsf/utils'
+
+export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
+    showLabel?: boolean
+    /**
+     * @default true
+     */
+    shouldAlignCenter?: boolean
+}

package/src/Common/RJSF/config.ts

@@ -0,0 +1,37 @@
+import React from 'react'
+import { RegistryWidgetsType } from '@rjsf/utils'
+
+import {
+    AddButton,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    DescriptionFieldTemplate,
+    FieldTemplate,
+    FieldErrorTemplate,
+    ObjectFieldTemplate,
+    RemoveButton,
+    SubmitButton,
+    TitleFieldTemplate,
+    WrapIfAdditionalTemplate,
+} from './templates'
+import { CheckboxWidget, SelectWidget } from './widgets'
+import { FormProps } from './types'
+
+export const widgets: RegistryWidgetsType = {
+    CheckboxWidget,
+    SelectWidget,
+}
+
+export const templates: FormProps['templates'] = {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
+    DescriptionFieldTemplate,
+    FieldTemplate,
+    FieldErrorTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate,
+    WrapIfAdditionalTemplate,
+}

package/src/Common/RJSF/constants.ts

@@ -0,0 +1,5 @@
+export const PLACEHOLDERS = {
+    SELECT: 'Please select an option',
+    INPUT: 'Please enter an input',
+    OBJECT_KEY: 'Please enter a value for the key',
+}

package/src/Common/RJSF/index.ts

@@ -0,0 +1,2 @@
+export { RJSFForm } from './Form'
+export * from './types'

package/src/Common/RJSF/rjsfForm.scss

@@ -0,0 +1,17 @@
+.rjsf-form-template {
+    &__field {
+        grid-template-columns: 250px 1fr;
+    }
+
+    &__additional-fields {
+        grid-template-columns: 1fr 1fr minmax(20px, auto);
+    }
+
+    &__array-field-item {
+        grid-template-columns: 1fr auto;
+
+        & :first-child {
+            margin: 0;
+        }
+    }
+}

package/src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,33 @@
+import React, { CSSProperties } from 'react'
+import { ArrayFieldTemplateItemType } from '@rjsf/utils'
+
+export const ArrayFieldItemTemplate = ({
+    children,
+    className,
+    disabled,
+    hasToolbar,
+    hasRemove,
+    index,
+    onDropIndexClick,
+    readonly,
+    registry,
+    uiSchema,
+}: ArrayFieldTemplateItemType) => {
+    const { RemoveButton } = registry.templates.ButtonTemplates
+
+    return (
+        <div className="display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12">
+            {children}
+            {hasToolbar && hasRemove && (
+                <div>
+                    <RemoveButton
+                        disabled={disabled || readonly}
+                        onClick={onDropIndexClick(index)}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}

package/src/Common/RJSF/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
+import { FieldRowWithLabel } from '../common/FieldRow'
+
+const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
+    const {
+        ButtonTemplates: { AddButton },
+    } = registry.templates
+
+    return (
+        canAdd && (
+            <AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
+        )
+    )
+}
+
+export const ArrayFieldTemplate = ({
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    title,
+}: ArrayFieldTemplateProps) => {
+    const uiOptions = getUiOptions(uiSchema)
+    const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>('ArrayFieldItemTemplate', registry, uiOptions)
+    const label = uiOptions.title || title
+
+    return (
+        <fieldset className={className} id={idSchema.$id}>
+            {/* Show the label here in case there are no items, otherwise handled by Field Template */}
+            {items.length ? (
+                <>
+                    {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType, index) => {
+                        // Show the title as the label for the first field
+                        const children = {
+                            ...itemProps.children,
+                            props: {
+                                ...itemProps.children.props,
+                                name: index === 0 ? label : '',
+                            },
+                        }
+                        return (
+                            <ArrayFieldItemTemplate key={key} {...itemProps}>
+                                {children}
+                            </ArrayFieldItemTemplate>
+                        )
+                    })}
+                    <ActionButton
+                        canAdd={canAdd}
+                        onAddClick={onAddClick}
+                        disabled={disabled}
+                        readonly={readonly}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                </>
+            ) : (
+                <FieldRowWithLabel label={label} required={required} showLabel id={idSchema.$id}>
+                    <ActionButton
+                        canAdd={canAdd}
+                        onAddClick={onAddClick}
+                        disabled={disabled}
+                        readonly={readonly}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                </FieldRowWithLabel>
+            )}
+        </fieldset>
+    )
+}