Merge pull request #260 from devtron-labs/feat/approve-material

AbhishekA1509 · web-flow · commit 9f9bf5c88c25 · 2024-08-27T10:48:06.000+05:30
feat: approval material
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.6-beta-4",
+    "version": "0.2.6-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/Common.service.ts b/src/Common/Common.service.ts
@@ -32,8 +32,18 @@ import {
     CDMaterialFilterQuery,
     ImagePromotionMaterialInfo,
     EnvironmentListHelmResponse,
+    UserGroupApproverType,
+    ImageApprovalPolicyUserGroupDataType,
+    ImageApprovalPolicyType,
+    ImageApprovalUsersInfoDTO,
+    UserApprovalMetadataType,
+    UserApprovalConfigType,
+    CDMaterialListModalServiceUtilProps,
 } from './Types'
 import { ApiResourceType } from '../Pages'
+import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
+import { API_TOKEN_PREFIX } from '@Shared/constants'
+import { DefaultUserKey } from '@Shared/types'
 
 export const getTeamListMin = (): Promise<TeamList> => {
     // ignore active field
@@ -80,7 +90,35 @@ export function setImageTags(request, pipelineId: number, artifactId: number) {
     return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`, request)
 }
 
-const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string, disableDefaultSelection?: boolean) => {
+const sanitizeApprovalConfigFromApprovalMetadata = (
+    approvalMetadata: UserApprovalMetadataType,
+    userApprovalConfig: UserApprovalConfigType,
+): UserApprovalMetadataType => {
+    if (!approvalMetadata) {
+        return null
+    }
+
+    const approvedUsersData = approvalMetadata.approvedUsersData || []
+    const unsanitizedApprovalConfig = approvalMetadata.approvalConfig || userApprovalConfig
+
+    return {
+        ...approvalMetadata,
+        approvedUsersData: approvedUsersData.map((userData) => ({
+            ...userData,
+            userGroups: userData.userGroups?.filter((group) => !!group?.identifier && !!group?.name) ?? [],
+        })),
+        approvalConfig: sanitizeUserApprovalConfig(unsanitizedApprovalConfig),
+    }
+}
+
+const cdMaterialListModal = ({
+    artifacts,
+    offset,
+    artifactId,
+    artifactStatus,
+    disableDefaultSelection,
+    userApprovalConfig,
+}: CDMaterialListModalServiceUtilProps) => {
     if (!artifacts || !artifacts.length) return []
 
     const markFirstSelected = offset === 0
@@ -124,7 +162,10 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             vulnerable: material.vulnerable,
             runningOnParentCd: material.runningOnParentCd,
             artifactStatus: artifactStatusValue,
-            userApprovalMetadata: material.userApprovalMetadata,
+            userApprovalMetadata: sanitizeApprovalConfigFromApprovalMetadata(
+                material.userApprovalMetadata,
+                userApprovalConfig,
+            ),
             triggeredBy: material.triggeredBy,
             isVirtualEnvironment: material.isVirtualEnvironment,
             imageComment: material.imageComment,
@@ -169,19 +210,110 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
     return materials
 }
 
+const getImageApprovalPolicyDetailsFromMaterialResult = (cdMaterialsResult): ImageApprovalPolicyType => {
+    const approvalUsers: string[] = cdMaterialsResult.approvalUsers || []
+    const userApprovalConfig = sanitizeUserApprovalConfig(cdMaterialsResult.userApprovalConfig)
+    const isPolicyConfigured = getIsManualApprovalSpecific(userApprovalConfig)
+    const imageApprovalUsersInfo: ImageApprovalUsersInfoDTO = cdMaterialsResult.imageApprovalUsersInfo || {}
+
+    const approvalUsersMap = approvalUsers.reduce(
+        (acc, user) => {
+            acc[user] = true
+            return acc
+        },
+        {} as Record<string, true>,
+    )
+
+    const specificUsersAPIToken = userApprovalConfig.specificUsers.identifiers
+        .filter((user) => user.startsWith(API_TOKEN_PREFIX))
+        .sort(stringComparatorBySortOrder)
+    const specificUsersEmails = userApprovalConfig.specificUsers.identifiers
+        .filter((user) => !user.startsWith(API_TOKEN_PREFIX) && user !== DefaultUserKey.system)
+        .sort(stringComparatorBySortOrder)
+
+    const specificUsersData: ImageApprovalPolicyType['specificUsersData'] = {
+        dataStore: userApprovalConfig.specificUsers.identifiers.reduce(
+            (acc, email) => {
+                acc[email] = {
+                    email,
+                    hasAccess: approvalUsersMap[email] ?? false,
+                }
+                return acc
+            },
+            {} as Record<string, UserGroupApproverType>,
+        ),
+        requiredCount: userApprovalConfig.specificUsers.requiredCount,
+        emails: specificUsersEmails.concat(specificUsersAPIToken),
+    }
+
+    const validGroups = userApprovalConfig.userGroups.map((group) => group.identifier)
+
+    // Have moved from Object.keys(imageApprovalUsersInfo) to approvalUsers since backend is not filtering out the users without approval
+    // TODO: This check should be on BE. Need to remove this once BE is updated 
+    const usersList = approvalUsers.filter((user) => user !== DefaultUserKey.system)
+    const groupIdentifierToUsersMap = usersList.reduce(
+        (acc, user) => {
+            const userGroups = imageApprovalUsersInfo[user] || []
+            userGroups.forEach((group) => {
+                if (!acc[group.identifier]) {
+                    acc[group.identifier] = {}
+                }
+                acc[group.identifier][user] = true
+            })
+            return acc
+        },
+        {} as Record<string, Record<string, true>>,
+    )
+
+    return {
+        isPolicyConfigured,
+        specificUsersData,
+        userGroupData: userApprovalConfig.userGroups.reduce(
+            (acc, group) => {
+                const identifier = group.identifier
+                // No need of handling api tokens here since they are not part of user groups
+                const users = Object.keys(groupIdentifierToUsersMap[identifier] || {}).sort(stringComparatorBySortOrder)
+
+                acc[identifier] = {
+                    dataStore: users.reduce(
+                        (acc, user) => {
+                            acc[user] = {
+                                email: user,
+                                // As of now it will always be true, but UI has handled it in a way that can support false as well
+                                hasAccess: approvalUsersMap[user] ?? false,
+                            }
+                            return acc
+                        },
+                        {} as Record<string, UserGroupApproverType>,
+                    ),
+                    requiredCount: group.requiredCount,
+                    emails: users,
+                }
+
+                return acc
+            },
+            {} as Record<string, ImageApprovalPolicyUserGroupDataType>,
+        ),
+        // Not sorting since would change them in approval info modal to name
+        validGroups,
+    }
+}
+
 const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
     if (!enableApproval || !cdMaterialsResult) {
         return {
             approvalUsers: [],
             userApprovalConfig: null,
             canApproverDeploy: cdMaterialsResult?.canApproverDeploy ?? false,
+            imageApprovalPolicyDetails: null,
         }
     }
 
     return {
         approvalUsers: cdMaterialsResult.approvalUsers,
-        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+        userApprovalConfig: sanitizeUserApprovalConfig(cdMaterialsResult.userApprovalConfig),
         canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
+        imageApprovalPolicyDetails: getImageApprovalPolicyDetailsFromMaterialResult(cdMaterialsResult),
     }
 }
 
@@ -237,13 +369,14 @@ export const processCDMaterialServiceResponse = (
         }
     }
 
-    const materials = cdMaterialListModal(
-        cdMaterialsResult.ci_artifacts,
-        offset ?? 0,
-        cdMaterialsResult.latest_wf_artifact_id,
-        cdMaterialsResult.latest_wf_artifact_status,
+    const materials = cdMaterialListModal({
+        artifacts: cdMaterialsResult.ci_artifacts,
+        offset: offset ?? 0,
+        artifactId: cdMaterialsResult.latest_wf_artifact_id,
+        artifactStatus: cdMaterialsResult.latest_wf_artifact_status,
         disableDefaultSelection,
-    )
+        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
+    })
     const approvalInfo = processCDMaterialsApprovalInfo(
         stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
         cdMaterialsResult,
@@ -366,8 +499,8 @@ export const getResourceGroupListRaw = (clusterId: string): Promise<ResponseType
 }
 
 export function getNamespaceListMin(clusterIdsCsv: string): Promise<EnvironmentListHelmResponse> {
-  const URL = `${ROUTES.NAMESPACE}/autocomplete?ids=${clusterIdsCsv}`
-  return get(URL)
+    const URL = `${ROUTES.NAMESPACE}/autocomplete?ids=${clusterIdsCsv}`
+    return get(URL)
 }
 export function getWebhookEventsForEventId(eventId: string | number) {
     const URL = `${ROUTES.GIT_HOST_EVENT}/${eventId}`
diff --git a/src/Common/Types.ts b/src/Common/Types.ts
@@ -326,12 +326,36 @@ export enum ManualApprovalType {
     notConfigured = 'NOT_CONFIGURED',
 }
 
+export interface UserGroupApproverType {
+    email: string
+    hasAccess: boolean
+}
+
+export interface ImageApprovalPolicyUserGroupDataType {
+    // Mapping email to data
+    dataStore: Record<string, UserGroupApproverType>
+    requiredCount: number
+    emails: string[]
+}
+
+export interface ImageApprovalPolicyType {
+    isPolicyConfigured: boolean
+    specificUsersData: ImageApprovalPolicyUserGroupDataType
+    userGroupData: Record<string, ImageApprovalPolicyUserGroupDataType>
+    // Assuming name of groups are unique
+    validGroups: string[]
+}
+
+export type ImageApprovalUsersInfoDTO = Record<string, Pick<UserGroupDTO, 'identifier' | 'name'>[]>
+
 // TODO: Need to verify this change for all impacting areas
 export interface UserApprovalConfigType {
     type: ManualApprovalType
     requiredCount: number
     specificUsers: {
         identifiers: string[]
+        // FIXME: Remove this ? check later when time permits
+        requiredCount?: number
     }
     userGroups: (Pick<UserGroupDTO, 'identifier'> & {
         requiredCount: number
@@ -356,13 +380,15 @@ interface ApprovalUserDataType {
     userEmail: string
     userId: number
     userResponse: number
+    userGroups?: Pick<UserGroupDTO, 'identifier' | 'name'>[]
 }
 
 export interface UserApprovalMetadataType {
     approvalRequestId: number
     approvalRuntimeState: number
     approvedUsersData: ApprovalUserDataType[]
     requestedUserData: ApprovalUserDataType
+    approvalConfig?: UserApprovalConfigType
 }
 
 export enum FilterStates {
@@ -422,6 +448,15 @@ export interface ArtifactReleaseMappingType {
     version: string
 }
 
+export interface CDMaterialListModalServiceUtilProps {
+    artifacts: any[],
+    offset: number,
+    artifactId?: number,
+    artifactStatus?: string,
+    disableDefaultSelection?: boolean,
+    userApprovalConfig?: UserApprovalConfigType,
+}
+
 export interface CDMaterialType {
     index: number
     id: string
@@ -643,6 +678,10 @@ export interface CDMaterialsApprovalInfo {
     approvalUsers: string[]
     userApprovalConfig: UserApprovalConfigType
     canApproverDeploy: boolean
+    /**
+     * Only available incase of approvals do'nt use in cd materials or any other flow since approvalUsers are not present there
+     */
+    imageApprovalPolicyDetails: ImageApprovalPolicyType
 }
 
 export interface CDMaterialsMetaInfo {
diff --git a/src/Pages/GlobalConfigurations/Authorization/types.ts b/src/Pages/GlobalConfigurations/Authorization/types.ts
@@ -74,7 +74,8 @@ export interface UserGroupDTO {
     usersCount?: number
 }
 
-export interface UserGroupType extends Required<Pick<UserGroupDTO, 'description' | 'name' | 'usersCount'>> {
+export interface UserGroupType
+    extends Required<Pick<UserGroupDTO, 'description' | 'name' | 'usersCount' | 'identifier'>> {
     /**
      * Unique id of the user group
      *
diff --git a/src/Shared/Components/CICDHistory/Artifacts.tsx b/src/Shared/Components/CICDHistory/Artifacts.tsx
@@ -70,7 +70,7 @@ export const CIListItem = ({
     return (
         <>
             {type === 'deployed-artifact' && (
-                <div className="flex dc__width-inherit">
+                <div className="flex dc__width-inherit pb-12">
                     <div className="w-50 text-underline-dashed-300" />
                     <Down className="icon-dim-16 ml-8 mr-8" style={{ transform: 'rotate(90deg)' }} />
                     <div className="w-50 text-underline-dashed-300" />
diff --git a/src/Shared/Components/CICDHistory/History.components.tsx b/src/Shared/Components/CICDHistory/History.components.tsx
@@ -161,7 +161,7 @@ export const GitChanges = ({
                 ) : null
             })}
             {artifact && (
-                <div className="history-component__artifact flex left column dc__gap-12">
+                <div className="history-component__artifact flex left column">
                     <CIListItem
                         type="deployed-artifact"
                         userApprovalMetadata={userApprovalMetadata}
diff --git a/src/Shared/Helpers.tsx b/src/Shared/Helpers.tsx
@@ -20,11 +20,13 @@ import Tippy from '@tippyjs/react'
 import moment from 'moment'
 import {
     handleUTCTime,
+    ManualApprovalType,
     mapByKey,
     MaterialInfo,
     PATTERNS,
     shallowEqual,
     SortingOrder,
+    UserApprovalConfigType,
     ZERO_TIME_STRING,
 } from '../Common'
 import {
@@ -760,3 +762,23 @@ export const getFileNameFromHeaders = (headers: Headers) =>
         ?.find((n) => n.includes('filename='))
         ?.replace('filename=', '')
         .trim()
+
+export const sanitizeUserApprovalConfig = (userApprovalConfig: UserApprovalConfigType): UserApprovalConfigType => ({
+    requiredCount: userApprovalConfig?.requiredCount ?? 0,
+    type: userApprovalConfig?.type ?? ManualApprovalType.notConfigured,
+    specificUsers: {
+        identifiers: userApprovalConfig?.specificUsers?.identifiers ?? [],
+        requiredCount: userApprovalConfig?.specificUsers?.identifiers?.length ?? 0,
+    },
+    userGroups: userApprovalConfig?.userGroups ?? [],
+})
+
+/**
+ * Manual approval is considered configured only if the type is not notConfigured
+ */
+export const getIsManualApprovalConfigured = (userApprovalConfig?: Pick<UserApprovalConfigType, 'type'>) =>
+    // Added null check for backward compatibility
+    !!userApprovalConfig?.type && userApprovalConfig.type !== ManualApprovalType.notConfigured
+
+export const getIsManualApprovalSpecific = (userApprovalConfig?: Pick<UserApprovalConfigType, 'type'>) =>
+    getIsManualApprovalConfigured(userApprovalConfig) && userApprovalConfig.type === ManualApprovalType.specific

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "0.2.6-beta-4",`
	`3`	`+ "version": "0.2.6-beta-10",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,8 @@ export interface UserGroupDTO {`
`74`	`74`	`usersCount?: number`
`75`	`75`	`}`
`76`	`76`
`77`		`-export interface UserGroupType extends Required<Pick<UserGroupDTO, 'description' \| 'name' \| 'usersCount'>> {`
	`77`	`+export interface UserGroupType`
	`78`	`+ extends Required<Pick<UserGroupDTO, 'description' \| 'name' \| 'usersCount' \| 'identifier'>> {`
`78`	`79`	`/**`
`79`	`80`	`* Unique id of the user group`
`80`	`81`	`*`