Merge pull request #759 from devtron-labs/feat/live-config-diff

feat: add radio selector in deployment config diff

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.15.0-pre-5",
+    "version": "1.15.0-pre-6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -169,7 +169,7 @@ export const AppStatusBody = ({
         <div className="flexbox-col px-20 dc__gap-16 dc__overflow-auto">
             {/* Info card */}
             <div className="flexbox-col pt-20">
-                <div className="flexbox-col br-8 border__primary bg__primary shadow__card--secondary">
+                <div className="flexbox-col br-8 border__primary bg__primary shadow__card--20">
                     {infoCardItems.map((item, index) => (
                         <InfoCardItem
                             key={item.id}

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -23,8 +23,9 @@ import { ToggleResolveScopedVariables } from '@Shared/Components/ToggleResolveSc
 import { ReactComponent as Info } from '../../../../Assets/Icon/ic-info-filled.svg'
 import { MODES, YAMLStringify } from '../../../../Common'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '../../../constants'
-import { DeploymentHistorySingleValue, DeploymentTemplateHistoryType } from '../types'
+import { DeploymentTemplateHistoryType } from '../types'
 import { DeploymentHistoryParamsType } from './types'
+import { renderDetailedValue } from './utils'
 
 const DeploymentHistoryDiffView = ({
     currentConfiguration,
@@ -84,19 +85,6 @@ const DeploymentHistoryDiffView = ({
         setConvertVariables(!convertVariables)
     }
 
-    const renderDetailedValue = (
-        parentClassName: string,
-        singleValue: DeploymentHistorySingleValue,
-        dataTestId: string,
-    ) => (
-        <div className={`${parentClassName} px-16 py-8`}>
-            <div className="cn-6 lh-16" data-testid={dataTestId}>
-                {singleValue.displayName}
-            </div>
-            <div className="cn-9 fs-13 lh-20 dc__word-break">{singleValue.value}</div>
-        </div>
-    )
-
     return (
         <div className="deployment-history-diff-view">
             {!previousConfigAvailable && (

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx

@@ -17,11 +17,12 @@
 import moment from 'moment'
 
 import { DATE_TIME_FORMATS, ERROR_STATUS_CODE } from '@Common/Constants'
+import { Icon } from '@Shared/Components/Icon'
 import { SelectPickerOptionType } from '@Shared/Components/SelectPicker'
 import { DeploymentStatus } from '@Shared/Components/StatusComponent'
 import { DeploymentStageType } from '@Shared/constants'
 
-import { History } from '../types'
+import { DeploymentHistorySingleValue, History } from '../types'
 import { renderPipelineDeploymentOptionDescription } from './helpers'
 import { DeploymentHistoryConfigDiffProps } from './types'
 
@@ -88,3 +89,28 @@ export const isDeploymentHistoryConfigDiffNotFoundError = <T extends unknown>(re
 
 export const getDeploymentHistoryConfigDiffError = <T extends unknown>(res: PromiseSettledResult<T>) =>
     res.status === 'rejected' && res.reason?.code !== ERROR_STATUS_CODE.NOT_FOUND ? res.reason : null
+
+export const renderDetailedValue = (
+    parentClassName: string,
+    singleValue: DeploymentHistorySingleValue,
+    dataTestId: string,
+) => (
+    <div className={`${parentClassName} px-16 py-8 flexbox dc__content-space dc__gap-12`}>
+        <div>
+            <div className="cn-6 lh-16" data-testid={dataTestId}>
+                {singleValue.displayName}
+            </div>
+            <div className="cn-9 fs-13 lh-20 dc__word-break">{singleValue.value}</div>
+        </div>
+        {singleValue.tooltipContent && (
+            <Icon
+                name="ic-info-outline"
+                tooltipProps={{
+                    alwaysShowTippyOnHover: true,
+                    content: singleValue.tooltipContent,
+                }}
+                color={null}
+            />
+        )}
+    </div>
+)

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/utils.tsx

@@ -15,19 +15,18 @@
  */
 
 /* eslint-disable dot-notation */
+import moment from 'moment'
+
 import { get, getUrlWithSearchParams, ResponseType, ROUTES, sanitizeUserApprovalMetadata, trash } from '../../../Common'
-import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP, EXTERNAL_TYPES } from '../../constants'
-import { decode } from '../../Helpers'
+import { DATE_TIME_FORMAT_STRING, DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP, EXTERNAL_TYPES } from '../../constants'
+import { decode, isNullOrUndefined } from '../../Helpers'
 import { ResourceKindType, ResourceVersionType } from '../../types'
 import {
-    DeploymentConfigurationsRes,
     DeploymentHistoryDetail,
-    DeploymentHistoryDetailRes,
     DeploymentHistoryResult,
     DeploymentHistorySingleValue,
     DeploymentStatusDetailsResponse,
     FetchIdDataStatus,
-    HistoryDiffSelectorRes,
     ModuleConfigResponse,
     TriggerDetailsResponseType,
     TriggerHistoryParamsType,
@@ -107,26 +106,7 @@ export function getManualSync(params: { appId: string; envId: string }): Promise
     return get(`${ROUTES.MANUAL_SYNC}/${params.appId}/${params.envId}`)
 }
 
-export const getDeploymentHistoryList = (
-    appId: string,
-    pipelineId: string,
-    triggerId: string,
-): Promise<DeploymentConfigurationsRes> => get(`app/history/deployed-configuration/${appId}/${pipelineId}/${triggerId}`)
-
-export const getDeploymentHistoryDetail = (
-    appId: string,
-    pipelineId: string,
-    id: string,
-    historyComponent: string,
-    historyComponentName: string,
-): Promise<DeploymentHistoryDetailRes> =>
-    get(
-        `app/history/deployed-component/detail/${appId}/${pipelineId}/${id}?historyComponent=${historyComponent
-            .replace('-', '_')
-            .toUpperCase()}${historyComponentName ? `&historyComponentName=${historyComponentName}` : ''}`,
-    )
-
-export const prepareDeploymentTemplateData = (rawData): Record<string, DeploymentHistorySingleValue> => {
+const prepareDeploymentTemplateData = (rawData): Record<string, DeploymentHistorySingleValue> => {
     const deploymentTemplateData = {}
     if (rawData.templateVersion) {
         deploymentTemplateData['templateVersion'] = { displayName: 'Chart Version', value: rawData.templateVersion }
@@ -140,7 +120,7 @@ export const prepareDeploymentTemplateData = (rawData): Record<string, Deploymen
     return deploymentTemplateData
 }
 
-export const preparePipelineConfigData = (rawData): Record<string, DeploymentHistorySingleValue> => {
+const preparePipelineConfigData = (rawData): Record<string, DeploymentHistorySingleValue> => {
     const pipelineConfigData = {}
     if (rawData.pipelineTriggerType) {
         pipelineConfigData['pipelineTriggerType'] = {
@@ -149,15 +129,28 @@ export const preparePipelineConfigData = (rawData): Record<string, DeploymentHis
         }
     }
     if (rawData.strategy) {
+        const { updatedBy, updatedOn, selectedAtRuntime } = rawData
         pipelineConfigData['strategy'] = {
             displayName: 'Deployment strategy',
             value: rawData.strategy,
+            ...(updatedBy && updatedOn && !isNullOrUndefined(selectedAtRuntime)
+                ? {
+                      tooltipContent: (
+                          <div className="flexbox-col br-4 w-200">
+                              <span className="fw-6">
+                                  {selectedAtRuntime ? 'Selected at runtime' : 'Default Strategy'}
+                              </span>
+                              <span className="fw-4">{`${selectedAtRuntime ? '' : 'Last updated '}by ${updatedBy} at ${moment(updatedOn).format(DATE_TIME_FORMAT_STRING)}`}</span>
+                          </div>
+                      ),
+                  }
+                : {}),
         }
     }
     return pipelineConfigData
 }
 
-export const prepareConfigMapAndSecretData = (
+const prepareConfigMapAndSecretData = (
     rawData,
     type: string,
     historyData: DeploymentHistoryDetail,
@@ -277,24 +270,6 @@ export const prepareHistoryData = (
     return historyData
 }
 
-export const getDeploymentDiffSelector = (
-    pipelineId: string,
-    historyComponent,
-    baseConfigurationId,
-    historyComponentName,
-): Promise<HistoryDiffSelectorRes> => {
-    const url = getUrlWithSearchParams(
-        `${ROUTES.RESOURCE_HISTORY_DEPLOYMENT}/${ROUTES.CONFIG_CD_PIPELINE}/${ResourceVersionType.v1}`,
-        {
-            baseConfigurationId,
-            historyComponent: historyComponent.replace('-', '_').toUpperCase(),
-            filterCriteria: `cd-pipeline|id|${pipelineId}`,
-            historyComponentName,
-        },
-    )
-    return get(url)
-}
-
 export const getTriggerHistory = async ({
     appId,
     envId,

src/Shared/Components/CICDHistory/service.tsx

@@ -27,6 +27,7 @@ import {
     PromotionApprovalMetadataType,
     ReleaseTag,
     ResponseType,
+    TooltipProps,
     UserApprovalMetadataType,
     useScrollable,
 } from '../../../Common'
@@ -529,15 +530,12 @@ export interface DeploymentStatusDetailRowType extends Pick<DeploymentStatusDeta
     deploymentDetailedData: DeploymentStatusDetailsBreakdownDataType
 }
 
-export interface DeploymentConfigurationsRes extends ResponseType {
-    result?: DeploymentTemplateList[]
-}
-
 export interface DeploymentHistorySingleValue {
     displayName: string
     value: string
     variableSnapshot?: object
     resolvedValue?: string
+    tooltipContent?: TooltipProps['content']
 }
 export interface DeploymentHistoryDetail {
     componentName?: string
@@ -552,23 +550,6 @@ export interface DeploymentTemplateHistoryType {
     rootClassName?: string
 }
 
-export interface DeploymentHistoryDetailRes extends ResponseType {
-    result?: DeploymentHistoryDetail
-}
-
-export interface HistoryDiffSelectorList {
-    id: number
-    deployedOn: string
-    deployedBy: string
-    deploymentStatus: string
-    wfrId?: number
-    runSource?: RunSourceType
-}
-
-export interface HistoryDiffSelectorRes {
-    result?: HistoryDiffSelectorList[]
-}
-
 export interface DeploymentHistorySidebarType {
     deploymentHistoryList: DeploymentTemplateList[]
     setDeploymentHistoryList: React.Dispatch<React.SetStateAction<DeploymentTemplateList[]>>

src/Shared/Components/CICDHistory/types.tsx

@@ -51,3 +51,26 @@
     }
   }
 }
+
+.config-strategy-radio {
+    .form__radio-item {
+      border: none !important;
+    }
+
+    .form__radio-item-content {
+      padding-block: 6px;
+      padding-inline: 0px;
+
+      .radio__button {
+        margin-right: 8px;
+        margin-top: 2px;
+      }
+
+      .radio__title {
+        font-size: 13px;
+        line-height: 20px;
+        font-weight: 400;
+        color: var(--N900) !important;
+      }
+    }
+}

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss

@@ -15,6 +15,7 @@
  */
 
 import { SortingOrder } from '@Common/Constants'
+import { RadioGroupItemProps, RadioGroupProps } from '@Common/Types'
 import {
     AppEnvDeploymentConfigDTO,
     ConfigMapSecretDataConfigDatumDTO,
@@ -27,7 +28,7 @@ import { ManifestTemplateDTO } from '@Pages/Applications'
 import { DeploymentHistoryDetail } from '../CICDHistory'
 import { CollapseProps } from '../Collapse'
 import { CollapsibleListConfig, CollapsibleListItem } from '../CollapsibleList'
-import { SelectPickerProps } from '../SelectPicker'
+import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
 
 export enum DeploymentConfigDiffState {
     NO_DIFF = 'noDiff',
@@ -53,6 +54,18 @@ export interface DeploymentConfigListItem {
     groupHeader?: string
 }
 
+interface DeploymentConfigDiffRadioConfig extends Pick<RadioGroupProps, 'name' | 'onChange'> {
+    title: string
+    options: (Pick<RadioGroupItemProps, 'disabled'> &
+        Pick<SelectPickerOptionType<string>, 'label' | 'value' | 'description' | 'tooltipProps'>)[]
+    groupValue: string
+}
+
+export interface DeploymentConfigDiffRadioSelectConfig {
+    triggerElementTitle: string
+    radioGroupConfig: DeploymentConfigDiffRadioConfig[]
+}
+
 export type DeploymentConfigDiffSelectPickerProps =
     | {
           type: 'string'
@@ -66,6 +79,13 @@ export type DeploymentConfigDiffSelectPickerProps =
           text?: never
           selectPickerProps: SelectPickerProps
       }
+    | {
+          type: 'radio-group'
+          id: string
+          text?: never
+          radioSelectConfig: DeploymentConfigDiffRadioSelectConfig
+          selectPickerProps?: never
+      }
 
 export interface DeploymentConfigDiffNavigationItem
     extends Pick<CollapsibleListItem<'navLink'>, 'href' | 'title' | 'onClick'> {

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

@@ -667,6 +667,23 @@ const getConfigDataWithResolvedDeploymentTemplate = (
     }
 }
 
+const removeTooltipContent = (
+    valuesObj: Record<string, DeploymentHistorySingleValue>,
+): Record<string, DeploymentHistorySingleValue> => {
+    if (!valuesObj) return valuesObj
+    return Object.fromEntries(
+        Object.entries(valuesObj).map(([key, val]) => {
+            if (val && typeof val === 'object' && 'tooltipContent' in val) {
+                // Remove tooltipContent so that diff is not checked in this property
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { tooltipContent, ...rest } = val
+                return [key, rest]
+            }
+            return [key, val]
+        }),
+    )
+}
+
 /**
  * Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
  *
@@ -738,6 +755,17 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
                 compareWithObject.pipelineConfigData,
                 sortingConfig,
             )
+
+            const currentPipelineConfigDataForDiff = {
+                ...currentPipelineConfigData,
+                values: removeTooltipContent(currentPipelineConfigData.values),
+            }
+
+            const comparePipelineConfigDataForDiff = {
+                ...comparePipelineConfigData,
+                values: removeTooltipContent(comparePipelineConfigData.values),
+            }
+
             pipelineConfigData = {
                 id: EnvResourceType.PipelineStrategy,
                 pathType: EnvResourceType.PipelineStrategy,
@@ -750,7 +778,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
                     heading: null,
                     list: currentPipelineConfigData,
                 },
-                diffState: getDiffState(currentPipelineConfigData, comparePipelineConfigData),
+                diffState: getDiffState(currentPipelineConfigDataForDiff, comparePipelineConfigDataForDiff),
             }
         }